mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-04-07 11:16:55 +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:
parent
8a9d48e055
commit
58dd47d128
@ -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;
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
|
@ -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");
|
||||
|
@ -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
|
||||
|
@ -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:
|
||||
|
@ -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 |
|
||||
|
Loading…
x
Reference in New Issue
Block a user