added sorting demo

docs/index.html

@@ -124,7 +124,7 @@ <h4><code>options.onMouseUp</code></h4>
 		<section class="demo non-code" id="demo">
 			<h2>Demo</h2>
 
-			<h3>Basic</h3>
+			<h3>Basic usage</h3>
 			<div class="demo__wrapper">
 				<div class="demo__actions">
 					<button>Standard</button><button>Constrain</button><button>Relative to</button><button>Events</button>
@@ -162,6 +162,34 @@ <h3>Magnifier</h3>
 				</p>
 			</div>
 
+			<h3>Sorting</h3>
+			<div class="sorting-demo">
+				<div class="sorting-demo__wrapper">
+					<span class="sorting-demo__corner top-left">
+						<span data-name="top left" class="sorting-demo__progress"></span>
+					</span>
+					<span class="sorting-demo__corner top-right">
+						<span data-name="top right" class="sorting-demo__progress"></span>	
+					</span>
+					<span class="sorting-demo__corner bottom-left">
+						<span data-name="bottom left" class="sorting-demo__progress"></span>	
+					</span>
+					<span class="sorting-demo__corner bottom-right">
+						<span data-name="bottom right" class="sorting-demo__progress"></span>	
+					</span>
+
+					<span class="sorting-demo__sortable one"></span>
+					<span class="sorting-demo__sortable two"></span>
+					<span class="sorting-demo__sortable three"></span>
+					<span class="sorting-demo__sortable four"></span>
+				</div>
+			</div>
+
+			<div class="sorting-demo__options">
+				<a href="https://gist.github.com/catc/a7588f6bae341bbc7c2dbc941e744f18" target="_blank" class="sorting-demo__code-link">View code</a>
+				<button class="sorting-demo__reset-button">Reset demo</button>
+			</div>
+
 		</section>
 
 

docs/js/main.js

@@ -1,6 +1,23 @@
 import highlight from 'highlight.js';
 import displace from 'dist/displace.min.js';
 
+if (!Array.prototype.find) {
+	Array.prototype.find = function(predicate) {
+		var list = Object(this);
+		var length = list.length >>> 0;
+		var thisArg = arguments[1];
+		var value;
+
+		for (var i = 0; i < length; i++) {
+			value = list[i];
+			if (predicate.call(thisArg, value, i, list)) {
+				return value;
+			}
+		}
+		return undefined;
+	};
+}
+
 // init all highlighted code areas
 highlight.initHighlightingOnLoad();
 
