v0.4.0: Saving and restoring of the sort (#54)

Gruntfile.js

@@ -5,7 +5,7 @@ module.exports = function (grunt){
 		pkg: grunt.file.readJSON('package.json'),
 
 		version: {
-			src: ['<%= pkg.exportName %>.js', 'bower.json']
+			src: ['<%= pkg.exportName %>.js', '*.json']
 		},
 
 		uglify: {

README.md

@@ -27,6 +27,7 @@ new Sortable(items);
 ```js
 new Sortable(elem, {
 	group: "name",
+	store: null, // @see Store
 	handle: ".my-handle", // Restricts sort start click/touch to the specified element
 	draggable: ".item",   // Specifies which items inside the element should be sortable
 	ghostClass: "sortable-ghost",
@@ -54,6 +55,49 @@ new Sortable(elem, {
 ```
 
 
+### Method
+
+##### toArray():`String[]`
+Serializes the sortable's item data-id's into an array of string.
+
+
+##### sort(order:`Array`)
+Sorts the elements according to the array.
+```js
+	var order = sortable.toArray();
+	sortable.sort(order.reverse()); // apply
+```
+
+
+##### destroy()
+
+
+---
+
+
+### Store
+Saving and restoring of the sort.
+
+```js
+new Sortable(el, {
+	group: "localStorage-example",
+	store: {
+
+		get: function (sortable) {
+			var order = localStorage.getItem(sortable.options.group);
+			return order ? order.split('|') : [];
+		},
+
+		set: function (sortable) {
+			var order = sortable.toArray();
+			localStorage.setItem(sortable.options.group, order.join('|'));
+		}
+	}
+})
+```
+
+
+
 ---
 
 

Sortable.js

@@ -63,11 +63,11 @@
 	;
 
 
+
 	/**
 	 * @class  Sortable
 	 * @param  {HTMLElement}  el
 	 * @param  {Object}       [options]
-	 * @constructor
 	 */
 	function Sortable(el, options){
 		this.el = el; // root element
@@ -76,6 +76,7 @@
 
 		// Defaults
 		options.group = options.group || Math.random();
+		options.store = options.store || null;
 		options.handle = options.handle || null;
 		options.draggable = options.draggable || el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*');
 		options.ghostClass = options.ghostClass || 'sortable-ghost';
@@ -131,10 +132,13 @@
 		_css(el, '-ms-touch-action', 'none');
 
 		touchDragOverListeners.push(this._onDragOver);
+
+		// Restore sorting
+		options.store && this.sort(options.store.get(this));
 	}
 
 
-	Sortable.prototype = {
+	Sortable.prototype = /** @lends Sortable.prototype */ {
 		constructor: Sortable,
 
 
@@ -406,6 +410,7 @@
 						// Update event
 						dragEl.dispatchEvent(_createEvent('update', dragEl));
 					}
+
 					dragEl.dispatchEvent(_createEvent('stop', dragEl));
 				}
 
@@ -422,10 +427,57 @@
 				lastCSS =
 
 				activeGroup = null;
+
+				// Save sorting
+				this.options.store && this.options.store.set(this);
+			}
+		},
+
+
+		/**
+		 * Serializes the item into an array of string.
+		 * @returns {String[]}
+		 */
+		toArray: function () {
+			var order = [],
+				el,
+				children = this.el.children,
+				i = 0,
+				n = children.length
+			;
+
+			for (; i < n; i++) {
+				el = children[i];
+				order.push(el.getAttribute('data-id') || _generateId(el));
+			}
+
+			return order;
+		},
+
+
+		/**
+		 * Sorts the elements according to the array.
+		 * @param  {String[]}  order  order of the items
+		 */
+		sort: function (order) {
+			var items = {}, el = this.el;
+
+			this.toArray().forEach(function (id, i) {
+				items[id] = el.children[i];
+			});
+
+			order.forEach(function (id) {
+				if (items[id]) {
+					el.removeChild(items[id]);
+					el.appendChild(items[id]);
 				}
+			});
 		},
 
 
+		/**
+		 * Destroy
+		 */
 		destroy: function () {
 			var el = this.el, options = this.options;
 
@@ -455,6 +507,7 @@
 		}
 	};
 
+
 	function _bind(ctx, fn){
 		var args = slice.call(arguments, 2);
 		return	fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function (){
@@ -567,6 +620,23 @@
 	}
 
 
+	/**
+	 * Generate id
+	 * @param   {HTMLElement} el
+	 * @returns {String}
+	 * @private
+	 */
+	function _generateId(el) {
+		var str = el.innerHTML + el.className + el.src,
+			i = str.length,
+			sum = 0
+		;
+		while (i--) {
+			sum += str.charCodeAt(i);
+		}
+		return sum.toString(36);
+	}
+
 
 	// Export utils
 	Sortable.utils = {
@@ -580,7 +650,8 @@
 	};
 
 
-	Sortable.version = '0.3.0';
+	Sortable.version = '0.4.0';
+
 
 	// Export
 	return	Sortable;

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "Sortable",
   "main": "Sortable.js",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "homepage": "http://rubaxa.github.io/Sortable/",
   "authors": [
     "RubaXa <ibnRubaXa@gmail.com>"

component.json

@@ -1,7 +1,7 @@
 {
   "name": "Sortable",
   "main": "Sortable.js",
-  "version": "0.1.9",
+  "version": "0.4.0",
   "homepage": "http://rubaxa.github.io/Sortable/",
   "repo": "RubaXa/Sortable",
   "authors": [

index.html

@@ -309,8 +309,18 @@ sort.destroy();
 			}
 
 
-			new Sortable(foo, {
+			window.x = new Sortable(foo, {
 				group: "words",
+				store: {
+					get: function (sortable) {
+						var order = localStorage.getItem(sortable.options.group);
+						return order ? order.split('|') : [];
+					},
+					set: function (sortable) {
+						var order = sortable.toArray();
+						localStorage.setItem(sortable.options.group, order.join('|'));
+					}
+				},
 				onAdd: function (evt){ console.log('onAdd.foo:', evt.item); },
 				onUpdate: function (evt){ console.log('onUpdate.foo:', evt.item); },
 				onRemove: function (evt){ console.log('onRemove.foo:', evt.item); },
@@ -318,6 +328,7 @@ sort.destroy();
 				onEnd: function(evt){ console.log('onEnd.foo:', evt.item);}
 			});
 
+
 			new Sortable(bar, {
 				group: "words",
 				onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sortable",
   "exportName": "Sortable",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "devDependencies": {
     "grunt": "*",
     "grunt-version": "*",