1 | /*
|
---|
2 | * Fuel UX Spinner
|
---|
3 | * https://github.com/ExactTarget/fuelux
|
---|
4 | *
|
---|
5 | * Copyright (c) 2012 ExactTarget
|
---|
6 | * Licensed under the MIT license.
|
---|
7 | */
|
---|
8 |
|
---|
9 | (function($ , undefined) {
|
---|
10 |
|
---|
11 | //var $ = require('jquery');
|
---|
12 |
|
---|
13 |
|
---|
14 | // SPINNER CONSTRUCTOR AND PROTOTYPE
|
---|
15 |
|
---|
16 | var Spinner = function (element, options) {
|
---|
17 | this.$element = $(element);
|
---|
18 | this.options = $.extend({}, $.fn.spinner.defaults, options);
|
---|
19 | this.$input = this.$element.find('.spinner-input');
|
---|
20 | this.$element.on('keyup', this.$input, $.proxy(this.change, this));
|
---|
21 |
|
---|
22 | if (this.options.hold) {
|
---|
23 | this.$element.on('mousedown', '.spinner-up', $.proxy(function() { this.startSpin(true); } , this));
|
---|
24 | this.$element.on('mouseup', '.spinner-up, .spinner-down', $.proxy(this.stopSpin, this));
|
---|
25 | this.$element.on('mouseout', '.spinner-up, .spinner-down', $.proxy(this.stopSpin, this));
|
---|
26 | this.$element.on('mousedown', '.spinner-down', $.proxy(function() {this.startSpin(false);} , this));
|
---|
27 | } else {
|
---|
28 | this.$element.on('click', '.spinner-up', $.proxy(function() { this.step(true); } , this));
|
---|
29 | this.$element.on('click', '.spinner-down', $.proxy(function() { this.step(false); }, this));
|
---|
30 | }
|
---|
31 |
|
---|
32 | this.switches = {
|
---|
33 | count: 1,
|
---|
34 | enabled: true
|
---|
35 | };
|
---|
36 |
|
---|
37 | if (this.options.speed === 'medium') {
|
---|
38 | this.switches.speed = 300;
|
---|
39 | } else if (this.options.speed === 'fast') {
|
---|
40 | this.switches.speed = 100;
|
---|
41 | } else {
|
---|
42 | this.switches.speed = 500;
|
---|
43 | }
|
---|
44 |
|
---|
45 | this.lastValue = null;
|
---|
46 |
|
---|
47 | this.render();
|
---|
48 |
|
---|
49 | if (this.options.disabled) {
|
---|
50 | this.disable();
|
---|
51 | }
|
---|
52 | };
|
---|
53 |
|
---|
54 | Spinner.prototype = {
|
---|
55 | constructor: Spinner,
|
---|
56 |
|
---|
57 | render: function () {
|
---|
58 | this.$input.val(this.options.value);
|
---|
59 | this.$input.attr('maxlength',(this.options.max + '').split('').length);
|
---|
60 | },
|
---|
61 |
|
---|
62 | change: function () {
|
---|
63 | var newVal = this.$input.val();
|
---|
64 |
|
---|
65 | if(newVal/1){
|
---|
66 | this.options.value = newVal/1;
|
---|
67 | }else{
|
---|
68 | newVal = newVal.replace(/[^0-9]/g,'');
|
---|
69 | this.$input.val(newVal);
|
---|
70 | this.options.value = newVal/1;
|
---|
71 | }
|
---|
72 |
|
---|
73 | this.triggerChangedEvent();
|
---|
74 | },
|
---|
75 |
|
---|
76 | stopSpin: function () {
|
---|
77 | clearTimeout(this.switches.timeout);
|
---|
78 | this.switches.count = 1;
|
---|
79 | this.triggerChangedEvent();
|
---|
80 | },
|
---|
81 |
|
---|
82 | triggerChangedEvent: function () {
|
---|
83 | var currentValue = this.value();
|
---|
84 | if (currentValue === this.lastValue) return;
|
---|
85 |
|
---|
86 | this.lastValue = currentValue;
|
---|
87 |
|
---|
88 | // Primary changed event
|
---|
89 | this.$element.trigger('changed', currentValue);
|
---|
90 |
|
---|
91 | // Undocumented, kept for backward compatibility
|
---|
92 | this.$element.trigger('change');
|
---|
93 | },
|
---|
94 |
|
---|
95 | startSpin: function (type) {
|
---|
96 |
|
---|
97 | if (!this.options.disabled) {
|
---|
98 | var divisor = this.switches.count;
|
---|
99 |
|
---|
100 | if (divisor === 1) {
|
---|
101 | this.step(type);
|
---|
102 | divisor = 1;
|
---|
103 | } else if (divisor < 3){
|
---|
104 | divisor = 1.5;
|
---|
105 | } else if (divisor < 8){
|
---|
106 | divisor = 2.5;
|
---|
107 | } else {
|
---|
108 | divisor = 4;
|
---|
109 | }
|
---|
110 |
|
---|
111 | this.switches.timeout = setTimeout($.proxy(function() {this.iterator(type);} ,this),this.switches.speed/divisor);
|
---|
112 | this.switches.count++;
|
---|
113 | }
|
---|
114 | },
|
---|
115 |
|
---|
116 | iterator: function (type) {
|
---|
117 | this.step(type);
|
---|
118 | this.startSpin(type);
|
---|
119 | },
|
---|
120 |
|
---|
121 | step: function (dir) {
|
---|
122 | var curValue = this.options.value;
|
---|
123 | var limValue = dir ? this.options.max : this.options.min;
|
---|
124 |
|
---|
125 | if ((dir ? curValue < limValue : curValue > limValue)) {
|
---|
126 | var newVal = curValue + (dir ? 1 : -1) * this.options.step;
|
---|
127 |
|
---|
128 | if (dir ? newVal > limValue : newVal < limValue) {
|
---|
129 | this.value(limValue);
|
---|
130 | } else {
|
---|
131 | this.value(newVal);
|
---|
132 | }
|
---|
133 | }
|
---|
134 | },
|
---|
135 |
|
---|
136 | value: function (value) {
|
---|
137 | if (!isNaN(parseFloat(value)) && isFinite(value)) {
|
---|
138 | value = parseFloat(value);
|
---|
139 | this.options.value = value;
|
---|
140 | this.$input.val(value);
|
---|
141 | return this;
|
---|
142 | } else {
|
---|
143 | return this.options.value;
|
---|
144 | }
|
---|
145 | },
|
---|
146 |
|
---|
147 | disable: function () {
|
---|
148 | this.options.disabled = true;
|
---|
149 | this.$input.attr('disabled','');
|
---|
150 | this.$element.find('button').addClass('disabled');
|
---|
151 | },
|
---|
152 |
|
---|
153 | enable: function () {
|
---|
154 | this.options.disabled = false;
|
---|
155 | this.$input.removeAttr("disabled");
|
---|
156 | this.$element.find('button').removeClass('disabled');
|
---|
157 | }
|
---|
158 | };
|
---|
159 |
|
---|
160 |
|
---|
161 | // SPINNER PLUGIN DEFINITION
|
---|
162 |
|
---|
163 | $.fn.spinner = function (option,value) {
|
---|
164 | var methodReturn;
|
---|
165 |
|
---|
166 | var $set = this.each(function () {
|
---|
167 | var $this = $(this);
|
---|
168 | var data = $this.data('spinner');
|
---|
169 | var options = typeof option === 'object' && option;
|
---|
170 |
|
---|
171 | if (!data) $this.data('spinner', (data = new Spinner(this, options)));
|
---|
172 | if (typeof option === 'string') methodReturn = data[option](value);
|
---|
173 | });
|
---|
174 |
|
---|
175 | return (methodReturn === undefined) ? $set : methodReturn;
|
---|
176 | };
|
---|
177 |
|
---|
178 | $.fn.spinner.defaults = {
|
---|
179 | value: 1,
|
---|
180 | min: 1,
|
---|
181 | max: 999,
|
---|
182 | step: 1,
|
---|
183 | hold: true,
|
---|
184 | speed: 'medium',
|
---|
185 | disabled: false
|
---|
186 | };
|
---|
187 |
|
---|
188 | $.fn.spinner.Constructor = Spinner;
|
---|
189 |
|
---|
190 |
|
---|
191 | // SPINNER DATA-API
|
---|
192 |
|
---|
193 | $(function () {
|
---|
194 | $('body').on('mousedown.spinner.data-api', '.spinner', function (e) {
|
---|
195 | var $this = $(this);
|
---|
196 | if ($this.data('spinner')) return;
|
---|
197 | $this.spinner($this.data());
|
---|
198 | });
|
---|
199 | });
|
---|
200 |
|
---|
201 | })(window.jQuery);
|
---|