123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- /*
- * Fuel UX Spinbox
- * https://github.com/ExactTarget/fuelux
- *
- * Copyright (c) 2014 ExactTarget
- * Licensed under the BSD New license.
- */
- // -- BEGIN UMD WRAPPER PREFACE --
- // For more information on UMD visit:
- // https://github.com/umdjs/umd/blob/master/jqueryPlugin.js
- (function (factory) {
- if (typeof define === 'function' && define.amd) {
- // if AMD loader is available, register as an anonymous module.
- define(['jquery'], factory);
- } else {
- // OR use browser globals if AMD is not present
- factory(jQuery);
- }
- }(function ($) {
- // -- END UMD WRAPPER PREFACE --
- // -- BEGIN MODULE CODE HERE --
- var old = $.fn.spinbox;
- // SPINBOX CONSTRUCTOR AND PROTOTYPE
- var Spinbox = function (element, options) {
- this.$element = $(element);
- this.$element.find('.btn').on('click', function (e) {
- //keep spinbox from submitting if they forgot to say type="button" on their spinner buttons
- e.preventDefault();
- });
- this.options = $.extend({}, $.fn.spinbox.defaults, options);
- this.$input = this.$element.find('.spinbox-input');
- this.$element.on('focusin.fu.spinbox', this.$input, $.proxy(this.changeFlag, this));
- this.$element.on('focusout.fu.spinbox', this.$input, $.proxy(this.change, this));
- this.$element.on('keydown.fu.spinbox', this.$input, $.proxy(this.keydown, this));
- this.$element.on('keyup.fu.spinbox', this.$input, $.proxy(this.keyup, this));
- this.bindMousewheelListeners();
- this.mousewheelTimeout = {};
- if (this.options.hold) {
- this.$element.on('mousedown.fu.spinbox', '.spinbox-up', $.proxy(function () {
- this.startSpin(true);
- }, this));
- this.$element.on('mouseup.fu.spinbox', '.spinbox-up, .spinbox-down', $.proxy(this.stopSpin, this));
- this.$element.on('mouseout.fu.spinbox', '.spinbox-up, .spinbox-down', $.proxy(this.stopSpin, this));
- this.$element.on('mousedown.fu.spinbox', '.spinbox-down', $.proxy(function () {
- this.startSpin(false);
- }, this));
- } else {
- this.$element.on('click.fu.spinbox', '.spinbox-up', $.proxy(function () {
- this.step(true);
- }, this));
- this.$element.on('click.fu.spinbox', '.spinbox-down', $.proxy(function () {
- this.step(false);
- }, this));
- }
- this.switches = {
- count: 1,
- enabled: true
- };
- if (this.options.speed === 'medium') {
- this.switches.speed = 300;
- } else if (this.options.speed === 'fast') {
- this.switches.speed = 100;
- } else {
- this.switches.speed = 500;
- }
- this.lastValue = this.options.value;
- this.render();
- if (this.options.disabled) {
- this.disable();
- }
- };
- Spinbox.prototype = {
- constructor: Spinbox,
- destroy: function () {
- this.$element.remove();
- // any external bindings
- // [none]
- // set input value attrbute
- this.$element.find('input').each(function () {
- $(this).attr('value', $(this).val());
- });
- // empty elements to return to original markup
- // [none]
- // returns string of markup
- return this.$element[0].outerHTML;
- },
- render: function () {
- var inputValue = this.parseInput(this.$input.val());
- var maxUnitLength = '';
- // if input is empty and option value is default, 0
- if (inputValue !== '' && this.options.value === 0) {
- this.value(inputValue);
- } else {
- this.output (this.options.value);
- }
- if (this.options.units.length) {
- $.each(this.options.units, function (index, value) {
- if (value.length > maxUnitLength.length) {
- maxUnitLength = value;
- }
- });
- }
- },
- output: function (value, updateField) {
- value = (value + '').split('.').join(this.options.decimalMark);
- updateField = (updateField || true);
- if (updateField) {
- this.$input.val(value);
- }
- return value;
- },
- parseInput: function (value) {
- value = (value + '').split(this.options.decimalMark).join('.');
- return value;
- },
- change: function () {
- var newVal = this.parseInput(this.$input.val()) || '';
- if (this.options.units.length || this.options.decimalMark !== '.') {
- newVal = this.parseValueWithUnit(newVal);
- } else if (newVal / 1) {
- newVal = this.options.value = this.checkMaxMin(newVal / 1);
- } else {
- newVal = this.checkMaxMin(newVal.replace(/[^0-9.-]/g, '') || '');
- this.options.value = newVal / 1;
- }
- this.output (newVal);
- this.changeFlag = false;
- this.triggerChangedEvent();
- },
- changeFlag: function () {
- this.changeFlag = true;
- },
- stopSpin: function () {
- if (this.switches.timeout !== undefined) {
- clearTimeout(this.switches.timeout);
- this.switches.count = 1;
- this.triggerChangedEvent();
- }
- },
- triggerChangedEvent: function () {
- var currentValue = this.value();
- if (currentValue === this.lastValue) return;
- this.lastValue = currentValue;
- // Primary changed event
- this.$element.trigger('changed.fu.spinbox', this.output(currentValue, false));// no DOM update
- },
- startSpin: function (type) {
- if (!this.options.disabled) {
- var divisor = this.switches.count;
- if (divisor === 1) {
- this.step(type);
- divisor = 1;
- } else if (divisor < 3) {
- divisor = 1.5;
- } else if (divisor < 8) {
- divisor = 2.5;
- } else {
- divisor = 4;
- }
- this.switches.timeout = setTimeout($.proxy(function () {
- this.iterate(type);
- }, this), this.switches.speed / divisor);
- this.switches.count++;
- }
- },
- iterate: function (type) {
- this.step(type);
- this.startSpin(type);
- },
- step: function (isIncrease) {
- // isIncrease: true is up, false is down
- var digits, multiple, currentValue, limitValue;
- // trigger change event
- if (this.changeFlag) {
- this.change();
- }
- // get current value and min/max options
- currentValue = this.options.value;
- limitValue = isIncrease ? this.options.max : this.options.min;
- if ( (isIncrease ? currentValue < limitValue : currentValue > limitValue) ) {
- var newVal = currentValue + (isIncrease ? 1 : -1) * this.options.step;
- // raise to power of 10 x number of decimal places, then round
- if (this.options.step % 1 !== 0) {
- digits = (this.options.step + '').split('.')[1].length;
- multiple = Math.pow(10, digits);
- newVal = Math.round(newVal * multiple) / multiple;
- }
- // if outside limits, set to limit value
- if (isIncrease ? newVal > limitValue : newVal < limitValue) {
- this.value(limitValue);
- } else {
- this.value(newVal);
- }
- } else if (this.options.cycle) {
- var cycleVal = isIncrease ? this.options.min : this.options.max;
- this.value(cycleVal);
- }
- },
- value: function (value) {
- if (value || value === 0) {
- if (this.options.units.length || this.options.decimalMark !== '.') {
- this.output(this.parseValueWithUnit(value + (this.unit || '')));
- return this;
- } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
- this.options.value = value / 1;
- this.output (value + (this.unit ? this.unit : ''));
- return this;
- }
- } else {
- if (this.changeFlag) {
- this.change();
- }
- if (this.unit) {
- return this.options.value + this.unit;
- } else {
- return this.output(this.options.value, false);// no DOM update
- }
- }
- },
- isUnitLegal: function (unit) {
- var legalUnit;
- $.each(this.options.units, function (index, value) {
- if (value.toLowerCase() === unit.toLowerCase()) {
- legalUnit = unit.toLowerCase();
- return false;
- }
- });
- return legalUnit;
- },
- // strips units and add them back
- parseValueWithUnit: function (value) {
- var unit = value.replace(/[^a-zA-Z]/g, '');
- var number = value.replace(/[^0-9.-]/g, '');
- if (unit) {
- unit = this.isUnitLegal(unit);
- }
- this.options.value = this.checkMaxMin(number / 1);
- this.unit = unit || undefined;
- return this.options.value + (unit || '');
- },
- checkMaxMin: function (value) {
- // if unreadable
- if (isNaN(parseFloat(value))) {
- return value;
- }
- // if not within range return the limit
- if (!(value <= this.options.max && value >= this.options.min)) {
- value = value >= this.options.max ? this.options.max : this.options.min;
- }
- return value;
- },
- disable: function () {
- this.options.disabled = true;
- this.$element.addClass('disabled');
- this.$input.attr('disabled', '');
- this.$element.find('button').addClass('disabled');
- },
- enable: function () {
- this.options.disabled = false;
- this.$element.removeClass('disabled');
- this.$input.removeAttr('disabled');
- this.$element.find('button').removeClass('disabled');
- },
- keydown: function (event) {
- var keyCode = event.keyCode;
- if (keyCode === 38) {
- this.step(true);
- } else if (keyCode === 40) {
- this.step(false);
- }
- },
- keyup: function (event) {
- var keyCode = event.keyCode;
- if (keyCode === 38 || keyCode === 40) {
- this.triggerChangedEvent();
- }
- },
- bindMousewheelListeners: function () {
- var inputEl = this.$input.get(0);
- if (inputEl.addEventListener) {
- //IE 9, Chrome, Safari, Opera
- inputEl.addEventListener('mousewheel', $.proxy(this.mousewheelHandler, this), false);
- // Firefox
- inputEl.addEventListener('DOMMouseScroll', $.proxy(this.mousewheelHandler, this), false);
- } else {
- // IE <9
- inputEl.attachEvent('onmousewheel', $.proxy(this.mousewheelHandler, this));
- }
- },
- mousewheelHandler: function (event) {
- if (!this.options.disabled) {
- var e = window.event || event;// old IE support
- var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
- var self = this;
- clearTimeout(this.mousewheelTimeout);
- this.mousewheelTimeout = setTimeout(function () {
- self.triggerChangedEvent();
- }, 300);
- if (delta < 0) {
- this.step(true);
- } else {
- this.step(false);
- }
- if (e.preventDefault) {
- e.preventDefault();
- } else {
- e.returnValue = false;
- }
- return false;
- }
- }
- };
- // SPINBOX PLUGIN DEFINITION
- $.fn.spinbox = function (option) {
- var args = Array.prototype.slice.call(arguments, 1);
- var methodReturn;
- var $set = this.each(function () {
- var $this = $(this);
- var data = $this.data('fu.spinbox');
- var options = typeof option === 'object' && option;
- if (!data) {
- $this.data('fu.spinbox', (data = new Spinbox(this, options)));
- }
- if (typeof option === 'string') {
- methodReturn = data[option].apply(data, args);
- }
- });
- return (methodReturn === undefined) ? $set : methodReturn;
- };
- // value needs to be 0 for this.render();
- $.fn.spinbox.defaults = {
- value: 0,
- min: 0,
- max: 999,
- step: 1,
- hold: true,
- speed: 'medium',
- disabled: false,
- cycle: false,
- units: [],
- decimalMark: '.'
- };
- $.fn.spinbox.Constructor = Spinbox;
- $.fn.spinbox.noConflict = function () {
- $.fn.spinbox = old;
- return this;
- };
- // DATA-API
- $(document).on('mousedown.fu.spinbox.data-api', '[data-initialize=spinbox]', function (e) {
- var $control = $(e.target).closest('.spinbox');
- if (!$control.data('fu.spinbox')) {
- $control.spinbox($control.data());
- }
- });
- // Must be domReady for AMD compatibility
- $(function () {
- $('[data-initialize=spinbox]').each(function () {
- var $this = $(this);
- if (!$this.data('fu.spinbox')) {
- $this.spinbox($this.data());
- }
- });
- });
- // -- BEGIN UMD WRAPPER AFTERWORD --
- }));
- // -- END UMD WRAPPER AFTERWORD --
|