mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
core/modules/utils/dom/dom.js
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;
};
})();

16
core/modules/utils/dom/dragndrop.js
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");

30
core/modules/widgets/eventcatcher.js
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

4
editions/tw5.com/tiddlers/variables/modifier Variable.tid
View File

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

15
editions/tw5.com/tiddlers/widgets/DraggableWidget.tid
View File

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