--- /dev/null
+/* =========================================================\r
+ * bootstrap-slider.js v2.0.0\r
+ * http://www.eyecon.ro/bootstrap-slider\r
+ * =========================================================\r
+ * Copyright 2012 Stefan Petre\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ * ========================================================= */\r
+ \r
+!function( $ ) {\r
+\r
+ var Slider = function(element, options) {\r
+ this.element = $(element);\r
+ this.picker = $('<div class="slider">'+\r
+ '<div class="slider-track">'+\r
+ '<div class="slider-selection"></div>'+\r
+ '<div class="slider-handle"></div>'+\r
+ '<div class="slider-handle"></div>'+\r
+ '</div>'+\r
+ '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+\r
+ '</div>')\r
+ .insertBefore(this.element)\r
+ .append(this.element);\r
+ this.id = this.element.data('slider-id')||options.id;\r
+ if (this.id) {\r
+ this.picker[0].id = this.id;\r
+ }\r
+\r
+ if (typeof Modernizr !== 'undefined' && Modernizr.touch) {\r
+ this.touchCapable = true;\r
+ }\r
+\r
+ var tooltip = this.element.data('slider-tooltip')||options.tooltip;\r
+\r
+ this.tooltip = this.picker.find('.tooltip');\r
+ this.tooltipInner = this.tooltip.find('div.tooltip-inner');\r
+\r
+ this.orientation = this.element.data('slider-orientation')||options.orientation;\r
+ switch(this.orientation) {\r
+ case 'vertical':\r
+ this.picker.addClass('slider-vertical');\r
+ this.stylePos = 'top';\r
+ this.mousePos = 'pageY';\r
+ this.sizePos = 'offsetHeight';\r
+ this.tooltip.addClass('right')[0].style.left = '100%';\r
+ break;\r
+ default:\r
+ this.picker\r
+ .addClass('slider-horizontal')\r
+ .css('width', this.element.outerWidth());\r
+ this.orientation = 'horizontal';\r
+ this.stylePos = 'left';\r
+ this.mousePos = 'pageX';\r
+ this.sizePos = 'offsetWidth';\r
+ this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';\r
+ break;\r
+ }\r
+\r
+ this.min = this.element.data('slider-min')||options.min;\r
+ this.max = this.element.data('slider-max')||options.max;\r
+ this.step = this.element.data('slider-step')||options.step;\r
+ this.value = this.element.data('slider-value')||options.value;\r
+ if (this.value[1]) {\r
+ this.range = true;\r
+ }\r
+\r
+ this.selection = this.element.data('slider-selection')||options.selection;\r
+ this.selectionEl = this.picker.find('.slider-selection');\r
+ if (this.selection === 'none') {\r
+ this.selectionEl.addClass('hide');\r
+ }\r
+ this.selectionElStyle = this.selectionEl[0].style;\r
+\r
+\r
+ this.handle1 = this.picker.find('.slider-handle:first');\r
+ this.handle1Stype = this.handle1[0].style;\r
+ this.handle2 = this.picker.find('.slider-handle:last');\r
+ this.handle2Stype = this.handle2[0].style;\r
+\r
+ var handle = this.element.data('slider-handle')||options.handle;\r
+ switch(handle) {\r
+ case 'round':\r
+ this.handle1.addClass('round left-round');\r
+ this.handle2.addClass('round');\r
+ break\r
+ case 'triangle':\r
+ this.handle1.addClass('triangle');\r
+ this.handle2.addClass('triangle');\r
+ break\r
+ }\r
+\r
+ if (this.range) {\r
+ this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));\r
+ this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));\r
+ } else {\r
+ this.value = [ Math.max(this.min, Math.min(this.max, this.value))];\r
+ this.handle2.addClass('hide');\r
+ if (this.selection == 'after') {\r
+ this.value[1] = this.max;\r
+ } else {\r
+ this.value[1] = this.min;\r
+ }\r
+ }\r
+ this.diff = this.max - this.min;\r
+ this.percentage = [\r
+ (this.value[0]-this.min)*100/this.diff,\r
+ (this.value[1]-this.min)*100/this.diff,\r
+ this.step*100/this.diff\r
+ ];\r
+\r
+ this.offset = this.picker.offset();\r
+ this.size = this.picker[0][this.sizePos];\r
+\r
+ this.formater = options.formater;\r
+\r
+ this.layout();\r
+\r
+ if (this.touchCapable) {\r
+ // Touch: Bind touch events:\r
+ this.picker.on({\r
+ touchstart: $.proxy(this.mousedown, this)\r
+ });\r
+ } else {\r
+ this.picker.on({\r
+ mousedown: $.proxy(this.mousedown, this)\r
+ });\r
+ }\r
+\r
+ if (tooltip === 'show') {\r
+ this.picker.on({\r
+ mouseenter: $.proxy(this.showTooltip, this),\r
+ mouseleave: $.proxy(this.hideTooltip, this)\r
+ });\r
+ } else {\r
+ this.tooltip.addClass('hide');\r
+ }\r
+ };\r
+\r
+ Slider.prototype = {\r
+ constructor: Slider,\r
+\r
+ over: false,\r
+ inDrag: false,\r
+ \r
+ showTooltip: function(){\r
+ this.tooltip.addClass('in');\r
+ //var left = Math.round(this.percent*this.width);\r
+ //this.tooltip.css('left', left - this.tooltip.outerWidth()/2);\r
+ this.over = true;\r
+ },\r
+ \r
+ hideTooltip: function(){\r
+ if (this.inDrag === false) {\r
+ this.tooltip.removeClass('in');\r
+ }\r
+ this.over = false;\r
+ },\r
+\r
+ layout: function(){\r
+ this.handle1Stype[this.stylePos] = this.percentage[0]+'%';\r
+ this.handle2Stype[this.stylePos] = this.percentage[1]+'%';\r
+ if (this.orientation == 'vertical') {\r
+ this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) +'%';\r
+ this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) +'%';\r
+ } else {\r
+ this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) +'%';\r
+ this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) +'%';\r
+ }\r
+ if (this.range) {\r
+ this.tooltipInner.text(\r
+ this.formater(this.value[0]) + \r
+ ' : ' + \r
+ this.formater(this.value[1])\r
+ );\r
+ this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';\r
+ } else {\r
+ this.tooltipInner.text(\r
+ this.formater(this.value[0])\r
+ );\r
+ this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';\r
+ }\r
+ },\r
+\r
+ mousedown: function(ev) {\r
+\r
+ // Touch: Get the original event:\r
+ if (this.touchCapable && ev.type === 'touchstart') {\r
+ ev = ev.originalEvent;\r
+ }\r
+\r
+ this.offset = this.picker.offset();\r
+ this.size = this.picker[0][this.sizePos];\r
+\r
+ var percentage = this.getPercentage(ev);\r
+\r
+ if (this.range) {\r
+ var diff1 = Math.abs(this.percentage[0] - percentage);\r
+ var diff2 = Math.abs(this.percentage[1] - percentage);\r
+ this.dragged = (diff1 < diff2) ? 0 : 1;\r
+ } else {\r
+ this.dragged = 0;\r
+ }\r
+\r
+ this.percentage[this.dragged] = percentage;\r
+ this.layout();\r
+\r
+ if (this.touchCapable) {\r
+ // Touch: Bind touch events:\r
+ $(document).on({\r
+ touchmove: $.proxy(this.mousemove, this),\r
+ touchend: $.proxy(this.mouseup, this)\r
+ });\r
+ } else {\r
+ $(document).on({\r
+ mousemove: $.proxy(this.mousemove, this),\r
+ mouseup: $.proxy(this.mouseup, this)\r
+ });\r
+ }\r
+\r
+ this.inDrag = true;\r
+ var val = this.calculateValue();\r
+ this.element.trigger({\r
+ type: 'slideStart',\r
+ value: val\r
+ }).trigger({\r
+ type: 'slide',\r
+ value: val\r
+ });\r
+ return false;\r
+ },\r
+\r
+ mousemove: function(ev) {\r
+ \r
+ // Touch: Get the original event:\r
+ if (this.touchCapable && ev.type === 'touchmove') {\r
+ ev = ev.originalEvent;\r
+ }\r
+\r
+ var percentage = this.getPercentage(ev);\r
+ if (this.range) {\r
+ if (this.dragged === 0 && this.percentage[1] < percentage) {\r
+ this.percentage[0] = this.percentage[1];\r
+ this.dragged = 1;\r
+ } else if (this.dragged === 1 && this.percentage[0] > percentage) {\r
+ this.percentage[1] = this.percentage[0];\r
+ this.dragged = 0;\r
+ }\r
+ }\r
+ this.percentage[this.dragged] = percentage;\r
+ this.layout();\r
+ var val = this.calculateValue();\r
+ this.element\r
+ .trigger({\r
+ type: 'slide',\r
+ value: val\r
+ })\r
+ .data('value', val)\r
+ .prop('value', val);\r
+ return false;\r
+ },\r
+\r
+ mouseup: function(ev) {\r
+ if (this.touchCapable) {\r
+ // Touch: Bind touch events:\r
+ $(document).off({\r
+ touchmove: this.mousemove,\r
+ touchend: this.mouseup\r
+ });\r
+ } else {\r
+ $(document).off({\r
+ mousemove: this.mousemove,\r
+ mouseup: this.mouseup\r
+ });\r
+ }\r
+\r
+ this.inDrag = false;\r
+ if (this.over == false) {\r
+ this.hideTooltip();\r
+ }\r
+ this.element;\r
+ var val = this.calculateValue();\r
+ this.element\r
+ .trigger({\r
+ type: 'slideStop',\r
+ value: val\r
+ })\r
+ .data('value', val)\r
+ .prop('value', val);\r
+ return false;\r
+ },\r
+\r
+ calculateValue: function() {\r
+ var val;\r
+ if (this.range) {\r
+ val = [\r
+ (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step),\r
+ (this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step)\r
+ ];\r
+ this.value = val;\r
+ } else {\r
+ val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step);\r
+ this.value = [val, this.value[1]];\r
+ }\r
+ return val;\r
+ },\r
+\r
+ getPercentage: function(ev) {\r
+ if (this.touchCapable) {\r
+ ev = ev.touches[0];\r
+ }\r
+ var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size;\r
+ percentage = Math.round(percentage/this.percentage[2])*this.percentage[2];\r
+ return Math.max(0, Math.min(100, percentage));\r
+ },\r
+\r
+ getValue: function() {\r
+ if (this.range) {\r
+ return this.value;\r
+ }\r
+ return this.value[0];\r
+ },\r
+\r
+ setValue: function(val) {\r
+ this.value = val;\r
+\r
+ if (this.range) {\r
+ this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));\r
+ this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));\r
+ } else {\r
+ this.value = [ Math.max(this.min, Math.min(this.max, this.value))];\r
+ this.handle2.addClass('hide');\r
+ if (this.selection == 'after') {\r
+ this.value[1] = this.max;\r
+ } else {\r
+ this.value[1] = this.min;\r
+ }\r
+ }\r
+ this.diff = this.max - this.min;\r
+ this.percentage = [\r
+ (this.value[0]-this.min)*100/this.diff,\r
+ (this.value[1]-this.min)*100/this.diff,\r
+ this.step*100/this.diff\r
+ ];\r
+ this.layout();\r
+ }\r
+ };\r
+\r
+ $.fn.slider = function ( option, val ) {\r
+ return this.each(function () {\r
+ var $this = $(this),\r
+ data = $this.data('slider'),\r
+ options = typeof option === 'object' && option;\r
+ if (!data) {\r
+ $this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));\r
+ }\r
+ if (typeof option == 'string') {\r
+ data[option](val);\r
+ }\r
+ })\r
+ };\r
+\r
+ $.fn.slider.defaults = {\r
+ min: 0,\r
+ max: 10,\r
+ step: 1,\r
+ orientation: 'horizontal',\r
+ value: 5,\r
+ selection: 'before',\r
+ tooltip: 'show',\r
+ handle: 'round',\r
+ formater: function(value) {\r
+ return value;\r
+ }\r
+ };\r
+\r
+ $.fn.slider.Constructor = Slider;\r
+\r
+}( window.jQuery );
\ No newline at end of file
projects / bootswatch / blobdiff