329 lines
12 KiB
JavaScript
329 lines
12 KiB
JavaScript
/**
|
|
* SpinButton control.
|
|
*
|
|
* Adds bells and whistles to any ordinary textbox to
|
|
* make it look and feel like a SpinButton Control.
|
|
*
|
|
* Supplies {@link external:jQuery.fn.SpinButton}).
|
|
*
|
|
* Originally written by George Adamson, Software Unity (george.jquery@softwareunity.com) August 2006:
|
|
* - Added min/max options.
|
|
* - Added step size option.
|
|
* - Added bigStep (page up/down) option.
|
|
*
|
|
* Modifications made by Mark Gibson, (mgibson@designlinks.net) September 2006:
|
|
* - Converted to jQuery plugin.
|
|
* - Allow limited or unlimited min/max values.
|
|
* - Allow custom class names, and add class to input element.
|
|
* - Removed global vars.
|
|
* - Reset (to original or through config) when invalid value entered.
|
|
* - Repeat whilst holding mouse button down (with initial pause, like keyboard repeat).
|
|
* - Support mouse wheel in Firefox.
|
|
* - Fix double click in IE.
|
|
* - Refactored some code and renamed some vars.
|
|
*
|
|
* Modifications by Jeff Schiller, June 2009:
|
|
* - provide callback function for when the value changes based on the following
|
|
* {@link https://www.mail-archive.com/jquery-en@googlegroups.com/msg36070.html}.
|
|
*
|
|
* Modifications by Jeff Schiller, July 2009:
|
|
* - improve styling for widget in Opera.
|
|
* - consistent key-repeat handling cross-browser.
|
|
*
|
|
* Modifications by Alexis Deveria, October 2009:
|
|
* - provide "stepfunc" callback option to allow custom function to run when changing a value.
|
|
* - Made adjustValue(0) only run on certain keyup events, not all.
|
|
*
|
|
* Tested in IE6, Opera9, Firefox 1.5.
|
|
*
|
|
* | Version | Date | Author | Notes |
|
|
* |---------|------|--------|-------|
|
|
* | v1.0 | 11 Aug 2006 | George Adamson | First release |
|
|
* | v1.1 | Aug 2006 | George Adamson | Minor enhancements |
|
|
* | v1.2 | 27 Sep 2006 | Mark Gibson | Major enhancements |
|
|
* | v1.3a | 28 Sep 2006 | George Adamson | Minor enhancements |
|
|
* | v1.4 | 18 Jun 2009 | Jeff Schiller | Added callback function |
|
|
* | v1.5 | 06 Jul 2009 | Jeff Schiller | Fixes for Opera. |
|
|
* | v1.6 | 13 Oct 2009 | Alexis Deveria | Added stepfunc function |
|
|
* | v1.7 | 21 Oct 2009 | Alexis Deveria | Minor fixes.<br />Fast-repeat for keys and live updating as you type. |
|
|
* | v1.8 | 12 Jan 2010 | Benjamin Thomas | Fixes for mouseout behavior.<br />Added smallStep |
|
|
* | v1.9 | 20 May 2018 | Brett Zamir | Avoid SVGEdit dependency via `stateObj` config;<br />convert to ES6 module |
|
|
* .
|
|
*
|
|
* @module jQuerySpinButton
|
|
* @example
|
|
// Create group of settings to initialise spinbutton(s). (Optional)
|
|
const myOptions = {
|
|
min: 0, // Set lower limit.
|
|
max: 100, // Set upper limit.
|
|
step: 1, // Set increment size.
|
|
smallStep: 0.5, // Set shift-click increment size.
|
|
stateObj: {tool_scale: 1}, // Object to allow passing in live-updating scale
|
|
spinClass: mySpinBtnClass, // CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
|
|
upClass: mySpinUpClass, // CSS class for style when mouse over up button.
|
|
downClass: mySpinDnClass // CSS class for style when mouse over down button.
|
|
};
|
|
|
|
$(function () {
|
|
// Initialise INPUT element(s) as SpinButtons: (passing options if desired)
|
|
$('#myInputElement').SpinButton(myOptions);
|
|
});
|
|
*/
|
|
/**
|
|
* @function module:jQuerySpinButton.jQuerySpinButton
|
|
* @param {external:jQuery} $ The jQuery object to which to add the plug-in
|
|
* @returns {external:jQuery}
|
|
*/
|
|
export default function jQueryPluginSpinButton ($) {
|
|
/**
|
|
* @callback module:jQuerySpinButton.StepCallback
|
|
* @param {external:jQuery} thisArg Value of `this`
|
|
* @param {Float} i Value to adjust
|
|
* @returns {Float}
|
|
*/
|
|
/**
|
|
* @callback module:jQuerySpinButton.ValueCallback
|
|
* @param {external:jQuery.fn.SpinButton} thisArg Spin Button; check its `value` to see how it was changed.
|
|
* @returns {void}
|
|
*/
|
|
/**
|
|
* @typedef {PlainObject} module:jQuerySpinButton.SpinButtonConfig
|
|
* @property {Float} min Set lower limit
|
|
* @property {Float} max Set upper limit.
|
|
* @property {Float} step Set increment size.
|
|
* @property {module:jQuerySpinButton.StepCallback} stepfunc Custom function to run when changing a value; called with `this` of object and the value to adjust and returns a float.
|
|
* @property {module:jQuerySpinButton.ValueCallback} callback Called after value adjusted (with `this` of object)
|
|
* @property {Float} smallStep Set shift-click increment size.
|
|
* @property {PlainObject} stateObj Object to allow passing in live-updating scale
|
|
* @property {Float} stateObj.tool_scale
|
|
* @property {string} spinClass CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
|
|
* @property {string} upClass CSS class for style when mouse over up button.
|
|
* @property {string} downClass CSS class for style when mouse over down button.
|
|
* @property {Float} page Value to be adjusted on page up/page down
|
|
* @property {Float} reset Reset value when invalid value entered
|
|
* @property {Float} delay Millisecond delay
|
|
* @property {Float} interval Millisecond interval
|
|
*/
|
|
/**
|
|
* @function external:jQuery.fn.SpinButton
|
|
* @param {module:jQuerySpinButton.SpinButtonConfig} cfg
|
|
* @returns {external:jQuery}
|
|
*/
|
|
$.fn.SpinButton = function (cfg) {
|
|
cfg = cfg || {};
|
|
|
|
/**
|
|
*
|
|
* @param {Element} el
|
|
* @param {"offsetLeft"|"offsetTop"} prop
|
|
* @returns {Integer}
|
|
*/
|
|
function coord (el, prop) {
|
|
const b = document.body;
|
|
|
|
let c = el[prop];
|
|
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;
|
|
|
|
// Apply specified options or defaults:
|
|
// (Ought to refactor this some day to use $.extend() instead)
|
|
this.spinCfg = {
|
|
// min: cfg.min ? Number(cfg.min) : null,
|
|
// max: cfg.max ? Number(cfg.max) : null,
|
|
min: !isNaN(Number.parseFloat(cfg.min)) ? Number(cfg.min) : null, // Fixes bug with min:0
|
|
max: !isNaN(Number.parseFloat(cfg.max)) ? Number(cfg.max) : null,
|
|
step: cfg.step ? Number(cfg.step) : 1,
|
|
stepfunc: cfg.stepfunc || false,
|
|
page: cfg.page ? Number(cfg.page) : 10,
|
|
upClass: cfg.upClass || 'up',
|
|
downClass: cfg.downClass || 'down',
|
|
reset: cfg.reset || this.value,
|
|
delay: cfg.delay ? Number(cfg.delay) : 500,
|
|
interval: cfg.interval ? Number(cfg.interval) : 100,
|
|
_btn_width: 20,
|
|
_direction: null,
|
|
_delay: null,
|
|
_repeat: null,
|
|
callback: cfg.callback || null
|
|
};
|
|
|
|
// if a smallStep isn't supplied, use half the regular step
|
|
this.spinCfg.smallStep = cfg.smallStep || this.spinCfg.step / 2;
|
|
|
|
this.adjustValue = function (i) {
|
|
let v;
|
|
if (isNaN(this.value)) {
|
|
v = this.spinCfg.reset;
|
|
} else if (typeof this.spinCfg.stepfunc === 'function') {
|
|
v = this.spinCfg.stepfunc(this, i);
|
|
} else {
|
|
// weirdest JavaScript bug ever: 5.1 + 0.1 = 5.199999999
|
|
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 (typeof this.spinCfg.callback === 'function') {
|
|
this.spinCfg.callback(this);
|
|
}
|
|
};
|
|
|
|
$(this)
|
|
.addClass(cfg.spinClass || 'spin-button')
|
|
|
|
.mousemove(function (e) {
|
|
// Determine which button mouse is over, or not (spin direction):
|
|
const x = e.pageX || e.x;
|
|
const y = e.pageY || e.y;
|
|
const el = e.target;
|
|
const scale = cfg.stateObj.tool_scale || 1;
|
|
const height = $(el).height() / 2;
|
|
|
|
const 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) {
|
|
// Style up/down buttons:
|
|
switch (direction) {
|
|
case 1: // Up arrow:
|
|
$(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
|
|
break;
|
|
case -1: // Down arrow:
|
|
$(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass);
|
|
break;
|
|
default: // Mouse is elsewhere in the textbox
|
|
$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
|
|
}
|
|
|
|
// Set spin direction:
|
|
this.spinCfg._direction = direction;
|
|
}
|
|
})
|
|
|
|
.mouseout(function () {
|
|
// Reset up/down buttons to their normal appearance when mouse moves away:
|
|
$(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) {
|
|
// Respond to click on one of the buttons:
|
|
const stepSize = e.shiftKey ? this.spinCfg.smallStep : this.spinCfg.step;
|
|
|
|
const adjust = () => {
|
|
this.adjustValue(this.spinCfg._direction * stepSize);
|
|
};
|
|
|
|
adjust();
|
|
|
|
// Initial delay before repeating adjustment
|
|
this.spinCfg._delay = window.setTimeout(() => {
|
|
adjust();
|
|
// Repeat adjust at regular intervals
|
|
this.spinCfg._repeat = window.setInterval(adjust, this.spinCfg.interval);
|
|
}, this.spinCfg.delay);
|
|
}
|
|
})
|
|
|
|
.mouseup(function (e) {
|
|
// Cancel repeating adjustment
|
|
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) {
|
|
// Respond to up/down arrow keys.
|
|
switch (e.keyCode) {
|
|
case 38: this.adjustValue(this.spinCfg.step); break; // Up
|
|
case 40: this.adjustValue(-this.spinCfg.step); break; // Down
|
|
case 33: this.adjustValue(this.spinCfg.page); break; // PageUp
|
|
case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
|
|
}
|
|
})
|
|
|
|
/*
|
|
http://unixpapa.com/js/key.html describes the current state-of-affairs for
|
|
key repeat events:
|
|
- Safari 3.1 changed their model so that keydown is reliably repeated going forward
|
|
- Firefox and Opera still only repeat the keypress event, not the keydown
|
|
*/
|
|
.keypress(function (e) {
|
|
if (this.repeating) {
|
|
// Respond to up/down arrow keys.
|
|
switch (e.keyCode) {
|
|
case 38: this.adjustValue(this.spinCfg.step); break; // Up
|
|
case 40: this.adjustValue(-this.spinCfg.step); break; // Down
|
|
case 33: this.adjustValue(this.spinCfg.page); break; // PageUp
|
|
case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
|
|
}
|
|
// we always ignore the first keypress event (use the keydown instead)
|
|
} else {
|
|
this.repeating = true;
|
|
}
|
|
})
|
|
|
|
// clear the 'repeating' flag
|
|
.keyup(function (e) {
|
|
this.repeating = false;
|
|
switch (e.keyCode) {
|
|
case 38: // Up
|
|
case 40: // Down
|
|
case 33: // PageUp
|
|
case 34: // PageDown
|
|
case 13: this.adjustValue(0); break; // Enter/Return
|
|
}
|
|
})
|
|
|
|
.bind('mousewheel', function (e) {
|
|
// Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120)
|
|
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) {
|
|
// Respond to mouse wheel in Firefox
|
|
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();
|
|
});
|
|
}
|
|
});
|
|
};
|
|
return $;
|
|
}
|