[400] | 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);
|
---|