#217: + linked lists

index.html

@@ -210,14 +210,6 @@
 	</div>
 
 
-	<!-- React mixin -->
-	<a name="react"></a>
-	<div class="container" style="margin-top: 100px">
-		<div id="react-box" style="margin-left: 30px;"></div>
-		<div style="clear: both"></div>
-	</div>
-
-
 	<!-- Code example -->
 	<a name="c"></a>
 	<div class="container" style="margin-top: 100px">

react-sortable-mixin.js

@@ -19,30 +19,12 @@
 })(function (/** Sortable */Sortable) {
 	'use strict';
 
+	var _nextSibling;
 
-	/**
+	var _activeComponent;
-	 * 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.0.0',
-
-		/**
-		 * @type {Sortable}
-		 * @private
-		 */
-		_sortableInstance: null,
 
 
-		/**
+	var _defaultOptions = {
-		 * Sortable options
-		 * @returns {object}
-		 */
-		getDefaultProps: function () {
-			return {
-				sortable: {
 		ref: 'list',
 		model: 'items',
 
@@ -54,65 +36,100 @@
 		onRemove: 'handleRemove',
 		onSort: 'handleSort',
 		onFilter: 'handleFilter'
-				}
 	};
-		},
 
 
-		componentDidMount: function () {
+	function _getModelName(component) {
-			var nextSibling,
+		return component.sortableOptions && component.sortableOptions.model || _defaultOptions.model;
-				sortableProps = this.props.sortable,
+	}
-				sortableOptions = {},
-
-				callMethod = function (/** string */type, /** Event */evt) {
-					var method = this[sortableProps[type]];
-					method && method.call(this, evt, this._sortableInstance);
-				}.bind(this);
 
 
-			// Pass through unrecognized options
+	function _getModelItems(component) {
-			for (var key in sortableProps) {
+		return component.state[_getModelName(component)].slice();
-				sortableOptions[key] = sortableProps[key];
 	}
 
 
-			// Bind callbacks so that "this" refers to the component
+	function _extend(dst, src) {
-			'onEnd onAdd onUpdate onRemove onFilter'.split(' ').forEach(function (/** string */name) {
+		for (var key in src) {
-				if (sortableProps[name]) {
+			if (src.hasOwnProperty(key)) {
-					sortableOptions[name] = callMethod.bind(this, name);
+				dst[key] = src[key];
+			}
 		}
-			}.bind(this));
 
+		return dst;
+	}
 
-			sortableOptions.onStart = function (/** Event */evt) {
-				nextSibling = evt.item.nextSibling;
-				callMethod('onStart', evt);
-			}.bind(this);
 
+	/**
+	 * 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',
 
-			sortableOptions.onSort = function (/** Event */evt) {
-				evt.from.insertBefore(evt.item, nextSibling || null);
 
-				var modelName = sortableProps.model,
+		/**
-					newState = {},
+		 * @type {Sortable}
-					items = this.state[modelName];
+		 * @private
+		 */
+		_sortableInstance: null,
 
-				if (items) {
-					items = items.slice(); // clone
-					items.splice(evt.newIndex, 0, items.splice(evt.oldIndex, 1)[0]);
 
-					newState[modelName] = items;
+		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);
 					}
 
-				callMethod('onSort', evt);
+					setTimeout(function () {
+						emitEvent(name, evt);
+					}, 0);
 				}.bind(this);
+			}, this);
 
 
 			/** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */
-			if (!sortableProps.ref || this.refs[sortableProps.ref]) {
+			this._sortableInstance = Sortable.create((this.refs[options.ref] || this).getDOMNode(), copyOptions);
-				this._sortableInstance = Sortable.create((this.refs[sortableProps.ref] || this).getDOMNode(), sortableOptions);
-			}
 		},
 
 

st/app.js

@@ -195,43 +195,6 @@
 				$scope.sortableConfig['on' + name] = console.log.bind(console, name);
 			});
 		}]);
-
-
-
-	// React
-	loadScripts({
-		'React': '//fb.me/react-0.12.2.js',
-		'SortableMixin': 'react-sortable-mixin.js'
-	}, function (React, SortableMixin) {
-		var SortableList = React.createClass({
-			mixins: [SortableMixin],
-
-			getInitialState: function() {
-				return {
-					items: [
-						'Mixin',
-						'Sortable'
-					]
-				};
-			},
-
-			render: function() {
-				return React.DOM.div(null,
-					React.DOM.h4({ children: 'React mixin', className: 'layer title title_xl', style: { marginBottom: 0 } }),
-					React.DOM.div({ style: { width: '30%', marginLeft: '10px', cursor: 'move' }, className: 'block__list_words' },
-						React.DOM.ul({
-							ref: 'list',
-							children: this.state.items.map(function (v) {
-								return React.DOM.li(null, v);
-							})
-						})
-					)
-				);
-			}
-		});
-
-		React.render(React.createElement(SortableList, {}), byId('react-box'));
-	});
 })();