playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge branch 'master' into dev 

Conflicts:
	README.md
	Sortable.js
	Sortable.min.js
	component.json
pull/652/head
Sebastian Rosengren 9 years ago
parent
a849935b43 2fe3a25cd3
commit
01f1e47cbd
5 changed files with 134 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      bower.json
  2. 86
      knockout-sortable.js
  3. 70
      knockout/example.html
  4. 2
      package.json
  5. 10
      react-sortable-mixin.js

15
bower.json
Unescape View File

@ -1,10 +1,10 @@
{
"name": "Sortable",
"main": [
"Sortable.js",
"ng-sortable.js",
"knockout-sortable.js",
"react-sortable-mixin.js"
"Sortable.js",
"ng-sortable.js",
"knockout-sortable.js",
"react-sortable-mixin.js"
],
"homepage": "http://rubaxa.github.io/Sortable/",
"authors": [
@ -20,7 +20,7 @@
"and",
"drop",
"dnd",
"web-components"
"web-components"
],
"license": "MIT",
"ignore": [
@ -28,8 +28,5 @@
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#~1.1.4",
}
]
}

86
knockout-sortable.js
Unescape View File

@ -2,32 +2,34 @@
"use strict";
if (typeof define === "function" && define.amd) {
// AMD anonymous module
define(["knockout"], factory);
define(["knockout", "./Sortable"], factory);
} else if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
// CommonJS module
var ko = require("knockout");
factory(ko);
var Sortable = require('./Sortable');
factory(ko, Sortable);
} else {
// 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";
var init = function (element, valueAccessor, allBindings, viewModel, bindingContext, 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) {
if (options[e] || eventHandlers[e])
options[e] = function (eventType, parentVM, parentBindings, handler, e) {
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()),
//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,
//The collection that we should modify
// The collection that we should modify
collection = bindingHandlerBinding.collection || bindingHandlerBinding.foreach;
if (handler)
handler(e, itemVM, parentVM, collection, bindings);
@ -38,7 +40,7 @@
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 () {
sortableElement.destroy();
});
@ -46,8 +48,8 @@
},
update = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) {
//There seems to be some problems with updating the options of a sortable
//Tested to change eventhandlers and the group options without any luck
// There seems to be some problems with updating the options of a sortable
// Tested to change eventhandlers and the group options without any luck
return ko.bindingHandlers.template.update(element, valueAccessor, allBindings, viewModel, bindingContext);
},
@ -55,7 +57,8 @@
var moveOperations = [],
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 },
existingOperation = moveOperations.filter(function (op) {
return op.itemVM === currentOperation.itemVM;
@ -65,7 +68,8 @@
moveOperations.push(currentOperation);
}
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);
var removeOperation = currentOperation.event.type === 'remove' ? currentOperation : existingOperation,
@ -74,54 +78,61 @@
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,
//clone indicates if we should move or copy the item into the new collection
// Moves an item from the "to" collection to the "from" collection, these
// 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) {
//Unwrapping this allows us to manipulate the actual array
// Unwrapping this allows us to manipulate the actual array
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),
newIndex = e.newIndex;
if (e.item.previousElementSibling)
{
newIndex = fromArray.indexOf(ko.dataFor(e.item.previousElementSibling));
if (originalIndex > newIndex)
newIndex = newIndex + 1;
if (originalIndex > newIndex)
newIndex = newIndex + 1;
}
//Remove sortables "unbound" element
// Remove sortables "unbound" element
e.item.parentNode.removeChild(e.item);
//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 clone since we have to work around knockouts valuHasMutated when manipulating arrays and avoid a "unbound" item added by sortable
// 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 clone since we have to work around knockouts valuHasMutated
// when manipulating arrays and avoid a "unbound" item added by sortable
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();
if (clone && from !== to) {
//Readd the item
// Read the item
fromArray.splice(originalIndex, 0, itemVM);
//Force knockout to update
// Force knockout to update
from.valueHasMutated();
}
//Insert the item on its new position
// Insert the item on its new position
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();
};
handlers.onRemove = tryMoveOperation;
handlers.onAdd = tryMoveOperation;
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);
};
return handlers;
})({}),
//bindingOptions are the options set in the "data-bind" attribute in the ui.
//options are custom options, for instance draggable/sortable specific options
// bindingOptions are the options set in the "data-bind" attribute in the ui.
// options are custom options, for instance draggable/sortable specific 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) {
for (var prop in from) {
if (Object.prototype.toString.call(from[prop]) === '[object Object]') {
@ -136,16 +147,17 @@
return into;
},
//unwrap the supplied options
// unwrap the supplied 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);
//group is handled differently since we should both allow to change 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.
// group is handled differently since we should both allow to change
// 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]') {
//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 };
}

70
knockout/example.html
Unescape View File

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.grid {
font-size: 0;
}
.col-1_2 {
box-sizing:border-box;
display: inline-block;
padding: 0.5rem;
font-size: 1rem;
}
.col-1_2 {
width: 50%;
}
</style>
</head>
<body>
<div class="grid">
<div class="col-1_2">
<h4>Sortable observable</h4>
<ul data-bind="sortable: {foreach: sortableObservableItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2">
<h4>Sortable observable mirrored</h4>
<ul data-bind="sortable: {foreach: sortableObservableItems}">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
<div class="grid">
<div class="col-1_2">
<h4>Sortable computed</h4>
<ul data-bind="sortable: {foreach: sortableComputedItems, collection: underlayingsortableComputedItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2">
<h4>Sortable computed mirrored</h4>
<ul data-bind="foreach: sortableComputedItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="../Sortable.js"></script>
<script src="../knockout-sortable.js"></script>
<script>
var sortableComputedItems = [{ name: 'Sortable computed 1' }, { name: 'Sortable computed 2' }, { name: 'Sortable computed 3' }];
var sortableObservableItems = [{ name: 'Sortable observable 1' }, { name: 'Sortable observable 2' }, { name: 'Sortable observable 3' }];
var vm = {
underlayingSortableComputedItems: ko.observableArray(sortableComputedItems),
sortableObservableItems: ko.observableArray(sortableObservableItems)
}
vm.sortableComputedItems = ko.computed(function () { return vm.underlayingSortableComputedItems(); });
ko.applyBindings(vm);
</script>
</body>
</html>

2
package.json
Unescape View File

@ -1,7 +1,7 @@
{
"name": "sortablejs",
"exportName": "Sortable",
"version": "1.4.0",
"version": "1.4.2",
"devDependencies": {
"grunt": "*",
"grunt-version": "*",

10
react-sortable-mixin.js vendored
Unescape View File

@ -70,7 +70,7 @@
* @mixin
*/
var SortableMixin = {
sortableMixinVersion: '0.1.0',
sortableMixinVersion: '0.1.1',
/**
@ -120,7 +120,13 @@
}
newState[_getModelName(this)] = items;
this.setState(newState);
if (copyOptions.stateHandler) {
this[copyOptions.stateHandler](newState);
} else {
this.setState(newState);
}
(this !== _activeComponent) && _activeComponent.setState(remoteState);
}

Write Preview
Loading…
Cancel
Save