4.0 rewrite

leongersen · Sep 22, 2013 · 845d569 · 845d569
1 parent f4cf516
commit 845d569
Show file tree

Hide file tree

Showing 7 changed files with 879 additions and 609 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -1,20 +1,39 @@
 # noUiSlider
-_Current version: 3.2.0_
+_Current version: 4.0.0_
 
-noUiSlider is a little jQuery plugin that allows you to create range sliders.
+noUiSlider is a super tiny jQuery plugin that allows you to create range sliders.  
 It fully supports touch, and it is way(!) less bloated than the jQueryUI library.
 
 A full documentation, including examples, is available on the [noUiSlider documentation page](http://refreshless.com/nouislider/).
 
-**Changelog for version 3.2.1:**
-_[latest minor release]_
+Changes
+-------
+**Changelog for version 4:**
 
-* Fixed an issue when initializing a slider with two handles, both on 100%.
-
-**Changelog for version 3:**
 _[current major release]_
 
-* Added responsive design support
-* Added Windows Pointer Events support
-* Fixed issues
-* Reduced file size
+* Massive update overhauling the entire code style
+* Better styling possibilties
+* Brand new Flat theme
+* Windows Phone 8 support
+* Performance improvements
+* New way of handling disabled sliders
+* Internal option testing provides feedback on issues
+
+Compression and Error checking
+------------------------------
+
+**CSS**  
+The stylesheet is compressed using:  
+[CSSMinifier](http://cssminifier.com/)
+
+**JS**  
+The plugin is compressed using the Google Closure compiler, using the 'simple' optimalization option.  
+[Google Closure Compiler](http://closure-compiler.appspot.com/home)
+
+**Code**  
+The plugin code is checked using JsLint, with the following options:
+`/*jslint browser: true, devel: true, nomen: true, plusplus: true, unparam: true, sloppy: true, todo: true, white: true */`
+
+Please note that while some errors remain, these are not issues as they are merely a difference in coding style.  
+[JsLint](http://jslint.com/)
diff --git a/jquery.nouislider.css b/jquery.nouislider.css
@@ -1,123 +1,111 @@
-
-	/*	Body, root elements
-	 *	Sets a default cursor on the body, blocks text selection.
-	 */
-	.noUi-root * {
+
+/*	General CSS resets;
+ *		The target itself is not affected, allowing
+ *		the remainder of the document to use an 
+ *		alternate box-sizing model;
+ *		Support for box-sizing is wide spread:
+ *		http://caniuse.com/#search=box-sizing
+ */
+	.noUi-target * {
+-webkit-box-sizing: border-box;
+   -moz-box-sizing: border-box;
 		box-sizing: border-box;
-		display: block;
-		margin: 0;
-		padding: 0;
-		border: 0;
+-webkit-touch-callout: none;
+    -ms-touch-action: none;
+-webkit-user-select: none;
+   -moz-user-select: none;
+    -ms-user-select: none;
+		cursor: default;
 	}
-	.noUi-root *,
-	body[data-nouislider-active] {
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		-ms-touch-action: none;
+
+/*	Main slider bar;
+ */
+	.noUi-base {
+		height: 40px;
+		width: 300px;
+		position: relative;
+		max-width: 100%;
+		border: 1px solid #bfbfbf;
+		z-index: 1;
 	}
-	body[data-nouislider-active] * {
-		cursor: default !important;
+
+/*	Handles + active state;
+ */
+	.noUi-handle {
+		background: #EEE;
+		height: 44px;
+		width: 44px;
+		border: 1px solid #BFBFBF;
+		margin: -3px 0 0 -23px;
+	}
+	.noUi-active {
+		background: #E9E9E9;
+	}
+	.noUi-active:after {
+		content: "";
+		display: block;
+		height: 100%;
+		border: 1px solid #DDD;
 	}
 
-	/*	Basics
-	 *	
-	 */
-	.noUi-slider {
-		position: relative;
+/*	Styling-only classes;
+ *		Structured to prevent double declarations
+ *		for various states of the slider.
+ */
+	.noUi-connect {
+		background: Teal;
+	}
+	.noUi-background {
+		background: #DDD;
 	}
-	.noUi-slider b {
+
+/*	Functional styles for handle positioning;
+ *		Note that the origins have z-index 0, the base has
+ *		z-index 1; This fixes a bug where borders become invisible.
+ */
+	.noUi-origin {
 		position: absolute;
-		z-index: 1;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 0;
 	}
-	.noUi-slider b + b {
-		/* Fallback for older browsers... :( */
-		background: #d9d7cb !important;
+	.noUi-origin-upper {
 		background: inherit !important;
 	}
-	.noUi-horizontal {
-		width: 100%;
-		height: 12px;
-	}
-	.noUi-horizontal b {
-		height: 100%;
-		right: 0;
+	.noUi-z-index {
+		z-index: 10;
 	}
+
+/*	Adaptations for the vertical slider;
+ */
 	.noUi-vertical {
-		height: 100%;
-		width: 12px;
+		height: 300px;
+		width: 40px;
+		max-height: 100%;
 	}
-	.noUi-vertical b {
-		width: 100%;
+	.noUi-vertical .noUi-origin {
 		bottom: 0;
+		left: 0;
 	}
-
-	/*	Looks
-	 *	
-	 */
-	.noUi-slider {
-		border: 1px solid #908d84;
-		border-radius: 3px;
-	}
-	.noUi-slider.noUi-connect.noUi-lower,
-	.noUi-slider.noUi-connect b {
-		background: #b2a98f;
-	}
-	.noUi-slider,
-	.noUi-slider.noUi-connect.noUi-lower b {
-		background: #d9d7cb;
-		box-shadow: inset 0px 1px 7px #b6b4a8;
-	}
-	.noUi-slider b {
-		border-radius: 2px;
-	}
-	.noUi-slider i {
-		width: 18px;
-		height: 18px;
-		border: 1px solid #999;
-		border-radius: 3px;
-		background: #efefef;
-		-webkit-transition: all 0.2s;
-		transition: all 0.2s;
-	}
-	.noUi-horizontal i {
-		margin: -4px 0 0 -9px;
-	}
-	.noUi-vertical i {
-		margin: -9px 0 0 -4px;
-	}
-
-	/*	Hover and active states
-	 *	
-	 */
-	.noUi-slider .noUi-base-active {
-		z-index: 3 !important;
-	}
-	.noUi-slider i.noUi-active,
-	.noUi-slider i:hover {
-		border-color: #aaa;
-		background: #fff;
-		width: 26px;
-		height: 26px;
-		margin: -8px 0 0 -13px;
-	}
-	.noUi-vertical i.noUi-active,
-	.noUi-vertical i:hover {
-		margin: -4px 0 0 -9px;
+	.noUi-vertical .noUi-handle  {
+		margin: -23px 0 0 -3px;
 	}
 
-	/*	Disabled
-	 *
-	 */
-	.noUi-root[disabled="disabled"] .noUi-slider {
-		background: #ccc;
-	}
-	.noUi-root[disabled="disabled"] i:hover,
-	.noUi-root[disabled="disabled"] i {
+/*	Various alternate slider states;
+ *	Support for transition is widely available,
+ *	Only IE7, IE8 and IE9 will ignore these rules.
+ *	Since this is merely a progressive enhancement,
+ *	this is no problem at all.
+ *	http://caniuse.com/#search=transition
+ */
+	.noUi-target[disabled] .noUi-base {
 		background: #999;
-		cursor: not-allowed;
-		border-color: #333;
 	}
-	.noUi-root:disabled {
-		display: none;
+	.noUi-target[disabled] .noUi-connect {
+		background: #BBB;
+	}
+	.noUi-state-tap .noUi-origin {
+		-webkit-transition: left 0.3s, top 0.3s;
+		transition: left 0.3s, top 0.3s;
 	}