mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-17 19:09:55 +00:00
Code Issues Releases Wiki Activity

Fix: brittle selector implementation for draggable widget (#6786)

Browse Source 
* Fix: fixes #6595, brittle selector implementation for draggable widget

* Docs: updated for fix to selector implementation for draggable widget
This commit is contained in:
Saq Imtiaz 2022-07-15 16:38:09 +02:00 committed by GitHub
parent f6e021d70f
commit 19331cc6f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
core/modules/utils/dom/dragndrop.js
View File

@ -25,14 +25,13 @@ widget: widget to use as the context for the filter
exports.makeDraggable = function(options) {
var dragImageType = options.dragImageType || "dom",
dragImage,
domNode = options.domNode,
dragHandle = options.selector && domNode.querySelector(options.selector) || domNode;
domNode = options.domNode;
// Make the dom node draggable (not necessary for anchor tags)
if((domNode.tagName || "").toLowerCase() !== "a") {
dragHandle.setAttribute("draggable","true");
if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
domNode.setAttribute("draggable","true");
}
// Add event handlers
$tw.utils.addEventListeners(dragHandle,[
$tw.utils.addEventListeners(domNode,[
{name: "dragstart", handlerFunction: function(event) {
if(event.dataTransfer === undefined) {
return false;
@ -41,19 +40,19 @@ exports.makeDraggable = function(options) {
var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
dragFilter = options.dragFilterFn && options.dragFilterFn(),
titles = dragTiddler ? [dragTiddler] : [],
startActions = options.startActions,
variables,
domNodeRect;
startActions = options.startActions,
variables,
domNodeRect;
if(dragFilter) {
titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
}
var titleString = $tw.utils.stringifyList(titles);
// Check that we've something to drag
if(titles.length > 0 && event.target === dragHandle) {
if(titles.length > 0 && (options.selector && $tw.utils.domMatchesSelector(event.target,options.selector) || event.target === domNode)) {
// Mark the drag in progress
$tw.dragInProgress = domNode;
// Set the dragging class on the element being dragged
$tw.utils.addClass(event.target,"tc-dragging");
$tw.utils.addClass(domNode,"tc-dragging");
// Invoke drag-start actions if given
if(startActions !== undefined) {
// Collect our variables
@ -115,13 +114,13 @@ exports.makeDraggable = function(options) {
return false;
}},
{name: "dragend", handlerFunction: function(event) {
if(event.target === domNode) {
if((options.selector && $tw.utils.domMatchesSelector(event.target,options.selector)) || event.target === domNode) {
// Collect the tiddlers being dragged
var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
dragFilter = options.dragFilterFn && options.dragFilterFn(),
titles = dragTiddler ? [dragTiddler] : [],
endActions = options.endActions,
variables;
endActions = options.endActions,
variables;
if(dragFilter) {
titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
}
@ -135,7 +134,7 @@ exports.makeDraggable = function(options) {
options.widget.invokeActionString(endActions,options.widget,event,variables);
}
// Remove the dragging class on the element being dragged
$tw.utils.removeClass(event.target,"tc-dragging");
$tw.utils.removeClass(domNode,"tc-dragging");
// Delete the drag image element
if(dragImage) {
dragImage.parentNode.removeChild(dragImage);

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

@ -1,6 +1,6 @@
caption: draggable
created: 20170406081938627
modified: 20220416052952189
modified: 20220715120213777
tags: Widgets TriggeringWidgets
title: DraggableWidget
type: text/vnd.tiddlywiki
@ -18,7 +18,7 @@ See DragAndDropMechanism for an overview.
|filter |Optional filter defining the payload tiddlers for the drag |
|tag |Optional tag to override the default "div" element created by the widget|
|selector|<<.from-version 5.2.2>> Optional CSS Selector to identify a DOM element within the widget that will be used as the drag handle |
|class |Optional CSS classes to assign to the DOM element created by the widget. The class `tc-draggable` is added to the drag handle, which is the same as the DOM element created by the widget unless the <<.param selector>> attribute is used. The class `tc-dragging` is applied to the drag handle while the element is being dragged |
|class |Optional CSS classes to assign to the DOM element created by the widget. The class `tc-draggable` is added to the the DOM element created by the widget unless the <<.param selector>> attribute is used. The class `tc-dragging` is applied to the DOM element created by the widget while the element is being dragged |
|enable |<<.from-version 5.2.3>> Optional value "no" to disable the draggable functionality (defaults to "yes") |
|startactions |Optional action string that gets invoked when dragging ''starts'' |
@ -31,7 +31,7 @@ The [[actionTiddler Variable]] is accessible in both //startactions// and //enda
<<.tip """Note that the [[actionTiddler Variable]] holds a [[Title List]] quoted with double square brackets. This is unlike the DroppableWidget which uses the same variable to pass a single unquoted title.""">>
<<.tip """When specifying a DOM node to use as the drag handle with the <<.param selector>> attribute, give it the class `tc-draggable` in order for it to have the appropriate cursor.""">>
<<.tip """When specifying a DOM node to use as the drag handle with the <<.param selector>> attribute, give it the class `tc-draggable` in order for it to have the appropriate cursor and the attribute `draggable` with the value `true` to make it draggable.""">>
The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.