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

draggable widget: actions on drag-start and drag-end (#3203)

Browse Source 
* pass drag-start end drag-end actions to draggable

* Update dragndrop.js

* Update dragndrop.js

* Update dragndrop.js

* Update dragndrop.js

* Update dragndrop.js

* renaming dragstart/dragend -> start/end

* renaming dragstart/dragend -> start/end

* adding docs
This commit is contained in:
BurningTreeC 2018-04-08 11:29:17 +02:00 committed by Jeremy Ruston
parent b783d0f5af
commit afe14b47b5
3 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,8 @@ exports.makeDraggable = function(options) {
// Collect the tiddlers being dragged
var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
dragFilter = options.dragFilterFn && options.dragFilterFn(),
titles = dragTiddler ? [dragTiddler] : [];
titles = dragTiddler ? [dragTiddler] : [],
startActions = options.startActions;
if(dragFilter) {
titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
}
@ -49,6 +50,10 @@ exports.makeDraggable = function(options) {
$tw.dragInProgress = domNode;
// Set the dragging class on the element being dragged
$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});
}
// Create the drag image elements
dragImage = options.widget.document.createElement("div");
dragImage.className = "tc-tiddler-dragger";
@ -100,7 +105,20 @@ exports.makeDraggable = function(options) {
}},
{name: "dragend", handlerFunction: function(event) {
if(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;
if(dragFilter) {
titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
}
var titleString = $tw.utils.stringifyList(titles);
$tw.dragInProgress = null;
// Invoke drag-end actions if given
if(endActions !== undefined) {
options.widget.invokeActionString(endActions,options.widget,event,{actionTiddler: titleString});
}
// Remove the dragging class on the element being dragged
$tw.utils.removeClass(event.target,"tc-dragging");
// Delete the drag image element

4
core/modules/widgets/draggable.js
View File

@ -52,6 +52,8 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
domNode: domNode,
dragTiddlerFn: function() {return self.getAttribute("tiddler");},
dragFilterFn: function() {return self.getAttribute("filter");},
startActions: self.startActions,
endActions: self.endActions,
widget: this
});
// Insert the link into the DOM and render any children
@ -67,6 +69,8 @@ DraggableWidget.prototype.execute = function() {
// Pick up our attributes
this.draggableTag = this.getAttribute("tag","div");
this.draggableClasses = this.getAttribute("class");
this.startActions = this.getAttribute("startactions");
this.endActions = this.getAttribute("endactions");
// Make the child widgets
this.makeChildWidgets();
};

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

@ -7,7 +7,9 @@ type: text/vnd.tiddlywiki
The DraggableWidget creates a DOM element that can be dragged by the user. It only works on browsers that support drag and drop, which typically means desktop browsers, but [[there are workarounds|Mobile Drag And Drop Shim Plugin]].
The draggable element can be assigned a list of tiddlers that are used as the payload. See DragAndDropMechanism for an overview.
The draggable element can be assigned a list of tiddlers that are used as the payload.
If desired it can invoke actions when dragging starts and when it ends.
See DragAndDropMechanism for an overview.
! Content and Attributes
@ -16,7 +18,11 @@ The draggable element can be assigned a list of tiddlers that are used as the pa
|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 |
|startactions |Optional action string that gets invoked when dragging ''starts'' |
|endactions |Optional action string that gets invoked when dragging ''ends'' |
Either or both of the ''tiddler'' and ''filter'' attributes must be specified in order for there to be a payload to drag.
The ''actionTiddler'' variable is accessible in both //startactions// and //endactions//. It holds the payload tiddler(s) specified through the //tiddler// attribute.
The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.