/
rangetouch.js.map
1 lines (1 loc) · 8.1 KB
/
rangetouch.js.map
1
{"version":3,"sources":["src/js/numbers.js","src/js/rangetouch.js","src/js/css.js","src/js/events.js"],"names":["round","number","step","places","value","match","concat","Math","max","length","getDecimalPlaces","parseFloat","toFixed","RangeTouch","a","selector","arguments","options","_classCallCheck","this","elements","document","querySelectorAll","config","Object","assign","addCSS","thumbWidth","watch","setup","key","getElementById","Event","css","sheet","existing","nodeName","toLowerCase","style","createElement","id","appendChild","createTextNode","head","insertRule","dispatchEvent","forEach","body","addEventListener","type","event","element","Array","from","includes","call","matches","target","disabled","percent","input","touch","changedTouches","min","getAttribute","clientRect","getBoundingClientRect","width","clientX","left","preventDefault","get","trigger"],"mappings":"yWAkBA,SAAgBA,EAAMC,EAAQC,GAC1B,GAAW,EAAPA,EAAU,CACV,IAAMC,EAnBd,SAAiCC,GAC7B,IAAMC,EAAQ,GAAAC,OAAGF,GAAQC,MAAM,oCADK,OAG/BA,EAIEE,KAAKC,IACR,GAECH,EAAM,GAAKA,EAAM,GAAGI,OAAS,IAEzBJ,EAAM,IAAMA,EAAM,GAAK,IARrB,EAeQK,CAAiBR,GAChC,OAAOS,WAAWV,EAAOW,QAAQT,IAErC,OAAOI,KAAKP,MAAMC,EAASC,GAAQA,SCZjCW,WACF,SAAAC,IAAuD,IAA3CC,EAA2C,EAAAC,UAAAP,aAAA,IAAAO,UAAA,GAAAA,UAAA,GAAhC,iBAAkBC,EAAc,EAAAD,UAAAP,aAAA,IAAAO,UAAA,GAAAA,UAAA,GAAJ,iGAAIE,CAAAC,KAAAL,GACnDK,KAAKJ,SAAWA,EAChBI,KAAKC,SAAWC,SAASC,iBAAiBP,GAC1CI,KAAKI,OAASC,OAAOC,OACjB,CACIC,QAAM,EACNC,WAAY,GACZC,OAAK,GAETX,GAGJE,KAAKU,QACR,SAAAf,KAAA,CAAA,CAAAgB,IAAA,QAAA1B,MAAA,WAEO,IAAAU,EAAAK,KC1BIO,iBAEKL,SAASU,kBCIRC,KAAJT,OAEdG,QDRJ,SAAuBX,EAAUkB,GAAK,IAG9BC,EADEC,EAAWd,SAASU,eAAT,cAGjB,GAAII,GAAgD,UAApCA,EAASC,SAASC,cAC3BH,EAAUC,EAAVD,UACA,CACH,IAAMI,EAAQjB,SAASkB,cAAc,SACrCD,EAAME,GAAN,aACAF,EAAMG,YAAYpB,SAASqB,eAAe,KAC1CrB,SAASsB,KAAKF,YAAYH,GACvBJ,EAAUI,EAAVJ,MAGPA,EAAMU,WAAN,GAAAtC,OAAoBS,EAApB,OAAAT,OAAkC2B,EAAlC,MAA2C,GCNnCY,CF0BI1B,KAAKJ,SDpCrB,4EC0CuB,CAAC,aAAc,YAAa,YAbrC+B,QAAkBzB,SAAAA,GA6B5BA,SAAA0B,KAAAC,iBAZYC,EA4BmB,SAAAC,ICtDnC,SAAwBC,EAASpC,GAc7B,OAXA,WACI,OAAOqC,MAAMC,KAAKhC,SAASC,iBAAiBP,IAAWuC,SAASnC,OAUrDoC,KAAKJ,EAASpC,IDcRyC,CA+CjBN,EACUO,OAAOC,EADV3C,WAAAD,EASD2C,IAANP,KA9CJ,kCACIA,GAAO,IASHS,EAREC,EAAQV,EAAMO,OACdI,EAAQX,EAAMY,eAAe,GAC7BC,EAAMpD,WAAWiD,EAAMI,aAAa,SAAW,EAC/CxD,EAAMG,WAAWiD,EAAMI,aAAa,SAAW,IAC/C9D,EAAOS,WAAWiD,EAAMI,aAAa,UAAY,EAKjDC,EAAaL,EAAMM,wBACnBvC,EACA,IAAMsC,EAAWE,OAAUhD,KAAKI,OAAOI,WAAa,GAAM,IAoBhE,OAdc,GAHdgC,EAAW,IAAMM,EAAWE,OAAUN,EAAMO,QAAUH,EAAWI,OAI7DV,EAAU,EACO,IAAVA,IACPA,EAAU,KAIA,GAAVA,EACAA,IAAY,IAAgB,EAAVA,GAAehC,EAChB,GAAVgC,IACPA,GAA4B,GAAhBA,EAAU,IAAUhC,GAI7BoC,EAAM/D,EAAe2D,EAAU,KA1BxBnD,EAAMuD,GA0BwB7D,+BAI5CgD,GACIA,EAAMO,OAAOC,WAKjBR,EAAMoB,iBAGNpB,EAAMO,OAAOrD,MAAQe,KAAKoD,IAAIrB,GEvGtC,SAAgCC,EAASF,GACrC,GAAKE,GAAYF,EAAjB,CAKA,IAAMC,EAAQ,IAAIlB,MAAMiB,GAGxBE,EAAQN,cAAcK,IFiGlBsB,CAAQtB,EAAMO,OAAuB,aAAfP,EAAMD,KAAsB,SAAW,0CAChEnC,YAjGCD","file":"rangetouch.js","sourcesContent":["// Get the number of decimal places\nexport function getDecimalPlaces(value) {\n const match = `${value}`.match(/(?:\\.(\\d+))?(?:[eE]([+-]?\\d+))?$/);\n\n if (!match) {\n return 0;\n }\n\n return Math.max(\n 0,\n // Number of digits right of decimal point.\n (match[1] ? match[1].length : 0) -\n // Adjust for scientific notation.\n (match[2] ? +match[2] : 0),\n );\n}\n\n// Round to the nearest step\nexport function round(number, step) {\n if (step < 1) {\n const places = getDecimalPlaces(step);\n return parseFloat(number.toFixed(places));\n }\n return Math.round(number / step) * step;\n}\n","// ==========================================================================\n// rangetouch.js v2.0.0\n// Making <input type=\"range\"> work on touch devices\n// https://github.com/sampotts/rangetouch\n// License: The MIT License (MIT)\n// ==========================================================================\n\nimport { addCSS, matches } from './css';\nimport trigger from './events';\nimport { round } from './numbers';\n\nclass RangeTouch {\n constructor(selector = '[type=\"range\"]', options = {}) {\n this.selector = selector;\n this.elements = document.querySelectorAll(selector);\n this.config = Object.assign(\n {\n addCSS: true,\n thumbWidth: 15,\n watch: true,\n },\n options,\n );\n\n this.setup();\n }\n\n setup() {\n // Bail if not a touch enabled device\n if (!('ontouchstart' in document.documentElement)) {\n return;\n }\n\n // Add useful CSS\n if (this.config.addCSS) {\n addCSS(\n this.selector,\n 'user-select: none; -webkit-user-select: none; touch-action: manipulation',\n );\n }\n\n // Listen for events\n const events = ['touchstart', 'touchmove', 'touchend'];\n\n events.forEach(type => {\n document.body.addEventListener(\n type,\n event => {\n if (!matches(event.target, this.selector)) {\n return;\n }\n this.set(event);\n },\n false,\n );\n });\n }\n\n // Get the value based on touch position\n get(event) {\n const input = event.target;\n const touch = event.changedTouches[0];\n const min = parseFloat(input.getAttribute('min')) || 0;\n const max = parseFloat(input.getAttribute('max')) || 100;\n const step = parseFloat(input.getAttribute('step')) || 1;\n const delta = max - min;\n\n // Calculate percentage\n let percent;\n const clientRect = input.getBoundingClientRect();\n const thumbWidth =\n ((100 / clientRect.width) * (this.config.thumbWidth / 2)) / 100;\n\n // Determine left percentage\n percent = (100 / clientRect.width) * (touch.clientX - clientRect.left);\n\n // Don't allow outside bounds\n if (percent < 0) {\n percent = 0;\n } else if (percent > 100) {\n percent = 100;\n }\n\n // Factor in the thumb offset\n if (percent < 50) {\n percent -= (100 - percent * 2) * thumbWidth;\n } else if (percent > 50) {\n percent += (percent - 50) * 2 * thumbWidth;\n }\n\n // Find the closest step to the mouse position\n return min + round(delta * (percent / 100), step);\n }\n\n // Update range value based on position\n set(event) {\n if (event.target.disabled) {\n return;\n }\n\n // Prevent text highlight on iOS\n event.preventDefault();\n\n // Set value\n event.target.value = this.get(event);\n\n // Trigger event\n trigger(event.target, event.type === 'touchend' ? 'change' : 'input');\n }\n}\n\nexport default RangeTouch;\n","// Inject CSS to the page\nexport function addCSS(selector, css) {\n const id = 'rangetouch';\n const existing = document.getElementById(id);\n let sheet;\n\n if (existing && existing.nodeName.toLowerCase() === 'style') {\n ({ sheet } = existing);\n } else {\n const style = document.createElement('style');\n style.id = id;\n style.appendChild(document.createTextNode(''));\n document.head.appendChild(style);\n ({ sheet } = style);\n }\n\n sheet.insertRule(`${selector} { ${css} }`, 0);\n}\n\n// Element matches a selector\nexport function matches(element, selector) {\n const prototype = { Element };\n\n function match() {\n return Array.from(document.querySelectorAll(selector)).includes(this);\n }\n\n const matches =\n prototype.matches ||\n prototype.webkitMatchesSelector ||\n prototype.mozMatchesSelector ||\n prototype.msMatchesSelector ||\n match;\n\n return matches.call(element, selector);\n}\n","// Trigger event\nexport default function trigger(element, type) {\n if (!element || !type) {\n return;\n }\n\n // Create and dispatch the event\n const event = new Event(type);\n\n // Dispatch the event\n element.dispatchEvent(event);\n}\n"]}