aria-progress-range-slider - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/aria-progress-range-slider.js

@@ -1,2 +0,2 @@
-function e(e){var t=0,i=e;do{t+=i.offsetLeft||0,i=i.offsetParent}while(i);return t}var t={ariaLabel:"Seek slider",arrowMoveStep:1,pageMoveStep:5,className:"AriaProgressBar",disabled:!1,float:!1,getTooltipText:function(e,t){return t.float?e.toString():Math.round(e).toString()},getValueText:function(e,t){return e+" ranging from "+t.min+" to "+t.max},initialValue:0,max:100,min:0,snap:!0,step:1},i=function(i,s){var o=this;if(this.isDragging=!1,this.isMouseOver=!1,this.handleMouseEnter=function(){o.options.disabled||(o.isMouseOver=!0,o.elementLeft=e(o.element),o.element.classList.add(o.options.className+"--hover"))},this.handleMouseLeave=function(){o.isMouseOver=!1,o.setHoverScale(0),o.element.classList.remove(o.options.className+"--hover")},this.handleDragStart=function(t){if(!o.options.disabled){o.isDragging=!0,o.element.classList.add(o.options.className+"--dragging"),o.elementLeft=e(o.element);var i=o.getValueFromEvent(t);o.updateValue(i),o.options.onDragStart&&o.options.onDragStart(o.realValue,o.options)}},this.handleDragEnd=function(){o.isDragging&&(o.options.onDragEnd&&o.options.onDragEnd(o.realValue,o.options),o.options.onChange&&o.options.onChange(o.realValue,o.options)),o.isDragging=!1,o.element.classList.remove(o.options.className+"--dragging")},this.handleMouseMove=function(e){if((o.isDragging||o.isMouseOver)&&!o.options.disabled){var t=o.getValueFromEvent(e);o.updateHoverTooltip(t),o.isDragging?o.handleDragMove(t):o.isMouseOver&&o.setHoverScale(t)}},this.handleTouchMove=function(e){if(o.isDragging&&!o.options.disabled){e.preventDefault();var t=o.getValueFromEvent(e);o.handleDragMove(t)}},this.handleKeyDown=function(e){if(!o.options.disabled){var t=o.options.arrowMoveStep/o.range,i=o.options.pageMoveStep/o.range,s={36:-1,35:1};s[34]=-i,s[33]=i,s[40]=-t,s[37]=-t,s[38]=t,s[39]=t;var n=s[e.keyCode];if("number"==typeof n){var a=o.getRealValue();o.updateValue(o.includeStep(o.value+n)),a!==o.realValue&&o.options.onChange&&o.options.onChange(o.realValue,o.options)}}},this.element="string"==typeof i?document.querySelector(i):i,!(this.element instanceof HTMLElement))throw"Given HTML element is not valid or doesn't exist.";this.options=Object.assign({},t,s),this.range=this.options.max-this.options.min,this.createElements(),this.options.disabled&&this.disable();var n=0;this.options.initialValue&&(n=(this.options.initialValue-this.options.min)/this.range),this.updateValue(n),this.setAriaProps(),this.updateHoverTooltip(n)};i.prototype.createElement=function(e,t){var i=document.createElement("div");return i.className=this.getClassName(e),t.appendChild(i),i},i.prototype.createElements=function(){this.trackElement=this.createElement("track",this.element),this.progressElement=this.createElement("progress",this.trackElement),this.hoverElement=this.createElement("hover",this.trackElement),this.bufferElement=this.createElement("buffer",this.trackElement),this.handleElement=this.createElement("handle",this.element),this.options.getTooltipText&&(this.valueTooltipElement=this.createElement("mainTooltip",this.element),this.hoverTooltipElement=this.createElement("hoverTooltip",this.element)),this.element.classList.add(this.options.className),this.trackElement.setAttribute("tabindex","0"),this.trackElement.setAttribute("role","slider"),this.trackElement.setAttribute("aria-valuemin","0"),this.setOptions(),this.element.addEventListener("touchstart",this.handleDragStart),window.addEventListener("touchmove",this.handleTouchMove,{capture:!1,passive:!1}),window.addEventListener("touchend",this.handleDragEnd),this.element.addEventListener("mouseenter",this.handleMouseEnter),this.element.addEventListener("mouseleave",this.handleMouseLeave),this.element.addEventListener("mousedown",this.handleDragStart),window.addEventListener("mouseup",this.handleDragEnd),window.addEventListener("mousemove",this.handleMouseMove,!1),this.element.addEventListener("keydown",this.handleKeyDown)},i.prototype.getClassName=function(e,t){return void 0===t&&(t=null),t?this.options.className+"-"+e+"--"+t:this.options.className+"-"+e},i.prototype.handleDragMove=function(e){var t=this.realValue;this.updateValue(e),t!==this.realValue&&this.options.onDragMove&&this.options.onDragMove(this.realValue,this.options)},i.prototype.getValueFromEvent=function(e){var t,i=this.element.offsetWidth;if(e.touches&&1===e.touches.length)t=e.touches[0].pageX-this.elementLeft;else{if(!e.pageX)return 0;t=e.pageX-this.elementLeft}return t<0?t=0:t>i&&(t=i),this.includeStep(t/i)},i.prototype.setOptions=function(){this.trackElement.setAttribute("aria-valuemax",this.options.max.toString()),this.trackElement.setAttribute("aria-label",this.options.ariaLabel),this.options.ariaLabeledBy&&this.trackElement.setAttribute("aria-labeledby",this.options.ariaLabeledBy)},i.prototype.setAriaProps=function(){this.trackElement.setAttribute("aria-valuenow",this.realValue.toString()),this.trackElement.setAttribute("aria-valuetext",this.options.getValueText(this.realValue,this.options))},i.prototype.limitValue=function(e){return e<0?0:e>1?1:e},i.prototype.includeStep=function(e){var t=this.options.step/this.range;return this.options.snap&&(e=(e=Math.round(e/t)*t)*this.range/this.range),this.limitValue(e)},i.prototype.updateTooltip=function(e,t,i){this.options.getTooltipText&&(i.style.left=100*e+"%",i.innerHTML=this.options.getTooltipText(t,this.options))},i.prototype.updateValueTooltip=function(e){this.updateTooltip(e,this.realValue,this.valueTooltipElement)},i.prototype.updateHoverTooltip=function(e){this.updateTooltip(e,parseFloat((e*this.range+this.options.min).toFixed(4)),this.hoverTooltipElement)},i.prototype.updateValue=function(e){if(this.handleElement.style.left=100*e+"%",this.progressElement.style.transform="scaleX("+e+")",this.value!==e||void 0===e){var t=this.getRealValue();this.value=e,this.realValue=this.getRealValue(),this.realValue!==t&&(this.setAriaProps(),this.updateValueTooltip(e)),this.isDragging&&this.setHoverScale(0)}},i.prototype.setHoverScale=function(e){this.hoverElement.style.transform="scaleX("+e+")"},i.prototype.getRealValue=function(){return parseFloat((this.value*this.range+this.options.min).toFixed(4))},i.prototype.getValue=function(){return this.realValue},i.prototype.setValue=function(e){this.isDragging||this.updateValue(this.includeStep(e/this.range))},i.prototype.setBufferValue=function(e){this.bufferElement.style.transform="scaleX("+e/this.range+")"},i.prototype.disable=function(){this.options.disabled=!0,this.element.classList.add(this.options.className+"--disabled"),this.trackElement.setAttribute("aria-disabled","true"),this.trackElement.setAttribute("disabled","true"),this.trackElement.setAttribute("tabindex","-1")},i.prototype.enable=function(){this.options.disabled=!1,this.element.classList.remove(this.options.className+"--disabled"),this.trackElement.setAttribute("tabindex","0")},module.exports=i;
+function e(e){var t=0,i=e;do{t+=i.offsetLeft||0,i=i.offsetParent}while(i);return t}var t={ariaLabel:"Seek slider",arrowMoveStep:1,pageMoveStep:5,className:"AriaProgressBar",disabled:!1,float:!1,getTooltipText:function(e,t){return t.float?e.toString():Math.round(e).toString()},getValueText:function(e,t){return e+" ranging from "+t.min+" to "+t.max},initialValue:0,max:100,min:0,snap:!0,step:1},i=function(i,s){var n=this;if(this.isDragging=!1,this.isMouseOver=!1,this.handleMouseEnter=function(){n.options.disabled||(n.isMouseOver=!0,n.elementLeft=e(n.element),n.element.classList.add(n.options.className+"--hover"))},this.handleMouseLeave=function(){n.isMouseOver=!1,n.setHoverScale(0),n.element.classList.remove(n.options.className+"--hover")},this.handleDragStart=function(t){if(!n.options.disabled){n.isDragging=!0,n.element.classList.add(n.options.className+"--dragging"),n.elementLeft=e(n.element);var i=n.getValueFromEvent(t);n.updateValue(i),n.options.onDragStart&&n.options.onDragStart(n.realValue,n.options)}},this.handleDragEnd=function(){n.isDragging&&(n.options.onDragEnd&&n.options.onDragEnd(n.realValue,n.options),n.options.onChange&&n.options.onChange(n.realValue,n.options)),n.isDragging=!1,n.element.classList.remove(n.options.className+"--dragging")},this.handleMouseMove=function(e){if((n.isDragging||n.isMouseOver)&&!n.options.disabled){var t=n.getValueFromEvent(e);n.updateHoverTooltip(t),n.isDragging?n.handleDragMove(t):n.isMouseOver&&n.setHoverScale(t)}},this.handleTouchMove=function(e){if(n.isDragging&&!n.options.disabled){e.preventDefault();var t=n.getValueFromEvent(e);n.handleDragMove(t)}},this.handleKeyDown=function(e){if(!n.options.disabled){var t=n.options.arrowMoveStep/n.range,i=n.options.pageMoveStep/n.range,s={36:-1,35:1};s[34]=-i,s[33]=i,s[40]=-t,s[37]=-t,s[38]=t,s[39]=t;var o=s[e.keyCode];if("number"==typeof o){var a=n.getRealValue();n.updateValue(n.includeStep(n.value+o)),a!==n.realValue&&n.options.onChange&&n.options.onChange(n.realValue,n.options)}}},this.element="string"==typeof i?document.querySelector(i):i,!(this.element instanceof HTMLElement))throw"Given HTML element is not valid or doesn't exist.";this.options=Object.assign({},t,s),this.range=this.options.max-this.options.min,this.createElements(),this.options.disabled&&this.disable();var o=0;this.options.initialValue&&(o=(this.options.initialValue-this.options.min)/this.range),this.updateValue(o),this.setAriaProps(),this.updateHoverTooltip(o)};i.prototype.createElement=function(e,t){var i=document.createElement("div");return i.className=this.getClassName(e),t.appendChild(i),i},i.prototype.createElements=function(){this.trackElement=this.createElement("track",this.element),this.progressElement=this.createElement("progress",this.trackElement),this.hoverElement=this.createElement("hover",this.trackElement),this.bufferElement=this.createElement("buffer",this.trackElement),this.handleElement=this.createElement("handle",this.element),this.options.getTooltipText&&(this.valueTooltipElement=this.createElement("mainTooltip",this.element),this.hoverTooltipElement=this.createElement("hoverTooltip",this.element)),this.element.classList.add(this.options.className),this.trackElement.setAttribute("tabindex","0"),this.trackElement.setAttribute("role","slider"),this.trackElement.setAttribute("aria-valuemin","0"),this.setOptions(),this.element.addEventListener("touchstart",this.handleDragStart),window.addEventListener("touchmove",this.handleTouchMove,{capture:!1,passive:!1}),window.addEventListener("touchend",this.handleDragEnd),this.element.addEventListener("mouseenter",this.handleMouseEnter),this.element.addEventListener("mouseleave",this.handleMouseLeave),this.element.addEventListener("mousedown",this.handleDragStart),window.addEventListener("mouseup",this.handleDragEnd),window.addEventListener("mousemove",this.handleMouseMove,!1),this.element.addEventListener("keydown",this.handleKeyDown)},i.prototype.getClassName=function(e,t){return void 0===t&&(t=null),t?this.options.className+"-"+e+"--"+t:this.options.className+"-"+e},i.prototype.handleDragMove=function(e){var t=this.realValue;this.updateValue(e),t!==this.realValue&&this.options.onDragMove&&this.options.onDragMove(this.realValue,this.options)},i.prototype.getValueFromEvent=function(e){var t,i=this.element.offsetWidth;if(e.touches&&1===e.touches.length)t=e.touches[0].pageX-this.elementLeft;else{if(!e.pageX)return 0;t=e.pageX-this.elementLeft}return t<0?t=0:t>i&&(t=i),this.includeStep(t/i)},i.prototype.setOptions=function(){this.trackElement.setAttribute("aria-valuemax",this.options.max.toString()),this.trackElement.setAttribute("aria-label",this.options.ariaLabel),this.options.ariaLabeledBy&&this.trackElement.setAttribute("aria-labeledby",this.options.ariaLabeledBy)},i.prototype.setAriaProps=function(){this.trackElement.setAttribute("aria-valuenow",this.realValue.toString()),this.trackElement.setAttribute("aria-valuetext",this.options.getValueText(this.realValue,this.options))},i.prototype.limitValue=function(e){return e<0?0:e>1?1:e},i.prototype.includeStep=function(e){var t=this.options.step/this.range;return this.options.snap&&(e=(e=Math.round(e/t)*t)*this.range/this.range),this.limitValue(e)},i.prototype.updateTooltip=function(e,t,i){this.options.getTooltipText&&(i.style.left=100*e+"%",i.innerHTML=this.options.getTooltipText(t,this.options))},i.prototype.updateValueTooltip=function(e){this.updateTooltip(e,this.realValue,this.valueTooltipElement)},i.prototype.updateHoverTooltip=function(e){this.updateTooltip(e,parseFloat((e*this.range+this.options.min).toFixed(4)),this.hoverTooltipElement)},i.prototype.updateValue=function(e){if(this.handleElement.style.left=100*e+"%",this.progressElement.style.transform="scaleX("+e+")",this.value!==e||void 0===e){var t=this.getRealValue();this.value=e,this.realValue=this.getRealValue(),this.realValue!==t&&(this.setAriaProps(),this.updateValueTooltip(e)),this.isDragging&&this.setHoverScale(0)}},i.prototype.setHoverScale=function(e){this.hoverElement.style.transform="scaleX("+e+")"},i.prototype.getRealValue=function(){return parseFloat((this.value*this.range+this.options.min).toFixed(4))},i.prototype.getValue=function(){return this.realValue},i.prototype.setValue=function(e){this.isDragging||this.updateValue(this.includeStep(e/this.range))},i.prototype.setBufferValue=function(e){this.bufferElement.style.transform="scaleX("+e/this.range+")"},i.prototype.disable=function(){this.options.disabled=!0,this.element.classList.add(this.options.className+"--disabled"),this.trackElement.setAttribute("aria-disabled","true"),this.trackElement.setAttribute("disabled","true"),this.trackElement.setAttribute("tabindex","-1")},i.prototype.enable=function(){this.options.disabled=!1,this.element.classList.remove(this.options.className+"--disabled"),this.trackElement.setAttribute("tabindex","0")},i.prototype.unbind=function(){this.element.removeEventListener("touchstart",this.handleDragStart),window.removeEventListener("touchmove",this.handleTouchMove),window.removeEventListener("touchend",this.handleDragEnd),this.element.removeEventListener("mouseenter",this.handleMouseEnter),this.element.removeEventListener("mouseleave",this.handleMouseLeave),this.element.removeEventListener("mousedown",this.handleDragStart),window.removeEventListener("mouseup",this.handleDragEnd),window.removeEventListener("mousemove",this.handleMouseMove),this.element.removeEventListener("keydown",this.handleKeyDown)},i.prototype.destroy=function(){this.unbind(),this.element.innerHTML="",this.element=null,this.handleElement=null,this.trackElement=null,this.progressElement=null,this.bufferElement=null,this.hoverElement=null,this.valueTooltipElement=null,this.hoverTooltipElement=null,this.options=Object.assign({},t),this.value=0,this.realValue=0,this.range=0,this.isDragging=!1,this.isMouseOver=!1},module.exports=i;
 //# sourceMappingURL=aria-progress-range-slider.js.map

