ispin
Version:
vanilla javascript number spinner
3 lines (2 loc) • 4.27 kB
JavaScript
function _defineProperty(t,s,e){return s in t?Object.defineProperty(t,s,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[s]=e,t}function _objectSpread(t){for(var s=1;s<arguments.length;s++){var e=null!=arguments[s]?arguments[s]:{},i=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.forEach(function(s){_defineProperty(t,s,e[s])})}return t}class ISpin{constructor(t,s){this.el=t,this.options={},this._onKeyDown=this._onKeyDown.bind(this),this._onMouseDown=this._onMouseDown.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onWheel=this._onWheel.bind(this),this.build(),this.update(s)}build(){this._wrapper=document.createElement("div"),this.el.parentNode&&this.el.parentNode.replaceChild(this._wrapper,this.el),this._wrapper.appendChild(this.el),this._buttons={inc:document.createElement("button"),dec:document.createElement("button")},Object.keys(this._buttons).forEach(t=>{const s=this._buttons[t];this._wrapper.appendChild(s),s.setAttribute("type","button"),s.addEventListener("mousedown",this._onMouseDown),s.addEventListener("mouseup",this._onMouseUp),s.addEventListener("mouseleave",this._onMouseLeave)}),this.el.addEventListener("keydown",this._onKeyDown),this.el.addEventListener("wheel",this._onWheel)}update(t){(t=_objectSpread({},ISpin.DEFAULTS,this.options,t)).wrapperClass!==this.options.wrapperClass&&(this.options.wrapperClass&&this._wrapper.classList.remove(this.options.wrapperClass),t.wrapperClass&&this._wrapper.classList.add(t.wrapperClass)),t.buttonsClass!==this.options.buttonsClass&&(this.options.buttonsClass&&Object.keys(this._buttons).forEach(t=>{this._buttons[t].classList.remove(this.options.buttonsClass),this._buttons[t].classList.remove(this.options.buttonsClass+"-"+t)}),t.buttonsClass&&Object.keys(this._buttons).forEach(s=>{this._buttons[s].classList.add(t.buttonsClass),this._buttons[s].classList.add(t.buttonsClass+"-"+s)})),this.disabled=t.disabled,Object.assign(this.options,t)}destroy(){this._wrapper.parentNode&&this._wrapper.parentNode.replaceChild(this.el,this._wrapper),delete this.el,delete this._wrapper,delete this._buttons}_onKeyDown(t){switch(t.keyCode){case 38:return t.preventDefault(),this.spin(this.options.step);case 40:return t.preventDefault(),this.spin(-this.options.step);case 33:return t.preventDefault(),this.spin(this.options.pageStep);case 34:return t.preventDefault(),this.spin(-this.options.pageStep)}}_onMouseDown(t){t.preventDefault();const s=t.currentTarget===this._buttons.inc?1:-1;this.spin(s*this.options.step),this.el.focus(),this._startSpinning(s)}_onMouseUp(t){this._stopSpinning()}_onMouseLeave(t){this._stopSpinning()}_startSpinning(t){this._stopSpinning(),this._spinTimer=setInterval(()=>this.spin(t*this.options.step),this.options.repeatInterval)}_stopSpinning(){clearInterval(this._spinTimer)}_onWheel(t){if(document.activeElement!==this.el)return;t.preventDefault();const s=t.deltaY>0?-1:1;this.spin(s*this.options.step)}get value(){return this.options.parse(this.el.value)||0}set value(t){const s=this.options.format(this.options.parse(String(t)));this.el.value=s,this.options.onChange&&this.options.onChange(s)}get disabled(){return this._buttons.inc.disabled}set disabled(t){this.disabled!==t&&(this._buttons.inc.disabled=this._buttons.dec.disabled=t)}get precision(){return Math.max(...[this.options.step,this.options.min].filter(t=>null!=t).map(precision))}adjustValue(t){return t=Number(t.toFixed(this.precision)),null!=this.options.max&&t>this.options.max&&(t=this.options.max),null!=this.options.min&&t<this.options.min&&(t=this.options.min),t}wrapValue(t){return this.options.wrapOverflow&&null!=this.options.max&&null!=this.options.min&&(t<this.options.min?t=this.options.max:t>this.options.max&&(t=this.options.min)),t}spin(t){this.value=this.adjustValue(this.wrapValue(this.value+t))}}function precision(t){return(String(t).split(".")[1]||"").length}ISpin.DEFAULTS={wrapperClass:"ispin-wrapper",buttonsClass:"ispin-button",step:1,pageStep:10,disabled:!1,repeatInterval:200,wrapOverflow:!1,parse:Number,format:String};export default ISpin;
//# sourceMappingURL=ispin.es.min.js.map