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

use tabs instead of spaces

pull/595/head
Slavic Dragovtev 9 years ago
parent
4ad0653869
commit
d779c3910d
1 changed files with 154 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 308
      react-sortable-mixin.js

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

@ -4,160 +4,160 @@
*/ */
(function (factory) { (function (factory) {
'use strict'; 'use strict';
if (typeof module != 'undefined' && typeof module.exports != 'undefined') { if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
module.exports = factory(require('./Sortable')); module.exports = factory(require('./Sortable'));
} }
else if (typeof define === 'function' && define.amd) { else if (typeof define === 'function' && define.amd) {
define(['./Sortable'], factory); define(['./Sortable'], factory);
} }
else { else {
/* jshint sub:true */ /* jshint sub:true */
window['SortableMixin'] = factory(Sortable); window['SortableMixin'] = factory(Sortable);
} }
})(function (/** Sortable */Sortable) { })(function (/** Sortable */Sortable) {
'use strict'; 'use strict';
var _nextSibling; var _nextSibling;
var _activeComponent; var _activeComponent;
var _defaultOptions = { var _defaultOptions = {
ref: 'list', ref: 'list',
model: 'items', model: 'items',
animation: 100, animation: 100,
onStart: 'handleStart', onStart: 'handleStart',
onEnd: 'handleEnd', onEnd: 'handleEnd',
onAdd: 'handleAdd', onAdd: 'handleAdd',
onUpdate: 'handleUpdate', onUpdate: 'handleUpdate',
onRemove: 'handleRemove', onRemove: 'handleRemove',
onSort: 'handleSort', onSort: 'handleSort',
onFilter: 'handleFilter', onFilter: 'handleFilter',
onMove: 'handleMove' onMove: 'handleMove'
}; };
function _getModelName(component) { function _getModelName(component) {
return component.sortableOptions && component.sortableOptions.model || _defaultOptions.model; return component.sortableOptions && component.sortableOptions.model || _defaultOptions.model;
} }
function _getModelItems(component) { function _getModelItems(component) {
var name = _getModelName(component), var name = _getModelName(component),
items = component.state && component.state[name] || component.props[name]; items = component.state && component.state[name] || component.props[name];
return items.slice(); return items.slice();
} }
function _extend(dst, src) { function _extend(dst, src) {
for (var key in src) { for (var key in src) {
if (src.hasOwnProperty(key)) { if (src.hasOwnProperty(key)) {
dst[key] = src[key]; dst[key] = src[key];
} }
} }
return dst; return dst;
} }
/** /**
* Simple and easy mixin-wrapper for rubaxa/Sortable library, in order to * Simple and easy mixin-wrapper for rubaxa/Sortable library, in order to
* make reorderable drag-and-drop lists on modern browsers and touch devices. * make reorderable drag-and-drop lists on modern browsers and touch devices.
* *
* @mixin * @mixin
*/ */
var SortableMixin = { var SortableMixin = {
sortableMixinVersion: '0.1.0', sortableMixinVersion: '0.1.0',
/** /**
* @type {Sortable} * @type {Sortable}
* @private * @private
*/ */
_sortableInstance: null, _sortableInstance: null,
componentDidMount: function () { componentDidMount: function () {
var DOMNode, options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}), var DOMNode, options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}),
copyOptions = _extend({}, options), copyOptions = _extend({}, options),
emitEvent = function (/** string */type, /** Event */evt) { emitEvent = function (/** string */type, /** Event */evt) {
var method = this[options[type]]; var method = this[options[type]];
method && method.call(this, evt, this._sortableInstance); method && method.call(this, evt, this._sortableInstance);
}.bind(this); }.bind(this);
// Bind callbacks so that "this" refers to the component // Bind callbacks so that "this" refers to the component
'onStart onEnd onAdd onSort onUpdate onRemove onFilter onMove'.split(' ').forEach(function (/** string */name) { 'onStart onEnd onAdd onSort onUpdate onRemove onFilter onMove'.split(' ').forEach(function (/** string */name) {
copyOptions[name] = function (evt) { copyOptions[name] = function (evt) {
if (name === 'onStart') { if (name === 'onStart') {
_nextSibling = evt.item.nextElementSibling; _nextSibling = evt.item.nextElementSibling;
_activeComponent = this; _activeComponent = this;
} }
else if (name === 'onAdd' || name === 'onUpdate') { else if (name === 'onAdd' || name === 'onUpdate') {
evt.from.insertBefore(evt.item, _nextSibling); evt.from.insertBefore(evt.item, _nextSibling);
var newState = {}, var newState = {},
remoteState = {}, remoteState = {},
oldIndex = evt.oldIndex, oldIndex = evt.oldIndex,
newIndex = evt.newIndex, newIndex = evt.newIndex,
items = _getModelItems(this), items = _getModelItems(this),
remoteItems, remoteItems,
item; item;
if (name === 'onAdd') { if (name === 'onAdd') {
remoteItems = _getModelItems(_activeComponent); remoteItems = _getModelItems(_activeComponent);
item = remoteItems.splice(oldIndex, 1)[0]; item = remoteItems.splice(oldIndex, 1)[0];
items.splice(newIndex, 0, item); items.splice(newIndex, 0, item);
remoteState[_getModelName(_activeComponent)] = remoteItems; remoteState[_getModelName(_activeComponent)] = remoteItems;
} }
else { else {
items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]); items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
} }
newState[_getModelName(this)] = items; newState[_getModelName(this)] = items;
if (copyOptions["stateHandler"]) { if (copyOptions["stateHandler"]) {
this[copyOptions["stateHandler"]](newState); this[copyOptions["stateHandler"]](newState);
} else { } else {
this.setState(newState); this.setState(newState);
} }
(this !== _activeComponent) && _activeComponent.setState(remoteState); (this !== _activeComponent) && _activeComponent.setState(remoteState);
} }
setTimeout(function () { setTimeout(function () {
emitEvent(name, evt); emitEvent(name, evt);
}, 0); }, 0);
}.bind(this); }.bind(this);
}, this); }, this);
DOMNode = this.getDOMNode() ? (this.refs[options.ref] || this).getDOMNode() : this.refs[options.ref] || 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 */ /** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */
this._sortableInstance = Sortable.create(DOMNode, copyOptions); this._sortableInstance = Sortable.create(DOMNode, copyOptions);
}, },
componentWillReceiveProps: function (nextProps) { componentWillReceiveProps: function (nextProps) {
var newState = {}, var newState = {},
modelName = _getModelName(this), modelName = _getModelName(this),
items = nextProps[modelName]; items = nextProps[modelName];
if (items) { if (items) {
newState[modelName] = items; newState[modelName] = items;
this.setState(newState); this.setState(newState);
} }
}, },
componentWillUnmount: function () { componentWillUnmount: function () {
this._sortableInstance.destroy(); this._sortableInstance.destroy();
this._sortableInstance = null; this._sortableInstance = null;
} }
}; };
// Export // Export
return SortableMixin; return SortableMixin;
}); });

Write Preview
Loading…
Cancel
Save