+ initial

9 years ago · 54ec83bb66
4 changed files with 199 additions and 0 deletions
--- a/tests/index.html
+++ b/tests/index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	<meta property="og:image" content="/st/og-image.png"/>
+
+	<title>Sortable :: Tests</title>
+</head>
+<body>
+
+	<div id="canvas">
+		<ul id="simple">
+			<li>item 1</li>
+			<li>item 2</li>
+			<li>item 3</li>
+		</ul>
+	</div>
+
+	<script src="./src/raf.js"></script>
+	<script src="./src/simulate.js"></script>
+
+
+	<script src="../Sortable.js"></script>
+	<script src="./sortable.tests.js"></script>
+</body>
+</html>
--- a/tests/sortable.tests.js
+++ b/tests/sortable.tests.js
@ -0,0 +1,17 @@
+'use strict';
+
+Sortable.create(simple);
+
+simulateDrag({
+	from: {
+		el: '#simple',
+		index: 0
+	},
+
+	to: {
+		el: '#simple',
+		index: 'last'
+	}
+}, function () {
+
+});
--- a/tests/src/raf.js
+++ b/tests/src/raf.js
@ -0,0 +1,38 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+(function requestAnimationFramePolyfill() {
+	'use strict';
+
+	var lastTime = 0;
+	var vendors = ['ms', 'moz', 'webkit', 'o'];
+
+	for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+		window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
+			|| window[vendors[x] + 'CancelRequestAnimationFrame'];
+	}
+
+	if (!window.requestAnimationFrame) {
+		window.requestAnimationFrame = function (callback, element) {
+			var currTime = new Date().getTime();
+			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+			var id = window.setTimeout(function () {
+					callback(currTime + timeToCall);
+				},
+				timeToCall);
+			lastTime = currTime + timeToCall;
+			return id;
+		};
+	}
+
+	if (!window.cancelAnimationFrame) {
+		window.cancelAnimationFrame = function (id) {
+			clearTimeout(id);
+		};
+	}
+}());
--- a/tests/src/simulate.js
+++ b/tests/src/simulate.js
@ -0,0 +1,117 @@
+(function () {
+	'use strict';
+
+	function simulateEvent(el, type, options) {
+		var event;
+		var ownerDocument = el.ownerDocument;
+
+		options = options || {};
+
+		if (/^mouse/.test(type)) {
+			event = ownerDocument.createEvent('MouseEvents');
+			event.initMouseEvent(type, true, true, ownerDocument.defaultView,
+				options.button, options.screenX, options.screenY, options.clientX, options.clientY,
+				options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
+		} else {
+			event = ownerDocument.createEvent('CustomEvent');
+
+			event.initCustomEvent(type, true, true, ownerDocument.defaultView,
+				options.button, options.screenX, options.screenY, options.clientX, options.clientY,
+				options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
+
+			event.dataTransfer = {
+				data: {},
+
+				setData: function (type, val) {
+					this.data[type] = val;
+				},
+
+				getData: function (type) {
+					return this.data[type];
+				}
+			};
+		}
+
+		if (el.dispatchEvent) {
+			el.dispatchEvent(event);
+		} else if (el.fireEvent) {
+			el.fireEvent('on' + type, event);
+		}
+
+		return event;
+	}
+
+	function getTraget(target) {
+		var children = document.getElementById(target.el.substr(1)).children;
+		return (
+			children[target.index] ||
+			children[target.index === 'first' ? 0 : -1] ||
+			children[target.index === 'last' ? children.length - 1 : -1]
+		);
+	}
+
+	function getRect(el) {
+		var rect = el.getBoundingClientRect();
+		var width = rect.right - rect.left;
+		var height = rect.bottom - rect.top;
+
+		return {
+			x: rect.left,
+			y: rect.top,
+			cx: rect.left + width/2,
+			cy: rect.top + height/2,
+			w: width,
+			h: height,
+			hw: width/2,
+			wh: height/2
+		}
+	}
+
+	function simulateDrag(options, callback) {
+		var fromEl = getTraget(options.from);
+		var toEl = getTraget(options.to);
+
+		var fromRect = getRect(fromEl);
+		var toRect = getRect(toEl);
+
+		var dotEl = document.createElement('div');
+
+		dotEl.style.cssText = 'position: fixed; background: red; width: 10px; height: 10px; opacity: .4; margin: -5px 0 0 -5px; transition: all .3s; border-radius: 100%;';
+		document.body.appendChild(dotEl);
+
+		var startTime = new Date().getTime();
+		var duration = options.duration || 1000;
+
+		simulateEvent(fromEl, 'mousedown', {button: 0});
+		simulateEvent(toEl, 'dragstart');
+
+		requestAnimationFrame(function loop() {
+			var progress = (new Date().getTime() - startTime)/duration;
+			var x = fromRect.cx + (toRect.cx - fromRect.cx) * progress;
+			var y = fromRect.cy + (toRect.cy - fromRect.cy) * progress;
+			var overEl = fromEl.ownerDocument.elementFromPoint(x, y);
+
+			dotEl.style.display = 'none';
+			dotEl.style.left = x + 'px';
+			dotEl.style.top = y + 'px';
+
+			overEl && simulateEvent(overEl, 'dragover', {
+				clientX: x,
+				clientY: y
+			});
+
+			if (progress < 1) {
+				dotEl.style.display = '';
+				requestAnimationFrame(loop);
+			} else {
+				simulateEvent(toEl, 'drop');
+				callback();
+			}
+		});
+	}
+
+
+	// Export
+	window.simulateEvent = simulateEvent;
+	window.simulateDrag = simulateDrag;
+})();