dist/aria-progress-range-slider.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.ariaProgressRangeSlider=t()}(this,function(){function e(e){var t=0,i=e;do{t+=i.offsetLeft||0,i=i.offsetParent}while(i);return t}var t={ariaLabel:"Seek slider",arrowMoveStep:1,pageMoveStep:5,className:"AriaProgressBar",disabled:!1,float:!1,getTooltipText:function(e,t){return t.float?e.toString():Math.round(e).toString()},getValueText:function(e,t){return e+" ranging from "+t.min+" to "+t.max},initialValue:0,max:100,min:0,snap:!0,step:1},i=function(i,s){var n=this;if(this.isDragging=!1,this.isMouseOver=!1,this.handleMouseEnter=function(){n.options.disabled||(n.isMouseOver=!0,n.elementLeft=e(n.element),n.element.classList.add(n.options.className+"--hover"))},this.handleMouseLeave=function(){n.isMouseOver=!1,n.setHoverScale(0),n.element.classList.remove(n.options.className+"--hover")},this.handleDragStart=function(t){if(!n.options.disabled){n.isDragging=!0,n.element.classList.add(n.options.className+"--dragging"),n.elementLeft=e(n.element);var i=n.getValueFromEvent(t);n.updateValue(i),n.options.onDragStart&&n.options.onDragStart(n.realValue,n.options)}},this.handleDragEnd=function(){n.isDragging&&(n.options.onDragEnd&&n.options.onDragEnd(n.realValue,n.options),n.options.onChange&&n.options.onChange(n.realValue,n.options)),n.isDragging=!1,n.element.classList.remove(n.options.className+"--dragging")},this.handleMouseMove=function(e){if((n.isDragging||n.isMouseOver)&&!n.options.disabled){var t=n.getValueFromEvent(e);n.updateHoverTooltip(t),n.isDragging?n.handleDragMove(t):n.isMouseOver&&n.setHoverScale(t)}},this.handleTouchMove=function(e){if(n.isDragging&&!n.options.disabled){e.preventDefault();var t=n.getValueFromEvent(e);n.handleDragMove(t)}},this.handleKeyDown=function(e){if(!n.options.disabled){var t=n.options.arrowMoveStep/n.range,i=n.options.pageMoveStep/n.range,s={36:-1,35:1};s[34]=-i,s[33]=i,s[40]=-t,s[37]=-t,s[38]=t,s[39]=t;var o=s[e.keyCode];if("number"==typeof o){var a=n.getRealValue();n.updateValue(n.includeStep(n.value+o)),a!==n.realValue&&n.options.onChange&&n.options.onChange(n.realValue,n.options)}}},this.element="string"==typeof i?document.querySelector(i):i,!(this.element instanceof HTMLElement))throw"Given HTML element is not valid or doesn't exist.";this.options=Object.assign({},t,s),this.range=this.options.max-this.options.min,this.createElements(),this.options.disabled&&this.disable();var o=0;this.options.initialValue&&(o=(this.options.initialValue-this.options.min)/this.range),this.updateValue(o),this.setAriaProps(),this.updateHoverTooltip(o)};return i.prototype.createElement=function(e,t){var i=document.createElement("div");return i.className=this.getClassName(e),t.appendChild(i),i},i.prototype.createElements=function(){this.trackElement=this.createElement("track",this.element),this.progressElement=this.createElement("progress",this.trackElement),this.hoverElement=this.createElement("hover",this.trackElement),this.bufferElement=this.createElement("buffer",this.trackElement),this.handleElement=this.createElement("handle",this.element),this.options.getTooltipText&&(this.valueTooltipElement=this.createElement("mainTooltip",this.element),this.hoverTooltipElement=this.createElement("hoverTooltip",this.element)),this.element.classList.add(this.options.className),this.trackElement.setAttribute("tabindex","0"),this.trackElement.setAttribute("role","slider"),this.trackElement.setAttribute("aria-valuemin","0"),this.setOptions(),this.element.addEventListener("touchstart",this.handleDragStart),window.addEventListener("touchmove",this.handleTouchMove,{capture:!1,passive:!1}),window.addEventListener("touchend",this.handleDragEnd),this.element.addEventListener("mouseenter",this.handleMouseEnter),this.element.addEventListener("mouseleave",this.handleMouseLeave),this.element.addEventListener("mousedown",this.handleDragStart),window.addEventListener("mouseup",this.handleDragEnd),window.addEventListener("mousemove",this.handleMouseMove,!1),this.element.addEventListener("keydown",this.handleKeyDown)},i.prototype.getClassName=function(e,t){return void 0===t&&(t=null),t?this.options.className+"-"+e+"--"+t:this.options.className+"-"+e},i.prototype.handleDragMove=function(e){var t=this.realValue;this.updateValue(e),t!==this.realValue&&this.options.onDragMove&&this.options.onDragMove(this.realValue,this.options)},i.prototype.getValueFromEvent=function(e){var t,i=this.element.offsetWidth;if(e.touches&&1===e.touches.length)t=e.touches[0].pageX-this.elementLeft;else{if(!e.pageX)return 0;t=e.pageX-this.elementLeft}return t<0?t=0:t>i&&(t=i),this.includeStep(t/i)},i.prototype.setOptions=function(){this.trackElement.setAttribute("aria-valuemax",this.options.max.toString()),this.trackElement.setAttribute("aria-label",this.options.ariaLabel),this.options.ariaLabeledBy&&this.trackElement.setAttribute("aria-labeledby",this.options.ariaLabeledBy)},i.prototype.setAriaProps=function(){this.trackElement.setAttribute("aria-valuenow",this.realValue.toString()),this.trackElement.setAttribute("aria-valuetext",this.options.getValueText(this.realValue,this.options))},i.prototype.limitValue=function(e){return e<0?0:e>1?1:e},i.prototype.includeStep=function(e){var t=this.options.step/this.range;return this.options.snap&&(e=(e=Math.round(e/t)*t)*this.range/this.range),this.limitValue(e)},i.prototype.updateTooltip=function(e,t,i){this.options.getTooltipText&&(i.style.left=100*e+"%",i.innerHTML=this.options.getTooltipText(t,this.options))},i.prototype.updateValueTooltip=function(e){this.updateTooltip(e,this.realValue,this.valueTooltipElement)},i.prototype.updateHoverTooltip=function(e){this.updateTooltip(e,parseFloat((e*this.range+this.options.min).toFixed(4)),this.hoverTooltipElement)},i.prototype.updateValue=function(e){if(this.handleElement.style.left=100*e+"%",this.progressElement.style.transform="scaleX("+e+")",this.value!==e||void 0===e){var t=this.getRealValue();this.value=e,this.realValue=this.getRealValue(),this.realValue!==t&&(this.setAriaProps(),this.updateValueTooltip(e)),this.isDragging&&this.setHoverScale(0)}},i.prototype.setHoverScale=function(e){this.hoverElement.style.transform="scaleX("+e+")"},i.prototype.getRealValue=function(){return parseFloat((this.value*this.range+this.options.min).toFixed(4))},i.prototype.getValue=function(){return this.realValue},i.prototype.setValue=function(e){this.isDragging||this.updateValue(this.includeStep(e/this.range))},i.prototype.setBufferValue=function(e){this.bufferElement.style.transform="scaleX("+e/this.range+")"},i.prototype.disable=function(){this.options.disabled=!0,this.element.classList.add(this.options.className+"--disabled"),this.trackElement.setAttribute("aria-disabled","true"),this.trackElement.setAttribute("disabled","true"),this.trackElement.setAttribute("tabindex","-1")},i.prototype.enable=function(){this.options.disabled=!1,this.element.classList.remove(this.options.className+"--disabled"),this.trackElement.setAttribute("tabindex","0")},i});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.ariaProgressRangeSlider=t()}(this,function(){function e(e){var t=0,i=e;do{t+=i.offsetLeft||0,i=i.offsetParent}while(i);return t}var t={ariaLabel:"Seek slider",arrowMoveStep:1,pageMoveStep:5,className:"AriaProgressBar",disabled:!1,float:!1,getTooltipText:function(e,t){return t.float?e.toString():Math.round(e).toString()},getValueText:function(e,t){return e+" ranging from "+t.min+" to "+t.max},initialValue:0,max:100,min:0,snap:!0,step:1},i=function(i,s){var n=this;if(this.isDragging=!1,this.isMouseOver=!1,this.handleMouseEnter=function(){n.options.disabled||(n.isMouseOver=!0,n.elementLeft=e(n.element),n.element.classList.add(n.options.className+"--hover"))},this.handleMouseLeave=function(){n.isMouseOver=!1,n.setHoverScale(0),n.element.classList.remove(n.options.className+"--hover")},this.handleDragStart=function(t){if(!n.options.disabled){n.isDragging=!0,n.element.classList.add(n.options.className+"--dragging"),n.elementLeft=e(n.element);var i=n.getValueFromEvent(t);n.updateValue(i),n.options.onDragStart&&n.options.onDragStart(n.realValue,n.options)}},this.handleDragEnd=function(){n.isDragging&&(n.options.onDragEnd&&n.options.onDragEnd(n.realValue,n.options),n.options.onChange&&n.options.onChange(n.realValue,n.options)),n.isDragging=!1,n.element.classList.remove(n.options.className+"--dragging")},this.handleMouseMove=function(e){if((n.isDragging||n.isMouseOver)&&!n.options.disabled){var t=n.getValueFromEvent(e);n.updateHoverTooltip(t),n.isDragging?n.handleDragMove(t):n.isMouseOver&&n.setHoverScale(t)}},this.handleTouchMove=function(e){if(n.isDragging&&!n.options.disabled){e.preventDefault();var t=n.getValueFromEvent(e);n.handleDragMove(t)}},this.handleKeyDown=function(e){if(!n.options.disabled){var t=n.options.arrowMoveStep/n.range,i=n.options.pageMoveStep/n.range,s={36:-1,35:1};s[34]=-i,s[33]=i,s[40]=-t,s[37]=-t,s[38]=t,s[39]=t;var o=s[e.keyCode];if("number"==typeof o){var a=n.getRealValue();n.updateValue(n.includeStep(n.value+o)),a!==n.realValue&&n.options.onChange&&n.options.onChange(n.realValue,n.options)}}},this.element="string"==typeof i?document.querySelector(i):i,!(this.element instanceof HTMLElement))throw"Given HTML element is not valid or doesn't exist.";this.options=Object.assign({},t,s),this.range=this.options.max-this.options.min,this.createElements(),this.options.disabled&&this.disable();var o=0;this.options.initialValue&&(o=(this.options.initialValue-this.options.min)/this.range),this.updateValue(o),this.setAriaProps(),this.updateHoverTooltip(o)};return i.prototype.createElement=function(e,t){var i=document.createElement("div");return i.className=this.getClassName(e),t.appendChild(i),i},i.prototype.createElements=function(){this.trackElement=this.createElement("track",this.element),this.progressElement=this.createElement("progress",this.trackElement),this.hoverElement=this.createElement("hover",this.trackElement),this.bufferElement=this.createElement("buffer",this.trackElement),this.handleElement=this.createElement("handle",this.element),this.options.getTooltipText&&(this.valueTooltipElement=this.createElement("mainTooltip",this.element),this.hoverTooltipElement=this.createElement("hoverTooltip",this.element)),this.element.classList.add(this.options.className),this.trackElement.setAttribute("tabindex","0"),this.trackElement.setAttribute("role","slider"),this.trackElement.setAttribute("aria-valuemin","0"),this.setOptions(),this.element.addEventListener("touchstart",this.handleDragStart),window.addEventListener("touchmove",this.handleTouchMove,{capture:!1,passive:!1}),window.addEventListener("touchend",this.handleDragEnd),this.element.addEventListener("mouseenter",this.handleMouseEnter),this.element.addEventListener("mouseleave",this.handleMouseLeave),this.element.addEventListener("mousedown",this.handleDragStart),window.addEventListener("mouseup",this.handleDragEnd),window.addEventListener("mousemove",this.handleMouseMove,!1),this.element.addEventListener("keydown",this.handleKeyDown)},i.prototype.getClassName=function(e,t){return void 0===t&&(t=null),t?this.options.className+"-"+e+"--"+t:this.options.className+"-"+e},i.prototype.handleDragMove=function(e){var t=this.realValue;this.updateValue(e),t!==this.realValue&&this.options.onDragMove&&this.options.onDragMove(this.realValue,this.options)},i.prototype.getValueFromEvent=function(e){var t,i=this.element.offsetWidth;if(e.touches&&1===e.touches.length)t=e.touches[0].pageX-this.elementLeft;else{if(!e.pageX)return 0;t=e.pageX-this.elementLeft}return t<0?t=0:t>i&&(t=i),this.includeStep(t/i)},i.prototype.setOptions=function(){this.trackElement.setAttribute("aria-valuemax",this.options.max.toString()),this.trackElement.setAttribute("aria-label",this.options.ariaLabel),this.options.ariaLabeledBy&&this.trackElement.setAttribute("aria-labeledby",this.options.ariaLabeledBy)},i.prototype.setAriaProps=function(){this.trackElement.setAttribute("aria-valuenow",this.realValue.toString()),this.trackElement.setAttribute("aria-valuetext",this.options.getValueText(this.realValue,this.options))},i.prototype.limitValue=function(e){return e<0?0:e>1?1:e},i.prototype.includeStep=function(e){var t=this.options.step/this.range;return this.options.snap&&(e=(e=Math.round(e/t)*t)*this.range/this.range),this.limitValue(e)},i.prototype.updateTooltip=function(e,t,i){this.options.getTooltipText&&(i.style.left=100*e+"%",i.innerHTML=this.options.getTooltipText(t,this.options))},i.prototype.updateValueTooltip=function(e){this.updateTooltip(e,this.realValue,this.valueTooltipElement)},i.prototype.updateHoverTooltip=function(e){this.updateTooltip(e,parseFloat((e*this.range+this.options.min).toFixed(4)),this.hoverTooltipElement)},i.prototype.updateValue=function(e){if(this.handleElement.style.left=100*e+"%",this.progressElement.style.transform="scaleX("+e+")",this.value!==e||void 0===e){var t=this.getRealValue();this.value=e,this.realValue=this.getRealValue(),this.realValue!==t&&(this.setAriaProps(),this.updateValueTooltip(e)),this.isDragging&&this.setHoverScale(0)}},i.prototype.setHoverScale=function(e){this.hoverElement.style.transform="scaleX("+e+")"},i.prototype.getRealValue=function(){return parseFloat((this.value*this.range+this.options.min).toFixed(4))},i.prototype.getValue=function(){return this.realValue},i.prototype.setValue=function(e){this.isDragging||this.updateValue(this.includeStep(e/this.range))},i.prototype.setBufferValue=function(e){this.bufferElement.style.transform="scaleX("+e/this.range+")"},i.prototype.disable=function(){this.options.disabled=!0,this.element.classList.add(this.options.className+"--disabled"),this.trackElement.setAttribute("aria-disabled","true"),this.trackElement.setAttribute("disabled","true"),this.trackElement.setAttribute("tabindex","-1")},i.prototype.enable=function(){this.options.disabled=!1,this.element.classList.remove(this.options.className+"--disabled"),this.trackElement.setAttribute("tabindex","0")},i.prototype.unbind=function(){this.element.removeEventListener("touchstart",this.handleDragStart),window.removeEventListener("touchmove",this.handleTouchMove),window.removeEventListener("touchend",this.handleDragEnd),this.element.removeEventListener("mouseenter",this.handleMouseEnter),this.element.removeEventListener("mouseleave",this.handleMouseLeave),this.element.removeEventListener("mousedown",this.handleDragStart),window.removeEventListener("mouseup",this.handleDragEnd),window.removeEventListener("mousemove",this.handleMouseMove),this.element.removeEventListener("keydown",this.handleKeyDown)},i.prototype.destroy=function(){this.unbind(),this.element.innerHTML="",this.element=null,this.handleElement=null,this.trackElement=null,this.progressElement=null,this.bufferElement=null,this.hoverElement=null,this.valueTooltipElement=null,this.hoverTooltipElement=null,this.options=Object.assign({},t),this.value=0,this.realValue=0,this.range=0,this.isDragging=!1,this.isMouseOver=!1},i});
 //# sourceMappingURL=aria-progress-range-slider.umd.js.map

