123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
-
- $.fn.SpinButton = function(cfg) { 'use strict';
- function coord(el,prop) {
- var c = el[prop], b = document.body;
-
- while ((el = el.offsetParent) && (el != b)) {
- if (!$.browser.msie || (el.currentStyle.position !== 'relative')) {
- c += el[prop];
- }
- }
-
- return c;
- }
- return this.each(function(){
- this.repeating = false;
-
-
-
- this.spinCfg = {
-
-
- min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
- max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
- step: cfg && cfg.step ? Number(cfg.step) : 1,
- stepfunc: cfg && cfg.stepfunc ? cfg.stepfunc : false,
- page: cfg && cfg.page ? Number(cfg.page) : 10,
- upClass: cfg && cfg.upClass ? cfg.upClass : 'up',
- downClass: cfg && cfg.downClass ? cfg.downClass : 'down',
- reset: cfg && cfg.reset ? cfg.reset : this.value,
- delay: cfg && cfg.delay ? Number(cfg.delay) : 500,
- interval: cfg && cfg.interval ? Number(cfg.interval) : 100,
- _btn_width: 20,
- _direction: null,
- _delay: null,
- _repeat: null,
- callback: cfg && cfg.callback ? cfg.callback : null
- };
-
- this.spinCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.spinCfg.step/2;
-
- this.adjustValue = function(i){
- var v;
- if(isNaN(this.value)) {
- v = this.spinCfg.reset;
- } else if($.isFunction(this.spinCfg.stepfunc)) {
- v = this.spinCfg.stepfunc(this, i);
- } else {
-
- v = Number((Number(this.value) + Number(i)).toFixed(5));
- }
- if (this.spinCfg.min !== null) {v = Math.max(v, this.spinCfg.min);}
- if (this.spinCfg.max !== null) {v = Math.min(v, this.spinCfg.max);}
- this.value = v;
- if ($.isFunction(this.spinCfg.callback)) {this.spinCfg.callback(this);}
- };
-
- $(this)
- .addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button')
-
- .mousemove(function(e){
-
- var x = e.pageX || e.x;
- var y = e.pageY || e.y;
- var el = e.target || e.srcElement;
- var scale = svgEditor.tool_scale || 1;
- var height = $(el).height()/2;
-
- var direction =
- (x > coord(el,'offsetLeft') + el.offsetWidth*scale - this.spinCfg._btn_width)
- ? ((y < coord(el,'offsetTop') + height*scale) ? 1 : -1) : 0;
-
- if (direction !== this.spinCfg._direction) {
-
- switch(direction){
- case 1:
- $(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
- break;
- case -1:
- $(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass);
- break;
- default:
- $(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
- }
-
-
- this.spinCfg._direction = direction;
- }
- })
-
- .mouseout(function(){
-
- $(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
- this.spinCfg._direction = null;
- window.clearInterval(this.spinCfg._repeat);
- window.clearTimeout(this.spinCfg._delay);
- })
-
- .mousedown(function(e){
- if (e.button === 0 && this.spinCfg._direction != 0) {
-
- var self = this;
- var stepSize = e.shiftKey ? self.spinCfg.smallStep : self.spinCfg.step;
- var adjust = function() {
- self.adjustValue(self.spinCfg._direction * stepSize);
- };
-
- adjust();
-
-
- self.spinCfg._delay = window.setTimeout(function() {
- adjust();
-
- self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval);
- }, self.spinCfg.delay);
- }
- })
-
- .mouseup(function(e){
-
- window.clearInterval(this.spinCfg._repeat);
- window.clearTimeout(this.spinCfg._delay);
- })
-
- .dblclick(function(e) {
- if ($.browser.msie) {
- this.adjustValue(this.spinCfg._direction * this.spinCfg.step);
- }
- })
-
- .keydown(function(e){
-
- switch(e.keyCode){
- case 38: this.adjustValue(this.spinCfg.step); break;
- case 40: this.adjustValue(-this.spinCfg.step); break;
- case 33: this.adjustValue(this.spinCfg.page); break;
- case 34: this.adjustValue(-this.spinCfg.page); break;
- }
- })
-
-
- .keypress(function(e){
- if (this.repeating) {
-
- switch(e.keyCode){
- case 38: this.adjustValue(this.spinCfg.step); break;
- case 40: this.adjustValue(-this.spinCfg.step); break;
- case 33: this.adjustValue(this.spinCfg.page); break;
- case 34: this.adjustValue(-this.spinCfg.page); break;
- }
- }
-
- else {
- this.repeating = true;
- }
- })
-
-
- .keyup(function(e) {
- this.repeating = false;
- switch(e.keyCode){
- case 38:
- case 40:
- case 33:
- case 34:
- case 13: this.adjustValue(0); break;
- }
- })
-
- .bind("mousewheel", function(e){
-
- if (e.wheelDelta >= 120) {
- this.adjustValue(this.spinCfg.step);
- }
- else if (e.wheelDelta <= -120) {
- this.adjustValue(-this.spinCfg.step);
- }
-
- e.preventDefault();
- })
-
- .change(function(e){
- this.adjustValue(0);
- });
-
- if (this.addEventListener) {
-
- this.addEventListener('DOMMouseScroll', function(e) {
- if (e.detail > 0) {
- this.adjustValue(-this.spinCfg.step);
- }
- else if (e.detail < 0) {
- this.adjustValue(this.spinCfg.step);
- }
-
- e.preventDefault();
- }, false);
- }
- });
- };
|