rangetouch
Advanced tools
Comparing version 0.0.3 to 0.0.5
# Changelog | ||
## v0.0.5 | ||
- Bug fix for breaking other touches | ||
## v0.0.4 | ||
- Bug fix for thumb width offset | ||
## v0.0.3 | ||
- Microsoft Edge fixes and improvements to touch area | ||
## v0.0.2 | ||
- Version bump for bower | ||
## v0.0.1 | ||
- Initial release |
@@ -1,1 +0,1 @@ | ||
!function(t,e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e(t,document):"function"==typeof define&&define.amd?define(null,function(){e(t,document)}):t.rangetouch=e(t,document)}("undefined"!=typeof window?window:this,function(t,e){"use strict";function n(t,e,n){t.addEventListener(e,n,!1)}function o(t,e){if(1>e){var n=parseInt(e).getDecimalCount();return parseFloat(t.toFixed(n))}return Math.round(t/e)*e}function u(t){var e,n=t.target,u=t.changedTouches[0],r=parseFloat(n.getAttribute("min"))||0,i=parseFloat(n.getAttribute("max"))||100,c=parseFloat(n.getAttribute("step"))||1,d=i-r,s=n.getBoundingClientRect();100/s.width*(a.thumbWidth/2)/100;return e=100/s.width*(u.pageX-s.left),0>e?e=0:e>100&&(e=100),o(d*(e/100),c)}function r(t){a.enabled&&(t.preventDefault(),t.target.value=u(t))}function i(){n(e.body,a.events.start,r),n(e.body,a.events.move,r)}var a={enabled:!0,selectors:{range:'[type="range"]'},thumbWidth:15,events:{start:"touchstart",move:"touchmove"}};return function(){if("ontouchstart"in e.documentElement){for(var t=e.querySelectorAll(a.selectors.range),n=t.length-1;n>=0;n--)t[n].style.touchAction="manipulation";i()}}(),{set:function(t,e){a[t]=e}}}); | ||
!function(t,e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e(t,document):"function"==typeof define&&define.amd?define(null,function(){e(t,document)}):t.rangetouch=e(t,document)}("undefined"!=typeof window?window:this,function(t,e){"use strict";function n(t,e,n){t.addEventListener(e,n,!1)}function o(t,e){if(1>e){var n=parseInt(e).getDecimalCount();return parseFloat(t.toFixed(n))}return Math.round(t/e)*e}function r(t){var e,n=t.target,r=t.changedTouches[0],u=parseFloat(n.getAttribute("min"))||0,i=parseFloat(n.getAttribute("max"))||100,c=parseFloat(n.getAttribute("step"))||1,d=i-u,s=n.getBoundingClientRect(),l=100/s.width*(a.thumbWidth/2)/100;return e=100/s.width*(r.pageX-s.left),0>e?e=0:e>100&&(e=100),50>e?e-=(100-2*e)*l:e>50&&(e+=2*(e-50)*l),o(d*(e/100),c)}function u(t){a.enabled&&"range"===t.target.type&&(t.preventDefault(),t.target.value=r(t))}function i(){n(e.body,a.events.start,u),n(e.body,a.events.move,u)}var a={enabled:!0,selectors:{range:'[type="range"]'},thumbWidth:15,events:{start:"touchstart",move:"touchmove"}};return function(){if("ontouchstart"in e.documentElement){for(var t=e.querySelectorAll(a.selectors.range),n=t.length-1;n>=0;n--)t[n].style.touchAction="manipulation";i()}}(),{set:function(t,e){a[t]=e}}}); |
@@ -1,1 +0,1 @@ | ||
!function(){"use strict";function e(e){var n=new XMLHttpRequest,t=document.body;if("withCredentials"in n)n.open("GET",e,!0);else{if("function"!=typeof XDomainRequest)return;n=new XDomainRequest,n.open("GET",e)}n.onload=function(){var e=document.createElement("div");e.setAttribute("hidden",""),e.innerHTML=n.responseText,t.insertBefore(e,t.childNodes[0])},setTimeout(function(){n.send()},0)}window.loadSprites=function(n){n.forEach(e)},shr.setup({count:{classname:"btn__count"}})}(); | ||
!function(){"use strict";function e(e){var n=new XMLHttpRequest,t=document.body;if("withCredentials"in n)n.open("GET",e,!0);else{if("function"!=typeof XDomainRequest)return;n=new XDomainRequest,n.open("GET",e)}n.onload=function(){var e=document.createElement("div");e.setAttribute("hidden",""),e.innerHTML=n.responseText,t.insertBefore(e,t.childNodes[0])},setTimeout(function(){n.send()},0)}window.loadSprites=function(n){n.forEach(e)},shr.setup({count:{classname:"btn__count"}}),window.rangetouch.set("thumbWidth",20),document.domain.indexOf("rangetouch.com")>-1&&(!function(e,n,t,o,i,c,a){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,c=n.createElement(t),a=n.getElementsByTagName(t)[0],c.async=1,c.src=o,a.parentNode.insertBefore(c,a)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-15","auto"),ga("send","pageview"))}(); |
@@ -51,4 +51,16 @@ // ========================================================================== | ||
}); | ||
})(); | ||
// Set range thumb size | ||
window.rangetouch.set('thumbWidth', 20); | ||
// Google analytics | ||
// For demo site (https://rangetouch.com) only | ||
if(document.domain.indexOf('rangetouch.com') > -1) { | ||
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ | ||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
ga('create', 'UA-40881672-15', 'auto'); | ||
ga('send', 'pageview'); | ||
} | ||
})(); |
@@ -24,3 +24,4 @@ // ========================================================================== | ||
open = require("gulp-open"), | ||
size = require("gulp-size"); | ||
size = require("gulp-size"), | ||
htmlmin = require("gulp-htmlmin"); | ||
@@ -52,2 +53,9 @@ var r00t = __dirname, | ||
// Options for HTML minification | ||
// https://github.com/kangax/html-minifier | ||
htmlMinOptions = { | ||
collapseWhitespace: true, | ||
removeComments: true | ||
}, | ||
// Task arrays | ||
@@ -219,2 +227,3 @@ tasks = { | ||
})) | ||
.pipe(htmlmin(htmlMinOptions)) | ||
.pipe(s3(aws.cdn, options.cdn)); | ||
@@ -241,2 +250,3 @@ }); | ||
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version)) | ||
.pipe(htmlmin(htmlMinOptions)) | ||
.pipe(s3(aws.docs, options.docs)); | ||
@@ -247,2 +257,3 @@ | ||
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version)) | ||
.pipe(htmlmin(htmlMinOptions)) | ||
.pipe(s3(aws.cdn, options.docs)); | ||
@@ -249,0 +260,0 @@ }); |
{ | ||
"name": "rangetouch", | ||
"version": "0.0.3", | ||
"version": "0.0.5", | ||
"description": "A super tiny library to make input type='range' sliders work better on touch devices", | ||
@@ -11,5 +11,6 @@ "homepage": "https://rangetouch.com", | ||
"gulp-autoprefixer": "^3.1.0", | ||
"gulp-clean-css": "^2.0.6", | ||
"gulp-concat": "^2.3.3", | ||
"gulp-htmlmin": "^1.3.0", | ||
"gulp-less": "^3.0.5", | ||
"gulp-clean-css": "^2.0.6", | ||
"gulp-open": "^1.0.0", | ||
@@ -16,0 +17,0 @@ "gulp-rename": "^1.2.0", |
# RangeTouch | ||
A super tiny library (645 bytes gzipped) to make `<input type="range">` sliders work better on touch devices. | ||
A super tiny library to make `<input type="range">` sliders work better on touch devices. | ||
@@ -9,2 +9,7 @@ [Checkout the demo](https://rangetouch.com) | ||
## Features | ||
- No setup required, just include the script | ||
- Less than 700 bytes minified and gzipped | ||
- No dependencies (written in "vanilla" JavaScript) | ||
## Quick setup | ||
@@ -20,3 +25,3 @@ To use RangeTouch, you just need to add `rangetouch.js` (either from the `/dist` (minified) or `/src/js` (unminified) folders) before the closing `</body>` tag like so: | ||
```html | ||
<script src="https://cdn.rangetouch.com/0.0.3/rangetouch.js"></script> | ||
<script src="https://cdn.rangetouch.com/0.0.5/rangetouch.js"></script> | ||
``` | ||
@@ -23,0 +28,0 @@ |
// ========================================================================== | ||
// rangetouch.js v0.0.3 | ||
// rangetouch.js v0.0.5 | ||
// Making <input type="range"> work on touch devices | ||
@@ -63,4 +63,4 @@ // https://github.com/selz/rangetouch | ||
var percent, | ||
clientRect = input.getBoundingClientRect(), | ||
thumbWidthPercentage = (((100 / clientRect.width) * (settings.thumbWidth / 2)) / 100); | ||
clientRect = input.getBoundingClientRect(), | ||
thumbWidth = (((100 / clientRect.width) * (settings.thumbWidth / 2)) / 100); | ||
@@ -74,2 +74,10 @@ // Determine left percentage | ||
// Factor in the thumb offset | ||
if(percent < 50) { | ||
percent -= ((100 - (percent * 2)) * thumbWidth); | ||
} | ||
else if(percent > 50) { | ||
percent += (((percent - 50) * 2) * thumbWidth); | ||
} | ||
// Find the closest step to the mouse position | ||
@@ -82,3 +90,3 @@ return roundToStep(delta * (percent / 100), step); | ||
// If not enabled, bail | ||
if(!settings.enabled) { | ||
if(!settings.enabled || event.target.type !== 'range') { | ||
return; | ||
@@ -85,0 +93,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
61921
662
62
16