dist/index.d.ts

@@ -86,3 +86,5 @@ declare type TSelectorOrElement = HTMLElement | Element | string;
     enable(): void;
+    unbind(): void;
+    destroy(): void;
 }
 export default ProgressBar;

package.json

 {
   "name": "aria-progress-range-slider",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Accessible progress bar / slider component",
@@ -10,3 +10,3 @@ "scripts": {
     "build-docs": "rm -rf ./docs && parcel build index.html --out-dir ./docs --public-url /aria-progress-range-slider",
-    "prepublish": "npm run build && npm run build-docs"
+    "prepublish": "npm run build"
   },
@@ -13,0 +13,0 @@ "devDependencies": {

README.md

@@ -8,15 +8,42 @@ # Accessible Progres bar / Range slider
 
-As I haven't one, I've tried to create simple to use, fully accessible slider component.
+As I haven't found one, I've tried to create simple to use, fully accessible slider component. Build is less than 2Kb;
 
 It is written in TypeScript and I will be releasing React component soon.
 
+### Features
 
-## I'm still working on the documentation.
+* Fully accessible (based on [this example](https://www.w3.org/TR/wai-aria-practices/examples/slider/slider-1.html))
+* Works on touch enabled devices (you can tap anywhere and drag)
+* IE10+
+* Support for both integers and float values (using `options.float`)
+* Two value tooltips, one shown all the time, and one on hover
+* Callback system
+* Additional "buffer bar" that is controlled by the user
+* Easy to style
 
-But the library itself is fully functional.
 
+### TODO
 
+* [ ] API to update options (ATM only enable/disable is available)
+* [ ] Better demo page
+* [ ] Themes (YouTube-like, Vimeo-like...)
+* [ ] React component
+* [ ] Tests
+
 ## Usage
 
+You'll need to import `ProgressBar` class and instantiate by passing two params.
+The first one is `selectorOrElement` - CSS selector string or HTML element. This element will be used as a slider's wrapper, and library will create all needed elements inside it.
+
+Two other one is the `options` object, and check below for more documenation on available options.
+
 ```js
+ProgressBar(selectorOrElement:TSelectorOrElement, options:IProgressBarOptionsPartial);
+```
+
+You'll have to import CSS styling as well.
+
+### Example:
+
+```js
 // Import the class
@@ -37,31 +64,167 @@ import ProgressBar from 'aria-progress-range-slider';
 ```js
+// Slider accessible label
+// Default: 'Seek slider'
 ariaLabel?: string;
+
+// If slider is labeled by another element,
+// this should be the id of that element
+// (Similar to how the "for" attribute is used to link a LABEL to an INPUT.)
 ariaLabeledBy?: string;
+
+// How much value will change on arrow keys
+// Default: 1
 arrowMoveStep?: number;
+
+// Base CSS class name
+// Default: 'AriaProgressBar'
+//
+// Note that all elements will use this one as a prefix
+//
+// Example:
+// 'AriaProgressBar-track'
+// 'AriaProgressBar-handle' ...
 className?: string;
+
+// When true disables the slider
+// Default: false
 disabled?: boolean;
+
+// When true, slider will use floating numbers instead of integers
+// Default: false
 float?: boolean;
+
+// Function that will be used to populate both tooltips (hover and main one)
+// Params are current value and options
+// Default: (value) => value.toString()
 getTooltipText?(value: number, options?: IProgressBarOptions): string;
+
+// Function that will be used to populate "aria-valuetext" attribute
+// Params are current value and options
+// Default: (value, options) => `${ value } ranging from ${ options.min } to ${ options.max }`
 getValueText?(value: number, options?: IProgressBarOptions): string;
+
+// Initial value
+// Default: options.min (0)
 initialValue?: number;
+
+// Maximum value
+// Default: 100
 max?: number;
+
+// Minimum value
+// Default: 0
 min?: number;
+
+// Callback function that will be called every time
+// slider's value changes
 onChange?(value: number, options?: IProgressBarOptions): any;
+
+// Callback function that will be called every time
+// user finishes dragging the handle
 onDragEnd?(value: number, options?: IProgressBarOptions): any;
+
+// Callback function that will be called every time
+// user moves the handle
 onDragMove?(value: number, options?: IProgressBarOptions): any;
+
+// Callback function that will be called every time
+// user starts dragging the handle
 onDragStart?(value: number, options?: IProgressBarOptions): any;
+
+// How much value will change on page up and page down keys
+// Default: 5
 pageMoveStep?: number;
+
+// If false, tooltips and the hover bar won't snap at values dividable by options.step
+// Default: true
 snap?: boolean;
+
+// The stepping interval
+// Default: 1
 step?: number;
 ```
 
+Please note that you can't hide elements through options (nor API). Just use CSS to hide them. I think it is a little bit cleaner than having a lot of conditions in the code.
 
+### Elements and CSS classes
+
+Default CSS class names are:
+
+```scss
+// Wrapper element
+.AriaProgressBar {}
+.AriaProgressBar--hover {}
+.AriaProgressBar--dragging {}
+.AriaProgressBar--disabled {}
+
+// Main element, slider's track
+.AriaProgressBar-track {}
+
+// Progress bar
+.AriaProgressBar-progress {}
+
+// Hover bar, "fake" progress bar that shows on hover
+// to indicate where will it jump on click
+.AriaProgressBar-hover {}
+
+// Same as hover bar, but controlled by you
+// My intention was to use it as a buffer bar for media players
+// (similar what YouTube does)
+.AriaProgressBar-buffer {}
+
+// Handle element
+.AriaProgressBar-handle {}
+
+// Tooltip that is always visible and displays slider's value
+.AriaProgressBar-mainTooltip {}
+
+// Tooltip that shows on hover and displays value
+// slider will be changed to on click
+.AriaProgressBar-hoverTooltip {}
+```
+
+Please note that if you change `options.className` it will use it instead of `AriaProgressBar`.
+
+Check [https://github.com/Stanko/aria-progress-range-slider/blob/master/src/style.scss](styles.scss) to create your own theme. (Everything above `// Default theme` is mandatory for slider to work.)
+
+
 ## API
 
+This is component's public API.
+
 ```js
+// Removes all of the HTML elements
+// and removes all listeners
+destroy(): void;
+
+// Gets slider's current value
 getValue(): number;
+
+// Sets value
 setValue(value: number): void;
+
+// Sets value for the buffer bar
 setBufferValue(value: number): void;
+
+// Disables the slider
 disable(): void;
+
+// Enables the slider
 enable(): void;
+
+// Removes all listeners
+unbind(): void;
 ```
+
+
+## Development
+
+I'm using [https://parceljs.org/](Parcel) for development and docs, while [microbundle](https://github.com/developit/microbundle) is used for npm builds.
+
+For local development use:
+
+```
+npm start
+```
+
+It will start development server on http://localhost:1234/

No alert changes

Improved metrics

Total package byte prevSize

108618

increased by13.96%

Lines of code

199

increased by7.57%

Number of lines in readme file

229

increased by246.97%

No dependency changes