mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-26 15:23:15 +00:00
Extend $draggable to support an optional drag handle (#6480)
* 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:
parent
7a7472833f
commit
4054566493
|
@ -16,21 +16,23 @@ Browser data transfer utilities, used with the clipboard and drag and drop
|
||||||
Options:
|
Options:
|
||||||
|
|
||||||
domNode: dom node to make draggable
|
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)
|
dragImageType: "pill", "blank" or "dom" (the default)
|
||||||
dragTiddlerFn: optional function to retrieve the title of tiddler to drag
|
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
|
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) {
|
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((domNode.tagName || "").toLowerCase() !== "a") {
|
||||||
domNode.setAttribute("draggable","true");
|
dragHandle.setAttribute("draggable","true");
|
||||||
}
|
}
|
||||||
// Add event handlers
|
// Add event handlers
|
||||||
$tw.utils.addEventListeners(domNode,[
|
$tw.utils.addEventListeners(dragHandle,[
|
||||||
{name: "dragstart", handlerFunction: function(event) {
|
{name: "dragstart", handlerFunction: function(event) {
|
||||||
if(event.dataTransfer === undefined) {
|
if(event.dataTransfer === undefined) {
|
||||||
return false;
|
return false;
|
||||||
|
@ -45,7 +47,7 @@ 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 === domNode) {
|
if(titles.length > 0 && event.target === dragHandle) {
|
||||||
// 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
|
||||||
|
|
|
@ -27,7 +27,10 @@ DraggableWidget.prototype = new Widget();
|
||||||
Render this widget into the DOM
|
Render this widget into the DOM
|
||||||
*/
|
*/
|
||||||
DraggableWidget.prototype.render = function(parent,nextSibling) {
|
DraggableWidget.prototype.render = function(parent,nextSibling) {
|
||||||
var self = this;
|
var self = this,
|
||||||
|
tag,
|
||||||
|
domNode,
|
||||||
|
classes = [];
|
||||||
// Save the parent dom node
|
// Save the parent dom node
|
||||||
this.parentDomNode = parent;
|
this.parentDomNode = parent;
|
||||||
// Compute our attributes
|
// Compute our attributes
|
||||||
|
@ -35,18 +38,23 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
|
||||||
// Execute our logic
|
// Execute our logic
|
||||||
this.execute();
|
this.execute();
|
||||||
// Sanitise the specified tag
|
// Sanitise the specified tag
|
||||||
var tag = this.draggableTag;
|
tag = this.draggableTag;
|
||||||
if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
|
if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
|
||||||
tag = "div";
|
tag = "div";
|
||||||
}
|
}
|
||||||
// Create our element
|
// Create our element
|
||||||
var domNode = this.document.createElement(tag);
|
domNode = this.document.createElement(tag);
|
||||||
// Assign classes
|
// Assign classes
|
||||||
var classes = ["tc-draggable"];
|
|
||||||
if(this.draggableClasses) {
|
if(this.draggableClasses) {
|
||||||
classes.push(this.draggableClasses);
|
classes.push(this.draggableClasses);
|
||||||
}
|
}
|
||||||
|
if(!this.dragHandleSelector) {
|
||||||
|
classes.push("tc-draggable");
|
||||||
|
}
|
||||||
domNode.setAttribute("class",classes.join(" "));
|
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
|
// Add event handlers
|
||||||
$tw.utils.makeDraggable({
|
$tw.utils.makeDraggable({
|
||||||
domNode: domNode,
|
domNode: domNode,
|
||||||
|
@ -55,11 +63,9 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
|
||||||
startActions: self.startActions,
|
startActions: self.startActions,
|
||||||
endActions: self.endActions,
|
endActions: self.endActions,
|
||||||
dragImageType: self.dragImageType,
|
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);
|
this.domNodes.push(domNode);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -72,7 +78,8 @@ DraggableWidget.prototype.execute = function() {
|
||||||
this.draggableClasses = this.getAttribute("class");
|
this.draggableClasses = this.getAttribute("class");
|
||||||
this.startActions = this.getAttribute("startactions");
|
this.startActions = this.getAttribute("startactions");
|
||||||
this.endActions = this.getAttribute("endactions");
|
this.endActions = this.getAttribute("endactions");
|
||||||
this.dragImageType = this.getAttribute("dragimagetype");
|
this.dragImageType = this.getAttribute("dragimagetype");
|
||||||
|
this.dragHandleSelector = this.getAttribute("selector");
|
||||||
// Make the child widgets
|
// Make the child widgets
|
||||||
this.makeChildWidgets();
|
this.makeChildWidgets();
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
caption: draggable
|
caption: draggable
|
||||||
created: 20170406081938627
|
created: 20170406081938627
|
||||||
modified: 20211009122105437
|
modified: 20220223145136863
|
||||||
tags: Widgets TriggeringWidgets
|
tags: Widgets TriggeringWidgets
|
||||||
title: DraggableWidget
|
title: DraggableWidget
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
|
@ -16,8 +16,10 @@ See DragAndDropMechanism for an overview.
|
||||||
|!Attribute |!Description |
|
|!Attribute |!Description |
|
||||||
|tiddler |Optional title of the payload tiddler for the drag |
|
|tiddler |Optional title of the payload tiddler for the drag |
|
||||||
|filter |Optional filter defining the payload tiddlers for the drag |
|
|filter |Optional filter defining the payload tiddlers for the drag |
|
||||||
|class |Optional CSS classes to assign to the draggable element. The class `tc-draggable` is added automatically, and the class `tc-dragging` is applied while the element is being dragged |
|
|tag |Optional tag to override the default "div" element created by the widget|
|
||||||
|tag |Optional tag to override the default "div" element |
|
|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 |
|
||||||
|
|
||||||
|startactions |Optional action string that gets invoked when dragging ''starts'' |
|
|startactions |Optional action string that gets invoked when dragging ''starts'' |
|
||||||
|endactions |Optional action string that gets invoked when dragging ''ends'' |
|
|endactions |Optional action string that gets invoked when dragging ''ends'' |
|
||||||
|dragimagetype |<<.from-version "5.2.0">> Optional type of drag image: `dom` (the default) or `blank` to disable the drag image |
|
|dragimagetype |<<.from-version "5.2.0">> Optional type of drag image: `dom` (the default) or `blank` to disable the drag image |
|
||||||
|
@ -28,5 +30,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.""">>
|
||||||
|
|
||||||
|
|
||||||
The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.
|
The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.
|
||||||
|
|
Loading…
Reference in New Issue
Block a user