1/* ========================================================= 2 * bootstrap-slider.js v2.0.0 3 * http://www.eyecon.ro/bootstrap-slider 4 * ========================================================= 5 * Copyright 2012 Stefan Petre 6 * 7 * Licensed under the Apache License, Version 2.0 (the "License"); 8 * you may not use this file except in compliance with the License. 9 * You may obtain a copy of the License at 10 * 11 * http://www.apache.org/licenses/LICENSE-2.0 12 * 13 * Unless required by applicable law or agreed to in writing, software 14 * distributed under the License is distributed on an "AS IS" BASIS, 15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 * See the License for the specific language governing permissions and 17 * limitations under the License. 18 * ========================================================= */ 19 20!function( $ ) { 21 22 var Slider = function(element, options) { 23 this.element = $(element); 24 this.picker = $('<div class="slider">'+ 25 '<div class="slider-track">'+ 26 '<div class="slider-selection"></div>'+ 27 '<div class="slider-handle"></div>'+ 28 '<div class="slider-handle"></div>'+ 29 '</div>'+ 30 '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+ 31 '</div>') 32 .insertBefore(this.element) 33 .append(this.element); 34 this.id = this.element.data('slider-id')||options.id; 35 if (this.id) { 36 this.picker[0].id = this.id; 37 } 38 39 if (typeof Modernizr !== 'undefined' && Modernizr.touch) { 40 this.touchCapable = true; 41 } 42 43 var tooltip = this.element.data('slider-tooltip')||options.tooltip; 44 45 this.tooltip = this.picker.find('.tooltip'); 46 this.tooltipInner = this.tooltip.find('div.tooltip-inner'); 47 48 this.orientation = this.element.data('slider-orientation')||options.orientation; 49 switch(this.orientation) { 50 case 'vertical': 51 this.picker.addClass('slider-vertical'); 52 this.stylePos = 'top'; 53 this.mousePos = 'pageY'; 54 this.sizePos = 'offsetHeight'; 55 this.tooltip.addClass('right')[0].style.left = '100%'; 56 break; 57 default: 58 this.picker 59 .addClass('slider-horizontal') 60 .css('width', this.element.outerWidth()); 61 this.orientation = 'horizontal'; 62 this.stylePos = 'left'; 63 this.mousePos = 'pageX'; 64 this.sizePos = 'offsetWidth'; 65 this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px'; 66 break; 67 } 68 69 this.min = this.element.data('slider-min')||options.min; 70 this.max = this.element.data('slider-max')||options.max; 71 this.step = this.element.data('slider-step')||options.step; 72 this.value = this.element.data('slider-value')||options.value; 73 if (this.value[1]) { 74 this.range = true; 75 } 76 77 this.selection = this.element.data('slider-selection')||options.selection; 78 this.selectionEl = this.picker.find('.slider-selection'); 79 if (this.selection === 'none') { 80 this.selectionEl.addClass('hide'); 81 } 82 this.selectionElStyle = this.selectionEl[0].style; 83 84 85 this.handle1 = this.picker.find('.slider-handle:first'); 86 this.handle1Stype = this.handle1[0].style; 87 this.handle2 = this.picker.find('.slider-handle:last'); 88 this.handle2Stype = this.handle2[0].style; 89 90 var handle = this.element.data('slider-handle')||options.handle; 91 switch(handle) { 92 case 'round': 93 this.handle1.addClass('round'); 94 this.handle2.addClass('round'); 95 break 96 case 'triangle': 97 this.handle1.addClass('triangle'); 98 this.handle2.addClass('triangle'); 99 break 100 } 101 102 if (this.range) { 103 this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0])); 104 this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1])); 105 } else { 106 this.value = [ Math.max(this.min, Math.min(this.max, this.value))]; 107 this.handle2.addClass('hide'); 108 if (this.selection == 'after') { 109 this.value[1] = this.max; 110 } else { 111 this.value[1] = this.min; 112 } 113 } 114 this.diff = this.max - this.min; 115 this.percentage = [ 116 (this.value[0]-this.min)*100/this.diff, 117 (this.value[1]-this.min)*100/this.diff, 118 this.step*100/this.diff 119 ]; 120 121 this.offset = this.picker.offset(); 122 this.size = this.picker[0][this.sizePos]; 123 124 this.formater = options.formater; 125 126 this.layout(); 127 128 if (this.touchCapable) { 129 // Touch: Bind touch events: 130 this.picker.on({ 131 touchstart: $.proxy(this.mousedown, this) 132 }); 133 } else { 134 this.picker.on({ 135 mousedown: $.proxy(this.mousedown, this) 136 }); 137 } 138 139 if (tooltip === 'show') { 140 this.picker.on({ 141 mouseenter: $.proxy(this.showTooltip, this), 142 mouseleave: $.proxy(this.hideTooltip, this) 143 }); 144 } else { 145 this.tooltip.addClass('hide'); 146 } 147 }; 148 149 Slider.prototype = { 150 constructor: Slider, 151 152 over: false, 153 inDrag: false, 154 155 showTooltip: function(){ 156 this.tooltip.addClass('in'); 157 //var left = Math.round(this.percent*this.width); 158 //this.tooltip.css('left', left - this.tooltip.outerWidth()/2); 159 this.over = true; 160 }, 161 162 hideTooltip: function(){ 163 if (this.inDrag === false) { 164 this.tooltip.removeClass('in'); 165 } 166 this.over = false;
167 }, 168 169 layout: function(){ 170 this.handle1Stype[this.stylePos] = this.percentage[0]+'%'; 171 this.handle2Stype[this.stylePos] = this.percentage[1]+'%'; 172 if (this.orientation == 'vertical') { 173 this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) +'%'; 174 this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) +'%'; 175 } else { 176 this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) +'%'; 177 this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) +'%'; 178 } 179 if (this.range) { 180 this.tooltipInner.text( 181 this.formater(this.value[0]) + 182 ' : ' + 183 this.formater(this.value[1]) 184 ); 185 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'; 186 } else { 187 this.tooltipInner.text( 188 this.formater(this.value[0]) 189 ); 190 this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px'; 191 } 192 }, 193 194 mousedown: function(ev) { 195 196 // Touch: Get the original event: 197 if (this.touchCapable && ev.type === 'touchstart') { 198 ev = ev.originalEvent; 199 } 200 201 this.offset = this.picker.offset(); 202 this.size = this.picker[0][this.sizePos]; 203 204 var percentage = this.getPercentage(ev); 205 206 if (this.range) { 207 var diff1 = Math.abs(this.percentage[0] - percentage); 208 var diff2 = Math.abs(this.percentage[1] - percentage); 209 this.dragged = (diff1 < diff2) ? 0 : 1; 210 } else { 211 this.dragged = 0; 212 } 213 214 this.percentage[this.dragged] = percentage; 215 this.layout(); 216 217 if (this.touchCapable) { 218 // Touch: Bind touch events: 219 $(document).on({ 220 touchmove: $.proxy(this.mousemove, this), 221 touchend: $.proxy(this.mouseup, this) 222 }); 223 } else { 224 $(document).on({ 225 mousemove: $.proxy(this.mousemove, this), 226 mouseup: $.proxy(this.mouseup, this) 227 }); 228 } 229 230 this.inDrag = true; 231 var val = this.calculateValue(); 232 this.element.trigger({ 233 type: 'slideStart', 234 value: val 235 }).trigger({ 236 type: 'slide', 237 value: val 238 }); 239 return false; 240 }, 241 242 mousemove: function(ev) { 243 244 // Touch: Get the original event: 245 if (this.touchCapable && ev.type === 'touchmove') { 246 ev = ev.originalEvent; 247 } 248 249 var percentage = this.getPercentage(ev); 250 if (this.range) { 251 if (this.dragged === 0 && this.percentage[1] < percentage) { 252 this.percentage[0] = this.percentage[1]; 253 this.dragged = 1; 254 } else if (this.dragged === 1 && this.percentage[0] > percentage) { 255 this.percentage[1] = this.percentage[0]; 256 this.dragged = 0; 257 } 258 } 259 this.percentage[this.dragged] = percentage; 260 this.layout(); 261 var val = this.calculateValue(); 262 this.element 263 .trigger({ 264 type: 'slide', 265 value: val 266 }) 267 .data('value', val) 268 .prop('value', val); 269 return false; 270 }, 271 272 mouseup: function(ev) { 273 if (this.touchCapable) { 274 // Touch: Bind touch events: 275 $(document).off({ 276 touchmove: this.mousemove, 277 touchend: this.mouseup 278 }); 279 } else { 280 $(document).off({ 281 mousemove: this.mousemove, 282 mouseup: this.mouseup 283 }); 284 } 285 286 this.inDrag = false; 287 if (this.over == false) { 288 this.hideTooltip(); 289 } 290 this.element; 291 var val = this.calculateValue(); 292 this.element 293 .trigger({ 294 type: 'slideStop', 295 value: val 296 }) 297 .data('value', val) 298 .prop('value', val); 299 return false; 300 }, 301 302 calculateValue: function() { 303 var val; 304 if (this.range) { 305 val = [ 306 (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step), 307 (this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step) 308 ]; 309 this.value = val; 310 } else { 311 val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step); 312 this.value = [val, this.value[1]]; 313 } 314 return val; 315 }, 316 317 getPercentage: function(ev) { 318 if (this.touchCapable) { 319 ev = ev.touches[0]; 320 } 321 var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size; 322 percentage = Math.round(percentage/this.percentage[2])*this.percentage[2]; 323 return Math.max(0, Math.min(100, percentage)); 324 }, 325 326 getValue: function() { 327 if (this.range) { 328 return this.value; 329 } 330 return this.value[0]; 331 }, 332 333 setValue: function(val) { 334 this.value = val; 335 336 if (this.range) { 337 this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0])); 338 this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1])); 339 } else { 340 this.value = [ Math.max(this.min, Math.min(this.max, this.value))]; 341 this.handle2.addClass('hide'); 342 if (this.selection == 'after') { 343 this.value[1] = this.max; 344 } else { 345 this.value[1] = this.min; 346 } 347 } 348 this.diff = this.max - this.min; 349 this.percentage = [ 350 (this.value[0]-this.min)*100/this.diff, 351 (this.value[1]-this.min)*100/this.diff, 352 this.step*100/this.diff 353 ]; 354 this.layout(); 355 } 356 }; 357 358 $.fn.slider = function ( option, val ) { 359 return this.each(function () { 360 var $this = $(this), 361 data = $this.data('slider'), 362 options = typeof option === 'object' && option; 363 if (!data) { 364 $this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options)))); 365 } 366 if (typeof option == 'string') { 367 data[option](val); 368 } 369 }) 370 }; 371 372 $.fn.slider.defaults = { 373 min: 0, 374 max: 10, 375 step: 1, 376 orientation: 'horizontal', 377 value: 5, 378 selection: 'before', 379 tooltip: 'show', 380 handle: 'round', 381 formater: function(value) { 382 return value; 383 } 384 }; 385 386 $.fn.slider.Constructor = Slider; 387 388}( window.jQuery );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.