mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-13 21:31:23 +00:00
Code Issues Releases Wiki Activity

Extend $draggable to support an optional drag handle (#6480)

Browse Source 
* feat: extend  to support a selector attribute identifying the DOM element to be used as the drag handle

* fix: remove redundant variable declaration

* fix: remove extranneous variable declaration
This commit is contained in:
Saq Imtiaz
2022-02-24 11:06:18 +00:00
committed by GitHub
parent 7a7472833f
commit 4054566493
3 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/modules/utils/dom/dragndrop.js
+7 -5
View File
@@ -16,21 +16,23 @@ Browser data transfer utilities, used with the clipboard and drag and drop
Options:
domNode: dom node to make draggable
selector: CSS selector to identify element within domNode to be used as drag handle (optional)
dragImageType: "pill", "blank" or "dom" (the default)
dragTiddlerFn: optional function to retrieve the title of tiddler to drag
dragFilterFn: optional function to retreive the filter defining a list of tiddlers to drag
widget: widget to use as the contect for the filter
widget: widget to use as the context for the filter
*/
exports.makeDraggable = function(options) {
var dragImageType = options.dragImageType || "dom",
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)
if((domNode.tagName || "").toLowerCase() !== "a") {
domNode.setAttribute("draggable","true");
dragHandle.setAttribute("draggable","true");
}
// Add event handlers
$tw.utils.addEventListeners(domNode,[
$tw.utils.addEventListeners(dragHandle,[
{name: "dragstart", handlerFunction: function(event) {
if(event.dataTransfer === undefined) {
return false;
@@ -45,7 +47,7 @@ exports.makeDraggable = function(options) {
}
var titleString = $tw.utils.stringifyList(titles);
// Check that we've something to drag
if(titles.length > 0 && event.target === domNode) {
if(titles.length > 0 && event.target === dragHandle) {
// Mark the drag in progress
$tw.dragInProgress = domNode;
// Set the dragging class on the element being dragged
core/modules/widgets/draggable.js
+16 -9
View File
@@ -27,7 +27,10 @@ DraggableWidget.prototype = new Widget();
Render this widget into the DOM
*/
DraggableWidget.prototype.render = function(parent,nextSibling) {
var self = this;
var self = this,
tag,
domNode,
classes = [];
// Save the parent dom node
this.parentDomNode = parent;
// Compute our attributes
@@ -35,18 +38,23 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
// Execute our logic
this.execute();
// Sanitise the specified tag
var tag = this.draggableTag;
tag = this.draggableTag;
if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
tag = "div";
}
// Create our element
var domNode = this.document.createElement(tag);
domNode = this.document.createElement(tag);
// Assign classes
var classes = ["tc-draggable"];
if(this.draggableClasses) {
classes.push(this.draggableClasses);
}
if(!this.dragHandleSelector) {
classes.push("tc-draggable");
}
domNode.setAttribute("class",classes.join(" "));
// Insert the node into the DOM and render any children
parent.insertBefore(domNode,nextSibling);
this.renderChildren(domNode,null);
// Add event handlers
$tw.utils.makeDraggable({
domNode: domNode,
@@ -55,11 +63,9 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
startActions: self.startActions,
endActions: self.endActions,
dragImageType: self.dragImageType,
widget: this
widget: this,
selector: self.dragHandleSelector
});
// Insert the link into the DOM and render any children
parent.insertBefore(domNode,nextSibling);
this.renderChildren(domNode,null);
this.domNodes.push(domNode);
};
@@ -72,7 +78,8 @@ DraggableWidget.prototype.execute = function() {
this.draggableClasses = this.getAttribute("class");
this.startActions = this.getAttribute("startactions");
this.endActions = this.getAttribute("endactions");
this.dragImageType = this.getAttribute("dragimagetype");
this.dragImageType = this.getAttribute("dragimagetype");
this.dragHandleSelector = this.getAttribute("selector");
// Make the child widgets
this.makeChildWidgets();
};