diff options
Diffstat (limited to 'library/jRange')
| -rw-r--r-- | library/jRange/demo/index.html | 18 | ||||
| -rw-r--r-- | library/jRange/jquery.range-min.js | 2 | ||||
| -rw-r--r-- | library/jRange/jquery.range.css | 8 | ||||
| -rw-r--r-- | library/jRange/jquery.range.js | 242 | ||||
| -rw-r--r-- | library/jRange/jquery.range.less | 9 |
5 files changed, 166 insertions, 113 deletions
diff --git a/library/jRange/demo/index.html b/library/jRange/demo/index.html index ac443f11f..19a5f33f0 100644 --- a/library/jRange/demo/index.html +++ b/library/jRange/demo/index.html @@ -41,7 +41,7 @@ from: 0, to: 100, step: 1, - scale: [0,50,100], + scale: [0,25,50,75,100], format: '%s', width: 300, showLabels: true @@ -181,6 +181,20 @@ </td> </tr> <tr> + <td>disable</td> + <td>Optional</td> + <td>Boolean</td> + <td> + <code>Default : false</code> + <p>True if this is a disable(read only) range selector. You can also change disable status later by calling. </p> + <code> + $('.slider').jRange('disable'); + $('.slider').jRange('enable'); + $('.slider').jRange('toggleDisable'); + </code> + </td> + </tr> + <tr> <td>onstatechange</td> <td>Optional</td> <td>Function</td> @@ -242,4 +256,4 @@ }); </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/library/jRange/jquery.range-min.js b/library/jRange/jquery.range-min.js index 00dadf220..589913e57 100644 --- a/library/jRange/jquery.range-min.js +++ b/library/jRange/jquery.range-min.js @@ -1 +1 @@ -!function($,t,i,s){"use strict";var o=function(){return this.init.apply(this,arguments)};o.prototype={defaults:{onstatechange:function(){},isRange:!1,showLabels:!0,showScale:!0,step:1,format:"%s",theme:"theme-green",width:300,minRange:0,maxRange:"auto"},template:'<div class="slider-container"> <div class="back-bar"> <div class="selected-bar"></div> <div class="pointer low"></div><div class="pointer-label">123456</div> <div class="pointer high"></div><div class="pointer-label">456789</div> <div class="clickable-dummy"></div> </div> <div class="scale"></div> </div>',init:function(t,i){this.options=$.extend({},this.defaults,i),this.inputNode=$(t),this.options.value=this.inputNode.val()||(this.options.isRange?this.options.from+","+this.options.from:this.options.from),this.domNode=$(this.template),this.domNode.addClass(this.options.theme),this.inputNode.after(this.domNode),this.domNode.on("change",this.onChange),this.pointers=$(".pointer",this.domNode),this.lowPointer=this.pointers.first(),this.highPointer=this.pointers.last(),this.labels=$(".pointer-label",this.domNode),this.lowLabel=this.labels.first(),this.highLabel=this.labels.last(),this.scale=$(".scale",this.domNode),this.bar=$(".selected-bar",this.domNode),this.clickableBar=this.domNode.find(".clickable-dummy"),this.interval=this.options.to-this.options.from,this.render()},render:function(){return 0!==this.inputNode.width()||this.options.width?(this.domNode.width(this.options.width||this.inputNode.width()),this.inputNode.hide(),this.isSingle()&&(this.lowPointer.hide(),this.lowLabel.hide()),this.options.showLabels||this.labels.hide(),this.attachEvents(),this.options.showScale&&this.renderScale(),void this.setValue(this.options.value)):void console.log("jRange : no width found, returning")},isSingle:function(){return"number"==typeof this.options.value?!0:-1!==this.options.value.indexOf(",")||this.options.isRange?!1:!0},attachEvents:function(){this.clickableBar.click($.proxy(this.barClicked,this)),this.pointers.mousedown($.proxy(this.onDragStart,this)),this.pointers.bind("dragstart",function(t){t.preventDefault()})},onDragStart:function(t){if(1===t.which){t.stopPropagation(),t.preventDefault();var s=$(t.target);this.pointers.removeClass("last-active"),s.addClass("focused last-active"),this[(s.hasClass("low")?"low":"high")+"Label"].addClass("focused"),$(i).on("mousemove.slider",$.proxy(this.onDrag,this,s)),$(i).on("mouseup.slider",$.proxy(this.onDragEnd,this))}},onDrag:function(t,i){i.stopPropagation(),i.preventDefault();var s=i.clientX-this.domNode.offset().left;this.domNode.trigger("change",[this,t,s])},onDragEnd:function(){this.pointers.removeClass("focused"),this.labels.removeClass("focused"),$(i).off(".slider"),$(i).off(".slider")},barClicked:function(t){var i=t.pageX-this.clickableBar.offset().left;if(this.isSingle())this.setPosition(this.pointers.last(),i,!0,!0);else{var s=Math.abs(parseInt(this.pointers.first().css("left"),10)-i+this.pointers.first().width()/2)<Math.abs(parseInt(this.pointers.last().css("left"),10)-i+this.pointers.first().width()/2)?this.pointers.first():this.pointers.last();this.setPosition(s,i,!0,!0)}},onChange:function(t,i,s,o){var e,n;i.isSingle()?(e=0,n=i.domNode.width()):(e=s.hasClass("high")?i.lowPointer.position().left+i.lowPointer.width()/2:0,n=s.hasClass("low")?i.highPointer.position().left+i.highPointer.width()/2:i.domNode.width());var h=Math.min(Math.max(o,e),n);i.setPosition(s,h,!0)},setPosition:function(t,i,s,o){var e,n=this.lowPointer.position().left,h=this.highPointer.position().left,a=this.highPointer.width()/2;s||(i=this.prcToPx(i)),t[0]===this.highPointer[0]?h=Math.round(i-a):n=Math.round(i-a),t[o?"animate":"css"]({left:Math.round(i-a)}),e=this.isSingle()?0:n+a,this.bar[o?"animate":"css"]({width:Math.round(h+a-e),left:e}),this.showPointerValue(t,i,o)},setValue:function(t){var i=t.toString().split(",");this.options.value=t;var s=this.valuesToPrc(2===i.length?i:[0,i[0]]);this.isSingle()?this.setPosition(this.highPointer,s[1]):(this.setPosition(this.lowPointer,s[0]),this.setPosition(this.highPointer,s[1]))},renderScale:function(){for(var t=this.options.scale||[this.options.from,this.options.to],i=Math.round(100/(t.length-1)*10)/10,s="",o=0;o<t.length;o++)s+='<span style="left: '+o*i+'%">'+("|"!=t[o]?"<ins>"+t[o]+"</ins>":"")+"</span>";this.scale.html(s),$("ins",this.scale).each(function(){$(this).css({marginLeft:-$(this).outerWidth()/2})})},getBarWidth:function(){var t=this.options.value.split(",");return t.length>1?parseInt(t[1],10)-parseInt(t[0],10):parseInt(t[0],10)},showPointerValue:function(t,i,o){var e=$(".pointer-label",this.domNode)[t.hasClass("low")?"first":"last"](),n,h=this.positionToValue(i);if($.isFunction(this.options.format)){var a=this.isSingle()?s:t.hasClass("low")?"low":"high";n=this.options.format(h,a)}else n=this.options.format.replace("%s",h);var r=e.html(n).width(),l=i-r/2;l=Math.min(Math.max(l,0),this.options.width-r),e[o?"animate":"css"]({left:l}),this.setInputValue(t,h)},valuesToPrc:function(t){var i=100*(t[0]-this.options.from)/this.interval,s=100*(t[1]-this.options.from)/this.interval;return[i,s]},prcToPx:function(t){return this.domNode.width()*t/100},positionToValue:function(t){var i=t/this.domNode.width()*this.interval;return i+=this.options.from,Math.round(i/this.options.step)*this.options.step},setInputValue:function(t,i){if(this.isSingle())this.options.value=i.toString();else{var s=this.options.value.split(",");this.options.value=t.hasClass("low")?i+","+s[1]:s[0]+","+i}this.inputNode.val()!==this.options.value&&(this.inputNode.val(this.options.value),this.options.onstatechange.call(this,this.options.value))},getValue:function(){return this.options.value}};var e="jRange";$.fn[e]=function(t){var i=arguments,s;return this.each(function(){var n=$(this),h=$.data(this,"plugin_"+e),a="object"==typeof t&&t;h||n.data("plugin_"+e,h=new o(this,a)),"string"==typeof t&&(s=h[t].apply(h,Array.prototype.slice.call(i,1)))}),s||this}}(jQuery,window,document);
\ No newline at end of file +!function($,t,i,s){"use strict";var o=function(){return this.init.apply(this,arguments)};o.prototype={defaults:{onstatechange:function(){},isRange:!1,showLabels:!0,showScale:!0,step:1,format:"%s",theme:"theme-green",width:300,disable:!1},template:'<div class="slider-container"> <div class="back-bar"> <div class="selected-bar"></div> <div class="pointer low"></div><div class="pointer-label">123456</div> <div class="pointer high"></div><div class="pointer-label">456789</div> <div class="clickable-dummy"></div> </div> <div class="scale"></div> </div>',init:function(t,i){this.options=$.extend({},this.defaults,i),this.inputNode=$(t),this.options.value=this.inputNode.val()||(this.options.isRange?this.options.from+","+this.options.from:this.options.from),this.domNode=$(this.template),this.domNode.addClass(this.options.theme),this.inputNode.after(this.domNode),this.domNode.on("change",this.onChange),this.pointers=$(".pointer",this.domNode),this.lowPointer=this.pointers.first(),this.highPointer=this.pointers.last(),this.labels=$(".pointer-label",this.domNode),this.lowLabel=this.labels.first(),this.highLabel=this.labels.last(),this.scale=$(".scale",this.domNode),this.bar=$(".selected-bar",this.domNode),this.clickableBar=this.domNode.find(".clickable-dummy"),this.interval=this.options.to-this.options.from,this.render()},render:function(){return 0!==this.inputNode.width()||this.options.width?(this.domNode.width(this.options.width||this.inputNode.width()),this.inputNode.hide(),this.isSingle()&&(this.lowPointer.hide(),this.lowLabel.hide()),this.options.showLabels||this.labels.hide(),this.attachEvents(),this.options.showScale&&this.renderScale(),void this.setValue(this.options.value)):void console.log("jRange : no width found, returning")},isSingle:function(){return"number"==typeof this.options.value?!0:-1!==this.options.value.indexOf(",")||this.options.isRange?!1:!0},attachEvents:function(){this.clickableBar.click($.proxy(this.barClicked,this)),this.pointers.on("mousedown touchstart",$.proxy(this.onDragStart,this)),this.pointers.bind("dragstart",function(t){t.preventDefault()})},onDragStart:function(t){if(!(this.options.disable||"mousedown"===t.type&&1!==t.which)){t.stopPropagation(),t.preventDefault();var s=$(t.target);this.pointers.removeClass("last-active"),s.addClass("focused last-active"),this[(s.hasClass("low")?"low":"high")+"Label"].addClass("focused"),$(i).on("mousemove.slider touchmove.slider",$.proxy(this.onDrag,this,s)),$(i).on("mouseup.slider touchend.slider touchcancel.slider",$.proxy(this.onDragEnd,this))}},onDrag:function(t,i){i.stopPropagation(),i.preventDefault(),i.originalEvent.touches&&i.originalEvent.touches.length?i=i.originalEvent.touches[0]:i.originalEvent.changedTouches&&i.originalEvent.changedTouches.length&&(i=i.originalEvent.changedTouches[0]);var s=i.clientX-this.domNode.offset().left;this.domNode.trigger("change",[this,t,s])},onDragEnd:function(t){this.pointers.removeClass("focused"),this.labels.removeClass("focused"),$(i).off(".slider")},barClicked:function(t){if(!this.options.disable){var i=t.pageX-this.clickableBar.offset().left;if(this.isSingle())this.setPosition(this.pointers.last(),i,!0,!0);else{var s=Math.abs(parseInt(this.pointers.first().css("left"),10)-i+this.pointers.first().width()/2)<Math.abs(parseInt(this.pointers.last().css("left"),10)-i+this.pointers.first().width()/2)?this.pointers.first():this.pointers.last();this.setPosition(s,i,!0,!0)}}},onChange:function(t,i,s,o){var e,n;i.isSingle()?(e=0,n=i.domNode.width()):(e=s.hasClass("high")?i.lowPointer.position().left+i.lowPointer.width()/2:0,n=s.hasClass("low")?i.highPointer.position().left+i.highPointer.width()/2:i.domNode.width());var h=Math.min(Math.max(o,e),n);i.setPosition(s,h,!0)},setPosition:function(t,i,s,o){var e,n=this.lowPointer.position().left,h=this.highPointer.position().left,a=this.highPointer.width()/2;s||(i=this.prcToPx(i)),t[0]===this.highPointer[0]?h=Math.round(i-a):n=Math.round(i-a),t[o?"animate":"css"]({left:Math.round(i-a)}),e=this.isSingle()?0:n+a,this.bar[o?"animate":"css"]({width:Math.round(h+a-e),left:e}),this.showPointerValue(t,i,o),this.isReadonly()},setValue:function(t){var i=t.toString().split(",");this.options.value=t;var s=this.valuesToPrc(2===i.length?i:[0,i[0]]);this.isSingle()?this.setPosition(this.highPointer,s[1]):(this.setPosition(this.lowPointer,s[0]),this.setPosition(this.highPointer,s[1]))},renderScale:function(){for(var t=this.options.scale||[this.options.from,this.options.to],i=Math.round(100/(t.length-1)*10)/10,s="",o=0;o<t.length;o++)s+='<span style="left: '+o*i+'%">'+("|"!=t[o]?"<ins>"+t[o]+"</ins>":"")+"</span>";this.scale.html(s),$("ins",this.scale).each(function(){$(this).css({marginLeft:-$(this).outerWidth()/2})})},getBarWidth:function(){var t=this.options.value.split(",");return t.length>1?parseInt(t[1],10)-parseInt(t[0],10):parseInt(t[0],10)},showPointerValue:function(t,i,o){var e=$(".pointer-label",this.domNode)[t.hasClass("low")?"first":"last"](),n,h=this.positionToValue(i);if($.isFunction(this.options.format)){var a=this.isSingle()?s:t.hasClass("low")?"low":"high";n=this.options.format(h,a)}else n=this.options.format.replace("%s",h);var l=e.html(n).width(),r=i-l/2;r=Math.min(Math.max(r,0),this.options.width-l),e[o?"animate":"css"]({left:r}),this.setInputValue(t,h)},valuesToPrc:function(t){var i=100*(t[0]-this.options.from)/this.interval,s=100*(t[1]-this.options.from)/this.interval;return[i,s]},prcToPx:function(t){return this.domNode.width()*t/100},positionToValue:function(t){var i=t/this.domNode.width()*this.interval;return i+=this.options.from,Math.round(i/this.options.step)*this.options.step},setInputValue:function(t,i){if(this.isSingle())this.options.value=i.toString();else{var s=this.options.value.split(",");this.options.value=t.hasClass("low")?i+","+s[1]:s[0]+","+i}this.inputNode.val()!==this.options.value&&(this.inputNode.val(this.options.value),this.options.onstatechange.call(this,this.options.value))},getValue:function(){return this.options.value},isReadonly:function(){this.domNode.toggleClass("slider-readonly",this.options.disable)},disable:function(){this.options.disable=!0,this.isReadonly()},enable:function(){this.options.disable=!1,this.isReadonly()},toggleDisable:function(){this.options.disable=!this.options.disable,this.isReadonly()}};var e="jRange";$.fn[e]=function(i){var s=arguments,n;return this.each(function(){var h=$(this),a=$.data(this,"plugin_"+e),l="object"==typeof i&&i;a||(h.data("plugin_"+e,a=new o(this,l)),$(t).resize(function(){a.setValue(a.getValue())})),"string"==typeof i&&(n=a[i].apply(a,Array.prototype.slice.call(s,1)))}),n||this}}(jQuery,window,document);
\ No newline at end of file diff --git a/library/jRange/jquery.range.css b/library/jRange/jquery.range.css index 4fb1578dc..62dc15b4f 100644 --- a/library/jRange/jquery.range.css +++ b/library/jRange/jquery.range.css @@ -15,7 +15,7 @@ width: 10px; height: 10px; background-color: red; - cursor: move; + cursor: col-resize; opacity: 1; z-index: 2; } @@ -59,6 +59,10 @@ color: #999; line-height: 1; } +.slider-container.slider-readonly .clickable-dummy, +.slider-container.slider-readonly .pointer { + cursor: auto; +} .theme-green .back-bar { height: 5px; border-radius: 2px; @@ -100,7 +104,6 @@ background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); - cursor: col-resize; } .theme-green .back-bar .pointer-label { color: #999; @@ -155,7 +158,6 @@ background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); - cursor: col-resize; } .theme-blue .back-bar .pointer-label { color: #999; diff --git a/library/jRange/jquery.range.js b/library/jRange/jquery.range.js index b3208387d..3e7f99ed9 100644 --- a/library/jRange/jquery.range.js +++ b/library/jRange/jquery.range.js @@ -17,27 +17,26 @@ * jQuery (http://jquery.com) * **/ - ; - (function($, window, document, undefined) { +; +(function($, window, document, undefined) { 'use strict'; - var jRange = function(){ + var jRange = function() { return this.init.apply(this, arguments); }; jRange.prototype = { - defaults : { - onstatechange : function(){}, - isRange : false, - showLabels : true, - showScale : true, - step : 1, + defaults: { + onstatechange: function() {}, + isRange: false, + showLabels: true, + showScale: true, + step: 1, format: '%s', - theme : 'theme-green', - width : 300, - minRange: 0, - maxRange: 'auto' + theme: 'theme-green', + width: 300, + disable: false }, - template : '<div class="slider-container">\ + template: '<div class="slider-container">\ <div class="back-bar">\ <div class="selected-bar"></div>\ <div class="pointer low"></div><div class="pointer-label">123456</div>\ @@ -46,214 +45,247 @@ </div>\ <div class="scale"></div>\ </div>', - init : function(node, options){ + init: function(node, options) { this.options = $.extend({}, this.defaults, options); this.inputNode = $(node); - this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from+','+this.options.from : this.options.from); + this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : this.options.from); this.domNode = $(this.template); this.domNode.addClass(this.options.theme); this.inputNode.after(this.domNode); this.domNode.on('change', this.onChange); - this.pointers = $('.pointer', this.domNode); - this.lowPointer = this.pointers.first(); - this.highPointer = this.pointers.last(); - this.labels = $('.pointer-label', this.domNode); - this.lowLabel = this.labels.first(); - this.highLabel = this.labels.last(); - this.scale = $('.scale', this.domNode); - this.bar = $('.selected-bar', this.domNode); - this.clickableBar = this.domNode.find('.clickable-dummy'); - this.interval = this.options.to - this.options.from; + this.pointers = $('.pointer', this.domNode); + this.lowPointer = this.pointers.first(); + this.highPointer = this.pointers.last(); + this.labels = $('.pointer-label', this.domNode); + this.lowLabel = this.labels.first(); + this.highLabel = this.labels.last(); + this.scale = $('.scale', this.domNode); + this.bar = $('.selected-bar', this.domNode); + this.clickableBar = this.domNode.find('.clickable-dummy'); + this.interval = this.options.to - this.options.from; this.render(); }, - render: function(){ + render: function() { // Check if inputNode is visible, and have some width, so that we can set slider width accordingly. - if( this.inputNode.width() === 0 && !this.options.width ){ + if (this.inputNode.width() === 0 && !this.options.width) { console.log('jRange : no width found, returning'); return; - }else{ - this.domNode.width( this.options.width || this.inputNode.width() ); + } else { + this.domNode.width(this.options.width || this.inputNode.width()); this.inputNode.hide(); } - if(this.isSingle()){ + if (this.isSingle()) { this.lowPointer.hide(); this.lowLabel.hide(); } - if(!this.options.showLabels){ + if (!this.options.showLabels) { this.labels.hide(); } this.attachEvents(); - if(this.options.showScale){ + if (this.options.showScale) { this.renderScale(); } this.setValue(this.options.value); }, - isSingle: function(){ - if(typeof(this.options.value) === 'number'){ + isSingle: function() { + if (typeof(this.options.value) === 'number') { return true; } return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ? - false : true; + false : true; }, - attachEvents: function(){ + attachEvents: function() { this.clickableBar.click($.proxy(this.barClicked, this)); - this.pointers.mousedown($.proxy(this.onDragStart, this)); - this.pointers.bind('dragstart', function(event) { event.preventDefault(); }); + this.pointers.on('mousedown touchstart', $.proxy(this.onDragStart, this)); + this.pointers.bind('dragstart', function(event) { + event.preventDefault(); + }); }, - onDragStart: function(e){ - if(e.which !== 1){return;} - e.stopPropagation(); e.preventDefault(); + onDragStart: function(e) { + if ( this.options.disable || (e.type === 'mousedown' && e.which !== 1)) { + return; + } + e.stopPropagation(); + e.preventDefault(); var pointer = $(e.target); this.pointers.removeClass('last-active'); pointer.addClass('focused last-active'); - this[(pointer.hasClass('low')?'low':'high') + 'Label'].addClass('focused'); - $(document).on('mousemove.slider', $.proxy(this.onDrag, this, pointer)); - $(document).on('mouseup.slider', $.proxy(this.onDragEnd, this)); + this[(pointer.hasClass('low') ? 'low' : 'high') + 'Label'].addClass('focused'); + $(document).on('mousemove.slider touchmove.slider', $.proxy(this.onDrag, this, pointer)); + $(document).on('mouseup.slider touchend.slider touchcancel.slider', $.proxy(this.onDragEnd, this)); }, - onDrag: function(pointer, e){ - e.stopPropagation(); e.preventDefault(); + onDrag: function(pointer, e) { + e.stopPropagation(); + e.preventDefault(); + + if (e.originalEvent.touches && e.originalEvent.touches.length) { + e = e.originalEvent.touches[0]; + } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) { + e = e.originalEvent.changedTouches[0]; + } + var position = e.clientX - this.domNode.offset().left; this.domNode.trigger('change', [this, pointer, position]); }, - onDragEnd: function(){ + onDragEnd: function(e) { this.pointers.removeClass('focused'); this.labels.removeClass('focused'); $(document).off('.slider'); - $(document).off('.slider'); }, - barClicked: function(e){ + barClicked: function(e) { + if(this.options.disable) return; var x = e.pageX - this.clickableBar.offset().left; - if(this.isSingle()) + if (this.isSingle()) this.setPosition(this.pointers.last(), x, true, true); - else{ + else { var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ? this.pointers.first() : this.pointers.last(); this.setPosition(pointer, x, true, true); } }, - onChange: function(e, self, pointer, position){ + onChange: function(e, self, pointer, position) { var min, max; - if(self.isSingle()){ + if (self.isSingle()) { min = 0; max = self.domNode.width(); - }else{ - min = pointer.hasClass('high')? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0; + } else { + min = pointer.hasClass('high') ? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0; max = pointer.hasClass('low') ? self.highPointer.position().left + self.highPointer.width() / 2 : self.domNode.width(); } var value = Math.min(Math.max(position, min), max); self.setPosition(pointer, value, true); }, - setPosition: function(pointer, position, isPx, animate){ + setPosition: function(pointer, position, isPx, animate) { var leftPos, lowPos = this.lowPointer.position().left, highPos = this.highPointer.position().left, circleWidth = this.highPointer.width() / 2; - if(!isPx){ + if (!isPx) { position = this.prcToPx(position); } - if(pointer[0] === this.highPointer[0]){ - highPos = Math.round(position - circleWidth); - }else{ - lowPos = Math.round(position - circleWidth); + if (pointer[0] === this.highPointer[0]) { + highPos = Math.round(position - circleWidth); + } else { + lowPos = Math.round(position - circleWidth); } - pointer[animate?'animate':'css']({'left': Math.round(position - circleWidth)}); - if(this.isSingle()){ + pointer[animate ? 'animate' : 'css']({ + 'left': Math.round(position - circleWidth) + }); + if (this.isSingle()) { leftPos = 0; - }else{ + } else { leftPos = lowPos + circleWidth; } - this.bar[animate?'animate':'css']({ - 'width' : Math.round(highPos + circleWidth - leftPos), - 'left' : leftPos - }); + this.bar[animate ? 'animate' : 'css']({ + 'width': Math.round(highPos + circleWidth - leftPos), + 'left': leftPos + }); this.showPointerValue(pointer, position, animate); + this.isReadonly(); }, // will be called from outside - setValue: function(value){ + setValue: function(value) { var values = value.toString().split(','); this.options.value = value; - var prc = this.valuesToPrc( values.length === 2 ? values : [0, values[0]] ); - if(this.isSingle()){ + var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]); + if (this.isSingle()) { this.setPosition(this.highPointer, prc[1]); - }else{ + } else { this.setPosition(this.lowPointer, prc[0]); this.setPosition(this.highPointer, prc[1]); } }, - renderScale: function(){ + renderScale: function() { var s = this.options.scale || [this.options.from, this.options.to]; var prc = Math.round((100 / (s.length - 1)) * 10) / 10; var str = ''; - for(var i = 0; i < s.length ; i++ ){ + for (var i = 0; i < s.length; i++) { str += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>'; } this.scale.html(str); - $('ins', this.scale).each(function () { + $('ins', this.scale).each(function() { $(this).css({ marginLeft: -$(this).outerWidth() / 2 }); }); }, - getBarWidth: function(){ + getBarWidth: function() { var values = this.options.value.split(','); - if(values.length > 1){ + if (values.length > 1) { return parseInt(values[1], 10) - parseInt(values[0], 10); - }else{ + } else { return parseInt(values[0], 10); } }, - showPointerValue: function(pointer, position, animate){ - var label = $('.pointer-label', this.domNode)[pointer.hasClass('low')?'first':'last'](); + showPointerValue: function(pointer, position, animate) { + var label = $('.pointer-label', this.domNode)[pointer.hasClass('low') ? 'first' : 'last'](); var text; var value = this.positionToValue(position); - if($.isFunction(this.options.format)){ - var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low':'high'); - text = this.options.format(value, type); - }else{ + if ($.isFunction(this.options.format)) { + var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low' : 'high'); + text = this.options.format(value, type); + } else { text = this.options.format.replace('%s', value); } var width = label.html(text).width(), left = position - width / 2; left = Math.min(Math.max(left, 0), this.options.width - width); - label[animate?'animate':'css']({left: left}); + label[animate ? 'animate' : 'css']({ + left: left + }); this.setInputValue(pointer, value); }, - valuesToPrc: function(values){ - var lowPrc = ( ( values[0] - this.options.from ) * 100 / this.interval ), - highPrc = ( ( values[1] - this.options.from ) * 100 / this.interval ); + valuesToPrc: function(values) { + var lowPrc = ((values[0] - this.options.from) * 100 / this.interval), + highPrc = ((values[1] - this.options.from) * 100 / this.interval); return [lowPrc, highPrc]; }, - prcToPx: function(prc){ + prcToPx: function(prc) { return (this.domNode.width() * prc) / 100; }, - positionToValue: function(pos){ + positionToValue: function(pos) { var value = (pos / this.domNode.width()) * this.interval; value = value + this.options.from; - return Math.round(value / this.options.step) * this.options.step; + return Math.round(value / this.options.step) * this.options.step; }, - setInputValue: function(pointer, v){ + setInputValue: function(pointer, v) { // if(!isChanged) return; - if(this.isSingle()){ + if (this.isSingle()) { this.options.value = v.toString(); - }else{ + } else { var values = this.options.value.split(','); - if(pointer.hasClass('low')){ + if (pointer.hasClass('low')) { this.options.value = v + ',' + values[1]; - }else{ + } else { this.options.value = values[0] + ',' + v; } } - if( this.inputNode.val() !== this.options.value ){ + if (this.inputNode.val() !== this.options.value) { this.inputNode.val(this.options.value); this.options.onstatechange.call(this, this.options.value); } }, - getValue: function(){ - return this.options.value; - } + getValue: function() { + return this.options.value; + }, + isReadonly: function(){ + this.domNode.toggleClass('slider-readonly', this.options.disable); + }, + disable: function(){ + this.options.disable = true; + this.isReadonly(); + }, + enable: function(){ + this.options.disable = false; + this.isReadonly(); + }, + toggleDisable: function(){ + this.options.disable = !this.options.disable; + this.isReadonly(); + } }; /*$.jRange = function (node, options) { @@ -275,7 +307,7 @@ // preventing against multiple instantiations $.fn[pluginName] = function(option) { var args = arguments, - result; + result; this.each(function() { var $this = $(this), @@ -283,7 +315,9 @@ options = typeof option === 'object' && option; if (!data) { $this.data('plugin_' + pluginName, (data = new jRange(this, options))); - $(window).resize(function() { data.setValue(data.getValue()); }); // Update slider position when window is resized to keep it in sync with scale + $(window).resize(function() { + data.setValue(data.getValue()); + }); // Update slider position when window is resized to keep it in sync with scale } // if first argument is a string, call silimarly named function // this gives flexibility to call functions of the plugin e.g. @@ -298,4 +332,4 @@ return result || this; }; -})(jQuery, window, document); +})(jQuery, window, document);
\ No newline at end of file diff --git a/library/jRange/jquery.range.less b/library/jRange/jquery.range.less index cb6e12288..4034bdd66 100644 --- a/library/jRange/jquery.range.less +++ b/library/jRange/jquery.range.less @@ -70,7 +70,7 @@ width: 10px; height: 10px; background-color: red; - cursor: move; + cursor: col-resize; opacity: 1; z-index: 2; &.last-active{ @@ -115,6 +115,11 @@ line-height: 1; } } + &.slider-readonly{ + .clickable-dummy, .pointer { + cursor: auto; + } + } } .theme-green { .back-bar { @@ -136,7 +141,6 @@ border-radius: 10px; border: 1px solid #AAA; #gradient > .vertical(#eeeeee, #dddddd); - cursor: col-resize; } .pointer-label { color: #999; @@ -175,7 +179,6 @@ border-radius: 10px; border: 1px solid #AAA; #gradient > .vertical(#eeeeee, #dddddd); - cursor: col-resize; } .pointer-label { color: #999; |