jquery.drum.bare.min.js

/*!
 * jQuery Drum Control - v0.1.2 - 2020-04-14
 * https://github.com/tigrr/drum
 * Copyright (c) Tigran Sargsyan
 * Licensed MIT
 */

/*!
 * Drum widget
 *
 * @author Tigran Sargsyan <tigran.sn@gmail.com>
 * @license https://github.com/tigrr/drum/blob/master/LICENSE MIT
 */
"use strict";!function(o){o.widget("tl.drum",{options:{classes:{"drum-viewport":"drum-viewport","drum-drum":"drum-drum"},type:"number",min:0,max:1/0,step:1,orderAsc:!0,watchOutside:!0,edgeLimit:.8,acceleration:300,renderItemsNum:100,maxSpinOffset:500},_create:function(){var r=this;for(var t in this._drumOffset=0,this._state="standby",this.items=[],this.options)this.options[t]=this._formatValue(t,this.options[t]);this._render(),this.element.watchDrag({dragstart:function(t,e){r.element.focus(),"revolving"===r._state&&(r._scrollToOffset(r._getCurrentOffset()),r._refillValuesAroundView()),r._state="dragging",r._drumEl.css("transition","none").addClass("dragging"),r._trigger("dragstart",t,e)},drag:function(t,e){r._scrollToOffset(r._drumOffset+e.dy),r._trigger("drag",t,e)},dragend:function(t,e){var i,s,o,n=r.options.acceleration;(i=Math.abs(e.vy))?((o=Math.pow(i,2)/(2*n))>r.options.maxSpinOffset&&(o=r.options.maxSpinOffset),o*=function(t){return 0===(t=+t)||isNaN(t)?t:0<t?1:-1}(e.dy),o=r._drumOffset+o,o=r._processOffset(o),s=2*Math.abs(o-r._drumOffset)/i,r._drumEl.css({transition:"transform "+s+"s cubic-bezier(0.25, 0.46, 0.45, 0.94)"}),r._scrollToOffset(o),r._state="revolving",setTimeout(function(){r._stopRevolving(t)},1e3*s+40)):r._stopRevolving(t),r._drumEl.removeClass("dragging"),r._trigger("dragend",t,e)}}).keydown(function(t){if(!(t.altKey||t.ctrlKey||t.shiftKey||t.metaKey))switch(t.keyCode){case 38:r.selectPrev(),t.preventDefault();break;case 40:r.selectNext(),t.preventDefault()}})},_stopRevolving:function(t){"standby"!==this._state&&(this._refillValuesAroundView(),this.options.value=this._formatValue("value",this._centerView().dataset.value),this._updateValues("value",this.options.value),this._state="standby",this._trigger("change",t,{value:this.options.value}))},_render:function(){var t=this.element[0];if("SELECT"===t.nodeName||"INPUT"===t.nodeName){if("INPUT"===t.nodeName&&"number"!==t.type)throw new Error('Input element must be of type "number"');(this._origControl=t).style.display="none",this.element=o("<div>").insertAfter(this.element)}if(this._addClass(this.element,"drum-viewport"),this.element.attr("tabindex",0).css({display:"inline-block","overflow-y":"hidden","-moz-user-select":"none","-ms-user-select":"none","-webkit-user-select":"none","user-select":"none"}),this._drumEl=o('<div style="position: relative;">').appendTo(this.element),this._addClass(this._drumEl,"drum-drum"),"SELECT"===t.nodeName||this.options.options||"select"===this.options.type){if(this.options.type="select",this.options.min=this.options.max=this.options.step=void 0,this.element.attr("role","listbox"),this.options.options)this._setOption("options",this.options.options);else{if("SELECT"!==t.nodeName)throw new Error("Either options array or select element must be passed");this.options.value=t.value,this._setOption("options",this._parseSelectMenuOptions(o(t).find("option")))}void 0===this.options.value&&(this.options.value=this.options.options[0].value)}else(this.options.min||this.options.max||"INPUT"===t.nodeName&&"number"===t.type||"number"===this.options.type)&&(this.options.type="number","INPUT"===t.nodeName&&(""!==t.min&&(this.options.min=this._formatValue("min",t.min)),""!==t.max&&(this.options.max=this._formatValue("max",t.max)),""!==t.step&&(this.options.step=this._formatValue("step",t.step)),""!==t.value&&(this.options.value=this._formatValue("value",t.value))),void 0===this.options.value&&(this.options.value="number"==typeof this.options.min?this.options.min:0),this.element.attr("role","spinbutton"),this.element.attr("aria-valuemin",this.options.min),this.element.attr("aria-valuemax",this.options.max),this.element.attr("aria-valuenow",this.options.value),this._fillValues());this._setOption("value",this.options.value,!1)},_drawItems:function(t){var i=this,s="";t.forEach(function(t){var e='<div class="drum-item" data-value="'+t.value+'">'+t.label+"</div>";i.options.orderAsc?s+=e:s=e+s}),this._drumEl.html(s)},_parseOption:function(t,e){var i=this.element[0];return void 0!==this.options[t]?this.options[t]:"INPUT"===i.nodeName&&"number"===i.type?i[t]:e},_parseSelectMenuOptions:function(t){var i=this,s=[];return t.each(function(t,e){s.push(i._parseSelectMenuOption(o(e),t))}),s},_parseSelectMenuOption:function(t,e){return{value:t.val(),label:t.text()}},_fillValues:function(t){var e,i,s,o,n=[];for(t=t||this.options.value,s=this.options.step||1,e=t-Math.floor(s*this.options.renderItemsNum/2),"number"==typeof this.options.min&&e<this.options.min&&(e=this.options.min),i=e+s*(this.options.renderItemsNum-1),"number"==typeof this.options.max&&this.options.max<i&&(i=this.options.max),o=e;o<=i;o+=s)n.push({value:o,label:o});this.items=n,this._drawItems(n)},_refillValuesAroundView:function(t){var e,i,s;"number"===this.options.type&&(void 0===t&&(t=this._getValue()),e=(this.options.orderAsc?this.items[this.items.length-1]:this.items[0]).value,s=this._drumOffset,this._fillValues(t),i=(this.options.orderAsc?this.items[this.items.length-1]:this.items[0]).value,this._drumEl.css("transition","none"),this._scrollToOffset(s+this._drumEl.find(".drum-item")[0].offsetHeight*(e-i)))},_getValue:function(){return this._formatValue("value",this._getItemInView().dataset.value)},_formatValue:function(t,e){switch(t){case"value":case"min":case"max":case"step":"number"===this.options.type&&(e=parseFloat(e),isFinite(e)||(e=void 0));break;case"type":if("number"!==e&&"select"!==e)throw new Error('Wrong value for type: "'+e+'". The supported types are "number" and "select".');break;case"orderAsc":case"watchOutside":if("boolean"!=typeof e)throw new TypeError(t+" must be boolean. "+typeof e+" passed.");break;case"options":if(!Array.isArray(e))throw new TypeError("Options option must be an array");e=e.map(function(t){return"string"==typeof t?{value:t,label:t}:{value:t.value,label:t.label}});break;case"minDragInterval":case"acceleration":case"renderItemsNum":case"maxSpinOffset":if(e=parseFloat(e),!isFinite(e))throw new TypeError(t+" must be number")}return e},_setOption:function(t,e,i){var s=this;if(void 0===(e=this._formatValue(t,e)))throw new TypeError("Failed to set the "+t+" property on Drum: The provided value is non-finite.");if(-1!==["min","max","step"].indexOf(t)&&"number"!==this.options.type)throw new TypeError("Failed to set the "+t+" property on Drum: "+t+" can only be set on widget type number.");if("value"===t&&"number"===this.options.type&&(null!=this.options.min&&e<this.options.min&&(e=this.options.min),null!=this.options.max&&e>this.options.max&&(e=this.options.max)),!("min"===t&&e>=this.options.max||"max"===t&&e<=this.options.min))return"options"===t&&(this.items=e.slice(),e.some(function(t){return t.value===s.options.value})||(this.options.value=e[0].value),this._drawItems(this.items)),this.options[t]=e,this._updateValues(t,e),"min"===t&&this.options.value<e?this._setOption("value",e):"max"===t&&this.options.value>e?this._setOption("value",e):void(-1!==["min","max","step","value","options"].indexOf(t)&&(this._refillValuesAroundView("value"===t?e:null),this._centerView(this._drumEl.find('[data-value="'+this.options.value+'"]')[0],i)))},_updateValues:function(t,e){var i={value:"aria-valuenow",min:"aria-valuemin",max:"aria-valuemax"};this._origControl&&("INPUT"!==this._origControl.nodeName||"value"!==t&&"max"!==t&&"min"!==t&&"step"!==t||(this._origControl[t]=e),"SELECT"===this._origControl.nodeName&&("value"===t?this._origControl.value=e:"options"===t&&(this._origControl.innerHTML=e.map(function(t){return'<option value="'+t.value+'">'+t.label+"</option>"}).join("")))),t in i&&(void 0!==e?this.element.attr(i[t],e):this.element.removeAttr(i[t]))},_scrollToOffset:function(t){if(void 0===t)throw new Error("You must pass an offset value");t=this._processOffset(t),this._drumOffset=t,this._drumEl.css({transform:"translate(0,"+t+"px)"})},_processOffset:function(t){var e=this.options.edgeLimit,i=this.element[0].clientHeight;return Math.max(Math.min(t,e*i),-this._drumEl[0].offsetHeight+i*(1-e))},_centerView:function(t,e){var i,s=this;return e=!1!==e,t=t||this._getItemInView(),this._drumEl.find(".drum-item").removeClass("drum-item-current"),t.classList.add("drum-item-current"),i=-t.offsetTop+this.element[0].clientHeight/2-t.offsetHeight/2,clearTimeout(this._timer),e&&(this._drumEl.css({transition:"transform .13s cubic-bezier(0,.5,.85,1)"}),this._timer=setTimeout(function(){s._drumEl.css("transition","none")},200)),this._scrollToOffset(i),t},_getCurrentOffset:function(){return this._drumEl[0].getBoundingClientRect().top-this.element[0].getBoundingClientRect().top},_getItemInView:function(){var t,e=this.element[0].getBoundingClientRect(),i=(e.left,e.width,e.top+e.height/2),s=this._drumEl.children(),o=this._drumEl[0].getBoundingClientRect();return(t=s[Math.max(0,Math.min(s.length-1,Math.floor((i-o.top)/o.height*s.length)))]).classList.contains("drum-item")||(t=0<this._drumOffset?this._drumEl.children()[0]:this._drumEl.children().last()[0]),t},value:function(t){if(void 0===t)return this.options.value;this._setOptions({value:t})},min:function(t){if(void 0===t)return this.options.min;this._setOptions({min:t})},max:function(t){if(void 0===t)return this.options.max;this._setOptions({max:t})},selectNext:function(){var t=this._getItemInView().nextElementSibling;return!!t&&(this._setOption("value",t.dataset.value),t)},selectPrev:function(){var t=this._getItemInView().previousElementSibling;return!!t&&(this._setOption("value",t.dataset.value),t)}})}(jQuery),function(i){i.widget("tl.watchDrag",{options:{watchOutside:!0,minDragInterval:100},_create:function(){this._resetCoords(),this._on(this.element,{mousedown:this._eventsStart.mousedown,touchstart:this._eventsStart.mousedown})},_captureCoords:function(t){var e=-1!==["touchstart","touchmove","touchend"].indexOf(t.type)?t.touches[0].pageX:t.pageX,i=-1!==["touchstart","touchmove","touchend"].indexOf(t.type)?t.touches[0].pageY:t.pageY,s=Date.now();return{x:e,y:i,t:s,dx:e-this._coords.x,dy:i-this._coords.y,dt:s-this._coords.t}},_updateCoords:function(t){this._coords=t},_resetCoords:function(){this._coords={x:null,y:null,t:null,dx:0,dy:0,dt:0}},_eventsStart:{mousedown:function(t){if("mousedown"!==t.type||1===t.which){t.preventDefault(),t.stopPropagation(),this._listenOn=this.options.watchOutside?i(window):this.element,this._on(this._listenOn,{mousemove:this._eventsDrag.mousemove,touchmove:this._eventsDrag.mousemove,mouseup:this._eventsDrag.mouseup,touchend:this._eventsDrag.mouseup}),this._resetCoords();var e=this._captureCoords(t);this._coords.x=e.x,this._coords.y=e.y,this._coords.t=e.t,this._trigger("dragstart",t,this._coords)}}},_eventsDrag:{mousemove:function(t){var e=this._captureCoords(t);this._updateCoords(e),this._trigger("drag",t,e)},mouseup:function(t){t.preventDefault(),t.stopPropagation();var e=i.extend({},this._coords);Date.now()-this._coords.t<=this.options.minDragInterval?(e.vx=e.dx/e.dt*1e3,e.vy=e.dy/e.dt*1e3):e.vx=e.vy=0,this._off(this._listenOn,"mousemove mouseup touchmove touchend"),this._trigger("dragend",t,e)}}})}(jQuery);