source: pro-violet-viettel/docs/Space/assets/js/uncompressed/fuelux/fuelux.spinner.js @ 290

Last change on this file since 290 was 290, checked in by lamdt, 11 years ago
File size: 4.9 KB
Line 
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);
Note: See TracBrowser for help on using the repository browser.