|
|
|
@ -2,32 +2,34 @@ |
|
|
|
"use strict"; |
|
|
|
"use strict"; |
|
|
|
if (typeof define === "function" && define.amd) { |
|
|
|
if (typeof define === "function" && define.amd) { |
|
|
|
// AMD anonymous module
|
|
|
|
// AMD anonymous module
|
|
|
|
define(["knockout"], factory); |
|
|
|
define(["knockout", "./Sortable"], factory); |
|
|
|
} else if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { |
|
|
|
} else if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { |
|
|
|
// CommonJS module
|
|
|
|
// CommonJS module
|
|
|
|
var ko = require("knockout"); |
|
|
|
var ko = require("knockout"); |
|
|
|
factory(ko); |
|
|
|
var Sortable = require('./Sortable'); |
|
|
|
|
|
|
|
factory(ko, Sortable); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
// No module loader (plain <script> tag) - put directly in global namespace
|
|
|
|
// No module loader (plain <script> tag) - put directly in global namespace
|
|
|
|
factory(window.ko); |
|
|
|
factory(window.ko, window.Sortable); |
|
|
|
} |
|
|
|
} |
|
|
|
})(function (ko) { |
|
|
|
})(function (ko, Sortable) { |
|
|
|
"use strict"; |
|
|
|
"use strict"; |
|
|
|
|
|
|
|
|
|
|
|
var init = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) { |
|
|
|
var init = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) { |
|
|
|
|
|
|
|
|
|
|
|
var options = buildOptions(valueAccessor, sortableOptions); |
|
|
|
var options = buildOptions(valueAccessor, sortableOptions); |
|
|
|
|
|
|
|
|
|
|
|
//It's seems that we cannot update the eventhandlers after we've created the sortable, so define them in init instead of update
|
|
|
|
// It's seems that we cannot update the eventhandlers after we've created
|
|
|
|
|
|
|
|
// the sortable, so define them in init instead of update
|
|
|
|
['onStart', 'onEnd', 'onRemove', 'onAdd', 'onUpdate', 'onSort', 'onFilter'].forEach(function (e) { |
|
|
|
['onStart', 'onEnd', 'onRemove', 'onAdd', 'onUpdate', 'onSort', 'onFilter'].forEach(function (e) { |
|
|
|
if (options[e] || eventHandlers[e]) |
|
|
|
if (options[e] || eventHandlers[e]) |
|
|
|
options[e] = function (eventType, parentVM, parentBindings, handler, e) { |
|
|
|
options[e] = function (eventType, parentVM, parentBindings, handler, e) { |
|
|
|
var itemVM = ko.dataFor(e.item), |
|
|
|
var itemVM = ko.dataFor(e.item), |
|
|
|
//All of the bindings on the parent element
|
|
|
|
// All of the bindings on the parent element
|
|
|
|
bindings = ko.utils.peekObservable(parentBindings()), |
|
|
|
bindings = ko.utils.peekObservable(parentBindings()), |
|
|
|
//The binding options for the draggable/sortable binding of the parent element
|
|
|
|
// The binding options for the draggable/sortable binding of the parent element
|
|
|
|
bindingHandlerBinding = bindings.sortable || bindings.draggable, |
|
|
|
bindingHandlerBinding = bindings.sortable || bindings.draggable, |
|
|
|
//The collection that we should modify
|
|
|
|
// The collection that we should modify
|
|
|
|
collection = bindingHandlerBinding.collection || bindingHandlerBinding.foreach; |
|
|
|
collection = bindingHandlerBinding.collection || bindingHandlerBinding.foreach; |
|
|
|
if (handler) |
|
|
|
if (handler) |
|
|
|
handler(e, itemVM, parentVM, collection, bindings); |
|
|
|
handler(e, itemVM, parentVM, collection, bindings); |
|
|
|
@ -38,7 +40,7 @@ |
|
|
|
|
|
|
|
|
|
|
|
var sortableElement = Sortable.create(element, options); |
|
|
|
var sortableElement = Sortable.create(element, options); |
|
|
|
|
|
|
|
|
|
|
|
//Destroy the sortable if knockout disposes the element it's connected to
|
|
|
|
// Destroy the sortable if knockout disposes the element it's connected to
|
|
|
|
ko.utils.domNodeDisposal.addDisposeCallback(element, function () { |
|
|
|
ko.utils.domNodeDisposal.addDisposeCallback(element, function () { |
|
|
|
sortableElement.destroy(); |
|
|
|
sortableElement.destroy(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -46,8 +48,8 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
update = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) { |
|
|
|
update = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) { |
|
|
|
|
|
|
|
|
|
|
|
//There seems to be some problems with updating the options of a sortable
|
|
|
|
// There seems to be some problems with updating the options of a sortable
|
|
|
|
//Tested to change eventhandlers and the group options without any luck
|
|
|
|
// Tested to change eventhandlers and the group options without any luck
|
|
|
|
|
|
|
|
|
|
|
|
return ko.bindingHandlers.template.update(element, valueAccessor, allBindings, viewModel, bindingContext); |
|
|
|
return ko.bindingHandlers.template.update(element, valueAccessor, allBindings, viewModel, bindingContext); |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -55,7 +57,8 @@ |
|
|
|
|
|
|
|
|
|
|
|
var moveOperations = [], |
|
|
|
var moveOperations = [], |
|
|
|
tryMoveOperation = function (e, itemVM, parentVM, collection, parentBindings) { |
|
|
|
tryMoveOperation = function (e, itemVM, parentVM, collection, parentBindings) { |
|
|
|
//A move operation is the combination of a add and remove event, this is to make sure that we have both the target and origin collections
|
|
|
|
// A move operation is the combination of a add and remove event,
|
|
|
|
|
|
|
|
// this is to make sure that we have both the target and origin collections
|
|
|
|
var currentOperation = { event: e, itemVM: itemVM, parentVM: parentVM, collection: collection, parentBindings: parentBindings }, |
|
|
|
var currentOperation = { event: e, itemVM: itemVM, parentVM: parentVM, collection: collection, parentBindings: parentBindings }, |
|
|
|
existingOperation = moveOperations.filter(function (op) { |
|
|
|
existingOperation = moveOperations.filter(function (op) { |
|
|
|
return op.itemVM === currentOperation.itemVM; |
|
|
|
return op.itemVM === currentOperation.itemVM; |
|
|
|
@ -65,7 +68,8 @@ |
|
|
|
moveOperations.push(currentOperation); |
|
|
|
moveOperations.push(currentOperation); |
|
|
|
} |
|
|
|
} |
|
|
|
else { |
|
|
|
else { |
|
|
|
//We're finishing the operation and already have a handle on the operation item meaning that it's safe to remove it
|
|
|
|
// We're finishing the operation and already have a handle on
|
|
|
|
|
|
|
|
// the operation item meaning that it's safe to remove it
|
|
|
|
moveOperations.splice(moveOperations.indexOf(existingOperation), 1); |
|
|
|
moveOperations.splice(moveOperations.indexOf(existingOperation), 1); |
|
|
|
|
|
|
|
|
|
|
|
var removeOperation = currentOperation.event.type === 'remove' ? currentOperation : existingOperation, |
|
|
|
var removeOperation = currentOperation.event.type === 'remove' ? currentOperation : existingOperation, |
|
|
|
@ -74,54 +78,61 @@ |
|
|
|
moveItem(itemVM, removeOperation.collection, addOperation.collection, addOperation.event.clone, addOperation.event); |
|
|
|
moveItem(itemVM, removeOperation.collection, addOperation.collection, addOperation.event.clone, addOperation.event); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
//Moves an item from the to (collection to from (collection), these can be references to the same collection which means it's a sort,
|
|
|
|
// Moves an item from the "to" collection to the "from" collection, these
|
|
|
|
//clone indicates if we should move or copy the item into the new collection
|
|
|
|
// can be references to the same collection which means it's a sort.
|
|
|
|
|
|
|
|
// clone indicates if we should move or copy the item into the new collection
|
|
|
|
moveItem = function (itemVM, from, to, clone, e) { |
|
|
|
moveItem = function (itemVM, from, to, clone, e) { |
|
|
|
//Unwrapping this allows us to manipulate the actual array
|
|
|
|
// Unwrapping this allows us to manipulate the actual array
|
|
|
|
var fromArray = from(), |
|
|
|
var fromArray = from(), |
|
|
|
//It's not certain that the items actual index is the same as the index reported by sortable due to filtering etc.
|
|
|
|
// It's not certain that the items actual index is the same
|
|
|
|
|
|
|
|
// as the index reported by sortable due to filtering etc.
|
|
|
|
originalIndex = fromArray.indexOf(itemVM), |
|
|
|
originalIndex = fromArray.indexOf(itemVM), |
|
|
|
newIndex = e.newIndex; |
|
|
|
newIndex = e.newIndex; |
|
|
|
|
|
|
|
|
|
|
|
if (e.item.previousElementSibling) |
|
|
|
if (e.item.previousElementSibling) |
|
|
|
|
|
|
|
{ |
|
|
|
newIndex = fromArray.indexOf(ko.dataFor(e.item.previousElementSibling)); |
|
|
|
newIndex = fromArray.indexOf(ko.dataFor(e.item.previousElementSibling)); |
|
|
|
if (originalIndex > newIndex) |
|
|
|
if (originalIndex > newIndex) |
|
|
|
newIndex = newIndex + 1; |
|
|
|
newIndex = newIndex + 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//Remove sortables "unbound" element
|
|
|
|
// Remove sortables "unbound" element
|
|
|
|
e.item.parentNode.removeChild(e.item); |
|
|
|
e.item.parentNode.removeChild(e.item); |
|
|
|
|
|
|
|
|
|
|
|
//This splice is necessary for both clone and move/sort
|
|
|
|
// This splice is necessary for both clone and move/sort
|
|
|
|
//In sort/move since it shouldn't be at this index/in this array anymore
|
|
|
|
// In sort/move since it shouldn't be at this index/in this array anymore
|
|
|
|
//In clone since we have to work around knockouts valuHasMutated when manipulating arrays and avoid a "unbound" item added by sortable
|
|
|
|
// In clone since we have to work around knockouts valuHasMutated
|
|
|
|
|
|
|
|
// when manipulating arrays and avoid a "unbound" item added by sortable
|
|
|
|
fromArray.splice(originalIndex, 1); |
|
|
|
fromArray.splice(originalIndex, 1); |
|
|
|
//Update the array, this will also remove sortables "unbound" clone
|
|
|
|
// Update the array, this will also remove sortables "unbound" clone
|
|
|
|
from.valueHasMutated(); |
|
|
|
from.valueHasMutated(); |
|
|
|
if (clone && from !== to) { |
|
|
|
if (clone && from !== to) { |
|
|
|
//Readd the item
|
|
|
|
// Read the item
|
|
|
|
fromArray.splice(originalIndex, 0, itemVM); |
|
|
|
fromArray.splice(originalIndex, 0, itemVM); |
|
|
|
//Force knockout to update
|
|
|
|
// Force knockout to update
|
|
|
|
from.valueHasMutated(); |
|
|
|
from.valueHasMutated(); |
|
|
|
} |
|
|
|
} |
|
|
|
//Insert the item on its new position
|
|
|
|
// Insert the item on its new position
|
|
|
|
to().splice(newIndex, 0, itemVM); |
|
|
|
to().splice(newIndex, 0, itemVM); |
|
|
|
//Make sure to tell knockout that we've modified the actual array.
|
|
|
|
// Make sure to tell knockout that we've modified the actual array.
|
|
|
|
to.valueHasMutated(); |
|
|
|
to.valueHasMutated(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
handlers.onRemove = tryMoveOperation; |
|
|
|
handlers.onRemove = tryMoveOperation; |
|
|
|
handlers.onAdd = tryMoveOperation; |
|
|
|
handlers.onAdd = tryMoveOperation; |
|
|
|
handlers.onUpdate = function (e, itemVM, parentVM, collection, parentBindings) { |
|
|
|
handlers.onUpdate = function (e, itemVM, parentVM, collection, parentBindings) { |
|
|
|
//This will be performed as a sort since the to/from collections reference the same collection and clone is set to false
|
|
|
|
// This will be performed as a sort since the to/from collections
|
|
|
|
|
|
|
|
// reference the same collection and clone is set to false
|
|
|
|
moveItem(itemVM, collection, collection, false, e); |
|
|
|
moveItem(itemVM, collection, collection, false, e); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return handlers; |
|
|
|
return handlers; |
|
|
|
})({}), |
|
|
|
})({}), |
|
|
|
//bindingOptions are the options set in the "data-bind" attribute in the ui.
|
|
|
|
// bindingOptions are the options set in the "data-bind" attribute in the ui.
|
|
|
|
//options are custom options, for instance draggable/sortable specific options
|
|
|
|
// options are custom options, for instance draggable/sortable specific options
|
|
|
|
buildOptions = function (bindingOptions, options) { |
|
|
|
buildOptions = function (bindingOptions, options) { |
|
|
|
//deep clone/copy of properties from the "from" argument onto the "into" argument and returns the modified "into"
|
|
|
|
// deep clone/copy of properties from the "from" argument onto
|
|
|
|
|
|
|
|
// the "into" argument and returns the modified "into"
|
|
|
|
var merge = function (into, from) { |
|
|
|
var merge = function (into, from) { |
|
|
|
for (var prop in from) { |
|
|
|
for (var prop in from) { |
|
|
|
if (Object.prototype.toString.call(from[prop]) === '[object Object]') { |
|
|
|
if (Object.prototype.toString.call(from[prop]) === '[object Object]') { |
|
|
|
@ -136,16 +147,17 @@ |
|
|
|
|
|
|
|
|
|
|
|
return into; |
|
|
|
return into; |
|
|
|
}, |
|
|
|
}, |
|
|
|
//unwrap the supplied options
|
|
|
|
// unwrap the supplied options
|
|
|
|
unwrappedOptions = ko.utils.peekObservable(bindingOptions()).options || {}; |
|
|
|
unwrappedOptions = ko.utils.peekObservable(bindingOptions()).options || {}; |
|
|
|
|
|
|
|
|
|
|
|
//Make sure that we don't modify the provided settings object
|
|
|
|
// Make sure that we don't modify the provided settings object
|
|
|
|
options = merge({}, options); |
|
|
|
options = merge({}, options); |
|
|
|
|
|
|
|
|
|
|
|
//group is handled differently since we should both allow to change a draggable to a sortable (and vice versa),
|
|
|
|
// group is handled differently since we should both allow to change
|
|
|
|
//but still be able to set a name on a draggable without it becoming a drop target.
|
|
|
|
// a draggable to a sortable (and vice versa), but still be able to set
|
|
|
|
|
|
|
|
// a name on a draggable without it becoming a drop target.
|
|
|
|
if (unwrappedOptions.group && Object.prototype.toString.call(unwrappedOptions.group) !== '[object Object]') { |
|
|
|
if (unwrappedOptions.group && Object.prototype.toString.call(unwrappedOptions.group) !== '[object Object]') { |
|
|
|
//group property is a name string declaration, convert to object.
|
|
|
|
// group property is a name string declaration, convert to object.
|
|
|
|
unwrappedOptions.group = { name: unwrappedOptions.group }; |
|
|
|
unwrappedOptions.group = { name: unwrappedOptions.group }; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
RubaXa
9 years ago