mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-04 05:09:10 +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

17
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) { exports.makeDraggable = function(options) {
var dragImageType = options.dragImageType || "dom", var dragImageType = options.dragImageType || "dom",
dragImage, dragImage,
domNode = options.domNode, domNode = options.domNode;
dragHandle = options.selector && domNode.querySelector(options.selector) || domNode;
// Make the dom node draggable (not necessary for anchor tags) // Make the dom node draggable (not necessary for anchor tags)
if((domNode.tagName || "").toLowerCase() !== "a") { if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
dragHandle.setAttribute("draggable","true"); domNode.setAttribute("draggable","true");
} }
// Add event handlers // Add event handlers
$tw.utils.addEventListeners(dragHandle,[ $tw.utils.addEventListeners(domNode,[
{name: "dragstart", handlerFunction: function(event) { {name: "dragstart", handlerFunction: function(event) {
if(event.dataTransfer === undefined) { if(event.dataTransfer === undefined) {
return false; return false;
@ -49,11 +48,11 @@ exports.makeDraggable = function(options) {
} }
var titleString = $tw.utils.stringifyList(titles); var titleString = $tw.utils.stringifyList(titles);
// Check that we've something to drag // 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 // Mark the drag in progress
$tw.dragInProgress = domNode; $tw.dragInProgress = domNode;
// Set the dragging class on the element being dragged // 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 // Invoke drag-start actions if given
if(startActions !== undefined) { if(startActions !== undefined) {
// Collect our variables // Collect our variables
@ -115,7 +114,7 @@ exports.makeDraggable = function(options) {
return false; return false;
}}, }},
{name: "dragend", handlerFunction: function(event) { {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 // Collect the tiddlers being dragged
var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(), var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
dragFilter = options.dragFilterFn && options.dragFilterFn(), dragFilter = options.dragFilterFn && options.dragFilterFn(),
@ -135,7 +134,7 @@ exports.makeDraggable = function(options) {
options.widget.invokeActionString(endActions,options.widget,event,variables); options.widget.invokeActionString(endActions,options.widget,event,variables);
} }
// Remove the dragging class on the element being dragged // 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 // Delete the drag image element
if(dragImage) { if(dragImage) {
dragImage.parentNode.removeChild(dragImage); dragImage.parentNode.removeChild(dragImage);

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

@ -1,6 +1,6 @@
caption: draggable caption: draggable
created: 20170406081938627 created: 20170406081938627
modified: 20220416052952189 modified: 20220715120213777
tags: Widgets TriggeringWidgets tags: Widgets TriggeringWidgets
title: DraggableWidget title: DraggableWidget
type: text/vnd.tiddlywiki type: text/vnd.tiddlywiki
@ -18,7 +18,7 @@ See DragAndDropMechanism for an overview.
|filter |Optional filter defining the payload tiddlers for the drag | |filter |Optional filter defining the payload tiddlers for the drag |
|tag |Optional tag to override the default "div" element created by the widget| |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 | |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") | |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'' | |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 """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. The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.