define(['browser', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser) { var EmbySliderPrototype = Object.create(HTMLInputElement.prototype); var supportsNativeProgressStyle = browser.firefox || browser.edge || browser.msie; var supportsValueSetOverride = false; if (Object.getOwnPropertyDescriptor && Object.defineProperty) { var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); // descriptor returning null in webos if (descriptor && descriptor.configurable) { supportsValueSetOverride = true; } } function updateValues(range, backgroundLower, backgroundUpper) { //if (fraction === 0) { // range.classList.add('is-lowest-value'); //} else { // range.classList.remove('is-lowest-value'); //} if (backgroundLower) { var fraction = (range.value - range.min) / (range.max - range.min); backgroundLower.style.flex = fraction; backgroundLower.style.webkitFlex = fraction; backgroundUpper.style.flex = 1 - fraction; backgroundUpper.style.webkitFlex = 1 - fraction; } } EmbySliderPrototype.attachedCallback = function () { if (this.getAttribute('data-embycheckbox') == 'true') { return; } this.setAttribute('data-embycheckbox', 'true'); this.classList.add('mdl-slider'); this.classList.add('mdl-js-slider'); var containerElement = this.parentNode; containerElement.classList.add('mdl-slider__container'); if (!supportsNativeProgressStyle) { containerElement.insertAdjacentHTML('beforeend', '
'); } var backgroundLower = containerElement.querySelector('.mdl-slider__background-lower'); var backgroundUpper = containerElement.querySelector('.mdl-slider__background-upper'); this.addEventListener('input', function () { this.dragging = true; }); this.addEventListener('change', function () { this.dragging = false; updateValues(this, backgroundLower, backgroundUpper); }); if (!supportsNativeProgressStyle) { if (supportsValueSetOverride) { this.addEventListener('valueset', function () { updateValues(this, backgroundLower, backgroundUpper); }); } else { startInterval(this, backgroundLower, backgroundUpper); } } }; function startInterval(range, backgroundLower, backgroundUpper) { var interval = range.interval; if (interval) { clearInterval(interval); } range.interval = setInterval(function () { updateValues(range, backgroundLower, backgroundUpper); }, 100); } EmbySliderPrototype.detachedCallback = function () { var interval = this.interval; if (interval) { clearInterval(interval); } this.interval = null; }; document.registerElement('emby-slider', { prototype: EmbySliderPrototype, extends: 'input' }); });