@@ -34,7 +51,7 @@ displace(el, options);
 const el = document.querySelector('.moveable');
 const options = {
     onMouseDown: function(el){
-    	el.className = el.className + ' active';
+    	el.className += ' active';
     },
     onMouseUp: function(el){
     	el.className = el.className.replace('active', '');
@@ -141,3 +158,92 @@ function updatePreview(el){
 }
 
 
+
+
+// sorting example
+let displaceInstances;
+function initSortingDemo(){
+	// clear any existing displace instances
+	try {
+		displaceInstances.forEach(d => d.destroy());
+	} catch (e){}
+
+	const circleSize = 40;
+	const positions = {};
+	const progress = {};
+
+	// setup corner coordinates
+	['.top-left', '.top-right', '.bottom-left', '.bottom-right'].map(corner => {
+		const el = document.querySelector(corner);
+		const position = {
+			top: el.offsetTop,
+			left: el.offsetLeft,
+			// ensure that circle is completely in the box
+			bottom: el.offsetTop + el.offsetHeight - circleSize,
+			right: el.offsetLeft + el.offsetWidth - circleSize
+		};
+		const key = corner.replace(/\./, '').replace(/-/, ' ');
+		progress[key] = 0;
+		return positions[key] = position;
+	});
+
+	// update corner progress text
+	updateCorners();
+
+	// set up circles
+	displaceInstances = ['.one', '.two', '.three', '.four'].map(selector => {
+		const el = document.querySelector(selector);
+		el.style.left = genPos(105, 445) + 'px';
+		el.style.top = genPos(105, 245) + 'px';
+		el.className = el.className.replace('inactive', '');
+		return displace(el, {
+			onMouseDown: function(el){
+				el.className += ' active';
+			},
+			onMouseUp: function(el){
+				el.className = el.className.replace('active', '');
+				checkPosition(el);
+			},
+		});
+
+		function genPos(min, max){
+			return Math.floor(Math.random()*(max-min+1)+min);
+		}
+	});
+
+	function checkPosition(el){
+		const x = el.offsetLeft;
+		const y = el.offsetTop;
+
+		Object.keys(positions).forEach(key => {
+			const vals = positions[key];
+
+			if ( between(x, vals.left, vals.right) && between(y, vals.top, vals.bottom) ){
+				progress[key] = progress[key] + 1;
+				updateCorners();
+
+				// disable element
+				el.className += ' inactive';
+				const d = displaceInstances.find(d => {
+					return d.el === el;
+				});
+				d.destroy();
+			}
+		});
+
+		function between(val, min, max){
+			return val >= min && val <= max;
+		}
+	}
+
+	function updateCorners(){
+		Object.keys(positions).forEach(key => {
+			const query =  `[data-name='${key}']`;
+			const el = document.querySelector(query);
+			el.innerHTML = `Contains: <strong>${progress[key]}</strong>`;
+		});
+	}
+}
+initSortingDemo();
+
+document.querySelector('.sorting-demo__reset-button').addEventListener('click', initSortingDemo, false);

docs/scss/basic/_global.scss

@@ -41,6 +41,10 @@ button {
 	text-shadow: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
+    font-family: $font-main;
+    &:not(:disabled){
+        cursor: pointer;
+    }
 	&:hover, &:focus, &:active {
 		// border: none;
 		// background:none;

docs/scss/main/_basic-demo.scss

@@ -42,7 +42,6 @@
 	&__boxes {
 		position: relative;
 		height: 400px;
-		// background: $c3;
 		background: $c2;
 	}
 

docs/scss/main/_magnifier-demo.scss

@@ -26,13 +26,12 @@
 
 	&__zoom-preview {
 		display: inline-block;
-		background: yellow;
 		width: 200px;
 		float: right;
 		position: relative;
 		height: 100%;
 
-		border-left: 3px solid white;
+		border-left: 3px solid #f7f7f7;
 		box-sizing: border-box;
 	}
 

docs/scss/main/_sorting-demo.scss

@@ -0,0 +1,118 @@
+
+.sorting-demo {
+	width: 600px;
+	background: rgba(255, 193, 7, 0.17);
+	* {
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		box-sizing: border-box;
+	}
+
+	&__wrapper {
+		height: 400px;
+		position: relative;
+		border-radius: 2px;
+	}
+	&__corner {
+		width: 100px;
+		height: 100px;
+		display: inline-block;
+		position: absolute;
+		background: $c1;
+		border: 2px solid $c2;
+		border-radius: 2px;
+
+		&.top-left {
+			top: 0;
+			left: 0;
+		}
+		&.top-right {
+			top: 0;
+			right: 0;
+		}
+		&.bottom-left {
+			bottom: 0;
+			left: 0;
+		}
+		&.bottom-right {
+			bottom: 0;
+			right: 0;
+		}
+	}
+	&__sortable {
+		$size: 40px;
+		width: $size;
+		height: $size;
+		display: inline-block;
+		border-radius: 99px;
+		position: absolute;
+		top: 0;
+		left: 0;
+		cursor: move;
+		transition: transform 0.1s ease-out, 
+					opacity 0.3s ease-out,
+					background 0.3s ease-out;
+		border: 4px solid;
+
+		&.active {
+			transform: scale(1.1);
+			z-index: 5;
+			border-style: dotted;
+		}
+		&.inactive {
+			cursor: not-allowed;
+			background: $b6 !important;
+			border-color: $b5 !important;
+		}
+
+		&.one {
+			background: #2196f3;
+			border-color: #1380d8;
+		}
+		&.two {
+			background: #00BCD4;
+			border-color: #03a3b7;
+		}
+		&.three {
+			background: #4CAF50;
+			border-color: #3a983e;
+		}
+		&.four {
+			background: #8BC34A;
+			border-color: #78ad3b;
+		}
+	}
+
+	&__progress {
+		font-size: 1.3rem;
+		width: 100%;
+		display: inline-block;
+		text-align: center;
+		margin-top: 6px;
+	}
+
+	&__options {
+		margin-top: 1em;
+		width: 600px;
+	}
+	&__reset-button {
+		padding: 10px 14px;
+		border-radius: 4px;
+		float: right;
+		transition: 0.2s ease-out;
+		font-weight: bold;
+		color: $b5;
+		border: 2px solid $b5;
+		&:hover {
+			color: $b2;
+			border-color: $b2;
+		}
+	}
+	&__code-link {
+		color: #0b97ed;
+		display: inline-block;
+		line-height: 40px;
+	}
+}

docs/scss/style.scss

@@ -11,6 +11,7 @@
 @import "main/intro";
 @import "main/basic-demo";
 @import "main/magnifier-demo";
+@import "main/sorting-demo";
 
 body {
 	min-width: 960px;
@@ -22,7 +23,7 @@ h1 {
 }
 h2 {
 	font-size: 2.2rem;
-	margin: 3em 0 1em;
+	margin: 4em 0 1em;
 }
 h3 {
 	margin-top: 1.8em;