Add "tv-selectednode-width" and "tv-selectednode-height" ... (#6582)

* Add "tv-selectednode-width" and "tv-selectednode-height" ...

... variables to dragstartactions

* Update dragndrop.js

* Update dragndrop.js

* Add docs

* Update dragndrop.js

* Update dragndrop.js

* Update DraggableWidget.tid

* Update modifier Variable.tid

* Update modifier Variable.tid

* Update eventcatcher.js

* Update dom.js

* Update dragndrop.js

* Update dragndrop.js

* Update DraggableWidget.tid

* add a space after //

* Update modifier Variable.tid
This commit is contained in:
Simon Huber
2022-04-15 13:46:09 +01:00
committed by GitHub
parent 8a9d48e055
commit 58dd47d128
5 changed files with 74 additions and 34 deletions
+43
View File
@@ -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;
};
})();
+12 -4
View File
@@ -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");