Merge pull request seiyria#31 from rahatarmanahmed/feature-disabled

Feature disabled

README.md

@@ -30,6 +30,7 @@ Options can be passed either as a data (data-slider-foo) attribute, or as part o
 | tooltip |	string |	'show' |	whether to show or hide the tooltip. Accepts: 'show' or 'hide' |
 | handle |	string |	'round' |	handle shape. Accepts: 'round', 'square' or 'triangle' |
 | reversed | bool | false | whether or not the slider should be reversed |
+| enabled | bool | true | whether or not the slider is initially enabled |
 | formater |	function |	returns the plain value |	formatter callback. Return the value wanted to be displayed in the tooltip |
 
 Functions
@@ -40,6 +41,10 @@ Functions
 | .slider('getValue') | Get the current value from the slider |
 | .slider('setValue', newValue) | Set a new value for the slider |
 | .slider('destroy') | Properly clean up and remove the slider instance |
+| .slider('disable') | Disables the slider and prevents the user from changing the value |
+| .slider('enable') | Enables the slider |
+| .slider('toggle') | Toggles the slider between enabled and disabled |
+| .slider('isEnabled') | Returns true if enabled, false if disabled |
 
 Events
 ======
@@ -49,3 +54,5 @@ Events
 | slide | This event fires when the slider is dragged |
 | slideStop | This event fires when the dragging stops |
 | slideChange | This event fires when the slider value changes as a result of dragging |
+| slideEnabled | This event fires when the slider is enabled |
+| slideDisabled | This event fires when the slider is disabled |

css/slider.css

@@ -66,6 +66,22 @@
   border-left-color: #0480be;
   margin-left: 0;
 }
+.slider.slider-disabled .slider-handle {
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dfdfdf), to(#bebebe));
+  background-image: -webkit-linear-gradient(top, #dfdfdf, 0%, #bebebe, 100%);
+  background-image: -moz-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
+  background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
+}
+.slider.slider-disabled .slider-track {
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#e5e5e5), to(#e9e9e9));
+  background-image: -webkit-linear-gradient(top, #e5e5e5, 0%, #e9e9e9, 100%);
+  background-image: -moz-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
+  background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
+}
 .slider input {
   display: none;
 }

index.html

@@ -92,7 +92,7 @@
 			padding: 10px 0;
 		}
 
-		#destroyEx5Slider, #ex6CurrentSliderValLabel {
+		#destroyEx5Slider, #ex6CurrentSliderValLabel, #ex7-enabled {
 			margin-left: 45px;
 		}
 
@@ -206,6 +206,14 @@ <h4>Example 6:</h4>
       			<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
       		</div>
       	</div>
+      	<div class='slider-example'>
+      		<h4>Example 7:</h4>
+      		<p>Sliders can be enabled and disabled.</p>
+      		<div class="well">
+      			<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
+      			<input id="ex7-enabled" type="checkbox"/> Enabled
+      		</div>
+      	</div>
       </div>
 
     </div> <!-- /container -->
@@ -258,6 +266,16 @@ <h4>Example 6:</h4>
 			$("#ex6").on('slide', function(slideEvt) {
 				$("#ex6SliderVal").text(slideEvt.value);
 			});
+
+			$("#ex7").slider();
+			$("#ex7-enabled").click(function() {
+				if(this.checked) {
+					$("#ex7").slider("enable");
+				}
+				else {
+					$("#ex7").slider("disable");
+				}
+			});
     	});
     </script>
     <!-- Placed at the end of the document so the pages load faster -->

js/bootstrap-slider.js

@@ -187,6 +187,13 @@
                     .prop('value', val);
 			}
 		}
