From cc397706856e7d6fd42b7622be4c5628e30384dd Mon Sep 17 00:00:00 2001 From: Lebedev Konstantin Date: Fri, 24 Jun 2016 15:05:09 +0300 Subject: [PATCH 1/8] * MOVED --- README.md | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 19b26ea..9f33ed9 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,12 @@ Demo: http://rubaxa.github.io/Sortable/ * Supports drag handles *and selectable text* (better than voidberg's html5sortable) * Smart auto-scrolling * Built using native HTML5 drag and drop API - * Supports [Meteor](https://github.com/SortableJS/meteor), [AngularJS](#ng), [React](#react), [Knockout](https://github.com/SortableJS/knockout-sortablejs) and [Polymer](#polymer) + * Supports + * [Meteor](https://github.com/SortableJS/meteor) + * [AngularJS](#ng) + * [React](#react) + * [Knockout](https://github.com/SortableJS/knockout-sortablejs) + * [Polymer](https://github.com/SortableJS/polymer-sortablejs) * Supports any CSS library, e.g. [Bootstrap](#bs) * Simple API * [CDN](#cdn) @@ -503,19 +508,6 @@ export class SortableExampleEsnext extends React.Component { --- - -### Support Polymer -```html - - - - - - -``` - ### Method From fb57b98b615ee70cdaa460abbb5db2495d7029e1 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Mon, 4 Jul 2016 23:20:50 +0300 Subject: [PATCH 2/8] [MOVED] https://github.com/SortableJS/react-mixin-sortablejs --- README.md | 144 +---------------------------------- bower.json | 3 +- react-sortable-mixin.js | 165 ---------------------------------------- 3 files changed, 2 insertions(+), 310 deletions(-) delete mode 100644 react-sortable-mixin.js diff --git a/README.md b/README.md index 9f33ed9..5518d93 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Demo: http://rubaxa.github.io/Sortable/ * Supports * [Meteor](https://github.com/SortableJS/meteor) * [AngularJS](#ng) - * [React](#react) + * [React](https://github.com/SortableJS/react-mixin-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs) * Supports any CSS library, e.g. [Bootstrap](#bs) @@ -366,148 +366,6 @@ angular.module('myApp', ['ng-sortable']) --- - -### Support React -Include [react-sortable-mixin.js](react-sortable-mixin.js). -See [more options](react-sortable-mixin.js#L26). - - -```jsx -var SortableList = React.createClass({ - mixins: [SortableMixin], - - getInitialState: function() { - return { - items: ['Mixin', 'Sortable'] - }; - }, - - handleSort: function (/** Event */evt) { /*..*/ }, - - render: function() { - return - } -}); - -React.render(, document.body); - - -// -// Groups -// -var AllUsers = React.createClass({ - mixins: [SortableMixin], - - sortableOptions: { - ref: "user", - group: "shared", - model: "users" - }, - - getInitialState: function() { - return { users: ['Abbi', 'Adela', 'Bud', 'Cate', 'Davis', 'Eric']; }; - }, - - render: function() { - return ( -

Users

-
    { - this.state.users.map(function (text) { - return
  • {text}
    • - }) - }
