1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-11-01 16:13:00 +00:00

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 14:46:09 +02:00
committed by GitHub
parent 8a9d48e055
commit 58dd47d128
5 changed files with 74 additions and 34 deletions

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;
};
})();

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");

View File

@@ -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