+
+		this.enabled = options.enabled && 
+						(this.element.data('slider-enabled') === undefined || this.element.data('slider-enabled') === true);
+		if(!this.enabled)
+		{
+			this.disable();
+		}
 	};
 
 	Slider.prototype = {
@@ -243,6 +250,9 @@
 		},
 
 		mousedown: function(ev) {
+			if(this.picker.hasClass('slider-disabled')) {
+				return false;
+			}
 			// Touch: Get the original event:
 			if (this.touchCapable && ev.type === 'touchstart') {
 				ev = ev.originalEvent;
@@ -291,7 +301,9 @@
 		},
 
 		mousemove: function(ev) {
-
+			if(this.picker.hasClass('slider-disabled')) {
+				return false;
+			}
 			// Touch: Get the original event:
 			if (this.touchCapable && ev.type === 'touchmove') {
 				ev = ev.originalEvent;
@@ -322,6 +334,9 @@
 		},
 
 		mouseup: function() {
+			if(this.picker.hasClass('slider-disabled')) {
+				return false;
+			}
 			if (this.touchCapable) {
 				// Touch: Bind touch events:
 				$(document).off({
@@ -430,12 +445,41 @@
 			$(this.element).removeData('slider');
 			$(this.element).off();
 		},
+
+		disable: function() {
+			this.enabled = false;
+			this.picker.addClass('slider-disabled');
+			this.element.trigger('slideDisabled');
+		},
+
+		enable: function() {
+			this.enabled = true;
+			this.picker.removeClass('slider-disabled');
+			this.element.trigger('slideEnabled');
+		},
+
+		toggle: function() {
+			if(this.enabled) {
+				this.disable();
+			}
+			else {
+				this.enable();
+			}
+		},
+
+		isEnabled: function() {
+			return this.enabled;
+		}
 	};
 
 	var publicMethods = {
 		getValue : Slider.prototype.getValue,
 		setValue : Slider.prototype.setValue,
-		destroy : Slider.prototype.destroy
+		destroy : Slider.prototype.destroy,
+		disable : Slider.prototype.disable,
+		enable : Slider.prototype.enable,
+		toggle : Slider.prototype.toggle,
+		isEnabled: Slider.prototype.isEnabled
 	};
 
 	$.fn.slider = function (option) {
@@ -476,6 +520,7 @@
 		tooltip: 'show',
 		handle: 'round',
 		reversed : false,
+		enabled: true,
 		formater: function(value) {
 			return value;
 		}

less/slider.less

@@ -70,6 +70,14 @@
 			}
 		}
 	}
+	&.slider-disabled {
+		.slider-handle {
+			#gradient > .vertical(#dfdfdf, #bebebe);
+		}
+		.slider-track {
+			#gradient > .vertical(#e5e5e5, #e9e9e9);
+		}
+	}
 	input {
 		display: none;
 	}

spec/ElementDataAttributesSpec.js

@@ -66,6 +66,12 @@ describe("Element Data Attributes Tests", function() {
     expect(sliderSelectionHeightAtMaxValue).toBe(0);
   });
 
+  it("reads the 'data-slider-enabled' property and sets it on slider", function() {
+    slider = $("#disabledSlider").slider();
+    var isEnabled = slider.slider('isEnabled');
+    expect(isEnabled).not.toBeTruthy();
+  });
+
   afterEach(function() {
     if(slider) { slider.slider('destroy'); }
   });

spec/EventsSpec.js

@@ -36,6 +36,59 @@ describe("Event Tests", function() {
     expect(true).toBeTruthy();
   });
 
+  describe("Disabled Slider Event Tests", function() {
+    beforeEach(function() {
+      testSlider.slider('disable');
+    });
+
+    it("should not trigger 'slideStart' event when disabled", function() {
+      testSlider.on('slideStart', function() {
+        flag = true;
+      });
+      testSlider.data('slider').mousedown(mouse);
+      expect(flag).not.toBeTruthy();
+    });
+
+    it("should not trigger 'slide' event when disabled", function() {
+      testSlider.on('slide', function() {
+        flag = true;
+      });
+      testSlider.data('slider').mousedown(mouse);
+      expect(flag).not.toBeTruthy();
+    });
+
+    it("should not trigger 'slideStop' event when disabled", function() {
+      testSlider.on('slideStop', function() {
+        flag = true;
+      });
+      testSlider.data('slider').mouseup();
+      expect(flag).not.toBeTruthy();
+    });
+
+    it("should not trigger 'slideChange' event when disabled", function() {
+      //TODO: Cannot find any way to trigger this through sliding actions.
+      expect(false).not.toBeTruthy();
+    });
+
+  });
+
+  it("'slideDisabled' event is triggered properly and can be binded to", function() {
+    testSlider.on('slideDisabled', function() {
+      flag = true;
+    });
+    testSlider.slider('disable');
+    expect(flag).toBeTruthy();
+  });
+
+  it("'slideDisabled' event is triggered properly and can be binded to", function() {
+    testSlider.on('slideEnabled', function() {
+      flag = true;
+    });
+    testSlider.slider('disable');
+    testSlider.slider('enable');
+    expect(flag).toBeTruthy();
+  });
+
   afterEach(function() {
     if(testSlider) {
       testSlider.slider('destroy');

spec/PublicMethodsSpec.js

@@ -126,6 +126,14 @@ describe("Public Method Tests", function() {
       var tooltipMessage = $("#testSlider1").siblings("div.tooltip").children("div.tooltip-inner").text();
       expect(tooltipMessage).toBe("Current value: 9");
     });
+
+    it("reads and sets the 'enabled' option properly", function() {
+      testSlider = $("#testSlider1").slider({
+        enabled: false
+      });
+      var isEnabled = testSlider.slider('isEnabled');
+      expect(isEnabled).not.toBeTruthy();
+    });
   });
 
 
@@ -344,6 +352,64 @@ describe("Public Method Tests", function() {
     });
   });
 
+  describe("'enable()' tests", function() {
+    it("correctly enables a slider", function() {
+      testSlider = $("#testSlider1").slider({
+        enabled: false
+      });
+      testSlider.slider("enable");
+      var isEnabled = testSlider.slider("isEnabled");
+      expect(isEnabled).toBeTruthy();
+    });
+  });
+
+  describe("'disable()' tests", function() {
+    it("correctly disable a slider", function() {
+      testSlider = $("#testSlider1").slider();
+      testSlider.slider("disable");
+      var isEnabled = testSlider.slider("isEnabled");
+      expect(isEnabled).not.toBeTruthy();
+    });
+  });
+
+  describe("'toggle()' tests", function() {
+    it("correctly enables a disabled slider", function() {
+      testSlider = $("#testSlider1").slider({
+        enabled: false
+      });
+      testSlider.slider("toggle");
+      var isEnabled = testSlider.slider("isEnabled");
+      expect(isEnabled).toBeTruthy();
+    });
+
+    it("correctly disables an enabled slider", function() {
+      testSlider = $("#testSlider1").slider();
+      testSlider.slider("toggle");
+      var isEnabled = testSlider.slider("isEnabled");
+      expect(isEnabled).not.toBeTruthy();
+    });
+  });
+
+  describe("'isEnabled()' tests", function() {
+    it("returns true for an enabled slider", function() {
+      testSlider = $("#testSlider1").slider();
+      var isEnabled = testSlider.slider("isEnabled");
+      var hasDisabledClass = testSlider.parent().hasClass("slider") && testSlider.parent().hasClass("slider-disabled");
+      expect(isEnabled).toBeTruthy();
+      expect(hasDisabledClass).not.toBeTruthy();
+    });
+
+    it("returns false for a disabled slider", function() {
+      testSlider = $("#testSlider1").slider({
+        enabled: false
+      });
+      var isEnabled = testSlider.slider("isEnabled");
+      var hasDisabledClass = testSlider.parent().hasClass("slider") && testSlider.parent().hasClass("slider-disabled");
+      expect(isEnabled).not.toBeTruthy();
+      expect(hasDisabledClass).toBeTruthy();
+    });
+  });
+
   it("throws an exception if the user tries to call a non-public method", function() {
     testSlider = $("#testSlider1").slider();
     var nonPublicMethodName = "calculateValue";

tpl/SpecRunner.tpl

@@ -27,5 +27,6 @@
 	<input id="tooltipSlider" type="text" data-slider-tooltip="hide"/>
 	<input id="handleSlider" type="text" data-slider-handle="triangle"/>
 	<input id="reversedSlider" type="text" data-slider-reversed="true"/>
+	<input id="disabledSlider" type="text" data-slider-enabled="false"/>
 </body>
 </html>