- ); - } -}); - -var ApprovedUsers = React.createClass({ - mixins: [SortableMixin], - sortableOptions: { group: "shared" }, - - getInitialState: function() { - return { items: ['Hal', 'Judy']; }; - }, - - render: function() { - return
    { - this.state.items.map(function (text) { - return
  • {text}
    • - }) - }
- } -}); - -React.render(
- -
- -
, document.body); -``` - -### Support React ES2015 / TypeScript syntax -As mixins are not supported in ES2015 / TypeScript syntax here is example of ES2015 ref based implementation. -Using refs is the preferred (by facebook) "escape hatch" to underlaying DOM nodes: [React: The ref Callback Attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute) - -```js -import * as React from "react"; -import Sortable from 'sortablejs'; - -export class SortableExampleEsnext extends React.Component { - - sortableContainersDecorator = (componentBackingInstance) => { - // check if backing instance not null - if (componentBackingInstance) { - let options = { - handle: ".group-title" // Restricts sort start click/touch to the specified element - }; - Sortable.create(componentBackingInstance, options); - } - }; - - sortableGroupDecorator = (componentBackingInstance) => { - // check if backing instance not null - if (componentBackingInstance) { - let options = { - draggable: "div", // Specifies which items inside the element should be sortable - group: "shared" - }; - Sortable.create(componentBackingInstance, options); - } - }; - - render() { - return ( -
-
-

Group 1

-
-
Swap them around
-
Swap us around
-
Swap things around
-
Swap everything around
-
-
-
-

Group 2

-
-
Swap them around
-
Swap us around
-
Swap things around
-
Swap everything around
-
-
-
- ); - } -} -``` - ---- - ### Method diff --git a/bower.json b/bower.json index a21c6ec..deabf8a 100644 --- a/bower.json +++ b/bower.json @@ -2,8 +2,7 @@ "name": "Sortable", "main": [ "Sortable.js", - "ng-sortable.js", - "react-sortable-mixin.js" + "ng-sortable.js" ], "homepage": "http://rubaxa.github.io/Sortable/", "authors": [ diff --git a/react-sortable-mixin.js b/react-sortable-mixin.js deleted file mode 100644 index e8c865f..0000000 --- a/react-sortable-mixin.js +++ /dev/null @@ -1,165 +0,0 @@ -/** - * @author RubaXa - * @licence MIT - */ - -(function (factory) { - 'use strict'; - - if (typeof module != 'undefined' && typeof module.exports != 'undefined') { - module.exports = factory(require('./Sortable')); - } - else if (typeof define === 'function' && define.amd) { - define(['./Sortable'], factory); - } - else { - /* jshint sub:true */ - window['SortableMixin'] = factory(Sortable); - } -})(function (/** Sortable */Sortable) { - 'use strict'; - - var _nextSibling; - - var _activeComponent; - - var _defaultOptions = { - ref: 'list', - model: 'items', - - animation: 100, - onStart: 'handleStart', - onEnd: 'handleEnd', - onAdd: 'handleAdd', - onUpdate: 'handleUpdate', - onRemove: 'handleRemove', - onSort: 'handleSort', - onFilter: 'handleFilter', - onMove: 'handleMove' - }; - - - function _getModelName(component) { - return component.sortableOptions && component.sortableOptions.model || _defaultOptions.model; - } - - - function _getModelItems(component) { - var name = _getModelName(component), - items = component.state && component.state[name] || component.props[name]; - - return items.slice(); - } - - - function _extend(dst, src) { - for (var key in src) { - if (src.hasOwnProperty(key)) { - dst[key] = src[key]; - } - } - - return dst; - } - - - /** - * Simple and easy mixin-wrapper for rubaxa/Sortable library, in order to - * make reorderable drag-and-drop lists on modern browsers and touch devices. - * - * @mixin - */ - var SortableMixin = { - sortableMixinVersion: '0.1.1', - - - /** - * @type {Sortable} - * @private - */ - _sortableInstance: null, - - - componentDidMount: function () { - var DOMNode, options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}), - copyOptions = _extend({}, options), - - emitEvent = function (/** string */type, /** Event */evt) { - var method = this[options[type]]; - method && method.call(this, evt, this._sortableInstance); - }.bind(this); - - - // Bind callbacks so that "this" refers to the component - 'onStart onEnd onAdd onSort onUpdate onRemove onFilter onMove'.split(' ').forEach(function (/** string */name) { - copyOptions[name] = function (evt) { - if (name === 'onStart') { - _nextSibling = evt.item.nextElementSibling; - _activeComponent = this; - } - else if (name === 'onAdd' || name === 'onUpdate') { - evt.from.insertBefore(evt.item, _nextSibling); - - var newState = {}, - remoteState = {}, - oldIndex = evt.oldIndex, - newIndex = evt.newIndex, - items = _getModelItems(this), - remoteItems, - item; - - if (name === 'onAdd') { - remoteItems = _getModelItems(_activeComponent); - item = remoteItems.splice(oldIndex, 1)[0]; - items.splice(newIndex, 0, item); - - remoteState[_getModelName(_activeComponent)] = remoteItems; - } - else { - items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]); - } - - newState[_getModelName(this)] = items; - - if (copyOptions.stateHandler) { - this[copyOptions.stateHandler](newState); - } else { - this.setState(newState); - } - - (this !== _activeComponent) && _activeComponent.setState(remoteState); - } - - setTimeout(function () { - emitEvent(name, evt); - }, 0); - }.bind(this); - }, this); - - DOMNode = this.getDOMNode() ? (this.refs[options.ref] || this).getDOMNode() : this.refs[options.ref] || this; - - /** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */ - this._sortableInstance = Sortable.create(DOMNode, copyOptions); - }, - - componentWillReceiveProps: function (nextProps) { - var newState = {}, - modelName = _getModelName(this), - items = nextProps[modelName]; - - if (items) { - newState[modelName] = items; - this.setState(newState); - } - }, - - componentWillUnmount: function () { - this._sortableInstance.destroy(); - this._sortableInstance = null; - } - }; - - - // Export - return SortableMixin; -}); From 4756be09b28dd2aea47988d7298f7cdc79df8272 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Mon, 4 Jul 2016 23:26:21 +0300 Subject: [PATCH 3/8] * react --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5518d93..5a575ce 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,9 @@ Demo: http://rubaxa.github.io/Sortable/ * Supports * [Meteor](https://github.com/SortableJS/meteor) * [AngularJS](#ng) - * [React](https://github.com/SortableJS/react-mixin-sortablejs) + * React + * [es6](https://github.com/SortableJS/react-sortablejs) + * [mixin](https://github.com/SortableJS/react-mixin-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs) * Supports any CSS library, e.g. [Bootstrap](#bs) From 605dbc59cbb804861383fb637d7b085c27adefcf Mon Sep 17 00:00:00 2001 From: RubaXa Date: Mon, 4 Jul 2016 23:29:19 +0300 Subject: [PATCH 4/8] * es --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5a575ce..0aee73f 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Demo: http://rubaxa.github.io/Sortable/ * [Meteor](https://github.com/SortableJS/meteor) * [AngularJS](#ng) * React - * [es6](https://github.com/SortableJS/react-sortablejs) + * [ES2015+](https://github.com/SortableJS/react-sortablejs) * [mixin](https://github.com/SortableJS/react-mixin-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs) From a7f3b28fbad9e8e356f9ad6616133f3859b9a07b Mon Sep 17 00:00:00 2001 From: RubaXa Date: Tue, 5 Jul 2016 08:57:28 +0300 Subject: [PATCH 5/8] +Bindings --- ISSUE_TEMPLATE.md | 12 ++++++++++++ README.md | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md index ef454ab..c0e68c9 100644 --- a/ISSUE_TEMPLATE.md +++ b/ISSUE_TEMPLATE.md @@ -3,3 +3,15 @@ Before you create a issue, check it: 1. Try [dev](https://github.com/RubaXa/Sortable/tree/dev/)-branch, perhaps the problem has been solved; 2. [Use the search](https://github.com/RubaXa/Sortable/search?q=problem), maybe already have an answer; 3. If not found, create example on [jsbin.com (draft)](http://jsbin.com/zunibaxada/1/edit?html,js,output) and describe the problem. + +Bindings: + - Angular + - 2.0+: https://github.com/SortableJS/angular-sortablejs/issues + - legacy: https://github.com/SortableJS/angular-legacy-sortablejs/issues + - React + - ES2015+: https://github.com/SortableJS/react-sortablejs/issues + - mixin: https://github.com/SortableJS/react-mixin-sortablejs/issues + - Polymer: https://github.com/SortableJS/polymer-sortablejs/issues + - Knockout: https://github.com/SortableJS/knockout-sortablejs/issues + - Meteor: https://github.com/SortableJS/meteor-sortablejs/issues + diff --git a/README.md b/README.md index 0aee73f..4eb0bfd 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Demo: http://rubaxa.github.io/Sortable/ * Smart auto-scrolling * Built using native HTML5 drag and drop API * Supports - * [Meteor](https://github.com/SortableJS/meteor) + * [Meteor](https://github.com/SortableJS/meteor-sortablejs) * [AngularJS](#ng) * React * [ES2015+](https://github.com/SortableJS/react-sortablejs) From 82fdb4dccfcad1ba42d34219b7ba42d169b0078c Mon Sep 17 00:00:00 2001 From: RubaXa Date: Tue, 5 Jul 2016 08:58:20 +0300 Subject: [PATCH 6/8] * upper --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4eb0bfd..e6934e0 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Demo: http://rubaxa.github.io/Sortable/ * [AngularJS](#ng) * React * [ES2015+](https://github.com/SortableJS/react-sortablejs) - * [mixin](https://github.com/SortableJS/react-mixin-sortablejs) + * [Mixin](https://github.com/SortableJS/react-mixin-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs) * Supports any CSS library, e.g. [Bootstrap](#bs) From e87d68d0e2a786964991ba0103a80f8083eb65f5 Mon Sep 17 00:00:00 2001 From: Lebedev Konstantin Date: Tue, 5 Jul 2016 16:23:56 +0300 Subject: [PATCH 7/8] [MOVED] https://github.com/SortableJS/angular-legacy-sortablejs --- README.md | 47 +----------- bower.json | 3 +- ng-sortable.js | 191 ------------------------------------------------- 3 files changed, 4 insertions(+), 237 deletions(-) delete mode 100644 ng-sortable.js diff --git a/README.md b/README.md index e6934e0..5bfba40 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,9 @@ Demo: http://rubaxa.github.io/Sortable/ * Built using native HTML5 drag and drop API * Supports * [Meteor](https://github.com/SortableJS/meteor-sortablejs) - * [AngularJS](#ng) + * [AngularJS] + * [2+](https://github.com/SortableJS/angular-sortablejs) + * [1.*](https://github.com/SortableJS/angular-legacy-sortablejs) * React * [ES2015+](https://github.com/SortableJS/react-sortablejs) * [Mixin](https://github.com/SortableJS/react-mixin-sortablejs) @@ -325,49 +327,6 @@ The speed at which the window should scroll once the mouse pointer gets within t --- - -### Support AngularJS -Include [ng-sortable.js](ng-sortable.js) - -Demo: http://jsbin.com/naduvo/1/edit?html,js,output - -```html -
-
    -
  • {{item}}
    • -
