You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
8.2 KiB
1 lines
8.2 KiB
{"version":3,"sources":["src/js/css.js","src/js/events.js","src/js/numbers.js","src/js/rangetouch.js"],"names":["addCSS","selector","css","sheet","existing","document","getElementById","nodeName","toLowerCase","style","createElement","id","appendChild","createTextNode","head","insertRule","concat","matches","element","Array","from","querySelectorAll","includes","this","call","trigger","type","event","Event","dispatchEvent","getDecimalPlaces","value","match","Math","max","length","round","number","step","places","parseFloat","toFixed","RangeTouch","a","arguments","options","_classCallCheck","elements","config","Object","assign","thumbWidth","watch","_createClass","key","documentElement","target","forEach","preventDefault","set","percent","input","touch","changedTouches","min","getAttribute","clientRect","getBoundingClientRect","width","clientX","left","disabled","get"],"mappings":"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","file":"rangetouch.mjs","sourcesContent":["// 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","// 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"]} |