mirror of https://github.com/RubaXa/Sortable.git
RubaXa
10 years ago
10 changed files with 486 additions and 133 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,147 @@
|
||||
/** |
||||
* @author RubaXa <trash@rubaxa.org> |
||||
* @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' |
||||
}; |
||||
|
||||
|
||||
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.0', |
||||
|
||||
|
||||
/** |
||||
* @type {Sortable} |
||||
* @private |
||||
*/ |
||||
_sortableInstance: null, |
||||
|
||||
|
||||
componentDidMount: function () { |
||||
var 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'.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; |
||||
this.setState(newState); |
||||
(this !== _activeComponent) && _activeComponent.setState(remoteState); |
||||
} |
||||
|
||||
setTimeout(function () { |
||||
emitEvent(name, evt); |
||||
}, 0); |
||||
}.bind(this); |
||||
}, this); |
||||
|
||||
|
||||
/** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */ |
||||
this._sortableInstance = Sortable.create((this.refs[options.ref] || this).getDOMNode(), copyOptions); |
||||
}, |
||||
|
||||
|
||||
componentWillUnmount: function () { |
||||
this._sortableInstance.destroy(); |
||||
this._sortableInstance = null; |
||||
} |
||||
}; |
||||
|
||||
|
||||
// Export
|
||||
return SortableMixin; |
||||
}); |
||||
Loading…
Reference in new issue