- -
    -
  • {{item}}
    • -
- -
    -
  • {{item}}
    • -
-
-``` - - -```js -angular.module('myApp', ['ng-sortable']) - .controller('demo', ['$scope', function ($scope) { - $scope.items = ['item 1', 'item 2']; - $scope.foo = ['foo 1', '..']; - $scope.bar = ['bar 1', '..']; - $scope.barConfig = { - group: 'foobar', - animation: 150, - onSort: function (/** ngSortEvent */evt){ - // @see https://github.com/RubaXa/Sortable/blob/master/ng-sortable.js#L18-L24 - } - }; - }]); -``` - - ---- - - ### Method diff --git a/bower.json b/bower.json index deabf8a..cd27f02 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,7 @@ { "name": "Sortable", "main": [ - "Sortable.js", - "ng-sortable.js" + "Sortable.js" ], "homepage": "http://rubaxa.github.io/Sortable/", "authors": [ diff --git a/ng-sortable.js b/ng-sortable.js deleted file mode 100644 index 8cc7dee..0000000 --- a/ng-sortable.js +++ /dev/null @@ -1,191 +0,0 @@ -/** - * @author RubaXa - * @licence MIT - */ -(function (factory) { - 'use strict'; - - if (typeof define === 'function' && define.amd) { - define(['angular', './Sortable'], factory); - } - else if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') { - require('angular'); - factory(angular, require('./Sortable')); - module.exports = 'ng-sortable'; - } - else if (window.angular && window.Sortable) { - factory(angular, Sortable); - } -})(function (angular, Sortable) { - 'use strict'; - - - /** - * @typedef {Object} ngSortEvent - * @property {*} model List item - * @property {Object|Array} models List of items - * @property {number} oldIndex before sort - * @property {number} newIndex after sort - */ - - var expando = 'Sortable:ng-sortable'; - - angular.module('ng-sortable', []) - .constant('ngSortableVersion', '0.4.0') - .constant('ngSortableConfig', {}) - .directive('ngSortable', ['$parse', 'ngSortableConfig', function ($parse, ngSortableConfig) { - var removed, - nextSibling, - getSourceFactory = function getSourceFactory(el, scope) { - var ngRepeat = [].filter.call(el.childNodes, function (node) { - return ( - (node.nodeType === 8) && - (node.nodeValue.indexOf('ngRepeat:') !== -1) - ); - })[0]; - - if (!ngRepeat) { - // Without ng-repeat - return function () { - return null; - }; - } - - // tests: http://jsbin.com/kosubutilo/1/edit?js,output - ngRepeat = ngRepeat.nodeValue.match(/ngRepeat:\s*(?:\(.*?,\s*)?([^\s)]+)[\s)]+in\s+([^\s|]+)/); - - var itemsExpr = $parse(ngRepeat[2]); - - return function () { - return itemsExpr(scope.$parent) || []; - }; - }; - - - // Export - return { - restrict: 'AC', - scope: { ngSortable: "=?" }, - link: function (scope, $el) { - var el = $el[0], - options = angular.extend(scope.ngSortable || {}, ngSortableConfig), - watchers = [], - getSource = getSourceFactory(el, scope), - sortable - ; - - el[expando] = getSource; - - function _emitEvent(/**Event*/evt, /*Mixed*/item) { - var name = 'on' + evt.type.charAt(0).toUpperCase() + evt.type.substr(1); - var source = getSource(); - - /* jshint expr:true */ - options[name] && options[name]({ - model: item || source[evt.newIndex], - models: source, - oldIndex: evt.oldIndex, - newIndex: evt.newIndex - }); - } - - - function _sync(/**Event*/evt) { - var items = getSource(); - - if (!items) { - // Without ng-repeat - return; - } - - var oldIndex = evt.oldIndex, - newIndex = evt.newIndex; - - if (el !== evt.from) { - var prevItems = evt.from[expando](); - - removed = prevItems[oldIndex]; - - if (evt.clone) { - removed = angular.copy(removed); - prevItems.splice(Sortable.utils.index(evt.clone), 0, prevItems.splice(oldIndex, 1)[0]); - evt.from.removeChild(evt.clone); - } - else { - prevItems.splice(oldIndex, 1); - } - - items.splice(newIndex, 0, removed); - - evt.from.insertBefore(evt.item, nextSibling); // revert element - } - else { - items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]); - } - - scope.$apply(); - } - - - sortable = Sortable.create(el, Object.keys(options).reduce(function (opts, name) { - opts[name] = opts[name] || options[name]; - return opts; - }, { - onStart: function (/**Event*/evt) { - nextSibling = evt.from === evt.item.parentNode ? evt.item.nextSibling : evt.clone.nextSibling; - _emitEvent(evt); - scope.$apply(); - }, - onEnd: function (/**Event*/evt) { - _emitEvent(evt, removed); - scope.$apply(); - }, - onAdd: function (/**Event*/evt) { - _sync(evt); - _emitEvent(evt, removed); - scope.$apply(); - }, - onUpdate: function (/**Event*/evt) { - _sync(evt); - _emitEvent(evt); - }, - onRemove: function (/**Event*/evt) { - _emitEvent(evt, removed); - }, - onSort: function (/**Event*/evt) { - _emitEvent(evt); - } - })); - - $el.on('$destroy', function () { - angular.forEach(watchers, function (/** Function */unwatch) { - unwatch(); - }); - - sortable.destroy(); - - el[expando] = null; - el = null; - watchers = null; - sortable = null; - nextSibling = null; - }); - - angular.forEach([ - 'sort', 'disabled', 'draggable', 'handle', 'animation', 'group', 'ghostClass', 'filter', - 'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort' - ], function (name) { - watchers.push(scope.$watch('ngSortable.' + name, function (value) { - if (value !== void 0) { - options[name] = value; - - if (!/^on[A-Z]/.test(name)) { - sortable.option(name, value); - } - } - })); - }); - } - }; - }]); -}); From efa74e65a05a89d375edbb4859a8f219e6429287 Mon Sep 17 00:00:00 2001 From: Lebedev Konstantin Date: Tue, 5 Jul 2016 16:29:18 +0300 Subject: [PATCH 8/8] * typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5bfba40..9b4354a 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,8 @@ Demo: http://rubaxa.github.io/Sortable/ * Built using native HTML5 drag and drop API * Supports * [Meteor](https://github.com/SortableJS/meteor-sortablejs) - * [AngularJS] - * [2+](https://github.com/SortableJS/angular-sortablejs) + * AngularJS + * [2.0+](https://github.com/SortableJS/angular-sortablejs) * [1.*](https://github.com/SortableJS/angular-legacy-sortablejs) * React * [ES2015+](https://github.com/SortableJS/react-sortablejs)