Update dragndrop.js to store the handler in variables
This stores the EventHandlers in variables that are then passed to the widget that makes the element draggable. In the widget we can then remove the EventListeners if needed
This commit is contained in:
parent
b596a4bd12
commit
cde2b03534
|
@ -25,127 +25,136 @@ 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,
|
||||||
|
removeEventHandler = options.remove;
|
||||||
// Make the dom node draggable (not necessary for anchor tags)
|
// Make the dom node draggable (not necessary for anchor tags)
|
||||||
if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
|
if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
|
||||||
domNode.setAttribute("draggable","true");
|
domNode.setAttribute("draggable","true");
|
||||||
}
|
}
|
||||||
// Add event handlers
|
|
||||||
$tw.utils.addEventListeners(domNode,[
|
var dragStartHandlerFunction = function(event) {
|
||||||
{name: "dragstart", handlerFunction: function(event) {
|
if(event.dataTransfer === undefined) {
|
||||||
if(event.dataTransfer === undefined) {
|
return false;
|
||||||
return false;
|
}
|
||||||
|
// Collect the tiddlers being dragged
|
||||||
|
var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
|
||||||
|
dragFilter = options.dragFilterFn && options.dragFilterFn(),
|
||||||
|
titles = dragTiddler ? [dragTiddler] : [],
|
||||||
|
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 && (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(domNode,"tc-dragging");
|
||||||
|
// Invoke drag-start actions if given
|
||||||
|
if(startActions !== undefined) {
|
||||||
|
// Collect our variables
|
||||||
|
variables = $tw.utils.collectDOMVariables(domNode,null,event);
|
||||||
|
variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
|
||||||
|
variables["actionTiddler"] = titleString;
|
||||||
|
options.widget.invokeActionString(startActions,options.widget,event,variables);
|
||||||
}
|
}
|
||||||
|
// Create the drag image elements
|
||||||
|
dragImage = options.widget.document.createElement("div");
|
||||||
|
dragImage.className = "tc-tiddler-dragger";
|
||||||
|
var inner = options.widget.document.createElement("div");
|
||||||
|
inner.className = "tc-tiddler-dragger-inner";
|
||||||
|
inner.appendChild(options.widget.document.createTextNode(
|
||||||
|
titles.length === 1 ?
|
||||||
|
titles[0] :
|
||||||
|
titles.length + " tiddlers"
|
||||||
|
));
|
||||||
|
dragImage.appendChild(inner);
|
||||||
|
options.widget.document.body.appendChild(dragImage);
|
||||||
|
// Set the data transfer properties
|
||||||
|
var dataTransfer = event.dataTransfer;
|
||||||
|
// Set up the image
|
||||||
|
dataTransfer.effectAllowed = "all";
|
||||||
|
if(dataTransfer.setDragImage) {
|
||||||
|
if(dragImageType === "pill") {
|
||||||
|
dataTransfer.setDragImage(dragImage.firstChild,-16,-16);
|
||||||
|
} else if(dragImageType === "blank") {
|
||||||
|
dragImage.removeChild(dragImage.firstChild);
|
||||||
|
dataTransfer.setDragImage(dragImage,0,0);
|
||||||
|
} else {
|
||||||
|
var r = domNode.getBoundingClientRect();
|
||||||
|
dataTransfer.setDragImage(domNode,event.clientX-r.left,event.clientY-r.top);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Set up the data transfer
|
||||||
|
if(dataTransfer.clearData) {
|
||||||
|
dataTransfer.clearData();
|
||||||
|
}
|
||||||
|
var jsonData = [];
|
||||||
|
if(titles.length > 1) {
|
||||||
|
titles.forEach(function(title) {
|
||||||
|
jsonData.push(options.widget.wiki.getTiddlerAsJson(title));
|
||||||
|
});
|
||||||
|
jsonData = "[" + jsonData.join(",") + "]";
|
||||||
|
} else {
|
||||||
|
jsonData = options.widget.wiki.getTiddlerAsJson(titles[0]);
|
||||||
|
}
|
||||||
|
// IE doesn't like these content types
|
||||||
|
if(!$tw.browser.isIE) {
|
||||||
|
dataTransfer.setData("text/vnd.tiddler",jsonData);
|
||||||
|
dataTransfer.setData("text/plain",titleString);
|
||||||
|
dataTransfer.setData("text/x-moz-url","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
|
||||||
|
}
|
||||||
|
// If browser is Chrome-like and has a touch-input device do NOT .setData
|
||||||
|
if(!($tw.browser.isMobileChrome)) {
|
||||||
|
dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
|
||||||
|
}
|
||||||
|
dataTransfer.setData("Text",titleString);
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var dragEndHandlerFunction = function(event) {
|
||||||
|
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(),
|
||||||
titles = dragTiddler ? [dragTiddler] : [],
|
titles = dragTiddler ? [dragTiddler] : [],
|
||||||
startActions = options.startActions,
|
endActions = options.endActions,
|
||||||
variables,
|
variables;
|
||||||
domNodeRect;
|
|
||||||
if(dragFilter) {
|
if(dragFilter) {
|
||||||
titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
|
titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
|
||||||
}
|
}
|
||||||
var titleString = $tw.utils.stringifyList(titles);
|
var titleString = $tw.utils.stringifyList(titles);
|
||||||
// Check that we've something to drag
|
$tw.dragInProgress = null;
|
||||||
if(titles.length > 0 && (options.selector && $tw.utils.domMatchesSelector(event.target,options.selector) || event.target === domNode)) {
|
// Invoke drag-end actions if given
|
||||||
// Mark the drag in progress
|
if(endActions !== undefined) {
|
||||||
$tw.dragInProgress = domNode;
|
variables = $tw.utils.collectDOMVariables(domNode,null,event);
|
||||||
// Set the dragging class on the element being dragged
|
variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
|
||||||
$tw.utils.addClass(domNode,"tc-dragging");
|
variables["actionTiddler"] = titleString;
|
||||||
// Invoke drag-start actions if given
|
options.widget.invokeActionString(endActions,options.widget,event,variables);
|
||||||
if(startActions !== undefined) {
|
|
||||||
// Collect our variables
|
|
||||||
variables = $tw.utils.collectDOMVariables(domNode,null,event);
|
|
||||||
variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
|
|
||||||
variables["actionTiddler"] = titleString;
|
|
||||||
options.widget.invokeActionString(startActions,options.widget,event,variables);
|
|
||||||
}
|
|
||||||
// Create the drag image elements
|
|
||||||
dragImage = options.widget.document.createElement("div");
|
|
||||||
dragImage.className = "tc-tiddler-dragger";
|
|
||||||
var inner = options.widget.document.createElement("div");
|
|
||||||
inner.className = "tc-tiddler-dragger-inner";
|
|
||||||
inner.appendChild(options.widget.document.createTextNode(
|
|
||||||
titles.length === 1 ?
|
|
||||||
titles[0] :
|
|
||||||
titles.length + " tiddlers"
|
|
||||||
));
|
|
||||||
dragImage.appendChild(inner);
|
|
||||||
options.widget.document.body.appendChild(dragImage);
|
|
||||||
// Set the data transfer properties
|
|
||||||
var dataTransfer = event.dataTransfer;
|
|
||||||
// Set up the image
|
|
||||||
dataTransfer.effectAllowed = "all";
|
|
||||||
if(dataTransfer.setDragImage) {
|
|
||||||
if(dragImageType === "pill") {
|
|
||||||
dataTransfer.setDragImage(dragImage.firstChild,-16,-16);
|
|
||||||
} else if(dragImageType === "blank") {
|
|
||||||
dragImage.removeChild(dragImage.firstChild);
|
|
||||||
dataTransfer.setDragImage(dragImage,0,0);
|
|
||||||
} else {
|
|
||||||
var r = domNode.getBoundingClientRect();
|
|
||||||
dataTransfer.setDragImage(domNode,event.clientX-r.left,event.clientY-r.top);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Set up the data transfer
|
|
||||||
if(dataTransfer.clearData) {
|
|
||||||
dataTransfer.clearData();
|
|
||||||
}
|
|
||||||
var jsonData = [];
|
|
||||||
if(titles.length > 1) {
|
|
||||||
titles.forEach(function(title) {
|
|
||||||
jsonData.push(options.widget.wiki.getTiddlerAsJson(title));
|
|
||||||
});
|
|
||||||
jsonData = "[" + jsonData.join(",") + "]";
|
|
||||||
} else {
|
|
||||||
jsonData = options.widget.wiki.getTiddlerAsJson(titles[0]);
|
|
||||||
}
|
|
||||||
// IE doesn't like these content types
|
|
||||||
if(!$tw.browser.isIE) {
|
|
||||||
dataTransfer.setData("text/vnd.tiddler",jsonData);
|
|
||||||
dataTransfer.setData("text/plain",titleString);
|
|
||||||
dataTransfer.setData("text/x-moz-url","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
|
|
||||||
}
|
|
||||||
// If browser is Chrome-like and has a touch-input device do NOT .setData
|
|
||||||
if(!($tw.browser.isMobileChrome)) {
|
|
||||||
dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
|
|
||||||
}
|
|
||||||
dataTransfer.setData("Text",titleString);
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
}
|
||||||
return false;
|
// Remove the dragging class on the element being dragged
|
||||||
}},
|
$tw.utils.removeClass(domNode,"tc-dragging");
|
||||||
{name: "dragend", handlerFunction: function(event) {
|
// Delete the drag image element
|
||||||
if((options.selector && $tw.utils.domMatchesSelector(event.target,options.selector)) || event.target === domNode) {
|
if(dragImage) {
|
||||||
// Collect the tiddlers being dragged
|
dragImage.parentNode.removeChild(dragImage);
|
||||||
var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
|
dragImage = null;
|
||||||
dragFilter = options.dragFilterFn && options.dragFilterFn(),
|
|
||||||
titles = dragTiddler ? [dragTiddler] : [],
|
|
||||||
endActions = options.endActions,
|
|
||||||
variables;
|
|
||||||
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) {
|
|
||||||
variables = $tw.utils.collectDOMVariables(domNode,null,event);
|
|
||||||
variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
|
|
||||||
variables["actionTiddler"] = titleString;
|
|
||||||
options.widget.invokeActionString(endActions,options.widget,event,variables);
|
|
||||||
}
|
|
||||||
// Remove the dragging class on the element being dragged
|
|
||||||
$tw.utils.removeClass(domNode,"tc-dragging");
|
|
||||||
// Delete the drag image element
|
|
||||||
if(dragImage) {
|
|
||||||
dragImage.parentNode.removeChild(dragImage);
|
|
||||||
dragImage = null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return false;
|
}
|
||||||
}}
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the EventListener references to the widget
|
||||||
|
options.widget.dragStartReference = dragStartHandlerFunction;
|
||||||
|
options.widget.dragEndReference = dragEndHandlerFunction;
|
||||||
|
// Add event handlers
|
||||||
|
$tw.utils.addEventListeners(domNode,[
|
||||||
|
{name: "dragstart", handlerFunction: dragStartHandlerFunction},
|
||||||
|
{name: "dragend", handlerFunction: dragEndHandlerFunction}
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue