Merge branch 'dev' into gh-pages

Gruntfile.js

@@ -27,7 +27,7 @@ module.exports = function (grunt) {
 			}
 		},
 
-		shell: {
+		exec: {
 			'meteor-test': {
 				command: 'meteor/runtests.sh'
 			},
@@ -42,15 +42,12 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-version');
 	grunt.loadNpmTasks('grunt-contrib-jshint');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
-	grunt.loadNpmTasks('grunt-shell');
+	grunt.loadNpmTasks('grunt-exec');
 
 	// Meteor tasks
-	grunt.registerTask('meteor-test', 'shell:meteor-test');
-	grunt.registerTask('meteor-publish', 'shell:meteor-publish');
-	// ideally we'd run tests before publishing, but the chances of tests breaking (given that
-	// Meteor is orthogonal to the library) are so small that it's not worth the maintainer's time
-	// grunt.regsterTask('meteor', ['shell:meteor-test', 'shell:meteor-publish']);
-	grunt.registerTask('meteor', 'shell:meteor-publish');
+	grunt.registerTask('meteor-test', 'exec:meteor-test');
+	grunt.registerTask('meteor-publish', 'exec:meteor-publish');
+	grunt.registerTask('meteor', ['meteor-test', 'meteor-publish']);
 
 	grunt.registerTask('tests', ['jshint']);
 	grunt.registerTask('default', ['tests', 'version', 'uglify']);

README.md

@@ -12,7 +12,8 @@ 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 [AngularJS](#ng) and and any CSS library, e.g. [Bootstrap](#bs)
+ * Supports [Meteor](meteor/README.md) and [AngularJS](#ng)
+ * Supports any CSS library, e.g. [Bootstrap](#bs)
  * Simple API
  * No jQuery
 
@@ -387,11 +388,29 @@ Demo: http://jsbin.com/luxero/2/edit?html,js,output
 </script>
 ```
 
+
 ---
 
 
+### Static methods & properties
+
+
+
+##### Sortable.create(el:`HTMLElement`[, options:`Object`]):`Sortable`
+Create new instance.
+
+
+---
+
+
+##### Sortable.active:`Sortable`
+Link to the active instance.
+
+
+---
+
 
-### Sortable.utils
+##### Sortable.utils
 * on(el`:HTMLElement`, event`:String`, fn`:Function`) — attach an event handler function
 * off(el`:HTMLElement`, event`:String`, fn`:Function`) — remove an event handler
 * css(el`:HTMLElement`)`:Object` — get the values of all the CSS properties
@@ -400,6 +419,7 @@ Demo: http://jsbin.com/luxero/2/edit?html,js,output
 * css(el`:HTMLElement`, props`:Object`) — set more CSS properties
 * find(ctx`:HTMLElement`, tagName`:String`[, iterator`:Function`])`:Array` — get elements by tag name
 * bind(ctx`:Mixed`, fn`:Function`)`:Function` — Takes a function and returns a new one that will always have a particular context
+* is(el`:HTMLElement`, selector`:String`)`:Boolean` — check the current matched set of elements against a selector
 * closest(el`:HTMLElement`, selector`:String`[, ctx`:HTMLElement`])`:HTMLElement|Null` — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
 * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element
 

Sortable.js

@@ -104,9 +104,7 @@
 			setData: function (dataTransfer, dragEl) {
 				dataTransfer.setData('Text', dragEl.textContent);
 			}
-		},
-
-		group = options.group;
+		};
 
 
 		// Set default options
@@ -115,6 +113,8 @@
 		}
 
 
+		var group = options.group;
+
 		if (!group || typeof group != 'object') {
 			group = options.group = { name: group };
 		}
@@ -165,20 +165,27 @@
 		constructor: Sortable,
 
 
-		_applyEffects: function () {
+		_dragStarted: function () {
+			// Apply effect
 			_toggleClass(dragEl, this.options.ghostClass, true);
+
+			Sortable.active = this;
+
+			// Drag start event
+			_dispatchEvent(rootEl, 'start', dragEl, rootEl, startIndex);
 		},
 
 
 		_onTapStart: function (/**Event|TouchEvent*/evt) {
-			var touch = evt.touches && evt.touches[0],
+			var type = evt.type,
+				touch = evt.touches && evt.touches[0],
 				target = (touch || evt).target,
 				originalTarget = target,
 				options =  this.options,
 				el = this.el,
 				filter = options.filter;
 
-			if (evt.type === 'mousedown' && evt.button !== 0 || options.disabled) {
+			if (type === 'mousedown' && evt.button !== 0 || options.disabled) {
 				return; // only left button or enabled
 			}
 
@@ -215,14 +222,11 @@
 				}
 			}
 
-			// IE 9 Support
-			if (target && evt.type == 'selectstart') {
-				if (target.tagName != 'A' && target.tagName != 'IMG') {
-					target.dragDrop();
-				}
-			}
-
+			// Prepare `dragstart`
 			if (target && !dragEl && (target.parentNode === el)) {
+				// IE 9 Support
+				(type === 'selectstart') && target.dragDrop();
+
 				tapEvt = evt;
 
 				rootEl = this.el;
@@ -269,17 +273,11 @@
 				}
 
 
-				// Drag start event
-				_dispatchEvent(rootEl, 'start', dragEl, rootEl, startIndex);
-
-
 				if (activeGroup.pull == 'clone') {
 					cloneEl = dragEl.cloneNode(true);
 					_css(cloneEl, 'display', 'none');
 					rootEl.insertBefore(cloneEl, dragEl);
 				}
-
-				Sortable.active = this;
 			}
 		},
 
@@ -288,19 +286,29 @@
 				_css(ghostEl, 'display', 'none');
 
 				var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),
-					parent = target.parentNode,
+					parent = target && target.parentNode,
 					groupName = this.options.group.name,
 					i = touchDragOverListeners.length;
 
-				if (parent && (' ' + parent[expando] + ' ').indexOf(groupName) > -1) {
-					while (i--) {
-						touchDragOverListeners[i]({
-							clientX: touchEvt.clientX,
-							clientY: touchEvt.clientY,
-							target: target,
-							rootEl: parent
-						});
+				if (parent) {
+					do {
+						if ((' ' + parent[expando] + ' ').indexOf(groupName) > -1) {
+							while (i--) {
+								touchDragOverListeners[i]({
+									clientX: touchEvt.clientX,
+									clientY: touchEvt.clientY,
+									target: target,
+									rootEl: parent
+								});
+							}
+
+							break;
+						}
+
+						target = parent; // store last element
 					}
+					/* jshint boss:true */
+					while (parent = parent.parentNode);
 				}
 
 				_css(ghostEl, 'display', '');
@@ -370,8 +378,6 @@
 				_on(document, 'drop', this);
 			}
 
-			setTimeout(this._applyEffects, 0);
-
 			scrollEl = options.scroll;
 
 			if (scrollEl === true) {
@@ -386,6 +392,8 @@
 				/* jshint boss:true */
 				} while (scrollEl = scrollEl.parentNode);
 			}
+
+			setTimeout(this._dragStarted, 0);
 		},
 
 		_onDrag: _throttle(function (/**Event*/evt) {
@@ -601,7 +609,7 @@
 					_disableDraggable(dragEl);
 					_toggleClass(dragEl, this.options.ghostClass, false);
 
-					if (!rootEl.contains(dragEl)) {
+					if (rootEl !== dragEl.parentNode) {
 						// drag from one list and drop into another
 						_dispatchEvent(dragEl.parentNode, 'sort', dragEl, rootEl, startIndex, newIndex);
 						_dispatchEvent(rootEl, 'sort', dragEl, rootEl, startIndex, newIndex);
@@ -621,7 +629,7 @@
 					}
 
 					// Drag end event
-					_dispatchEvent(rootEl, 'end', dragEl, rootEl, startIndex, newIndex);
+					Sortable.active && _dispatchEvent(rootEl, 'end', dragEl, rootEl, startIndex, newIndex);
 				}
 
 				// Set NULL
@@ -641,7 +649,7 @@
 				Sortable.active = null;
 
 				// Save sorting
-				this.save()
+				this.save();
 			}
 		},
 
@@ -975,7 +983,7 @@
 	};
 
 
-	Sortable.version = '0.7.3';
+	Sortable.version = '1.0.0';
 
 
 	/**

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "Sortable",
   "main": "Sortable.js",
-  "version": "0.7.3",
+  "version": "1.0.0",
   "homepage": "http://rubaxa.github.io/Sortable/",
   "authors": [
     "RubaXa <[email protected]>"

component.json

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

index.html

@@ -8,7 +8,7 @@
 	<title>Sortable. No jQuery.</title>
 
 	<meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, effects, rubaxa"/>
-	<meta name="description" content="Sortable - is a minimalist JavaScript library for modern browsers and touch devices (No jQuery). Support AngularJS."/>
+	<meta name="description" content="Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor and AngularJS and any CSS library, e.g. Bootstrap."/>
 	<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
 
 	<link href="//rubaxa.github.io/Ply/ply.css" rel="stylesheet" type="text/css"/>