rangetouch
Advanced tools
Comparing version 1.0.5 to 1.0.6
# Changelog | ||
## v1.0.6 | ||
- Fixed issue with stylesheet re-use | ||
## v1.0.5 | ||
- Fixed issue with variable naming | ||
- Fixed issue with variable naming | ||
## v1.0.4 | ||
- Fixed bug introduced in v1.0.3 with selector for disabled elements | ||
- No long require the upfront check for elements on the page given we just listen to events | ||
- Fixed bug introduced in v1.0.3 with selector for disabled elements | ||
- No long require the upfront check for elements on the page given we just listen to events | ||
## v1.0.3 | ||
- Fixed error if no `<input type="range">` found | ||
- CustomEvent polyfill no longer effects the global scope | ||
- AddCSS option to set whether to add helpful CSS to the page | ||
- Fixed error if no `<input type="range">` found | ||
- CustomEvent polyfill no longer effects the global scope | ||
- AddCSS option to set whether to add helpful CSS to the page | ||
## v1.0.2 | ||
- More clean up | ||
- More clean up | ||
## v1.0.1 | ||
- Clean up | ||
- Clean up | ||
## v1.0.0 | ||
- Repo move and release | ||
- Repo move and release | ||
## v0.0.9 | ||
- Added disabled selector | ||
- Added disabled selector | ||
## v0.0.8 | ||
- Bug fix for zoomed input | ||
- Bug fix for zoomed input | ||
## v0.0.7 | ||
- Triggering `input` and `change` events | ||
- Triggering `input` and `change` events | ||
## v0.0.6 | ||
- Bug fix for min attrubute | ||
- Bug fix for min attrubute | ||
## v0.0.5 | ||
- Bug fix for breaking other touches | ||
- Bug fix for breaking other touches | ||
## v0.0.4 | ||
- Bug fix for thumb width offset | ||
- Bug fix for thumb width offset | ||
## v0.0.3 | ||
- Microsoft Edge fixes and improvements to touch area | ||
- Microsoft Edge fixes and improvements to touch area | ||
## v0.0.2 | ||
- Version bump for bower | ||
- Version bump for bower | ||
## v0.0.1 | ||
- Initial release | ||
- Initial release |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):e.rangetouch=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){u(t.body,f.events.start,l),u(t.body,f.events.move,l),u(t.body,f.events.end,l)}function o(){var e=t.createElement("style");return e.appendChild(t.createTextNode("")),t.head.appendChild(e),e.sheet}function a(n,o,a){if(n&&o){var r;"function"==typeof e.CustomEvent?r=e.CustomEvent:(r=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var o=t.createEvent("CustomEvent");return o.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),o},r.prototype=e.Event.prototype);var i=new r(o,{bubbles:!0,detail:a});n.dispatchEvent(i)}}function r(){return[f.selectors.range,":not(",f.selectors.disabled,")"].join("")}function i(e){return!(e instanceof HTMLElement)||(e.matches(f.selectors.disabled)||e.disabled)}function u(e,t,n){e.addEventListener(t,n,!1)}function d(e){var t=(""+e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0}function c(e,t){if(t<1){var n=d(t);return parseFloat(e.toFixed(n))}return Math.round(e/t)*t}function s(e){var t,n=e.target,o=e.changedTouches[0],a=parseFloat(n.getAttribute("min"))||0,r=parseFloat(n.getAttribute("max"))||100,i=parseFloat(n.getAttribute("step"))||1,u=r-a,d=n.getBoundingClientRect(),s=100/d.width*(f.thumbWidth/2)/100;return t=100/d.width*(o.clientX-d.left),t<0?t=0:t>100&&(t=100),t<50?t-=(100-2*t)*s:t>50&&(t+=2*(t-50)*s),a+c(u*(t/100),i)}function l(e){f.enabled&&"range"===e.target.type&&!i(e.target)&&(e.preventDefault(),e.target.value=s(e),a(e.target,e.type===f.events.end?"change":"input"))}var f={enabled:!0,addCSS:!0,thumbWidth:15,selectors:{range:'[type="range"]',disabled:".rangetouch--disabled"},events:{start:"touchstart",move:"touchmove",end:"touchend"}};return function(){if("ontouchstart"in t.documentElement){if(f.addCSS){var e=t.styleSheets;(e.length?e[0]:o()).insertRule(r()+" { user-select: none; -webkit-user-select: none; touch-action: manipulation; }",0)}n()}}(),{set:function(e,t){f[e]=t}}}); | ||
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):e.rangetouch=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";var n={enabled:!0,addCSS:!0,thumbWidth:15,selectors:{range:'[type="range"]',disabled:".rangetouch--disabled"},events:{start:"touchstart",move:"touchmove",end:"touchend"}};function o(e,t,n){e.addEventListener(t,n,!1)}function a(e,t){if(t<1){var n=(o=(""+t).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/))?Math.max(0,(o[1]?o[1].length:0)-(o[2]?+o[2]:0)):0;return parseFloat(e.toFixed(n))}var o;return Math.round(e/t)*t}function d(o){var d;n.enabled&&"range"===o.target.type&&((d=o.target)instanceof HTMLElement&&!d.matches(n.selectors.disabled)&&!d.disabled)&&(o.preventDefault(),o.target.value=function(e){var t,o=e.target,d=e.changedTouches[0],i=parseFloat(o.getAttribute("min"))||0,r=parseFloat(o.getAttribute("max"))||100,u=parseFloat(o.getAttribute("step"))||1,s=r-i,c=o.getBoundingClientRect(),l=100/c.width*(n.thumbWidth/2)/100;return(t=100/c.width*(d.clientX-c.left))<0?t=0:t>100&&(t=100),t<50?t-=(100-2*t)*l:t>50&&(t+=2*(t-50)*l),i+a(s*(t/100),u)}(o),function(n,o,a){if(n&&o){var d;"function"==typeof e.CustomEvent?d=e.CustomEvent:(d=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var o=t.createEvent("CustomEvent");return o.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),o}).prototype=e.Event.prototype;var i=new d(o,{bubbles:!0,detail:a});n.dispatchEvent(i)}}(o.target,o.type===n.events.end?"change":"input"))}return function(){if("ontouchstart"in t.documentElement){var e;n.addCSS&&((e=t.createElement("style")).appendChild(t.createTextNode("")),t.head.appendChild(e),e.sheet).insertRule([n.selectors.range,":not(",n.selectors.disabled,")"].join("")+" { user-select: none; -webkit-user-select: none; touch-action: manipulation; }",0),o(t.body,n.events.start,d),o(t.body,n.events.move,d),o(t.body,n.events.end,d)}}(),{set:function(e,t){n[e]=t}}}); |
@@ -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"}}),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="//www.google-analytics.com/analytics.js",a.parentNode.insertBefore(c,a)}(window,document,"script",0,"ga"),ga("create","UA-40881672-15","auto"),ga("send","pageview"))}(); | ||
!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).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)}var n,t,o,a,i,c;window.loadSprites=function(n){n.forEach(e)},shr.setup({count:{classname:"btn__count"}}),window.rangetouch.set("thumbWidth",20),document.domain.indexOf("rangetouch.com")>-1&&(n=window,t=document,o="script",a="ga",n.GoogleAnalyticsObject=a,n.ga=n.ga||function(){(n.ga.q=n.ga.q||[]).push(arguments)},n.ga.l=1*new Date,i=t.createElement(o),c=t.getElementsByTagName(o)[0],i.async=1,i.src="//www.google-analytics.com/analytics.js",c.parentNode.insertBefore(i,c),ga("create","UA-40881672-15","auto"),ga("send","pageview"))}(); |
390
gulpfile.js
// ========================================================================== | ||
// Gulp build script | ||
// ========================================================================== | ||
/*global require, __dirname, console*/ | ||
/*jshint -W079 */ | ||
var fs = require("fs"); | ||
var path = require("path"); | ||
var gulp = require("gulp"); | ||
var gutil = require("gulp-util"); | ||
var concat = require("gulp-concat"); | ||
var uglify = require("gulp-uglify"); | ||
var less = require("gulp-less"); | ||
var clean = require("gulp-clean-css"); | ||
var run = require("run-sequence"); | ||
var prefix = require("gulp-autoprefixer"); | ||
var svgstore = require("gulp-svgstore"); | ||
var svgmin = require("gulp-svgmin"); | ||
var rename = require("gulp-rename"); | ||
var s3 = require("gulp-s3"); | ||
var replace = require("gulp-replace"); | ||
var open = require("gulp-open"); | ||
var size = require("gulp-size"); | ||
const path = require('path'); | ||
const gulp = require('gulp'); | ||
const plumber = require('gulp-plumber'); | ||
const concat = require('gulp-concat'); | ||
const terser = require('gulp-terser'); | ||
const less = require('gulp-less'); | ||
const clean = require('gulp-clean-css'); | ||
const prefix = require('gulp-autoprefixer'); | ||
const svgstore = require('gulp-svgstore'); | ||
const svgmin = require('gulp-svgmin'); | ||
const rename = require('gulp-rename'); | ||
const replace = require('gulp-replace'); | ||
const open = require('gulp-open'); | ||
const size = require('gulp-size'); | ||
const aws = require('aws-sdk'); | ||
const publish = require('gulp-awspublish'); | ||
const log = require('fancy-log'); | ||
var root = __dirname; | ||
var paths = { | ||
const pkg = require('./package.json'); | ||
const bundles = require('./bundles.json'); | ||
const deploy = require('./deploy.json'); | ||
const { browserslist, version } = pkg; | ||
// Get AWS config | ||
Object.values(deploy).forEach(target => { | ||
Object.assign(target, { | ||
publisher: publish.create({ | ||
region: target.region, | ||
params: { | ||
Bucket: target.bucket, | ||
}, | ||
credentials: new aws.SharedIniFileCredentials({ profile: 'rangetouch' }), | ||
}), | ||
}); | ||
}); | ||
const root = __dirname; | ||
const paths = { | ||
rangetouch: { | ||
// Source paths | ||
src: { | ||
js: path.join(root, "src/js/**/*") | ||
js: path.join(root, 'src/js/**/*'), | ||
}, | ||
// Output paths | ||
output: path.join(root, "dist/") | ||
output: path.join(root, 'dist/'), | ||
}, | ||
@@ -38,139 +55,128 @@ docs: { | ||
src: { | ||
less: path.join(root, "docs/src/less/**/*"), | ||
js: path.join(root, "docs/src/js/**/*"), | ||
sprite: path.join(root, "docs/src/sprite/**/*") | ||
less: path.join(root, 'docs/src/less/**/*'), | ||
js: path.join(root, 'docs/src/js/**/*'), | ||
sprite: path.join(root, 'docs/src/sprite/**/*'), | ||
}, | ||
// Output paths | ||
output: path.join(root, "docs/dist/"), | ||
output: path.join(root, 'docs/dist/'), | ||
// Docs | ||
root: path.join(root, "docs/") | ||
root: path.join(root, 'docs/'), | ||
}, | ||
upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")] | ||
upload: [path.join(root, 'dist/**'), path.join(root, 'docs/dist/**')], | ||
}; | ||
// Task arrays | ||
var tasks = { | ||
const tasks = { | ||
less: [], | ||
sass: [], | ||
js: [], | ||
sprite: [] | ||
sprite: [], | ||
}; | ||
// Fetch bundles from JSON | ||
var bundles = loadJSON(path.join(root, "bundles.json")); | ||
const build = { | ||
js: (files, bundle) => { | ||
Object.keys(files).forEach(key => { | ||
const name = `js-${key}`; | ||
tasks.js.push(name); | ||
// Load json | ||
function loadJSON(path) { | ||
try { | ||
return JSON.parse(fs.readFileSync(path)); | ||
} catch (err) { | ||
return {}; | ||
} | ||
} | ||
var build = { | ||
js: function(files, bundle) { | ||
for (var key in files) { | ||
(function(key) { | ||
var name = "js-" + key; | ||
tasks.js.push(name); | ||
gulp.task(name, function() { | ||
return gulp | ||
.src(bundles[bundle].js[key]) | ||
.pipe(concat(key)) | ||
.pipe(uglify()) | ||
.pipe(size({ | ||
gulp.task(name, () => { | ||
return gulp | ||
.src(bundles[bundle].js[key]) | ||
.pipe(plumber()) | ||
.pipe(concat(key)) | ||
.pipe(terser()) | ||
.pipe( | ||
size({ | ||
showFiles: true, | ||
gzip: true | ||
})) | ||
.pipe(gulp.dest(paths[bundle].output)); | ||
}); | ||
})(key); | ||
} | ||
gzip: true, | ||
}), | ||
) | ||
.pipe(gulp.dest(paths[bundle].output)); | ||
}); | ||
}); | ||
}, | ||
less: function(files, bundle) { | ||
for (var key in files) { | ||
(function(key) { | ||
var name = "less-" + key; | ||
tasks.less.push(name); | ||
less: (files, bundle) => { | ||
Object.keys(files).forEach(key => { | ||
const name = `less-${key}`; | ||
tasks.less.push(name); | ||
gulp.task(name, function() { | ||
return gulp | ||
.src(bundles[bundle].less[key]) | ||
.pipe(less()) | ||
.on("error", gutil.log) | ||
.pipe(concat(key)) | ||
.pipe(prefix(["last 2 versions"], { | ||
cascade: true | ||
})) | ||
.pipe(clean()) | ||
.pipe(size({ | ||
gulp.task(name, () => { | ||
return gulp | ||
.src(bundles[bundle].less[key]) | ||
.pipe(less()) | ||
.pipe(concat(key)) | ||
.pipe( | ||
prefix(browserslist, { | ||
cascade: false, | ||
}), | ||
) | ||
.pipe(clean()) | ||
.pipe( | ||
size({ | ||
showFiles: true, | ||
gzip: true | ||
})) | ||
.pipe(gulp.dest(paths[bundle].output)); | ||
}); | ||
})(key); | ||
} | ||
gzip: true, | ||
}), | ||
) | ||
.pipe(gulp.dest(paths[bundle].output)); | ||
}); | ||
}); | ||
}, | ||
sprite: function(bundle) { | ||
var name = "sprite-" + bundle; | ||
sprite: bundle => { | ||
const name = `sprite-${bundle}`; | ||
tasks.sprite.push(name); | ||
// Process Icons | ||
gulp.task(name, function() { | ||
gulp.task(name, () => { | ||
return gulp | ||
.src(paths[bundle].src.sprite) | ||
.pipe(svgmin({ | ||
plugins: [{ | ||
removeDesc: true | ||
}] | ||
})) | ||
.pipe( | ||
svgmin({ | ||
plugins: [ | ||
{ | ||
removeDesc: true, | ||
}, | ||
], | ||
}), | ||
) | ||
.pipe(svgstore()) | ||
.pipe(rename({ | ||
basename: (bundle == "rangetouch" ? "sprite" : bundle) | ||
})) | ||
.pipe(size({ | ||
showFiles: true, | ||
gzip: true | ||
})) | ||
.pipe( | ||
rename({ | ||
basename: bundle === 'rangetouch' ? 'sprite' : bundle, | ||
}), | ||
) | ||
.pipe( | ||
size({ | ||
showFiles: true, | ||
gzip: true, | ||
}), | ||
) | ||
.pipe(gulp.dest(paths[bundle].output)); | ||
}); | ||
} | ||
}, | ||
}; | ||
// Core files | ||
build.js(bundles.rangetouch.js, "rangetouch"); | ||
build.js(bundles.rangetouch.js, 'rangetouch'); | ||
// Docs files | ||
build.less(bundles.docs.less, "docs"); | ||
build.js(bundles.docs.js, "docs"); | ||
build.sprite("docs"); | ||
build.less(bundles.docs.less, 'docs'); | ||
build.js(bundles.docs.js, 'docs'); | ||
build.sprite('docs'); | ||
// Build all JS | ||
gulp.task("js", function() { | ||
run(tasks.js); | ||
}); | ||
gulp.task('js', gulp.parallel(...tasks.js)); | ||
// Build SASS (for testing, default is LESS) | ||
gulp.task("sass", function() { | ||
run(tasks.sass); | ||
}); | ||
// Watch for file changes | ||
gulp.task("watch", function() { | ||
gulp.task('watch', () => { | ||
// Core | ||
gulp.watch(paths.rangetouch.src.js, tasks.js); | ||
gulp.watch(paths.rangetouch.src.js, gulp.parallel(...tasks.js)); | ||
// Docs | ||
gulp.watch(paths.docs.src.js, tasks.js); | ||
gulp.watch(paths.docs.src.less, tasks.less); | ||
gulp.watch(paths.docs.src.sprite, tasks.sprite); | ||
gulp.watch(paths.docs.src.js, gulp.parallel(...tasks.js)); | ||
gulp.watch(paths.docs.src.less, gulp.parallel(...tasks.less)); | ||
gulp.watch(paths.docs.src.sprite, gulp.parallel(...tasks.sprite)); | ||
}); | ||
// Default gulp task | ||
gulp.task("default", function() { | ||
run(tasks.js, tasks.less, tasks.sprite, "watch"); | ||
}); | ||
gulp.task('default', gulp.parallel(...tasks.js, ...tasks.less, ...tasks.sprite, 'watch')); | ||
@@ -181,86 +187,114 @@ // Publish a version to CDN and docs | ||
// Some options | ||
var aws = loadJSON(path.join(root, "aws.json")); | ||
var version = loadJSON(path.join(root, "package.json")).version; | ||
var maxAge = 31536000; // seconds 1 year | ||
var options = { | ||
const maxAge = 31536000; // seconds 1 year | ||
const headers = { | ||
cdn: { | ||
headers: { | ||
"Cache-Control": "max-age=" + maxAge, | ||
"Vary": "Accept-Encoding" | ||
} | ||
'Cache-Control': `max-age=${maxAge}`, | ||
}, | ||
docs: { | ||
headers: { | ||
"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0", | ||
"Vary": "Accept-Encoding" | ||
} | ||
} | ||
'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0', | ||
}, | ||
}; | ||
// If aws is setup | ||
if ("cdn" in aws) { | ||
var regex = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)"; | ||
var cdnpath = new RegExp(aws.cdn.domain + "\/" + regex, "gi"); | ||
var semver = new RegExp("v" + regex, "gi"); | ||
var localpath = new RegExp("(\.\.\/)?dist", "gi"); | ||
} | ||
const regex = '(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)'; | ||
const cdnpath = new RegExp(`${deploy.cdn.domain}/${regex}`, 'gi'); | ||
const semver = new RegExp(`v${regex}`, 'gi'); | ||
const localpath = new RegExp('(../)?dist', 'gi'); | ||
// Publish version to CDN bucket | ||
gulp.task("cdn", function() { | ||
console.log("Uploading " + version + " to " + aws.cdn.bucket); | ||
gulp.task('cdn', () => { | ||
const { bucket, publisher } = deploy.cdn; | ||
if (!publisher) { | ||
throw new Error('No publisher instance. Check AWS configuration.'); | ||
} | ||
log(`Uploading ${version} to ${bucket}`); | ||
// Upload to CDN | ||
gulp.src(paths.upload) | ||
.pipe(size({ | ||
showFiles: true, | ||
gzip: true | ||
})) | ||
.pipe(rename(function(path) { | ||
path.dirname = path.dirname.replace(".", version); | ||
})) | ||
.pipe(s3(aws.cdn, options.cdn)); | ||
return gulp | ||
.src(paths.upload) | ||
.pipe( | ||
size({ | ||
showFiles: true, | ||
gzip: true, | ||
}), | ||
) | ||
.pipe( | ||
rename(path => { | ||
path.dirname = path.dirname.replace('.', version); | ||
}), | ||
) | ||
.pipe(publisher.publish(headers.cdn)) | ||
.pipe(publish.reporter()); | ||
}); | ||
// Publish to Docs bucket | ||
gulp.task("docs", function() { | ||
console.log("Uploading " + version + " docs to " + aws.docs.bucket); | ||
// Replace versioned files in readme.md | ||
gulp.task('docs:readme', () => { | ||
const { domain } = deploy.docs; | ||
// Replace versioned files in readme.md | ||
gulp.src([root + "/readme.md"]) | ||
.pipe(replace(cdnpath, aws.cdn.domain + "/" + version)) | ||
return gulp | ||
.src([`${root}/readme.md`]) | ||
.pipe(replace(cdnpath, `${domain}/${version}`)) | ||
.pipe(gulp.dest(root)); | ||
}); | ||
// Replace versioned files in rangetouch.js | ||
gulp.src(path.join(root, "src/js/rangetouch.js")) | ||
.pipe(replace(semver, "v" + version)) | ||
.pipe(gulp.dest(path.join(root, "src/js/"))); | ||
// Replace versions in rangetouch.js | ||
gulp.task('docs:src', () => | ||
gulp | ||
.src(path.join(root, 'src/js/rangetouch.js')) | ||
.pipe(replace(semver, `v${version}`)) | ||
.pipe(gulp.dest(path.join(root, 'src/js/'))), | ||
); | ||
// Replace local file paths with remote paths in docs | ||
// e.g. "../dist/rangetouch.js" to "https://cdn.rangetouch.com/x.x.x/rangetouch.js" | ||
gulp.src([paths.docs.root + "*.html"]) | ||
.pipe(replace(localpath, "https://" + aws.cdn.domain + "/" + version)) | ||
.pipe(s3(aws.docs, options.docs)); | ||
// Replace local file paths with remote paths in docs | ||
// e.g. "../dist/rangetouch.js" to "https://cdn.rangetouch.com/x.x.x/rangetouch.js" | ||
gulp.task('docs:paths', () => { | ||
const { domain, publisher } = deploy.docs; | ||
// Upload error.html to cdn (as well as docs site) | ||
gulp.src([paths.docs.root + "error.html"]) | ||
.pipe(replace(localpath, "https://" + aws.cdn.domain + "/" + version)) | ||
.pipe(s3(aws.cdn, options.docs)); | ||
if (!publisher) { | ||
throw new Error('No publisher instance. Check AWS configuration.'); | ||
} | ||
return gulp | ||
.src([`${paths.docs.root}*.html`]) | ||
.pipe(replace(localpath, `https://${domain}/${version}`)) | ||
.pipe(publisher.publish(headers.docs)) | ||
.pipe(publish.reporter()); | ||
}); | ||
// Upload error.html to cdn (as well as docs site) | ||
gulp.task('docs:error', () => { | ||
const { domain, publisher } = deploy.docs; | ||
if (!publisher) { | ||
throw new Error('No publisher instance. Check AWS configuration.'); | ||
} | ||
return gulp | ||
.src([`${paths.docs.root}error.html`]) | ||
.pipe(replace(localpath, `https://${domain}/${version}`)) | ||
.pipe(publisher.publish(headers.docs)) | ||
.pipe(publish.reporter()); | ||
}); | ||
// Publish to Docs bucket | ||
gulp.task('docs', gulp.parallel('docs:readme', 'docs:src', 'docs:paths', 'docs:error')); | ||
// Open the docs site to check it's sweet | ||
gulp.task("open", function() { | ||
console.log("Opening " + aws.docs.bucket + "..."); | ||
gulp.task('open', () => { | ||
const { bucket } = deploy.docs; | ||
log(`Opening ${bucket}...`); | ||
// A file must be specified or gulp will skip the task | ||
// Doesn't matter which file since we set the URL above | ||
// Weird, I know... | ||
gulp.src([paths.docs.root + "index.html"]) | ||
.pipe(open("", { | ||
url: "https://" + aws.docs.bucket | ||
})); | ||
return gulp.src([`${paths.docs.root}index.html`]).pipe( | ||
open('', { | ||
url: `https://${bucket}`, | ||
}), | ||
); | ||
}); | ||
// Do everything | ||
gulp.task("publish", function() { | ||
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs"); | ||
}); | ||
gulp.task('publish', gulp.series(gulp.parallel(...tasks.js, ...tasks.less, ...tasks.sprite), 'cdn', 'docs')); |
The MIT License (MIT) | ||
Copyright (c) 2017 Sam Potts | ||
Copyright (c) 2019 Sam Potts | ||
@@ -21,2 +21,2 @@ Permission is hereby granted, free of charge, to any person obtaining a copy | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. | ||
SOFTWARE. |
{ | ||
"name": "rangetouch", | ||
"version": "1.0.5", | ||
"version": "1.0.6", | ||
"description": "A super tiny library to make input type='range' sliders work better on touch devices", | ||
"homepage": "https://rangetouch.com", | ||
"main": "src/js/rangetouch.js", | ||
"dependencies": {}, | ||
"devDependencies": { | ||
"gulp": "^3.9.0", | ||
"gulp-autoprefixer": "^4.0.0", | ||
"gulp-clean-css": "^3.2.0", | ||
"gulp-concat": "^2.6.1", | ||
"gulp-less": "^3.3.0", | ||
"gulp-open": "^2.0.0", | ||
"gulp-rename": "^1.2.2", | ||
"gulp-replace": "^0.5.4", | ||
"gulp-s3": "^0.11.0", | ||
"gulp-size": "^2.1.0", | ||
"gulp-svgmin": "^1.0.0", | ||
"gulp-svgstore": "^6.1.0", | ||
"gulp-uglify": "^2.1.2", | ||
"gulp-util": "^3.0.8", | ||
"run-sequence": "^1.2.2" | ||
}, | ||
"browserslist": [ | ||
"> 1%" | ||
], | ||
"keywords": [ | ||
@@ -44,3 +29,27 @@ "range", | ||
}, | ||
"author": "Sam Potts <sam@potts.es>" | ||
"author": "Sam Potts <sam@potts.es>", | ||
"dependencies": {}, | ||
"devDependencies": { | ||
"aws-sdk": "^2.400.0", | ||
"eslint": "^5.13.0", | ||
"eslint-config-airbnb-base": "^13.1.0", | ||
"eslint-config-prettier": "^4.0.0", | ||
"eslint-plugin-import": "^2.16.0", | ||
"fancy-log": "^1.3.3", | ||
"gulp": "^4.0.0", | ||
"gulp-autoprefixer": "^6.0.0", | ||
"gulp-awspublish": "^4.0.0", | ||
"gulp-clean-css": "^4.0.0", | ||
"gulp-concat": "^2.6.1", | ||
"gulp-less": "^4.0.1", | ||
"gulp-open": "^3.0.1", | ||
"gulp-plumber": "^1.2.1", | ||
"gulp-rename": "^1.4.0", | ||
"gulp-replace": "^1.0.0", | ||
"gulp-size": "^3.0.0", | ||
"gulp-svgmin": "^2.1.0", | ||
"gulp-svgstore": "^7.0.1", | ||
"gulp-terser": "^1.1.7", | ||
"gulp-util": "^3.0.8" | ||
} | ||
} |
# RangeTouch | ||
A super tiny library to make `<input type="range">` sliders work better on touch devices. | ||
@@ -9,10 +10,13 @@ | ||
## Why? | ||
While building [plyr](https://plyr.io) I noticed how bad the experience was trying to use `<input type="range">` is on a touch device (particularly iOS). Touching the track on a desktop will jump the thumb handle to that point. However on some touch devices this simply focuses the input and to adjust the value you need to touch and drag the handle. This is something that I can't help but feel will eventually be fixed by the browser vendors but for now, you can use RangeTouch to fill that gap. | ||
## Features | ||
- No setup required, just include the script | ||
- Less than 1KB minified and gzipped | ||
- No dependencies (written in "vanilla" JavaScript) | ||
- No setup required, just include the script | ||
- Less than 1KB minified and gzipped | ||
- No dependencies (written in "vanilla" JavaScript) | ||
## Quick setup | ||
To use RangeTouch, you just need to add `rangetouch.js` (either from the `/dist` (minified) or `/src/js` (unminified) folders). Ideally before the closing `</body>` tag: | ||
@@ -27,9 +31,11 @@ | ||
### CDN | ||
You can load RangeTouch from our CDN (backed by the awesome [Fastly](https://www.fastly.com/)) if you'd like: | ||
```html | ||
<script src="https://cdn.rangetouch.com/1.0.5/rangetouch.js"></script> | ||
<script src="https://rangetouch.com/1.0.6/rangetouch.js"></script> | ||
``` | ||
### Node / NPM | ||
[![npm version](https://badge.fury.io/js/rangetouch.svg)](https://badge.fury.io/js/rangetouch) | ||
@@ -56,6 +62,7 @@ | ||
## Configuration | ||
If you're customizing your range inputs (easily done - see the demo for an example) and you change the size of the thumb handle, you should specify (in pixels) this after including the script: | ||
```javascript | ||
window.rangetouch.set("thumbWidth", 15); | ||
window.rangetouch.set('thumbWidth', 15); | ||
``` | ||
@@ -68,8 +75,11 @@ | ||
## Issues | ||
If you find anything weird with RangeTouch, please let us know using the GitHub issues tracker. | ||
## Author | ||
RangeTouch is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) | ||
## Donate | ||
RangeTouch costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated... | ||
@@ -79,2 +89,3 @@ [Donate to support RangeTouch](https://www.paypal.me/pottsy/20usd) | ||
## Thanks | ||
[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/) | ||
@@ -85,2 +96,3 @@ | ||
## Copyright and License | ||
[The MIT license](license.md). |
// ========================================================================== | ||
// rangetouch.js v1.0.5 | ||
// rangetouch.js v1.0.6 | ||
// Making <input type="range"> work on touch devices | ||
@@ -24,3 +24,3 @@ // https://github.com/selz/rangetouch | ||
} | ||
}(typeof window !== 'undefined' ? window : this, function(window, document) { | ||
})(typeof window !== 'undefined' ? window : this, function(window, document) { | ||
'use strict'; | ||
@@ -35,3 +35,3 @@ | ||
range: '[type="range"]', | ||
disabled: '.rangetouch--disabled' | ||
disabled: '.rangetouch--disabled', | ||
}, | ||
@@ -41,4 +41,4 @@ events: { | ||
move: 'touchmove', | ||
end: 'touchend' | ||
} | ||
end: 'touchend', | ||
}, | ||
}; | ||
@@ -55,5 +55,7 @@ | ||
if (settings.addCSS) { | ||
var stylesheets = document.styleSheets; | ||
var stylesheet = stylesheets.length ? stylesheets[0] : createStyleSheet(); | ||
stylesheet.insertRule(getSelector() + ' { user-select: none; -webkit-user-select: none; touch-action: manipulation; }', 0); | ||
var stylesheet = createStyleSheet(); | ||
stylesheet.insertRule( | ||
getSelector() + ' { user-select: none; -webkit-user-select: none; touch-action: manipulation; }', | ||
0, | ||
); | ||
} | ||
@@ -74,4 +76,4 @@ | ||
function createStyleSheet() { | ||
var style = document.createElement("style"); | ||
style.appendChild(document.createTextNode("")); | ||
var style = document.createElement('style'); | ||
style.appendChild(document.createTextNode('')); | ||
document.head.appendChild(style); | ||
@@ -99,3 +101,3 @@ return style.sheet; | ||
cancelable: false, | ||
detail: undefined | ||
detail: undefined, | ||
}; | ||
@@ -112,3 +114,3 @@ var custom = document.createEvent('CustomEvent'); | ||
bubbles: true, | ||
detail: properties | ||
detail: properties, | ||
}); | ||
@@ -122,3 +124,3 @@ | ||
function getSelector() { | ||
return [settings.selectors.range, ":not(", settings.selectors.disabled, ")"].join(""); | ||
return [settings.selectors.range, ':not(', settings.selectors.disabled, ')'].join(''); | ||
} | ||
@@ -152,4 +154,4 @@ | ||
(match[1] ? match[1].length : 0) - | ||
// Adjust for scientific notation. | ||
(match[2] ? +match[2] : 0) | ||
// Adjust for scientific notation. | ||
(match[2] ? +match[2] : 0), | ||
); | ||
@@ -164,3 +166,3 @@ } | ||
} | ||
return (Math.round(number / step) * step); | ||
return Math.round(number / step) * step; | ||
} | ||
@@ -180,6 +182,6 @@ | ||
var clientRect = input.getBoundingClientRect(); | ||
var thumbWidth = (((100 / clientRect.width) * (settings.thumbWidth / 2)) / 100); | ||
var thumbWidth = ((100 / clientRect.width) * (settings.thumbWidth / 2)) / 100; | ||
// Determine left percentage | ||
percent = ((100 / clientRect.width) * (touch.clientX - clientRect.left)); | ||
percent = (100 / clientRect.width) * (touch.clientX - clientRect.left); | ||
@@ -195,5 +197,5 @@ // Don't allow outside bounds | ||
if (percent < 50) { | ||
percent -= ((100 - (percent * 2)) * thumbWidth); | ||
percent -= (100 - percent * 2) * thumbWidth; | ||
} else if (percent > 50) { | ||
percent += (((percent - 50) * 2) * thumbWidth); | ||
percent += (percent - 50) * 2 * thumbWidth; | ||
} | ||
@@ -219,3 +221,3 @@ | ||
// Trigger input event | ||
trigger(event.target, (event.type === settings.events.end ? 'change' : 'input')); | ||
trigger(event.target, event.type === settings.events.end ? 'change' : 'input'); | ||
} | ||
@@ -229,4 +231,4 @@ | ||
settings[setting] = value; | ||
} | ||
}, | ||
}; | ||
})); | ||
}); |
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
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
262828
38
754
93
0
21