diff --git a/core/modules/utils/dom/dom.js b/core/modules/utils/dom/dom.js index 36c250b20..fef4cb9f3 100644 --- a/core/modules/utils/dom/dom.js +++ b/core/modules/utils/dom/dom.js @@ -281,5 +281,48 @@ exports.getLocationPath = function() { return window.location.toString().split("#")[0]; }; +/* +Collect DOM variables +*/ +exports.collectDOMVariables = function(selectedNode,domNode,event) { + var variables = {}, + selectedNodeRect, + domNodeRect; + if(selectedNode) { + $tw.utils.each(selectedNode.attributes,function(attribute) { + variables["dom-" + attribute.name] = attribute.value.toString(); + }); + // Add a variable with a popup coordinate string for the selected node + variables["tv-popup-coords"] = "(" + selectedNode.offsetLeft + "," + selectedNode.offsetTop +"," + selectedNode.offsetWidth + "," + selectedNode.offsetHeight + ")"; + + // Add variables for offset of selected node + variables["tv-selectednode-posx"] = selectedNode.offsetLeft.toString(); + variables["tv-selectednode-posy"] = selectedNode.offsetTop.toString(); + variables["tv-selectednode-width"] = selectedNode.offsetWidth.toString(); + variables["tv-selectednode-height"] = selectedNode.offsetHeight.toString(); + } + + if(event && event.clientX && event.clientY) { + if(selectedNode) { + // Add variables for event X and Y position relative to selected node + selectedNodeRect = selectedNode.getBoundingClientRect(); + variables["event-fromselected-posx"] = (event.clientX - selectedNodeRect.left).toString(); + variables["event-fromselected-posy"] = (event.clientY - selectedNodeRect.top).toString(); + } + + if(domNode) { + // Add variables for event X and Y position relative to event catcher node + domNodeRect = domNode.getBoundingClientRect(); + variables["event-fromcatcher-posx"] = (event.clientX - domNodeRect.left).toString(); + variables["event-fromcatcher-posy"] = (event.clientY - domNodeRect.top).toString(); + } + + // Add variables for event X and Y position relative to the viewport + variables["event-fromviewport-posx"] = event.clientX.toString(); + variables["event-fromviewport-posy"] = event.clientY.toString(); + } + return variables; +}; + })(); diff --git a/core/modules/utils/dom/dragndrop.js b/core/modules/utils/dom/dragndrop.js index b0d286e97..f8350c46a 100644 --- a/core/modules/utils/dom/dragndrop.js +++ b/core/modules/utils/dom/dragndrop.js @@ -41,7 +41,9 @@ exports.makeDraggable = function(options) { var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(), dragFilter = options.dragFilterFn && options.dragFilterFn(), titles = dragTiddler ? [dragTiddler] : [], - startActions = options.startActions; + startActions = options.startActions, + variables, + domNodeRect; if(dragFilter) { titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget)); } @@ -54,7 +56,10 @@ exports.makeDraggable = function(options) { $tw.utils.addClass(event.target,"tc-dragging"); // Invoke drag-start actions if given if(startActions !== undefined) { - options.widget.invokeActionString(startActions,options.widget,event,{actionTiddler: titleString}); + // Collect our variables + variables = $tw.utils.collectDOMVariables(domNode,null,event); + variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event); + options.widget.invokeActionString(startActions,options.widget,event,variables); } // Create the drag image elements dragImage = options.widget.document.createElement("div"); @@ -114,7 +119,8 @@ exports.makeDraggable = function(options) { var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(), dragFilter = options.dragFilterFn && options.dragFilterFn(), titles = dragTiddler ? [dragTiddler] : [], - endActions = options.endActions; + endActions = options.endActions, + variables; if(dragFilter) { titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget)); } @@ -122,7 +128,9 @@ exports.makeDraggable = function(options) { $tw.dragInProgress = null; // Invoke drag-end actions if given if(endActions !== undefined) { - options.widget.invokeActionString(endActions,options.widget,event,{actionTiddler: titleString}); + variables = $tw.utils.collectDOMVariables(domNode,null,event); + variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event); + options.widget.invokeActionString(endActions,options.widget,event,{actionTiddler: titleString, modifier: modifierKey}); } // Remove the dragging class on the element being dragged $tw.utils.removeClass(event.target,"tc-dragging"); diff --git a/core/modules/widgets/eventcatcher.js b/core/modules/widgets/eventcatcher.js index 2087cef59..8dd4e261d 100644 --- a/core/modules/widgets/eventcatcher.js +++ b/core/modules/widgets/eventcatcher.js @@ -52,7 +52,7 @@ EventWidget.prototype.render = function(parent,nextSibling) { selectedNode = event.target, selectedNodeRect, catcherNodeRect, - variables = {}; + variables; // Firefox can fire dragover and dragenter events on text nodes instead of their parents if(selectedNode.nodeType === 3) { selectedNode = selectedNode.parentNode; @@ -72,33 +72,7 @@ EventWidget.prototype.render = function(parent,nextSibling) { } // Only set up variables if we have actions to invoke if(actions) { - $tw.utils.each(selectedNode.attributes,function(attribute) { - variables["dom-" + attribute.name] = attribute.value.toString(); - }); - //Add a variable with a popup coordinate string for the selected node - variables["tv-popup-coords"] = "(" + selectedNode.offsetLeft + "," + selectedNode.offsetTop +"," + selectedNode.offsetWidth + "," + selectedNode.offsetHeight + ")"; - - //Add variables for offset of selected node - variables["tv-selectednode-posx"] = selectedNode.offsetLeft.toString(); - variables["tv-selectednode-posy"] = selectedNode.offsetTop.toString(); - variables["tv-selectednode-width"] = selectedNode.offsetWidth.toString(); - variables["tv-selectednode-height"] = selectedNode.offsetHeight.toString(); - - if(event.clientX && event.clientY) { - //Add variables for event X and Y position relative to selected node - selectedNodeRect = selectedNode.getBoundingClientRect(); - variables["event-fromselected-posx"] = (event.clientX - selectedNodeRect.left).toString(); - variables["event-fromselected-posy"] = (event.clientY - selectedNodeRect.top).toString(); - - //Add variables for event X and Y position relative to event catcher node - catcherNodeRect = self.domNode.getBoundingClientRect(); - variables["event-fromcatcher-posx"] = (event.clientX - catcherNodeRect.left).toString(); - variables["event-fromcatcher-posy"] = (event.clientY - catcherNodeRect.top).toString(); - - //Add variables for event X and Y position relative to the viewport - variables["event-fromviewport-posx"] = event.clientX.toString(); - variables["event-fromviewport-posy"] = event.clientY.toString(); - } + variables = $tw.utils.collectDOMVariables(selectedNode,self.domNode,event); } } // Execute our actions with the variables diff --git a/editions/tw5.com/tiddlers/variables/modifier Variable.tid b/editions/tw5.com/tiddlers/variables/modifier Variable.tid index 3d1322e7f..8f0a3cd6b 100644 --- a/editions/tw5.com/tiddlers/variables/modifier Variable.tid +++ b/editions/tw5.com/tiddlers/variables/modifier Variable.tid @@ -1,10 +1,10 @@ created: 20201123120203415 -modified: 20201123120211360 +modified: 20220414162815231 tags: Variables [[Core Variables]] title: modifier Variable type: text/vnd.tiddlywiki -Within the ''action'' string of the DroppableWidget, the ''action'' string of the ButtonWidget and the ''action'' string of the LinkCatcherWidget and the EventCatcherWidget, the <<.def modifier>> [[variable|Variables]] contains the modifier key(s) held during the drag-process. +Within the ''action'' string of the DroppableWidget, the ''startactions'' and ''endactions'' of the DraggableWidget, the ''action'' string of the ButtonWidget and the ''action'' string of the LinkCatcherWidget and the EventCatcherWidget, the <<.def modifier>> [[variable|Variables]] contains the modifier key(s) held during the drag, click or other event. Possible key combinations are listed in the table below. The variable contains a string that identifies the keys: diff --git a/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid b/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid index 719e719c2..c9cd32cbd 100644 --- a/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid @@ -34,3 +34,18 @@ The [[actionTiddler Variable]] is accessible in both //startactions// and //enda The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute. + +<<.from-version 5.2.3>> The following variables are accessible in the //startactions// and the //endactions//: + +|!Variables |!Description | +|`modifier` |The [[modifier Variable]] contains the Modifier Key held while dragging | +|`dom-*` |All DOM attributes of the node being dragged are made available as variables, with the prefix `dom-` | +|`tv-popup-coords` |A co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node that's being dragged where the event originated | +|`tv-selectednode-posx` |`x` offset position of the dragged DOM node | +|`tv-selectednode-posy` |`y` offset position of the dragged DOM node | +|`tv-selectednode-width` |`offsetWidth` of the dragged DOM node | +|`tv-selectednode-height` |`offsetHeight` of the dragged DOM node | +|`event-fromselected-posx` |`x` position of the event relative to the dragged DOM node | +|`event-fromselected-posy` |`y` position of the event relative to the dragged DOM node | +|`event-fromviewport-posx` |`x` position of the event relative to the viewport | +|`event-fromviewport-posy` |`y` position of the event relative to the viewport |