diff --git a/README.md b/README.md index d473062..ef6934a 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,11 @@ A dependency-free, responsive and touch-enabled javascript range slider to make `` elements prettier and more configurable. - [x] No dependencies -- [x] <3kb gzipped +- [x] 3kb gzipped - [x] Touch enabled - [x] Responsive - [x] Single or double range layouts. -- [x] Horzontal and vertical orientations. +- [x] Horizontal and vertical orientations. - [x] Fully stylable to fit your app. ![Rangeable](/docs/rangeable.png?raw=true "Rangeable") diff --git a/dist/rangeable.min.css b/dist/rangeable.min.css index 5602bc9..f14345c 100644 --- a/dist/rangeable.min.css +++ b/dist/rangeable.min.css @@ -4,7 +4,7 @@ Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. - Version: 0.1.0 + Version: 0.1.1 */ .rangeable-container{cursor:pointer;width:100%}.rangeable-container.rangeable-disabled{opacity:.6;cursor:not-allowed}.rangeable-container.rangeable-multiple.combined-tooltip .rangeable-handle .rangeable-tooltip,.rangeable-container.rangeable-vertical.combined-tooltip .rangeable-handle .rangeable-tooltip{opacity:0}.rangeable-container.focus .rangeable-handle{border:1px solid #74b9ff}.rangeable-container .rangeable-track{width:100%;height:8px;background-color:#ccc;position:relative;border-radius:4px}.rangeable-container .rangeable-progress{height:8px;width:100%;background-color:#3db13d;position:absolute;left:0;top:0;border-radius:4px;-webkit-transform-origin:0 0 0;transform-origin:0 0 0}.rangeable-container .rangeable-progress>.rangeable-tooltip{display:none;z-index:11;top:auto;bottom:calc(100% + 7px + 9px);white-space:nowrap}.rangeable-container .rangeable-handle{box-sizing:border-box;width:22px;height:22px;border:6px solid #3db13d;border-radius:50%;background-color:#fff;position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.rangeable-container .rangeable-handle:focus{outline:0}.rangeable-container .rangeable-handle:focus::after{position:absolute;width:22px;height:22px;bottom:-6px;right:-6px;outline:#000 dotted 1px;content:""}.rangeable-container .rangeable-handle.active{z-index:10}.rangeable-container .rangeable-handle .rangeable-tooltip{display:none}.rangeable-container.combined-tooltip.dragging .rangeable-progress>.rangeable-tooltip,.rangeable-container.combined-tooltip.show-tooltip .rangeable-progress>.rangeable-tooltip,.rangeable-container.dragging.has-tooltip .rangeable-handle .rangeable-tooltip,.rangeable-container.rangeable-vertical.combined-tooltip .rangeable-progress>.rangeable-tooltip::before,.rangeable-container.show-tooltip.has-tooltip .rangeable-handle .rangeable-tooltip{display:block}.rangeable-container .rangeable-tooltip{position:absolute;right:50%;bottom:calc(100% + 6px + 4px + 5px);-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0);text-align:center;padding:2px 13px;background-color:#3db13d;border-radius:4px;font-weight:700;font-size:16px;color:#fff;font-family:Inconsolata,Consolas,Courier New,Lucida Console,sans-serif}.rangeable-container .rangeable-tooltip::before{width:0;height:0;border-width:4px 4px 0;border-style:solid;border-color:#3db13d transparent transparent;position:absolute;left:50%;top:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);content:""}.rangeable-container.rangeable-multiple .rangeable-handle:nth-child(1){left:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.rangeable-container.rangeable-multiple .rangeable-handle:nth-child(2){right:0}.rangeable-container.rangeable-vertical{height:100%;width:auto}.rangeable-container.rangeable-vertical .rangeable-track{width:8px;height:100%}.rangeable-container.rangeable-vertical .rangeable-progress{width:8px;height:100%;top:auto;bottom:0;-webkit-transform-origin:0 100% 0;transform-origin:0 100% 0}.rangeable-container.rangeable-vertical .rangeable-handle{right:auto;left:50%;top:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.rangeable-container.rangeable-vertical .rangeable-tooltip{position:absolute;top:50%;left:calc(100% + 6px + 4px + 5px);right:auto;bottom:auto;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.rangeable-container.rangeable-vertical .rangeable-tooltip::before{right:100%;left:auto;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);border-width:4px 4px 4px 0;border-color:transparent #3db13d transparent transparent}.rangeable-container.rangeable-vertical.rangeable-multiple .rangeable-handle:nth-child(1){top:0;left:50%}.rangeable-container.rangeable-vertical.rangeable-multiple .rangeable-handle:nth-child(2){bottom:0;top:auto;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)}.rangeable-input{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}.rangeable-input:focus+.rangeable-track .rangeable-handle::after{position:absolute;width:22px;height:22px;bottom:-6px;right:-6px;outline:#000 dotted 1px;content:""}.rangeable-ruler{position:relative;width:100%;height:30px;margin-bottom:2px}.rangeable-ruler .rangeable-ruler--labels,.rangeable-ruler .rangeable-ruler--markers{position:absolute;width:100%;height:100%}.rangeable-ruler .rangeable-ruler--labels .rangeable-ruler--max,.rangeable-ruler .rangeable-ruler--labels .rangeable-ruler--min{position:absolute;text-align:center;padding:2px 13px;background-color:#ccc;border-radius:4px;font-weight:700;font-size:16px;color:#fff;font-family:Consolas,Courier New,Lucida Console,sans-serif;white-space:nowrap}.rangeable-ruler .rangeable-ruler--labels .rangeable-ruler--min{left:0}.rangeable-ruler .rangeable-ruler--labels .rangeable-ruler--max{right:0}.rangeable-ruler .rangeable-ruler--markers{position:absolute;display:flex;align-items:center;justify-content:space-between}.rangeable-ruler .rangeable-ruler--markers div{width:1px;height:15px;background-color:#ccc}.rangeable-buffer,.rangeable-buffers{position:absolute;height:100%;width:100%}.rangeable-buffers{left:0;top:0}.rangeable-buffer{background-color:rgba(0,0,0,.2);border-radius:4px} \ No newline at end of file diff --git a/dist/rangeable.min.js b/dist/rangeable.min.js index ac9f9bf..8dccc6d 100644 --- a/dist/rangeable.min.js +++ b/dist/rangeable.min.js @@ -5,7 +5,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.1.0 + * Version: 0.1.1 * */ -(function(i,j){"object"==typeof exports?module.exports=j("Rangeable"):"function"==typeof define&&define.amd?define([],j):i.Rangeable=j("Rangeable")})("undefined"==typeof global?this.window||this.global:global,function(){var i=function(o,p){var q=document.createElement(o);return p&&q.classList.add(p),q},j=function(o){return o&&"function"==typeof o},m=function(o,p,q){var r;return function(){if(q=q||this,!r)return o.apply(q,arguments),r=!0,setTimeout(function(){r=!1},p)}},n=function(o,p){this.plugins=["ruler"],"string"==typeof o&&(o=document.querySelector(o)),this.input=o,this.config=Object.assign({},{type:"single",tooltips:"always",updateThrottle:30,classes:{input:"rangeable-input",container:"rangeable-container",vertical:"rangeable-vertical",progress:"rangeable-progress",handle:"rangeable-handle",tooltip:"rangeable-tooltip",track:"rangeable-track",multiple:"rangeable-multiple",disabled:"rangeable-disabled"}},p),this.mouseAxis={x:"clientX",y:"clientY"},this.trackSize={x:"width",y:"height"},this.trackPos={x:"left",y:"top"},this.lastPos=0,this.double="double"===this.config.type||Array.isArray(this.config.value),this.touch="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,this.init(),this.onInit()};return n.prototype.init=function(){if(!this.input.rangeable){var p,o={min:0,max:100,step:1,value:this.input.value};for(p in o)this.input[p]||(this.input[p]=o[p]),void 0!==this.config[p]&&(this.input[p]=this.config[p]);this.axis=this.config.vertical?"y":"x",this.input.rangeable=this,this.double?(this.input.values=this.config.value?this.config.value:[this.input.min,this.input.max],this.input.defaultValues=this.input.values.slice()):this.input.defaultValue||(this.input.defaultValue=this.input.value),this.render(),this.initialised=!0}},n.prototype.render=function(){var o=this,p=this.config,q=p.classes,r=i("div",q.container),s=i("div",q.track),t=i("div",q.progress),u=i("div",q.handle),v=i("div",q.tooltip);if(this.double?(u=[i("div",q.handle),i("div",q.handle)],v=[i("div",q.tooltip),i("div",q.tooltip),i("div",q.tooltip)],u.forEach(function(x,y){x.index=y,t.appendChild(x),x.appendChild(v[y]),x.tabIndex=1,p.handles&&p.handles[y]&&p.handles[y].locked&&!0===p.handles[y].locked&&(x.locked=!0)}),this.input.tabIndex=-1,p.vertical&&t.appendChild(u[0]),t.appendChild(v[2]),r.classList.add(q.multiple)):(t.appendChild(u),u.appendChild(v),p.handle&&p.handle.locked&&!0===p.handle.locked&&(u.locked=!0)),r.appendChild(s),p.vertical&&r.classList.add(q.vertical),p.size&&(r.style[this.trackSize[this.axis]]=isNaN(p.size)?p.size:p.size+"px"),p.tooltips&&(r.classList.add("has-tooltip"),"string"==typeof p.tooltips&&"always"===p.tooltips&&r.classList.add("show-tooltip")),this.nodes={container:r,track:s,progress:t,handle:u,tooltip:v},!this.double)p.handle&&void 0!==p.handle.min&&void 0!==p.handle.max&&(u=i("div","rangeable-buffer"),s.appendChild(u),this.nodes.buffer=u,this.limits={min:p.handle.min,max:p.handle.max});else if(p.handles){this.nodes.buffers=[],this.limits=[];var w=i("div","rangeable-buffers");p.handles.forEach(function(x,y){if(void 0!==x.min&&void 0!==x.max){var z=i("div","rangeable-buffer");w.appendChild(z),o.nodes.buffers.push(z),o.limits[y]={min:x.min,max:x.max}}}),s.appendChild(w)}s.appendChild(t),this.input.parentNode.insertBefore(r,this.input),r.insertBefore(this.input,s),this.input.classList.add(q.input),this.bind(),this.update()},n.prototype.reset=function(){this.double?this.input.defaultValues.forEach(this.setValue,this):this.setValue(this.input.defaultValue),this.onEnd()},n.prototype.setValueFromPosition=function(o){var p=parseFloat(this.input.min),q=parseFloat(this.input.max),r=parseFloat(this.input.step),s=this.touch?o.touches[0][this.mouseAxis[this.axis]]:o[this.mouseAxis[this.axis]],t=s-this.rects.container[this.trackPos[this.axis]],u=this.rects.container[this.trackSize[this.axis]];return"mousedown"===o.type&&(!this.double&&this.nodes.handle.contains(o.target)||this.double&&(this.nodes.handle[0].contains(o.target)||this.nodes.handle[1].contains(o.target)))?!1:(o=Math.ceil(((this.config.vertical?100*((u-t)/u):100*(t/u))*(q-p)/100+p)/r)*r,s>=this.lastPos&&(o-=r),parseFloat(o)!==parseFloat(this.startValue)&&void(r=!1,this.double&&(r=this.activeHandle.index),o=this.limit(o,r),this.setValue(o,r)))},n.prototype.start=function(o){return o.preventDefault(),this.startValue=this.getValue(),this.onStart(),this.nodes.container.classList.add("dragging"),this.recalculate(),this.activeHandle=this.getHandle(o),!!this.activeHandle&&void(this.activeHandle.classList.add("active"),this.setValueFromPosition(o),this.touch?(document.addEventListener("touchmove",this.events.move,!1),document.addEventListener("touchend",this.events.stop,!1),document.addEventListener("touchcancel",this.events.stop,!1)):(document.addEventListener("mousemove",this.events.move,!1),document.addEventListener("mouseup",this.events.stop,!1)))},n.prototype.move=function(o){this.setValueFromPosition(o),this.lastPos=this.touch?o.touches[0][this.mouseAxis[this.axis]]:o[this.mouseAxis[this.axis]]},n.prototype.stop=function(){this.stopValue=this.getValue(),this.nodes.container.classList.remove("dragging"),this.onEnd(),this.activeHandle.classList.remove("active"),this.activeHandle=!1,this.touch?(document.removeEventListener("touchmove",this.events.move),document.removeEventListener("touchend",this.events.stop),document.removeEventListener("touchcancel",this.events.stop)):(document.removeEventListener("mousemove",this.events.move),document.removeEventListener("mouseup",this.events.stop)),this.startValue!==this.stopValue&&this.input.dispatchEvent(new Event("change")),this.startValue=null},n.prototype.keydown=function(o){var p=this;this.double&&this.nodes.handle.forEach(function(q){if(q===document.activeElement)switch(o.key){case"ArrowRight":case"ArrowUp":p.stepUp(q.index);break;case"ArrowLeft":case"ArrowDown":p.stepDown(q.index);}})},n.prototype.stepUp=function(o){var p=parseFloat(this.input.step),q=this.getValue();this.double&&void 0!==o&&(q=q[o]),p=this.limit(parseFloat(q)+p,o),this.setValue(p,o)},n.prototype.stepDown=function(o){var p=parseFloat(this.input.step),q=this.getValue();this.double&&void 0!==o&&(q=q[o]),p=this.limit(parseFloat(q)-p,o),this.setValue(p,o)},n.prototype.limit=function(o,p){var q=this.input,r=parseFloat(q.min),s=parseFloat(q.max);return this.double&&void 0!==p?(!p&&o>q.values[1]?o=q.values[1]:p&&othis.limits[1].max?o=this.limits[1].max:othis.limits[0].max?o=this.limits[0].max:othis.limits.max?o=this.limits.max:os?o=s:oq&&(o=q.toFixed(this.accuracy)),o},n.prototype.setValue=function(o,p){var q=this.nodes;if(o=this.parseValue(o),this.double&&void 0===p)return!1;var r=this.initialised&&(o!==this.input.value||this.nativeEvent);if(this.double){var s=this.input.values;if(s[p]=o,this.config.tooltips){q.tooltip[p].textContent=o;var t=q.tooltip[0].getBoundingClientRect(),u=q.tooltip[1].getBoundingClientRect();t=!(t.rightu.right||t.bottomu.bottom),q.container.classList.toggle("combined-tooltip",t),t&&(q.tooltip[2].textContent=s[0]===s[1]?s[0]:s[0]+" - "+s[1])}}else this.input.value=o,q.tooltip.textContent=o;this.setPosition(o,p),r&&(this.onChange(),this.nativeEvent||this.input.dispatchEvent(new Event("input")),this.nativeEvent=!1)},n.prototype.native=function(){this.nativeEvent=!0,this.setValue()},n.prototype.setPosition=function(o){if(this.double){o=this.getPosition(this.input.values[0]);var p=this.getPosition(this.input.values[1]);this.nodes.progress.style[this.config.vertical?"bottom":"left"]=o+"px",o=p-o}else o=this.getPosition();this.nodes.progress.style[this.trackSize[this.axis]]=o+"px"},n.prototype.getPosition=function(o){void 0===o&&(o=this.input.value);var p=parseFloat(this.input.min),q=parseFloat(this.input.max);return(o-p)/(q-p)*this.rects.container[this.trackSize[this.axis]]},n.prototype.getHandle=function(o){if(!this.double)return!this.nodes.handle.locked&&this.nodes.handle;var p=this.rects,q=Math.abs(o[this.mouseAxis[this.axis]]-p.handle[0][this.trackPos[this.axis]]);return p=Math.abs(o[this.mouseAxis[this.axis]]-p.handle[1][this.trackPos[this.axis]]),(o=o.target.closest("."+this.config.classes.handle))||(o=q>p?this.nodes.handle[1]:this.nodes.handle[0]),!o.locked&&o},n.prototype.onInit=function(){j(this.config.onInit)&&this.config.onInit.call(this,this.getValue())},n.prototype.onStart=function(){j(this.config.onStart)&&this.config.onStart.call(this,this.getValue())},n.prototype.onChange=function(){j(this.config.onChange)&&this.config.onChange.call(this,this.getValue())},n.prototype.onEnd=function(){j(this.config.onEnd)&&this.config.onEnd.call(this,this.getValue())},n.prototype.enable=function(){this.disabled&&(this.touch?this.nodes.container.addEventListener("touchstart",this.events.touchstart):this.nodes.container.addEventListener("mousedown",this.events.down),this.nodes.container.classList.remove(this.config.classes.disabled),this.disabled=!1)},n.prototype.disable=function(){this.disabled||(this.touch?this.nodes.container.removeEventListener("touchstart",this.events.touchstart):this.nodes.container.removeEventListener("mousedown",this.events.down),this.nodes.container.classList.add(this.config.classes.disabled),this.disabled=!0)},n.prototype.bind=function(){this.events={start:this.start.bind(this),move:this.move.bind(this),stop:this.stop.bind(this),update:this.update.bind(this),reset:this.reset.bind(this),set:this.native.bind(this),key:this.keydown.bind(this)},this.events.scroll=m(this.events.update,this.config.updateThrottle),this.events.resize=m(this.events.update,this.config.updateThrottle),document.addEventListener("scroll",this.events.scroll,!1),window.addEventListener("resize",this.events.resize,!1),this.double&&document.addEventListener("keydown",this.events.key,!1),this.nodes.container.addEventListener(this.touch?"touchstart":"mousedown",this.events.start,!1),this.input.addEventListener("input",this.events.set,!1),this.input.form&&this.input.form.addEventListener("reset",this.events.reset,!1)},n.prototype.unbind=function(){document.removeEventListener("scroll",this.events.scroll),window.removeEventListener("resize",this.events.resize),this.double&&document.removeEventListener("keydown",this.events.key),this.nodes.container.removeEventListener(this.touch?"touchstart":"mousedown",void 0),this.input.removeEventListener("input",this.events.set),this.input.form&&this.input.form.removeEventListener("reset",this.events.reset),this.events=null},n.prototype.destroy=function(){this.input.rangeable&&(this.unbind(),this.input.classList.remove(this.config.classes.input),this.nodes.container.parentNode.replaceChild(this.input,this.nodes.container),delete this.input.rangeable,this.initialised=!1)},n}); \ No newline at end of file +(function(i,j){"object"==typeof exports?module.exports=j("Rangeable"):"function"==typeof define&&define.amd?define([],j):i.Rangeable=j("Rangeable")})("undefined"==typeof global?this.window||this.global:global,function(){var version="0.1.1";var i=function(p,q){var r=document.createElement(p);return q&&r.classList.add(q),r},j=function(p){return p&&"function"==typeof p},n=function(p,q,r){var s;return function(){if(r=r||this,!s)return p.apply(r,arguments),s=!0,setTimeout(function(){s=!1},q)}},o=function(p,q){this.plugins=["ruler"],"string"==typeof p&&(p=document.querySelector(p)),this.input=p,this.config=Object.assign({},{type:"single",tooltips:"always",updateThrottle:30,classes:{input:"rangeable-input",container:"rangeable-container",vertical:"rangeable-vertical",progress:"rangeable-progress",handle:"rangeable-handle",tooltip:"rangeable-tooltip",track:"rangeable-track",multiple:"rangeable-multiple",disabled:"rangeable-disabled"}},q),this.mouseAxis={x:"clientX",y:"clientY"},this.trackSize={x:"width",y:"height"},this.trackPos={x:"left",y:"top"},this.lastPos=0,this.double="double"===this.config.type||Array.isArray(this.config.value),this.touch="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,this.init(),this.onInit()};return o.prototype.init=function(){if(!this.input.rangeable){var q,p={min:0,max:100,step:1,value:this.input.value};for(q in p)this.input[q]||(this.input[q]=p[q]),void 0!==this.config[q]&&(this.input[q]=this.config[q]);this.axis=this.config.vertical?"y":"x",this.input.rangeable=this,this.double?(this.input.values=this.config.value?this.config.value:[this.input.min,this.input.max],this.input.defaultValues=this.input.values.slice()):this.input.defaultValue||(this.input.defaultValue=this.input.value),this.render(),this.initialised=!0}},o.prototype.render=function(){var p=this,q=this.config,r=q.classes,s=i("div",r.container),t=i("div",r.track),u=i("div",r.progress),v=i("div",r.handle),w=i("div",r.tooltip);if(this.input.tabIndex=-1,this.double?(v=[i("div",r.handle),i("div",r.handle)],w=[i("div",r.tooltip),i("div",r.tooltip),i("div",r.tooltip)],v.forEach(function(y,z){y.index=z,u.appendChild(y),y.appendChild(w[z]),y.tabIndex=1,q.handles&&q.handles[z]&&q.handles[z].locked&&!0===q.handles[z].locked&&(y.locked=!0)}),q.vertical&&u.appendChild(v[0]),u.appendChild(w[2]),s.classList.add(r.multiple)):(u.appendChild(v),v.appendChild(w),v.tabIndex=1,q.handle&&q.handle.locked&&!0===q.handle.locked&&(v.locked=!0)),s.appendChild(t),q.vertical&&s.classList.add(r.vertical),q.size&&(s.style[this.trackSize[this.axis]]=isNaN(q.size)?q.size:q.size+"px"),q.tooltips&&(s.classList.add("has-tooltip"),"string"==typeof q.tooltips&&"always"===q.tooltips&&s.classList.add("show-tooltip")),this.nodes={container:s,track:t,progress:u,handle:v,tooltip:w},!this.double)q.handle&&void 0!==q.handle.min&&void 0!==q.handle.max&&(v=i("div","rangeable-buffer"),t.appendChild(v),this.nodes.buffer=v,this.limits={min:q.handle.min,max:q.handle.max});else if(q.handles){this.nodes.buffers=[],this.limits=[];var x=i("div","rangeable-buffers");q.handles.forEach(function(y,z){if(void 0!==y.min&&void 0!==y.max){var A=i("div","rangeable-buffer");x.appendChild(A),p.nodes.buffers.push(A),p.limits[z]={min:y.min,max:y.max}}}),t.appendChild(x)}t.appendChild(u),this.input.parentNode.insertBefore(s,this.input),s.insertBefore(this.input,t),this.input.classList.add(r.input),this.bind(),this.update()},o.prototype.reset=function(){this.double?this.input.defaultValues.forEach(this.setValue,this):this.setValue(this.input.defaultValue),this.onEnd()},o.prototype.setValueFromPosition=function(p){var q=parseFloat(this.input.min),r=parseFloat(this.input.max),s=parseFloat(this.input.step),t=this.touch?p.touches[0][this.mouseAxis[this.axis]]:p[this.mouseAxis[this.axis]],u=t-this.rects.container[this.trackPos[this.axis]],v=this.rects.container[this.trackSize[this.axis]];return"mousedown"===p.type&&(!this.double&&this.nodes.handle.contains(p.target)||this.double&&(this.nodes.handle[0].contains(p.target)||this.nodes.handle[1].contains(p.target)))?!1:(p=Math.ceil(((this.config.vertical?100*((v-u)/v):100*(u/v))*(r-q)/100+q)/s)*s,t>=this.lastPos&&(p-=s),parseFloat(p)!==parseFloat(this.startValue)&&void(s=!1,this.double&&(s=this.activeHandle.index),p=this.limit(p,s),this.setValue(p,s)))},o.prototype.start=function(p){return p.preventDefault(),this.startValue=this.getValue(),this.onStart(),this.nodes.container.classList.add("dragging"),this.recalculate(),this.activeHandle=this.getHandle(p),!!this.activeHandle&&void(this.activeHandle.classList.add("active"),this.setValueFromPosition(p),this.touch?(document.addEventListener("touchmove",this.events.move,!1),document.addEventListener("touchend",this.events.stop,!1),document.addEventListener("touchcancel",this.events.stop,!1)):(document.addEventListener("mousemove",this.events.move,!1),document.addEventListener("mouseup",this.events.stop,!1)))},o.prototype.move=function(p){this.setValueFromPosition(p),this.lastPos=this.touch?p.touches[0][this.mouseAxis[this.axis]]:p[this.mouseAxis[this.axis]]},o.prototype.stop=function(){this.stopValue=this.getValue(),this.nodes.container.classList.remove("dragging"),this.onEnd(),this.activeHandle.classList.remove("active"),this.activeHandle=!1,this.touch?(document.removeEventListener("touchmove",this.events.move),document.removeEventListener("touchend",this.events.stop),document.removeEventListener("touchcancel",this.events.stop)):(document.removeEventListener("mousemove",this.events.move),document.removeEventListener("mouseup",this.events.stop)),this.startValue!==this.stopValue&&this.input.dispatchEvent(new Event("change")),this.startValue=null},o.prototype.keydown=function(p){var q=this,r=function(s){switch(p.key){case"ArrowRight":case"ArrowUp":q.stepUp(s);break;case"ArrowLeft":case"ArrowDown":q.stepDown(s);}};this.double?this.nodes.handle.forEach(function(s){s===document.activeElement&&r(s.index)}):this.nodes.handle===document.activeElement&&r()},o.prototype.stepUp=function(p){var q=parseFloat(this.input.step),r=this.getValue();this.double&&void 0!==p&&(r=r[p]),q=this.limit(parseFloat(r)+q,p),this.setValue(q,p)},o.prototype.stepDown=function(p){var q=parseFloat(this.input.step),r=this.getValue();this.double&&void 0!==p&&(r=r[p]),q=this.limit(parseFloat(r)-q,p),this.setValue(q,p)},o.prototype.limit=function(p,q){var r=this.input,s=parseFloat(r.min),t=parseFloat(r.max);return this.double&&void 0!==q?(!q&&p>r.values[1]?p=r.values[1]:q&&pthis.limits[1].max?p=this.limits[1].max:pthis.limits[0].max?p=this.limits[0].max:pthis.limits.max?p=this.limits.max:pt?p=t:pr&&(p=r.toFixed(this.accuracy)),p},o.prototype.setValue=function(p,q){var r=this.nodes;if(p=this.parseValue(p),this.double&&void 0===q)return!1;var s=this.initialised&&(p!==this.input.value||this.nativeEvent);if(this.double){var t=this.input.values;if(t[q]=p,this.config.tooltips){r.tooltip[q].textContent=p;var u=r.tooltip[0].getBoundingClientRect(),v=r.tooltip[1].getBoundingClientRect();u=!(u.rightv.right||u.bottomv.bottom),r.container.classList.toggle("combined-tooltip",u),u&&(r.tooltip[2].textContent=t[0]===t[1]?t[0]:t[0]+" - "+t[1])}}else this.input.value=p,r.tooltip.textContent=p;this.setPosition(p,q),s&&(this.onChange(),this.nativeEvent||this.input.dispatchEvent(new Event("input")),this.nativeEvent=!1)},o.prototype.native=function(){this.nativeEvent=!0,this.setValue()},o.prototype.setPosition=function(p){if(this.double){p=this.getPosition(this.input.values[0]);var q=this.getPosition(this.input.values[1]);this.nodes.progress.style[this.config.vertical?"bottom":"left"]=p+"px",p=q-p}else p=this.getPosition();this.nodes.progress.style[this.trackSize[this.axis]]=p+"px"},o.prototype.getPosition=function(p){void 0===p&&(p=this.input.value);var q=parseFloat(this.input.min),r=parseFloat(this.input.max);return(p-q)/(r-q)*this.rects.container[this.trackSize[this.axis]]},o.prototype.getHandle=function(p){if(!this.double)return!this.nodes.handle.locked&&this.nodes.handle;var q=this.rects,r=Math.abs(p[this.mouseAxis[this.axis]]-q.handle[0][this.trackPos[this.axis]]);return q=Math.abs(p[this.mouseAxis[this.axis]]-q.handle[1][this.trackPos[this.axis]]),(p=p.target.closest("."+this.config.classes.handle))||(p=r>q?this.nodes.handle[1]:this.nodes.handle[0]),!p.locked&&p},o.prototype.onInit=function(){j(this.config.onInit)&&this.config.onInit.call(this,this.getValue())},o.prototype.onStart=function(){j(this.config.onStart)&&this.config.onStart.call(this,this.getValue())},o.prototype.onChange=function(){j(this.config.onChange)&&this.config.onChange.call(this,this.getValue())},o.prototype.onEnd=function(){j(this.config.onEnd)&&this.config.onEnd.call(this,this.getValue())},o.prototype.enable=function(){this.disabled&&(this.touch?this.nodes.container.addEventListener("touchstart",this.events.touchstart):this.nodes.container.addEventListener("mousedown",this.events.down),this.nodes.container.classList.remove(this.config.classes.disabled),this.disabled=!1)},o.prototype.disable=function(){this.disabled||(this.touch?this.nodes.container.removeEventListener("touchstart",this.events.touchstart):this.nodes.container.removeEventListener("mousedown",this.events.down),this.nodes.container.classList.add(this.config.classes.disabled),this.disabled=!0)},o.prototype.bind=function(){this.events={start:this.start.bind(this),move:this.move.bind(this),stop:this.stop.bind(this),update:this.update.bind(this),reset:this.reset.bind(this),set:this.native.bind(this),key:this.keydown.bind(this)},this.events.scroll=n(this.events.update,this.config.updateThrottle),this.events.resize=n(this.events.update,this.config.updateThrottle),document.addEventListener("scroll",this.events.scroll,!1),window.addEventListener("resize",this.events.resize,!1),document.addEventListener("keydown",this.events.key,!1),this.nodes.container.addEventListener(this.touch?"touchstart":"mousedown",this.events.start,!1),this.input.addEventListener("input",this.events.set,!1),this.input.form&&this.input.form.addEventListener("reset",this.events.reset,!1)},o.prototype.unbind=function(){document.removeEventListener("scroll",this.events.scroll),window.removeEventListener("resize",this.events.resize),document.removeEventListener("keydown",this.events.key),this.nodes.container.removeEventListener(this.touch?"touchstart":"mousedown",void 0),this.input.removeEventListener("input",this.events.set),this.input.form&&this.input.form.removeEventListener("reset",this.events.reset),this.events=null},o.prototype.destroy=function(){this.input.rangeable&&(this.unbind(),this.input.classList.remove(this.config.classes.input),this.nodes.container.parentNode.replaceChild(this.input,this.nodes.container),delete this.input.rangeable,this.initialised=!1)},o}); \ No newline at end of file diff --git a/package.json b/package.json index f0f8310..deaa496 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rangeable", - "version": "0.1.0", + "version": "0.1.1", "description": "A dependency-free, responsive and touch-enabled javascript range slider.", "main": "dist/rangeable.min.js", "scripts": { diff --git a/src/index.js b/src/index.js index 9545a49..2f0eade 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * - * Version: 0.1.0 + * Version: 0.1.1 * */ (function(root, factory) { @@ -21,7 +21,7 @@ })(typeof global !== 'undefined' ? global : this.window || this.global, function() { "use strict"; - const version = "0.1.0"; + const version = "0.1.1"; /* HELPERS*/ @@ -193,6 +193,8 @@ let handle = createElement("div", c.handle); let tooltip = createElement("div", c.tooltip); + + this.input.tabIndex = -1; if (this.double) { handle = [ @@ -219,8 +221,6 @@ } }); - this.input.tabIndex = -1; - if (o.vertical) { progress.appendChild(handle[0]); } @@ -231,6 +231,8 @@ } else { progress.appendChild(handle); handle.appendChild(tooltip); + + handle.tabIndex = 1; // locked handle? if ( o.handle ) { @@ -463,21 +465,29 @@ * @return {Void} */ Rangeable.prototype.keydown = function(e) { + const step = (index) => { + switch(e.key) { + case 'ArrowRight': + case 'ArrowUp': + this.stepUp(index); + break; + case 'ArrowLeft': + case 'ArrowDown': + this.stepDown(index); + break; + } + }; + if ( this.double ) { this.nodes.handle.forEach(node => { if ( node === document.activeElement ) { - switch(e.key) { - case 'ArrowRight': - case 'ArrowUp': - this.stepUp(node.index); - break; - case 'ArrowLeft': - case 'ArrowDown': - this.stepDown(node.index); - break; - } + step(node.index); } }); + } else { + if ( this.nodes.handle === document.activeElement ) { + step(); + } } } @@ -923,10 +933,9 @@ // throttle the resize callback for performance on(window, "resize", this.events.resize); - - if ( this.double ) { - on(document, "keydown", this.events.key); - } + + // key control + on(document, "keydown", this.events.key); // touchstart/mousedown on(this.nodes.container, @@ -954,9 +963,7 @@ // throttle the resize callback for performance off(window, "resize", this.events.resize); - if ( this.double ) { - off(document, "keydown", this.events.key); - } + off(document, "keydown", this.events.key); off(this.nodes.container, this.touch ? "touchstart" : "mousedown"); diff --git a/src/scss/app.scss b/src/scss/app.scss index 8f015d5..cc103e7 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -4,7 +4,7 @@ Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. - Version: 0.1.0 + Version: 0.1.1 */ body {