diff --git a/.eslintignore b/.eslintignore index fb25f9d2441..d9dfe6dc213 100644 --- a/.eslintignore +++ b/.eslintignore @@ -21,6 +21,7 @@ web/skins/classic/assets web/js/janus.js web/js/ajaxQueue.js web/js/hls-1.5.20/ +web/js/noUiSlider-15.8.1/ web/js/dms.js # Cannot be parsed as JS diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js index a5f4d04c526..eed7483195b 100644 --- a/web/js/MonitorStream.js +++ b/web/js/MonitorStream.js @@ -360,17 +360,18 @@ function MonitorStream(monitorData) { old_stream.remove(); stream_container.appendChild(stream); this.webrtc = stream; // track separately do to api differences between video tag and video-stream - this.set_stream_volume(this.muted ? 0.0 : this.volume/100); if (-1 != this.player.indexOf('_')) { stream.mode = this.player.substring(this.player.indexOf('_')+1); } + document.querySelector('video').addEventListener('play', (e) => { + this.createVolumeSlider(); + }, this); clearInterval(this.statusCmdTimer); // Fix for issues in Chromium when quickly hiding/showing a page. Doesn't clear statusCmdTimer when minimizing a page https://stackoverflow.com/questions/9501813/clearinterval-not-working this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); this.started = true; this.streamListenerBind(); - $j('#volumeControls').show(); if (typeof observerMontage !== 'undefined') observerMontage.observe(stream); this.activePlayer = 'go2rtc'; return; @@ -381,6 +382,9 @@ function MonitorStream(monitorData) { if (this.janusEnabled && ((!this.player) || (-1 !== this.player.indexOf('janus')))) { let server; + document.querySelector('video').addEventListener('play', (e) => { + this.createVolumeSlider(); + }, this); if (ZM_JANUS_PATH) { server = ZM_JANUS_PATH; } else if (this.server_id && Servers[this.server_id]) { @@ -426,6 +430,9 @@ function MonitorStream(monitorData) { const useSSL = (url.protocol == 'https'); const rtsp2webModUrl = url; + document.querySelector('video').addEventListener('play', (e) => { + this.createVolumeSlider(); + }, this); rtsp2webModUrl.username = ''; rtsp2webModUrl.password = ''; //.urlParts.length > 1 ? urlParts[1] : urlParts[0]; // drop the username and password for viewing @@ -465,7 +472,6 @@ function MonitorStream(monitorData) { this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); this.started = true; this.streamListenerBind(); - $j('#volumeControls').show(); this.updateStreamInfo('RTSP2Web ' + this.RTSP2WebType); return; } else { @@ -751,63 +757,146 @@ function MonitorStream(monitorData) { this.onplay = func; }; - this.volume_slider = null; - this.volume = 0.0; // Half - - this.setup_volume = function(slider) { - this.volume_slider = slider; - this.volume_slider.addEventListener('click', (e) => { - const x = e.pageX - this.volume_slider.getBoundingClientRect().left; // or e.offsetX (less support, though) - const clickedValue = parseInt(x * this.volume_slider.max / this.volume_slider.offsetWidth); - this.volume_slider.value = clickedValue; - this.set_volume(clickedValue); - this.muted = clickedValue ? false : true; - setCookie('zmWatchMuted', this.muted); - this.mute_btn.firstElementChild.innerHTML = (this.muted ? 'volume_off' : 'volume_up'); - }); - this.volume = this.volume_slider.value; + this.getVolumeSlider = function(mid) { + // On Watch page slider has no ID, on Montage page it has ID + return (document.getElementById('volumeSlider')) ? document.getElementById('volumeSlider') : document.getElementById('volumeSlider'+mid); }; - /* Takes volume as 0->100 */ - this.set_volume = function(volume) { - this.volume = volume; - this.set_stream_volume(volume/100); - setCookie('zmWatchVolume', this.volume); + this.getIconMute = function(mid) { + // On Watch page icon has no ID, on Montage page it has ID + return (document.getElementById('controlMute')) ? document.getElementById('controlMute') : document.getElementById('controlMute'+mid); }; - /* Takes volume as percentage */ - this.set_stream_volume = function(volume) { - if (this.webrtc && this.webrtc.volume ) { - this.webrtc.volume(volume); - } else { - const stream = this.getElement(); - stream.volume = volume; + this.getAudioStraem = function(mid) { + /* + Go2RTC uses , + RTSP2Web uses + This.getElement() may need to be changed, but the implications of such a change need to be analyzed + */ + return (document.querySelector('#liveStream'+mid + ' video') || document.getElementById('liveStream'+mid)); + }; + + this.listenerVolumechange = function(el) { + // System audio level change + const mid = this.id; + const audioStream = el.target; + const volumeSlider = this.getVolumeSlider(mid); + const iconMute = this.getIconMute(mid); + if (volumeSlider.allowSetValue) { + if (audioStream.muted === true) { + iconMute.innerHTML = 'volume_off'; + volumeSlider.classList.add('noUi-mute'); + } else { + iconMute.innerHTML = 'volume_up'; + volumeSlider.classList.remove('noUi-mute'); + } + volumeSlider.noUiSlider.set(audioStream.volume * 100); } + setCookie('zmWatchMuted', audioStream.muted); + setCookie('zmWatchVolume', parseInt(audioStream.volume * 100)); + volumeSlider.setAttribute('data-muted', audioStream.muted); + volumeSlider.setAttribute('data-volume', parseInt(audioStream.volume * 100)); }; - this.mute_btn = null; - this.muted = false; + this.createVolumeSlider = function() { + const mid = this.id; + const volumeSlider = this.getVolumeSlider(mid); + const iconMute = this.getIconMute(mid); + const audioStream = this.getAudioStraem(mid); + if (!volumeSlider) return; + const defaultVolume = (volumeSlider.getAttribute("data-volume") || 50); + if (volumeSlider.noUiSlider) volumeSlider.noUiSlider.destroy(); + + $j('#volumeControls').show(); + noUiSlider.create(volumeSlider, { + start: [(defaultVolume) ? defaultVolume : audioStream.volume * 100], + step: 1, + //behaviour: 'unconstrained', + behaviour: 'tap', + connect: [true, false], + range: { + 'min': 0, + 'max': 100 + }, + /*tooltips: [ + //true, + { to: function(value) { return value.toFixed(0) + '%'; } } + ],*/ + }); + volumeSlider.allowSetValue = true; + volumeSlider.noUiSlider.on('update', function onUpdateUiSlider(values, handle) { + if (audioStream) { + audioStream.volume = values[0]/100; + if (values[0] > 0 && !audioStream.muted) { + iconMute.innerHTML = 'volume_up'; + volumeSlider.classList.remove('noUi-mute'); + } else { + iconMute.innerHTML = 'volume_off'; + volumeSlider.classList.add('noUi-mute'); + } + } + //console.log("Audio volume slider event: 'update'"); + }); + volumeSlider.noUiSlider.on('end', function onEndUiSlider(values, handle) { + volumeSlider.allowSetValue = true; + //console.log("Audio volume slider event: 'end'"); + }); + volumeSlider.noUiSlider.on('start', function onStartUiSlider(values, handle) { + volumeSlider.allowSetValue = false; // Let's prohibit changing the Value using the "Set" method, otherwise there will be lags and collapse when directly moving the slider with the mouse... + //console.log("Audio volume slider event: 'start'"); + }); + volumeSlider.noUiSlider.on('set', function onSetUiSlider(values, handle) { + //console.log("Audio volume slider event: 'set'"); + }); + volumeSlider.noUiSlider.on('slide', function onSlideUiSlider(values, handle) { + if (audioStream.volume > 0 && audioStream.muted) { + iconMute.innerHTML = 'volume_up'; + audioStream.muted = false; + } + //console.log("Audio volume slider event: 'slide'"); + }); - this.setup_mute = function(mute_btn) { - this.mute_btn = mute_btn; - this.mute_btn.onclick = () => { - this.muted = !this.muted; - setCookie('zmWatchMuted', this.muted); - this.mute_btn.firstElementChild.innerHTML = (this.muted ? 'volume_off' : 'volume_up'); + if (volumeSlider.getAttribute("data-muted") !== "true") { + this.controlMute('off'); + } else { + this.controlMute('on'); + } - if (this.muted === false) { - this.set_stream_volume(this.volume/100); // lastvolume - if (this.volume_slider) this.volume_slider.value = this.volume; + if (audioStream) { + audioStream.addEventListener('volumechange', (event) => { + this.listenerVolumechange(event); + }); + } + }; + + /* + * mode: switch, on, off + */ + this.controlMute = function(mode = 'switch') { + const mid = this.id; + const volumeSlider = this.getVolumeSlider(mid); + const audioStream = this.getAudioStraem(mid); + const iconMute = this.getIconMute(mid); + if (!audioStream || !iconMute) return; + if (mode=='switch') { + if (audioStream.muted) { + audioStream.muted = false; + iconMute.innerHTML = 'volume_up'; + volumeSlider.classList.add('noUi-mute'); + audioStream.volume = volumeSlider.noUiSlider.get() / 100; } else { - this.set_stream_volume(0.0); - if (this.volume_slider) this.volume_slider.value = 0; + audioStream.muted = true; + iconMute.innerHTML = 'volume_off'; + volumeSlider.classList.remove('noUi-mute'); } - }; - this.muted = (this.mute_btn.firstElementChild.innerHTML == 'volume_off'); - if (this.muted) { - // muted, adjust volume bar - this.set_stream_volume(0.0); - if (this.volume_slider) this.volume_slider.value = 0; + } else if (mode=='on') { + audioStream.muted = true; + iconMute.innerHTML = 'volume_off'; + volumeSlider.classList.add('noUi-mute'); + } else if (mode=='off') { + audioStream.muted = false; + iconMute.innerHTML = 'volume_up'; + volumeSlider.classList.remove('noUi-mute'); } }; diff --git a/web/js/noUiSlider-15.8.1/README.md b/web/js/noUiSlider-15.8.1/README.md new file mode 100644 index 00000000000..c75a6b16534 --- /dev/null +++ b/web/js/noUiSlider-15.8.1/README.md @@ -0,0 +1,42 @@ +# noUiSlider + +noUiSlider is a lightweight JavaScript range slider. + +- **Accessible** with `aria` and keyboard support +- GPU animated: no reflows, so fast; even on older devices +- All modern browsers and IE > 9 are supported +- **No dependencies** +- Fully **responsive** +- **Multi-touch support** on Android, iOS and Windows devices +- Tons of [examples](https://refreshless.com/nouislider/examples) and answered [Stack Overflow questions](https://stackoverflow.com/questions/tagged/nouislider) + +License +------- +noUiSlider is licensed [MIT](https://choosealicense.com/licenses/mit/). + +It can be used **for free** and **without any attribution**, in any personal or commercial project. + +[Documentation](https://refreshless.com/nouislider/) +------- +An extensive documentation, including **examples**, **options** and **configuration details**, is available here: + +[noUiSlider documentation](https://refreshless.com/nouislider/). + +Contributing +------------ + +See [Contributing](CONTRIBUTING.md). + +Sponsorship +----------- + +noUiSlider is a stable project that still receives a lot of feature requests. A lot of these are interesting, but require a good amount of effort to implement, test and document. Sponsorship of this project will allow me to spend some more of my time on these feature requests. + +Please consider sponsoring the project by clicking the "❤ Sponsor" button above. Thanks! + +Tooling +------- + +Cross-browser testing kindly provided by BrowserStack. + +[![Tested with BrowserStack](documentation/assets/browserstack-logo-380x90.png)](http://browserstack.com/) diff --git a/web/js/noUiSlider-15.8.1/dist/nouislider.css b/web/js/noUiSlider-15.8.1/dist/nouislider.css new file mode 100644 index 00000000000..d452a4b0781 --- /dev/null +++ b/web/js/noUiSlider-15.8.1/dist/nouislider.css @@ -0,0 +1,304 @@ +/* Functional styling; + * These styles are required for noUiSlider to function. + * You don't need to change these rules to apply your design. + */ +.noUi-target, +.noUi-target * { + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + -ms-touch-action: none; + touch-action: none; + -ms-user-select: none; + -moz-user-select: none; + user-select: none; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-target { + position: relative; +} +.noUi-base, +.noUi-connects { + width: 100%; + height: 100%; + position: relative; + z-index: 1; +} +/* Wrapper for all connect elements. + */ +.noUi-connects { + overflow: hidden; + z-index: 0; +} +.noUi-connect, +.noUi-origin { + will-change: transform; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 100%; + width: 100%; + -ms-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + -webkit-transform-style: preserve-3d; + transform-origin: 0 0; + transform-style: flat; +} +/* Offset direction + */ +.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { + left: 0; + right: auto; +} +/* Give origins 0 height/width so they don't interfere with clicking the + * connect elements. + */ +.noUi-vertical .noUi-origin { + top: -100%; + width: 0; +} +.noUi-horizontal .noUi-origin { + height: 0; +} +.noUi-handle { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; +} +.noUi-touch-area { + height: 100%; + width: 100%; +} +.noUi-state-tap .noUi-connect, +.noUi-state-tap .noUi-origin { + -webkit-transition: transform 0.3s; + transition: transform 0.3s; +} +.noUi-state-drag * { + cursor: inherit !important; +} +/* Slider size and handle placement; + */ +.noUi-horizontal { + height: 18px; +} +.noUi-horizontal .noUi-handle { + width: 34px; + height: 28px; + right: -17px; + top: -6px; +} +.noUi-vertical { + width: 18px; +} +.noUi-vertical .noUi-handle { + width: 28px; + height: 34px; + right: -6px; + bottom: -17px; +} +.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { + left: -17px; + right: auto; +} +/* Styling; + * Giving the connect element a border radius causes issues with using transform: scale + */ +.noUi-target { + background: #FAFAFA; + border-radius: 4px; + border: 1px solid #D3D3D3; + box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; +} +.noUi-connects { + border-radius: 3px; +} +.noUi-connect { + background: #3FB8AF; +} +/* Handles and cursors; + */ +.noUi-draggable { + cursor: ew-resize; +} +.noUi-vertical .noUi-draggable { + cursor: ns-resize; +} +.noUi-handle { + border: 1px solid #D9D9D9; + border-radius: 3px; + background: #FFF; + cursor: default; + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; +} +.noUi-active { + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; +} +/* Handle stripes; + */ +.noUi-handle:before, +.noUi-handle:after { + content: ""; + display: block; + position: absolute; + height: 14px; + width: 1px; + background: #E8E7E6; + left: 14px; + top: 6px; +} +.noUi-handle:after { + left: 17px; +} +.noUi-vertical .noUi-handle:before, +.noUi-vertical .noUi-handle:after { + width: 14px; + height: 1px; + left: 6px; + top: 14px; +} +.noUi-vertical .noUi-handle:after { + top: 17px; +} +/* Disabled state; + */ +[disabled] .noUi-connect { + background: #B8B8B8; +} +[disabled].noUi-target, +[disabled].noUi-handle, +[disabled] .noUi-handle { + cursor: not-allowed; +} +/* Base; + * + */ +.noUi-pips, +.noUi-pips * { + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-pips { + position: absolute; + color: #999; +} +/* Values; + * + */ +.noUi-value { + position: absolute; + white-space: nowrap; + text-align: center; +} +.noUi-value-sub { + color: #ccc; + font-size: 10px; +} +/* Markings; + * + */ +.noUi-marker { + position: absolute; + background: #CCC; +} +.noUi-marker-sub { + background: #AAA; +} +.noUi-marker-large { + background: #AAA; +} +/* Horizontal layout; + * + */ +.noUi-pips-horizontal { + padding: 10px 0; + height: 80px; + top: 100%; + left: 0; + width: 100%; +} +.noUi-value-horizontal { + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); +} +.noUi-rtl .noUi-value-horizontal { + -webkit-transform: translate(50%, 50%); + transform: translate(50%, 50%); +} +.noUi-marker-horizontal.noUi-marker { + margin-left: -1px; + width: 2px; + height: 5px; +} +.noUi-marker-horizontal.noUi-marker-sub { + height: 10px; +} +.noUi-marker-horizontal.noUi-marker-large { + height: 15px; +} +/* Vertical layout; + * + */ +.noUi-pips-vertical { + padding: 0 10px; + height: 100%; + top: 0; + left: 100%; +} +.noUi-value-vertical { + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + padding-left: 25px; +} +.noUi-rtl .noUi-value-vertical { + -webkit-transform: translate(0, 50%); + transform: translate(0, 50%); +} +.noUi-marker-vertical.noUi-marker { + width: 5px; + height: 2px; + margin-top: -1px; +} +.noUi-marker-vertical.noUi-marker-sub { + width: 10px; +} +.noUi-marker-vertical.noUi-marker-large { + width: 15px; +} +.noUi-tooltip { + display: block; + position: absolute; + border: 1px solid #D9D9D9; + border-radius: 3px; + background: #fff; + color: #000; + padding: 5px; + text-align: center; + white-space: nowrap; +} +.noUi-horizontal .noUi-tooltip { + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + left: 50%; + bottom: 120%; +} +.noUi-vertical .noUi-tooltip { + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + top: 50%; + right: 120%; +} +.noUi-horizontal .noUi-origin > .noUi-tooltip { + -webkit-transform: translate(50%, 0); + transform: translate(50%, 0); + left: auto; + bottom: 10px; +} +.noUi-vertical .noUi-origin > .noUi-tooltip { + -webkit-transform: translate(0, -18px); + transform: translate(0, -18px); + top: auto; + right: 28px; +} diff --git a/web/js/noUiSlider-15.8.1/dist/nouislider.d.ts b/web/js/noUiSlider-15.8.1/dist/nouislider.d.ts new file mode 100644 index 00000000000..827908f7017 --- /dev/null +++ b/web/js/noUiSlider-15.8.1/dist/nouislider.d.ts @@ -0,0 +1,198 @@ +interface CssClasses { + target: string; + base: string; + origin: string; + handle: string; + handleLower: string; + handleUpper: string; + touchArea: string; + horizontal: string; + vertical: string; + background: string; + connect: string; + connects: string; + ltr: string; + rtl: string; + textDirectionLtr: string; + textDirectionRtl: string; + draggable: string; + drag: string; + tap: string; + active: string; + tooltip: string; + pips: string; + pipsHorizontal: string; + pipsVertical: string; + marker: string; + markerHorizontal: string; + markerVertical: string; + markerNormal: string; + markerLarge: string; + markerSub: string; + value: string; + valueHorizontal: string; + valueVertical: string; + valueNormal: string; + valueLarge: string; + valueSub: string; +} +export interface PartialFormatter { + to: (value: number) => string | number; + from?: (value: string) => number | false; +} +export interface Formatter extends PartialFormatter { + from: (value: string) => number | false; +} +export declare enum PipsMode { + Range = "range", + Steps = "steps", + Positions = "positions", + Count = "count", + Values = "values" +} +export declare enum PipsType { + None = -1, + NoValue = 0, + LargeValue = 1, + SmallValue = 2 +} +declare type WrappedSubRange = [number] | [number, number]; +declare type SubRange = number | WrappedSubRange; +interface Range { + min: SubRange; + max: SubRange; + [key: `${number}%`]: SubRange; +} +interface BasePips { + mode: PipsMode; + density?: number; + filter?: PipsFilter; + format?: PartialFormatter; +} +interface PositionsPips extends BasePips { + mode: PipsMode.Positions; + values: number[]; + stepped?: boolean; +} +interface ValuesPips extends BasePips { + mode: PipsMode.Values; + values: number[]; + stepped?: boolean; +} +interface CountPips extends BasePips { + mode: PipsMode.Count; + values: number; + stepped?: boolean; +} +interface StepsPips extends BasePips { + mode: PipsMode.Steps; +} +interface RangePips extends BasePips { + mode: PipsMode.Range; +} +declare type Pips = PositionsPips | ValuesPips | CountPips | StepsPips | RangePips; +declare type ValueArgument = number | string | null; +declare type StartValues = ValueArgument | ValueArgument[]; +declare type HandleAttributes = { + [key: string]: string; +}; +interface UpdatableOptions { + range?: Range; + start?: StartValues; + margin?: number; + limit?: number; + padding?: number | number[]; + snap?: boolean; + step?: number; + pips?: Pips; + format?: Formatter; + tooltips?: boolean | PartialFormatter | (boolean | PartialFormatter)[]; + animate?: boolean; + connect?: "lower" | "upper" | boolean | boolean[]; +} +export interface Options extends UpdatableOptions { + range: Range; + orientation?: "vertical" | "horizontal"; + direction?: "ltr" | "rtl"; + behaviour?: string; + keyboardSupport?: boolean; + keyboardPageMultiplier?: number; + keyboardMultiplier?: number; + keyboardDefaultStep?: number; + documentElement?: HTMLElement; + cssPrefix?: string; + cssClasses?: CssClasses; + ariaFormat?: PartialFormatter; + animationDuration?: number; + handleAttributes?: HandleAttributes[]; +} +export interface API { + destroy: () => void; + steps: () => NextStepsForHandle[]; + on: (eventName: string, callback: EventCallback) => void; + off: (eventName: string) => void; + get: (unencoded?: boolean) => GetResult; + set: (input: ValueArgument | ValueArgument[], fireSetEvent?: boolean, exactInput?: boolean) => void; + setHandle: (handleNumber: number, value: ValueArgument, fireSetEvent?: boolean, exactInput?: boolean) => void; + reset: (fireSetEvent?: boolean) => void; + disable: (handleNumber?: number) => void; + enable: (handleNumber?: number) => void; + options: Options; + updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void; + target: HTMLElement; + removePips: () => void; + removeTooltips: () => void; + getPositions: () => number[]; + getTooltips: () => (HTMLElement | false)[] | null; + getOrigins: () => HTMLElement[]; + pips: (grid: Pips) => HTMLElement; +} +interface TargetElement extends HTMLElement { + noUiSlider?: API; +} +interface NearByStep { + startValue: number; + step: number | false; + highestStep: number; +} +interface NearBySteps { + stepBefore: NearByStep; + thisStep: NearByStep; + stepAfter: NearByStep; +} +declare type GetResult = number | string | (string | number)[]; +declare type NextStepsForHandle = [number | false | null, number | false | null]; +declare type PipsFilter = (value: number, type: PipsType) => PipsType; +declare type EventCallback = (this: API, values: (number | string)[], handleNumber: number, unencoded: number[], tap: boolean, locations: number[], slider: API) => void; +declare class Spectrum { + xPct: number[]; + xVal: number[]; + xSteps: (number | false)[]; + xNumSteps: (number | false)[]; + protected xHighestCompleteStep: number[]; + protected snap: boolean; + constructor(entry: Range, snap: boolean, singleStep: number); + getDistance(value: number): number[]; + getAbsoluteDistance(value: number, distances: number[] | null, direction: boolean): number; + toStepping(value: number): number; + fromStepping(value: number): number; + getStep(value: number): number; + getDefaultStep(value: number, isDown: boolean, size: number): number; + getNearbySteps(value: number): NearBySteps; + countStepDecimals(): number; + hasNoSize(): boolean; + convert(value: number): number; + private handleEntryPoint; + private handleStepPoint; +} +declare const cssClasses: CssClasses; +declare function initialize(target: TargetElement, originalOptions: Options): API; +export { TargetElement as target }; +export { initialize as create }; +export { cssClasses }; +declare const _default: { + __spectrum: typeof Spectrum; + cssClasses: CssClasses; + create: typeof initialize; +}; +export default _default; diff --git a/web/js/noUiSlider-15.8.1/dist/nouislider.js b/web/js/noUiSlider-15.8.1/dist/nouislider.js new file mode 100644 index 00000000000..2d3e0547bc3 --- /dev/null +++ b/web/js/noUiSlider-15.8.1/dist/nouislider.js @@ -0,0 +1,2341 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.noUiSlider = {})); +})(this, (function (exports) { 'use strict'; + + exports.PipsMode = void 0; + (function (PipsMode) { + PipsMode["Range"] = "range"; + PipsMode["Steps"] = "steps"; + PipsMode["Positions"] = "positions"; + PipsMode["Count"] = "count"; + PipsMode["Values"] = "values"; + })(exports.PipsMode || (exports.PipsMode = {})); + exports.PipsType = void 0; + (function (PipsType) { + PipsType[PipsType["None"] = -1] = "None"; + PipsType[PipsType["NoValue"] = 0] = "NoValue"; + PipsType[PipsType["LargeValue"] = 1] = "LargeValue"; + PipsType[PipsType["SmallValue"] = 2] = "SmallValue"; + })(exports.PipsType || (exports.PipsType = {})); + //region Helper Methods + function isValidFormatter(entry) { + return isValidPartialFormatter(entry) && typeof entry.from === "function"; + } + function isValidPartialFormatter(entry) { + // partial formatters only need a to function and not a from function + return typeof entry === "object" && typeof entry.to === "function"; + } + function removeElement(el) { + el.parentElement.removeChild(el); + } + function isSet(value) { + return value !== null && value !== undefined; + } + // Bindable version + function preventDefault(e) { + e.preventDefault(); + } + // Removes duplicates from an array. + function unique(array) { + return array.filter(function (a) { + return !this[a] ? (this[a] = true) : false; + }, {}); + } + // Round a value to the closest 'to'. + function closest(value, to) { + return Math.round(value / to) * to; + } + // Current position of an element relative to the document. + function offset(elem, orientation) { + var rect = elem.getBoundingClientRect(); + var doc = elem.ownerDocument; + var docElem = doc.documentElement; + var pageOffset = getPageOffset(doc); + // getBoundingClientRect contains left scroll in Chrome on Android. + // I haven't found a feature detection that proves this. Worst case + // scenario on mis-match: the 'tap' feature on horizontal sliders breaks. + if (/webkit.*Chrome.*Mobile/i.test(navigator.userAgent)) { + pageOffset.x = 0; + } + return orientation ? rect.top + pageOffset.y - docElem.clientTop : rect.left + pageOffset.x - docElem.clientLeft; + } + // Checks whether a value is numerical. + function isNumeric(a) { + return typeof a === "number" && !isNaN(a) && isFinite(a); + } + // Sets a class and removes it after [duration] ms. + function addClassFor(element, className, duration) { + if (duration > 0) { + addClass(element, className); + setTimeout(function () { + removeClass(element, className); + }, duration); + } + } + // Limits a value to 0 - 100 + function limit(a) { + return Math.max(Math.min(a, 100), 0); + } + // Wraps a variable as an array, if it isn't one yet. + // Note that an input array is returned by reference! + function asArray(a) { + return Array.isArray(a) ? a : [a]; + } + // Counts decimals + function countDecimals(numStr) { + numStr = String(numStr); + var pieces = numStr.split("."); + return pieces.length > 1 ? pieces[1].length : 0; + } + // http://youmightnotneedjquery.com/#add_class + function addClass(el, className) { + if (el.classList && !/\s/.test(className)) { + el.classList.add(className); + } + else { + el.className += " " + className; + } + } + // http://youmightnotneedjquery.com/#remove_class + function removeClass(el, className) { + if (el.classList && !/\s/.test(className)) { + el.classList.remove(className); + } + else { + el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " "); + } + } + // https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/ + function hasClass(el, className) { + return el.classList ? el.classList.contains(className) : new RegExp("\\b" + className + "\\b").test(el.className); + } + // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes + function getPageOffset(doc) { + var supportPageOffset = window.pageXOffset !== undefined; + var isCSS1Compat = (doc.compatMode || "") === "CSS1Compat"; + var x = supportPageOffset + ? window.pageXOffset + : isCSS1Compat + ? doc.documentElement.scrollLeft + : doc.body.scrollLeft; + var y = supportPageOffset + ? window.pageYOffset + : isCSS1Compat + ? doc.documentElement.scrollTop + : doc.body.scrollTop; + return { + x: x, + y: y, + }; + } + // we provide a function to compute constants instead + // of accessing window.* as soon as the module needs it + // so that we do not compute anything if not needed + function getActions() { + // Determine the events to bind. IE11 implements pointerEvents without + // a prefix, which breaks compatibility with the IE10 implementation. + return window.navigator.pointerEnabled + ? { + start: "pointerdown", + move: "pointermove", + end: "pointerup", + } + : window.navigator.msPointerEnabled + ? { + start: "MSPointerDown", + move: "MSPointerMove", + end: "MSPointerUp", + } + : { + start: "mousedown touchstart", + move: "mousemove touchmove", + end: "mouseup touchend", + }; + } + // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md + // Issue #785 + function getSupportsPassive() { + var supportsPassive = false; + /* eslint-disable */ + try { + var opts = Object.defineProperty({}, "passive", { + get: function () { + supportsPassive = true; + }, + }); + // @ts-ignore + window.addEventListener("test", null, opts); + } + catch (e) { } + /* eslint-enable */ + return supportsPassive; + } + function getSupportsTouchActionNone() { + return window.CSS && CSS.supports && CSS.supports("touch-action", "none"); + } + //endregion + //region Range Calculation + // Determine the size of a sub-range in relation to a full range. + function subRangeRatio(pa, pb) { + return 100 / (pb - pa); + } + // (percentage) How many percent is this value of this range? + function fromPercentage(range, value, startRange) { + return (value * 100) / (range[startRange + 1] - range[startRange]); + } + // (percentage) Where is this value on this range? + function toPercentage(range, value) { + return fromPercentage(range, range[0] < 0 ? value + Math.abs(range[0]) : value - range[0], 0); + } + // (value) How much is this percentage on this range? + function isPercentage(range, value) { + return (value * (range[1] - range[0])) / 100 + range[0]; + } + function getJ(value, arr) { + var j = 1; + while (value >= arr[j]) { + j += 1; + } + return j; + } + // (percentage) Input a value, find where, on a scale of 0-100, it applies. + function toStepping(xVal, xPct, value) { + if (value >= xVal.slice(-1)[0]) { + return 100; + } + var j = getJ(value, xVal); + var va = xVal[j - 1]; + var vb = xVal[j]; + var pa = xPct[j - 1]; + var pb = xPct[j]; + return pa + toPercentage([va, vb], value) / subRangeRatio(pa, pb); + } + // (value) Input a percentage, find where it is on the specified range. + function fromStepping(xVal, xPct, value) { + // There is no range group that fits 100 + if (value >= 100) { + return xVal.slice(-1)[0]; + } + var j = getJ(value, xPct); + var va = xVal[j - 1]; + var vb = xVal[j]; + var pa = xPct[j - 1]; + var pb = xPct[j]; + return isPercentage([va, vb], (value - pa) * subRangeRatio(pa, pb)); + } + // (percentage) Get the step that applies at a certain value. + function getStep(xPct, xSteps, snap, value) { + if (value === 100) { + return value; + } + var j = getJ(value, xPct); + var a = xPct[j - 1]; + var b = xPct[j]; + // If 'snap' is set, steps are used as fixed points on the slider. + if (snap) { + // Find the closest position, a or b. + if (value - a > (b - a) / 2) { + return b; + } + return a; + } + if (!xSteps[j - 1]) { + return value; + } + return xPct[j - 1] + closest(value - xPct[j - 1], xSteps[j - 1]); + } + //endregion + //region Spectrum + var Spectrum = /** @class */ (function () { + function Spectrum(entry, snap, singleStep) { + this.xPct = []; + this.xVal = []; + this.xSteps = []; + this.xNumSteps = []; + this.xHighestCompleteStep = []; + this.xSteps = [singleStep || false]; + this.xNumSteps = [false]; + this.snap = snap; + var index; + var ordered = []; + // Map the object keys to an array. + Object.keys(entry).forEach(function (index) { + ordered.push([asArray(entry[index]), index]); + }); + // Sort all entries by value (numeric sort). + ordered.sort(function (a, b) { + return a[0][0] - b[0][0]; + }); + // Convert all entries to subranges. + for (index = 0; index < ordered.length; index++) { + this.handleEntryPoint(ordered[index][1], ordered[index][0]); + } + // Store the actual step values. + // xSteps is sorted in the same order as xPct and xVal. + this.xNumSteps = this.xSteps.slice(0); + // Convert all numeric steps to the percentage of the subrange they represent. + for (index = 0; index < this.xNumSteps.length; index++) { + this.handleStepPoint(index, this.xNumSteps[index]); + } + } + Spectrum.prototype.getDistance = function (value) { + var distances = []; + for (var index = 0; index < this.xNumSteps.length - 1; index++) { + distances[index] = fromPercentage(this.xVal, value, index); + } + return distances; + }; + // Calculate the percentual distance over the whole scale of ranges. + // direction: 0 = backwards / 1 = forwards + Spectrum.prototype.getAbsoluteDistance = function (value, distances, direction) { + var xPct_index = 0; + // Calculate range where to start calculation + if (value < this.xPct[this.xPct.length - 1]) { + while (value > this.xPct[xPct_index + 1]) { + xPct_index++; + } + } + else if (value === this.xPct[this.xPct.length - 1]) { + xPct_index = this.xPct.length - 2; + } + // If looking backwards and the value is exactly at a range separator then look one range further + if (!direction && value === this.xPct[xPct_index + 1]) { + xPct_index++; + } + if (distances === null) { + distances = []; + } + var start_factor; + var rest_factor = 1; + var rest_rel_distance = distances[xPct_index]; + var range_pct = 0; + var rel_range_distance = 0; + var abs_distance_counter = 0; + var range_counter = 0; + // Calculate what part of the start range the value is + if (direction) { + start_factor = (value - this.xPct[xPct_index]) / (this.xPct[xPct_index + 1] - this.xPct[xPct_index]); + } + else { + start_factor = (this.xPct[xPct_index + 1] - value) / (this.xPct[xPct_index + 1] - this.xPct[xPct_index]); + } + // Do until the complete distance across ranges is calculated + while (rest_rel_distance > 0) { + // Calculate the percentage of total range + range_pct = this.xPct[xPct_index + 1 + range_counter] - this.xPct[xPct_index + range_counter]; + // Detect if the margin, padding or limit is larger then the current range and calculate + if (distances[xPct_index + range_counter] * rest_factor + 100 - start_factor * 100 > 100) { + // If larger then take the percentual distance of the whole range + rel_range_distance = range_pct * start_factor; + // Rest factor of relative percentual distance still to be calculated + rest_factor = (rest_rel_distance - 100 * start_factor) / distances[xPct_index + range_counter]; + // Set start factor to 1 as for next range it does not apply. + start_factor = 1; + } + else { + // If smaller or equal then take the percentual distance of the calculate percentual part of that range + rel_range_distance = ((distances[xPct_index + range_counter] * range_pct) / 100) * rest_factor; + // No rest left as the rest fits in current range + rest_factor = 0; + } + if (direction) { + abs_distance_counter = abs_distance_counter - rel_range_distance; + // Limit range to first range when distance becomes outside of minimum range + if (this.xPct.length + range_counter >= 1) { + range_counter--; + } + } + else { + abs_distance_counter = abs_distance_counter + rel_range_distance; + // Limit range to last range when distance becomes outside of maximum range + if (this.xPct.length - range_counter >= 1) { + range_counter++; + } + } + // Rest of relative percentual distance still to be calculated + rest_rel_distance = distances[xPct_index + range_counter] * rest_factor; + } + return value + abs_distance_counter; + }; + Spectrum.prototype.toStepping = function (value) { + value = toStepping(this.xVal, this.xPct, value); + return value; + }; + Spectrum.prototype.fromStepping = function (value) { + return fromStepping(this.xVal, this.xPct, value); + }; + Spectrum.prototype.getStep = function (value) { + value = getStep(this.xPct, this.xSteps, this.snap, value); + return value; + }; + Spectrum.prototype.getDefaultStep = function (value, isDown, size) { + var j = getJ(value, this.xPct); + // When at the top or stepping down, look at the previous sub-range + if (value === 100 || (isDown && value === this.xPct[j - 1])) { + j = Math.max(j - 1, 1); + } + return (this.xVal[j] - this.xVal[j - 1]) / size; + }; + Spectrum.prototype.getNearbySteps = function (value) { + var j = getJ(value, this.xPct); + return { + stepBefore: { + startValue: this.xVal[j - 2], + step: this.xNumSteps[j - 2], + highestStep: this.xHighestCompleteStep[j - 2], + }, + thisStep: { + startValue: this.xVal[j - 1], + step: this.xNumSteps[j - 1], + highestStep: this.xHighestCompleteStep[j - 1], + }, + stepAfter: { + startValue: this.xVal[j], + step: this.xNumSteps[j], + highestStep: this.xHighestCompleteStep[j], + }, + }; + }; + Spectrum.prototype.countStepDecimals = function () { + var stepDecimals = this.xNumSteps.map(countDecimals); + return Math.max.apply(null, stepDecimals); + }; + Spectrum.prototype.hasNoSize = function () { + return this.xVal[0] === this.xVal[this.xVal.length - 1]; + }; + // Outside testing + Spectrum.prototype.convert = function (value) { + return this.getStep(this.toStepping(value)); + }; + Spectrum.prototype.handleEntryPoint = function (index, value) { + var percentage; + // Covert min/max syntax to 0 and 100. + if (index === "min") { + percentage = 0; + } + else if (index === "max") { + percentage = 100; + } + else { + percentage = parseFloat(index); + } + // Check for correct input. + if (!isNumeric(percentage) || !isNumeric(value[0])) { + throw new Error("noUiSlider: 'range' value isn't numeric."); + } + // Store values. + this.xPct.push(percentage); + this.xVal.push(value[0]); + var value1 = Number(value[1]); + // NaN will evaluate to false too, but to keep + // logging clear, set step explicitly. Make sure + // not to override the 'step' setting with false. + if (!percentage) { + if (!isNaN(value1)) { + this.xSteps[0] = value1; + } + } + else { + this.xSteps.push(isNaN(value1) ? false : value1); + } + this.xHighestCompleteStep.push(0); + }; + Spectrum.prototype.handleStepPoint = function (i, n) { + // Ignore 'false' stepping. + if (!n) { + return; + } + // Step over zero-length ranges (#948); + if (this.xVal[i] === this.xVal[i + 1]) { + this.xSteps[i] = this.xHighestCompleteStep[i] = this.xVal[i]; + return; + } + // Factor to range ratio + this.xSteps[i] = + fromPercentage([this.xVal[i], this.xVal[i + 1]], n, 0) / subRangeRatio(this.xPct[i], this.xPct[i + 1]); + var totalSteps = (this.xVal[i + 1] - this.xVal[i]) / this.xNumSteps[i]; + var highestStep = Math.ceil(Number(totalSteps.toFixed(3)) - 1); + var step = this.xVal[i] + this.xNumSteps[i] * highestStep; + this.xHighestCompleteStep[i] = step; + }; + return Spectrum; + }()); + //endregion + //region Options + /* Every input option is tested and parsed. This will prevent + endless validation in internal methods. These tests are + structured with an item for every option available. An + option can be marked as required by setting the 'r' flag. + The testing function is provided with three arguments: + - The provided value for the option; + - A reference to the options object; + - The name for the option; + + The testing function returns false when an error is detected, + or true when everything is OK. It can also modify the option + object, to make sure all values can be correctly looped elsewhere. */ + //region Defaults + var defaultFormatter = { + to: function (value) { + return value === undefined ? "" : value.toFixed(2); + }, + from: Number, + }; + var cssClasses = { + target: "target", + base: "base", + origin: "origin", + handle: "handle", + handleLower: "handle-lower", + handleUpper: "handle-upper", + touchArea: "touch-area", + horizontal: "horizontal", + vertical: "vertical", + background: "background", + connect: "connect", + connects: "connects", + ltr: "ltr", + rtl: "rtl", + textDirectionLtr: "txt-dir-ltr", + textDirectionRtl: "txt-dir-rtl", + draggable: "draggable", + drag: "state-drag", + tap: "state-tap", + active: "active", + tooltip: "tooltip", + pips: "pips", + pipsHorizontal: "pips-horizontal", + pipsVertical: "pips-vertical", + marker: "marker", + markerHorizontal: "marker-horizontal", + markerVertical: "marker-vertical", + markerNormal: "marker-normal", + markerLarge: "marker-large", + markerSub: "marker-sub", + value: "value", + valueHorizontal: "value-horizontal", + valueVertical: "value-vertical", + valueNormal: "value-normal", + valueLarge: "value-large", + valueSub: "value-sub", + }; + // Namespaces of internal event listeners + var INTERNAL_EVENT_NS = { + tooltips: ".__tooltips", + aria: ".__aria", + }; + //endregion + function testStep(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'step' is not numeric."); + } + // The step option can still be used to set stepping + // for linear sliders. Overwritten if set in 'range'. + parsed.singleStep = entry; + } + function testKeyboardPageMultiplier(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'keyboardPageMultiplier' is not numeric."); + } + parsed.keyboardPageMultiplier = entry; + } + function testKeyboardMultiplier(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'keyboardMultiplier' is not numeric."); + } + parsed.keyboardMultiplier = entry; + } + function testKeyboardDefaultStep(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'keyboardDefaultStep' is not numeric."); + } + parsed.keyboardDefaultStep = entry; + } + function testRange(parsed, entry) { + // Filter incorrect input. + if (typeof entry !== "object" || Array.isArray(entry)) { + throw new Error("noUiSlider: 'range' is not an object."); + } + // Catch missing start or end. + if (entry.min === undefined || entry.max === undefined) { + throw new Error("noUiSlider: Missing 'min' or 'max' in 'range'."); + } + parsed.spectrum = new Spectrum(entry, parsed.snap || false, parsed.singleStep); + } + function testStart(parsed, entry) { + entry = asArray(entry); + // Validate input. Values aren't tested, as the public .val method + // will always provide a valid location. + if (!Array.isArray(entry) || !entry.length) { + throw new Error("noUiSlider: 'start' option is incorrect."); + } + // Store the number of handles. + parsed.handles = entry.length; + // When the slider is initialized, the .val method will + // be called with the start options. + parsed.start = entry; + } + function testSnap(parsed, entry) { + if (typeof entry !== "boolean") { + throw new Error("noUiSlider: 'snap' option must be a boolean."); + } + // Enforce 100% stepping within subranges. + parsed.snap = entry; + } + function testAnimate(parsed, entry) { + if (typeof entry !== "boolean") { + throw new Error("noUiSlider: 'animate' option must be a boolean."); + } + // Enforce 100% stepping within subranges. + parsed.animate = entry; + } + function testAnimationDuration(parsed, entry) { + if (typeof entry !== "number") { + throw new Error("noUiSlider: 'animationDuration' option must be a number."); + } + parsed.animationDuration = entry; + } + function testConnect(parsed, entry) { + var connect = [false]; + var i; + // Map legacy options + if (entry === "lower") { + entry = [true, false]; + } + else if (entry === "upper") { + entry = [false, true]; + } + // Handle boolean options + if (entry === true || entry === false) { + for (i = 1; i < parsed.handles; i++) { + connect.push(entry); + } + connect.push(false); + } + // Reject invalid input + else if (!Array.isArray(entry) || !entry.length || entry.length !== parsed.handles + 1) { + throw new Error("noUiSlider: 'connect' option doesn't match handle count."); + } + else { + connect = entry; + } + parsed.connect = connect; + } + function testOrientation(parsed, entry) { + // Set orientation to an a numerical value for easy + // array selection. + switch (entry) { + case "horizontal": + parsed.ort = 0; + break; + case "vertical": + parsed.ort = 1; + break; + default: + throw new Error("noUiSlider: 'orientation' option is invalid."); + } + } + function testMargin(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'margin' option must be numeric."); + } + // Issue #582 + if (entry === 0) { + return; + } + parsed.margin = parsed.spectrum.getDistance(entry); + } + function testLimit(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'limit' option must be numeric."); + } + parsed.limit = parsed.spectrum.getDistance(entry); + if (!parsed.limit || parsed.handles < 2) { + throw new Error("noUiSlider: 'limit' option is only supported on linear sliders with 2 or more handles."); + } + } + function testPadding(parsed, entry) { + var index; + if (!isNumeric(entry) && !Array.isArray(entry)) { + throw new Error("noUiSlider: 'padding' option must be numeric or array of exactly 2 numbers."); + } + if (Array.isArray(entry) && !(entry.length === 2 || isNumeric(entry[0]) || isNumeric(entry[1]))) { + throw new Error("noUiSlider: 'padding' option must be numeric or array of exactly 2 numbers."); + } + if (entry === 0) { + return; + } + if (!Array.isArray(entry)) { + entry = [entry, entry]; + } + // 'getDistance' returns false for invalid values. + parsed.padding = [parsed.spectrum.getDistance(entry[0]), parsed.spectrum.getDistance(entry[1])]; + for (index = 0; index < parsed.spectrum.xNumSteps.length - 1; index++) { + // last "range" can't contain step size as it is purely an endpoint. + if (parsed.padding[0][index] < 0 || parsed.padding[1][index] < 0) { + throw new Error("noUiSlider: 'padding' option must be a positive number(s)."); + } + } + var totalPadding = entry[0] + entry[1]; + var firstValue = parsed.spectrum.xVal[0]; + var lastValue = parsed.spectrum.xVal[parsed.spectrum.xVal.length - 1]; + if (totalPadding / (lastValue - firstValue) > 1) { + throw new Error("noUiSlider: 'padding' option must not exceed 100% of the range."); + } + } + function testDirection(parsed, entry) { + // Set direction as a numerical value for easy parsing. + // Invert connection for RTL sliders, so that the proper + // handles get the connect/background classes. + switch (entry) { + case "ltr": + parsed.dir = 0; + break; + case "rtl": + parsed.dir = 1; + break; + default: + throw new Error("noUiSlider: 'direction' option was not recognized."); + } + } + function testBehaviour(parsed, entry) { + // Make sure the input is a string. + if (typeof entry !== "string") { + throw new Error("noUiSlider: 'behaviour' must be a string containing options."); + } + // Check if the string contains any keywords. + // None are required. + var tap = entry.indexOf("tap") >= 0; + var drag = entry.indexOf("drag") >= 0; + var fixed = entry.indexOf("fixed") >= 0; + var snap = entry.indexOf("snap") >= 0; + var hover = entry.indexOf("hover") >= 0; + var unconstrained = entry.indexOf("unconstrained") >= 0; + var invertConnects = entry.indexOf("invert-connects") >= 0; + var dragAll = entry.indexOf("drag-all") >= 0; + var smoothSteps = entry.indexOf("smooth-steps") >= 0; + if (fixed) { + if (parsed.handles !== 2) { + throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles"); + } + // Use margin to enforce fixed state + testMargin(parsed, parsed.start[1] - parsed.start[0]); + } + if (invertConnects && parsed.handles !== 2) { + throw new Error("noUiSlider: 'invert-connects' behaviour must be used with 2 handles"); + } + if (unconstrained && (parsed.margin || parsed.limit)) { + throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit"); + } + parsed.events = { + tap: tap || snap, + drag: drag, + dragAll: dragAll, + smoothSteps: smoothSteps, + fixed: fixed, + snap: snap, + hover: hover, + unconstrained: unconstrained, + invertConnects: invertConnects, + }; + } + function testTooltips(parsed, entry) { + if (entry === false) { + return; + } + if (entry === true || isValidPartialFormatter(entry)) { + parsed.tooltips = []; + for (var i = 0; i < parsed.handles; i++) { + parsed.tooltips.push(entry); + } + } + else { + entry = asArray(entry); + if (entry.length !== parsed.handles) { + throw new Error("noUiSlider: must pass a formatter for all handles."); + } + entry.forEach(function (formatter) { + if (typeof formatter !== "boolean" && !isValidPartialFormatter(formatter)) { + throw new Error("noUiSlider: 'tooltips' must be passed a formatter or 'false'."); + } + }); + parsed.tooltips = entry; + } + } + function testHandleAttributes(parsed, entry) { + if (entry.length !== parsed.handles) { + throw new Error("noUiSlider: must pass a attributes for all handles."); + } + parsed.handleAttributes = entry; + } + function testAriaFormat(parsed, entry) { + if (!isValidPartialFormatter(entry)) { + throw new Error("noUiSlider: 'ariaFormat' requires 'to' method."); + } + parsed.ariaFormat = entry; + } + function testFormat(parsed, entry) { + if (!isValidFormatter(entry)) { + throw new Error("noUiSlider: 'format' requires 'to' and 'from' methods."); + } + parsed.format = entry; + } + function testKeyboardSupport(parsed, entry) { + if (typeof entry !== "boolean") { + throw new Error("noUiSlider: 'keyboardSupport' option must be a boolean."); + } + parsed.keyboardSupport = entry; + } + function testDocumentElement(parsed, entry) { + // This is an advanced option. Passed values are used without validation. + parsed.documentElement = entry; + } + function testCssPrefix(parsed, entry) { + if (typeof entry !== "string" && entry !== false) { + throw new Error("noUiSlider: 'cssPrefix' must be a string or `false`."); + } + parsed.cssPrefix = entry; + } + function testCssClasses(parsed, entry) { + if (typeof entry !== "object") { + throw new Error("noUiSlider: 'cssClasses' must be an object."); + } + if (typeof parsed.cssPrefix === "string") { + parsed.cssClasses = {}; + Object.keys(entry).forEach(function (key) { + parsed.cssClasses[key] = parsed.cssPrefix + entry[key]; + }); + } + else { + parsed.cssClasses = entry; + } + } + // Test all developer settings and parse to assumption-safe values. + function testOptions(options) { + // To prove a fix for #537, freeze options here. + // If the object is modified, an error will be thrown. + // Object.freeze(options); + var parsed = { + margin: null, + limit: null, + padding: null, + animate: true, + animationDuration: 300, + ariaFormat: defaultFormatter, + format: defaultFormatter, + }; + // Tests are executed in the order they are presented here. + var tests = { + step: { r: false, t: testStep }, + keyboardPageMultiplier: { r: false, t: testKeyboardPageMultiplier }, + keyboardMultiplier: { r: false, t: testKeyboardMultiplier }, + keyboardDefaultStep: { r: false, t: testKeyboardDefaultStep }, + start: { r: true, t: testStart }, + connect: { r: true, t: testConnect }, + direction: { r: true, t: testDirection }, + snap: { r: false, t: testSnap }, + animate: { r: false, t: testAnimate }, + animationDuration: { r: false, t: testAnimationDuration }, + range: { r: true, t: testRange }, + orientation: { r: false, t: testOrientation }, + margin: { r: false, t: testMargin }, + limit: { r: false, t: testLimit }, + padding: { r: false, t: testPadding }, + behaviour: { r: true, t: testBehaviour }, + ariaFormat: { r: false, t: testAriaFormat }, + format: { r: false, t: testFormat }, + tooltips: { r: false, t: testTooltips }, + keyboardSupport: { r: true, t: testKeyboardSupport }, + documentElement: { r: false, t: testDocumentElement }, + cssPrefix: { r: true, t: testCssPrefix }, + cssClasses: { r: true, t: testCssClasses }, + handleAttributes: { r: false, t: testHandleAttributes }, + }; + var defaults = { + connect: false, + direction: "ltr", + behaviour: "tap", + orientation: "horizontal", + keyboardSupport: true, + cssPrefix: "noUi-", + cssClasses: cssClasses, + keyboardPageMultiplier: 5, + keyboardMultiplier: 1, + keyboardDefaultStep: 10, + }; + // AriaFormat defaults to regular format, if any. + if (options.format && !options.ariaFormat) { + options.ariaFormat = options.format; + } + // Run all options through a testing mechanism to ensure correct + // input. It should be noted that options might get modified to + // be handled properly. E.g. wrapping integers in arrays. + Object.keys(tests).forEach(function (name) { + // If the option isn't set, but it is required, throw an error. + if (!isSet(options[name]) && defaults[name] === undefined) { + if (tests[name].r) { + throw new Error("noUiSlider: '" + name + "' is required."); + } + return; + } + tests[name].t(parsed, !isSet(options[name]) ? defaults[name] : options[name]); + }); + // Forward pips options + parsed.pips = options.pips; + // All recent browsers accept unprefixed transform. + // We need -ms- for IE9 and -webkit- for older Android; + // Assume use of -webkit- if unprefixed and -ms- are not supported. + // https://caniuse.com/#feat=transforms2d + var d = document.createElement("div"); + var msPrefix = d.style.msTransform !== undefined; + var noPrefix = d.style.transform !== undefined; + parsed.transformRule = noPrefix ? "transform" : msPrefix ? "msTransform" : "webkitTransform"; + // Pips don't move, so we can place them using left/top. + var styles = [ + ["left", "top"], + ["right", "bottom"], + ]; + parsed.style = styles[parsed.dir][parsed.ort]; + return parsed; + } + //endregion + function scope(target, options, originalOptions) { + var actions = getActions(); + var supportsTouchActionNone = getSupportsTouchActionNone(); + var supportsPassive = supportsTouchActionNone && getSupportsPassive(); + // All variables local to 'scope' are prefixed with 'scope_' + // Slider DOM Nodes + var scope_Target = target; + var scope_Base; + var scope_ConnectBase; + var scope_Handles; + var scope_Connects; + var scope_Pips; + var scope_Tooltips; + // Slider state values + var scope_Spectrum = options.spectrum; + var scope_Values = []; + var scope_Locations = []; + var scope_HandleNumbers = []; + var scope_ActiveHandlesCount = 0; + var scope_Events = {}; + var scope_ConnectsInverted = false; + // Document Nodes + var scope_Document = target.ownerDocument; + var scope_DocumentElement = options.documentElement || scope_Document.documentElement; + var scope_Body = scope_Document.body; + // For horizontal sliders in standard ltr documents, + // make .noUi-origin overflow to the left so the document doesn't scroll. + var scope_DirOffset = scope_Document.dir === "rtl" || options.ort === 1 ? 0 : 100; + // Creates a node, adds it to target, returns the new node. + function addNodeTo(addTarget, className) { + var div = scope_Document.createElement("div"); + if (className) { + addClass(div, className); + } + addTarget.appendChild(div); + return div; + } + // Append a origin to the base + function addOrigin(base, handleNumber) { + var origin = addNodeTo(base, options.cssClasses.origin); + var handle = addNodeTo(origin, options.cssClasses.handle); + addNodeTo(handle, options.cssClasses.touchArea); + handle.setAttribute("data-handle", String(handleNumber)); + if (options.keyboardSupport) { + // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex + // 0 = focusable and reachable + handle.setAttribute("tabindex", "0"); + handle.addEventListener("keydown", function (event) { + return eventKeydown(event, handleNumber); + }); + } + if (options.handleAttributes !== undefined) { + var attributes_1 = options.handleAttributes[handleNumber]; + Object.keys(attributes_1).forEach(function (attribute) { + handle.setAttribute(attribute, attributes_1[attribute]); + }); + } + handle.setAttribute("role", "slider"); + handle.setAttribute("aria-orientation", options.ort ? "vertical" : "horizontal"); + if (handleNumber === 0) { + addClass(handle, options.cssClasses.handleLower); + } + else if (handleNumber === options.handles - 1) { + addClass(handle, options.cssClasses.handleUpper); + } + origin.handle = handle; + return origin; + } + // Insert nodes for connect elements + function addConnect(base, add) { + if (!add) { + return false; + } + return addNodeTo(base, options.cssClasses.connect); + } + // Add handles to the slider base. + function addElements(connectOptions, base) { + scope_ConnectBase = addNodeTo(base, options.cssClasses.connects); + scope_Handles = []; + scope_Connects = []; + scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[0])); + // [::::O====O====O====] + // connectOptions = [0, 1, 1, 1] + for (var i = 0; i < options.handles; i++) { + // Keep a list of all added handles. + scope_Handles.push(addOrigin(base, i)); + scope_HandleNumbers[i] = i; + scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[i + 1])); + } + } + // Initialize a single slider. + function addSlider(addTarget) { + // Apply classes and data to the target. + addClass(addTarget, options.cssClasses.target); + if (options.dir === 0) { + addClass(addTarget, options.cssClasses.ltr); + } + else { + addClass(addTarget, options.cssClasses.rtl); + } + if (options.ort === 0) { + addClass(addTarget, options.cssClasses.horizontal); + } + else { + addClass(addTarget, options.cssClasses.vertical); + } + var textDirection = getComputedStyle(addTarget).direction; + if (textDirection === "rtl") { + addClass(addTarget, options.cssClasses.textDirectionRtl); + } + else { + addClass(addTarget, options.cssClasses.textDirectionLtr); + } + return addNodeTo(addTarget, options.cssClasses.base); + } + function addTooltip(handle, handleNumber) { + if (!options.tooltips || !options.tooltips[handleNumber]) { + return false; + } + return addNodeTo(handle.firstChild, options.cssClasses.tooltip); + } + function isSliderDisabled() { + return scope_Target.hasAttribute("disabled"); + } + // Disable the slider dragging if any handle is disabled + function isHandleDisabled(handleNumber) { + var handleOrigin = scope_Handles[handleNumber]; + return handleOrigin.hasAttribute("disabled"); + } + function disable(handleNumber) { + if (handleNumber !== null && handleNumber !== undefined) { + scope_Handles[handleNumber].setAttribute("disabled", ""); + scope_Handles[handleNumber].handle.removeAttribute("tabindex"); + } + else { + scope_Target.setAttribute("disabled", ""); + scope_Handles.forEach(function (handle) { + handle.handle.removeAttribute("tabindex"); + }); + } + } + function enable(handleNumber) { + if (handleNumber !== null && handleNumber !== undefined) { + scope_Handles[handleNumber].removeAttribute("disabled"); + scope_Handles[handleNumber].handle.setAttribute("tabindex", "0"); + } + else { + scope_Target.removeAttribute("disabled"); + scope_Handles.forEach(function (handle) { + handle.removeAttribute("disabled"); + handle.handle.setAttribute("tabindex", "0"); + }); + } + } + function removeTooltips() { + if (scope_Tooltips) { + removeEvent("update" + INTERNAL_EVENT_NS.tooltips); + scope_Tooltips.forEach(function (tooltip) { + if (tooltip) { + removeElement(tooltip); + } + }); + scope_Tooltips = null; + } + } + // The tooltips option is a shorthand for using the 'update' event. + function tooltips() { + removeTooltips(); + // Tooltips are added with options.tooltips in original order. + scope_Tooltips = scope_Handles.map(addTooltip); + bindEvent("update" + INTERNAL_EVENT_NS.tooltips, function (values, handleNumber, unencoded) { + if (!scope_Tooltips || !options.tooltips) { + return; + } + if (scope_Tooltips[handleNumber] === false) { + return; + } + var formattedValue = values[handleNumber]; + if (options.tooltips[handleNumber] !== true) { + formattedValue = options.tooltips[handleNumber].to(unencoded[handleNumber]); + } + scope_Tooltips[handleNumber].innerHTML = formattedValue; + }); + } + function aria() { + removeEvent("update" + INTERNAL_EVENT_NS.aria); + bindEvent("update" + INTERNAL_EVENT_NS.aria, function (values, handleNumber, unencoded, tap, positions) { + // Update Aria Values for all handles, as a change in one changes min and max values for the next. + scope_HandleNumbers.forEach(function (index) { + var handle = scope_Handles[index]; + var min = checkHandlePosition(scope_Locations, index, 0, true, true, true); + var max = checkHandlePosition(scope_Locations, index, 100, true, true, true); + var now = positions[index]; + // Formatted value for display + var text = String(options.ariaFormat.to(unencoded[index])); + // Map to slider range values + min = scope_Spectrum.fromStepping(min).toFixed(1); + max = scope_Spectrum.fromStepping(max).toFixed(1); + now = scope_Spectrum.fromStepping(now).toFixed(1); + handle.children[0].setAttribute("aria-valuemin", min); + handle.children[0].setAttribute("aria-valuemax", max); + handle.children[0].setAttribute("aria-valuenow", now); + handle.children[0].setAttribute("aria-valuetext", text); + }); + }); + } + function getGroup(pips) { + // Use the range. + if (pips.mode === exports.PipsMode.Range || pips.mode === exports.PipsMode.Steps) { + return scope_Spectrum.xVal; + } + if (pips.mode === exports.PipsMode.Count) { + if (pips.values < 2) { + throw new Error("noUiSlider: 'values' (>= 2) required for mode 'count'."); + } + // Divide 0 - 100 in 'count' parts. + var interval = pips.values - 1; + var spread = 100 / interval; + var values = []; + // List these parts and have them handled as 'positions'. + while (interval--) { + values[interval] = interval * spread; + } + values.push(100); + return mapToRange(values, pips.stepped); + } + if (pips.mode === exports.PipsMode.Positions) { + // Map all percentages to on-range values. + return mapToRange(pips.values, pips.stepped); + } + if (pips.mode === exports.PipsMode.Values) { + // If the value must be stepped, it needs to be converted to a percentage first. + if (pips.stepped) { + return pips.values.map(function (value) { + // Convert to percentage, apply step, return to value. + return scope_Spectrum.fromStepping(scope_Spectrum.getStep(scope_Spectrum.toStepping(value))); + }); + } + // Otherwise, we can simply use the values. + return pips.values; + } + return []; // pips.mode = never + } + function mapToRange(values, stepped) { + return values.map(function (value) { + return scope_Spectrum.fromStepping(stepped ? scope_Spectrum.getStep(value) : value); + }); + } + function generateSpread(pips) { + function safeIncrement(value, increment) { + // Avoid floating point variance by dropping the smallest decimal places. + return Number((value + increment).toFixed(7)); + } + var group = getGroup(pips); + var indexes = {}; + var firstInRange = scope_Spectrum.xVal[0]; + var lastInRange = scope_Spectrum.xVal[scope_Spectrum.xVal.length - 1]; + var ignoreFirst = false; + var ignoreLast = false; + var prevPct = 0; + // Create a copy of the group, sort it and filter away all duplicates. + group = unique(group.slice().sort(function (a, b) { + return a - b; + })); + // Make sure the range starts with the first element. + if (group[0] !== firstInRange) { + group.unshift(firstInRange); + ignoreFirst = true; + } + // Likewise for the last one. + if (group[group.length - 1] !== lastInRange) { + group.push(lastInRange); + ignoreLast = true; + } + group.forEach(function (current, index) { + // Get the current step and the lower + upper positions. + var step; + var i; + var q; + var low = current; + var high = group[index + 1]; + var newPct; + var pctDifference; + var pctPos; + var type; + var steps; + var realSteps; + var stepSize; + var isSteps = pips.mode === exports.PipsMode.Steps; + // When using 'steps' mode, use the provided steps. + // Otherwise, we'll step on to the next subrange. + if (isSteps) { + step = scope_Spectrum.xNumSteps[index]; + } + // Default to a 'full' step. + if (!step) { + step = high - low; + } + // If high is undefined we are at the last subrange. Make sure it iterates once (#1088) + if (high === undefined) { + high = low; + } + // Make sure step isn't 0, which would cause an infinite loop (#654) + step = Math.max(step, 0.0000001); + // Find all steps in the subrange. + for (i = low; i <= high; i = safeIncrement(i, step)) { + // Get the percentage value for the current step, + // calculate the size for the subrange. + newPct = scope_Spectrum.toStepping(i); + pctDifference = newPct - prevPct; + steps = pctDifference / (pips.density || 1); + realSteps = Math.round(steps); + // This ratio represents the amount of percentage-space a point indicates. + // For a density 1 the points/percentage = 1. For density 2, that percentage needs to be re-divided. + // Round the percentage offset to an even number, then divide by two + // to spread the offset on both sides of the range. + stepSize = pctDifference / realSteps; + // Divide all points evenly, adding the correct number to this subrange. + // Run up to <= so that 100% gets a point, event if ignoreLast is set. + for (q = 1; q <= realSteps; q += 1) { + // The ratio between the rounded value and the actual size might be ~1% off. + // Correct the percentage offset by the number of points + // per subrange. density = 1 will result in 100 points on the + // full range, 2 for 50, 4 for 25, etc. + pctPos = prevPct + q * stepSize; + indexes[pctPos.toFixed(5)] = [scope_Spectrum.fromStepping(pctPos), 0]; + } + // Determine the point type. + type = group.indexOf(i) > -1 ? exports.PipsType.LargeValue : isSteps ? exports.PipsType.SmallValue : exports.PipsType.NoValue; + // Enforce the 'ignoreFirst' option by overwriting the type for 0. + if (!index && ignoreFirst && i !== high) { + type = 0; + } + if (!(i === high && ignoreLast)) { + // Mark the 'type' of this point. 0 = plain, 1 = real value, 2 = step value. + indexes[newPct.toFixed(5)] = [i, type]; + } + // Update the percentage count. + prevPct = newPct; + } + }); + return indexes; + } + function addMarking(spread, filterFunc, formatter) { + var _a, _b; + var element = scope_Document.createElement("div"); + var valueSizeClasses = (_a = {}, + _a[exports.PipsType.None] = "", + _a[exports.PipsType.NoValue] = options.cssClasses.valueNormal, + _a[exports.PipsType.LargeValue] = options.cssClasses.valueLarge, + _a[exports.PipsType.SmallValue] = options.cssClasses.valueSub, + _a); + var markerSizeClasses = (_b = {}, + _b[exports.PipsType.None] = "", + _b[exports.PipsType.NoValue] = options.cssClasses.markerNormal, + _b[exports.PipsType.LargeValue] = options.cssClasses.markerLarge, + _b[exports.PipsType.SmallValue] = options.cssClasses.markerSub, + _b); + var valueOrientationClasses = [options.cssClasses.valueHorizontal, options.cssClasses.valueVertical]; + var markerOrientationClasses = [options.cssClasses.markerHorizontal, options.cssClasses.markerVertical]; + addClass(element, options.cssClasses.pips); + addClass(element, options.ort === 0 ? options.cssClasses.pipsHorizontal : options.cssClasses.pipsVertical); + function getClasses(type, source) { + var a = source === options.cssClasses.value; + var orientationClasses = a ? valueOrientationClasses : markerOrientationClasses; + var sizeClasses = a ? valueSizeClasses : markerSizeClasses; + return source + " " + orientationClasses[options.ort] + " " + sizeClasses[type]; + } + function addSpread(offset, value, type) { + // Apply the filter function, if it is set. + type = filterFunc ? filterFunc(value, type) : type; + if (type === exports.PipsType.None) { + return; + } + // Add a marker for every point + var node = addNodeTo(element, false); + node.className = getClasses(type, options.cssClasses.marker); + node.style[options.style] = offset + "%"; + // Values are only appended for points marked '1' or '2'. + if (type > exports.PipsType.NoValue) { + node = addNodeTo(element, false); + node.className = getClasses(type, options.cssClasses.value); + node.setAttribute("data-value", String(value)); + node.style[options.style] = offset + "%"; + node.innerHTML = String(formatter.to(value)); + } + } + // Append all points. + Object.keys(spread).forEach(function (offset) { + addSpread(offset, spread[offset][0], spread[offset][1]); + }); + return element; + } + function removePips() { + if (scope_Pips) { + removeElement(scope_Pips); + scope_Pips = null; + } + } + function pips(pips) { + // Fix #669 + removePips(); + var spread = generateSpread(pips); + var filter = pips.filter; + var format = pips.format || { + to: function (value) { + return String(Math.round(value)); + }, + }; + scope_Pips = scope_Target.appendChild(addMarking(spread, filter, format)); + return scope_Pips; + } + // Shorthand for base dimensions. + function baseSize() { + var rect = scope_Base.getBoundingClientRect(); + var alt = ("offset" + ["Width", "Height"][options.ort]); + return options.ort === 0 ? rect.width || scope_Base[alt] : rect.height || scope_Base[alt]; + } + // Handler for attaching events trough a proxy. + function attachEvent(events, element, callback, data) { + // This function can be used to 'filter' events to the slider. + // element is a node, not a nodeList + var method = function (event) { + var e = fixEvent(event, data.pageOffset, data.target || element); + // fixEvent returns false if this event has a different target + // when handling (multi-) touch events; + if (!e) { + return false; + } + // doNotReject is passed by all end events to make sure released touches + // are not rejected, leaving the slider "stuck" to the cursor; + if (isSliderDisabled() && !data.doNotReject) { + return false; + } + // Stop if an active 'tap' transition is taking place. + if (hasClass(scope_Target, options.cssClasses.tap) && !data.doNotReject) { + return false; + } + // Ignore right or middle clicks on start #454 + if (events === actions.start && e.buttons !== undefined && e.buttons > 1) { + return false; + } + // Ignore right or middle clicks on start #454 + if (data.hover && e.buttons) { + return false; + } + // 'supportsPassive' is only true if a browser also supports touch-action: none in CSS. + // iOS safari does not, so it doesn't get to benefit from passive scrolling. iOS does support + // touch-action: manipulation, but that allows panning, which breaks + // sliders after zooming/on non-responsive pages. + // See: https://bugs.webkit.org/show_bug.cgi?id=133112 + if (!supportsPassive) { + e.preventDefault(); + } + e.calcPoint = e.points[options.ort]; + // Call the event handler with the event [ and additional data ]. + callback(e, data); + return; + }; + var methods = []; + // Bind a closure on the target for every event type. + events.split(" ").forEach(function (eventName) { + element.addEventListener(eventName, method, supportsPassive ? { passive: true } : false); + methods.push([eventName, method]); + }); + return methods; + } + // Provide a clean event with standardized offset values. + function fixEvent(e, pageOffset, eventTarget) { + // Filter the event to register the type, which can be + // touch, mouse or pointer. Offset changes need to be + // made on an event specific basis. + var touch = e.type.indexOf("touch") === 0; + var mouse = e.type.indexOf("mouse") === 0; + var pointer = e.type.indexOf("pointer") === 0; + var x = 0; + var y = 0; + // IE10 implemented pointer events with a prefix; + if (e.type.indexOf("MSPointer") === 0) { + pointer = true; + } + // Erroneous events seem to be passed in occasionally on iOS/iPadOS after user finishes interacting with + // the slider. They appear to be of type MouseEvent, yet they don't have usual properties set. Ignore + // events that have no touches or buttons associated with them. (#1057, #1079, #1095) + if (e.type === "mousedown" && !e.buttons && !e.touches) { + return false; + } + // The only thing one handle should be concerned about is the touches that originated on top of it. + if (touch) { + // Returns true if a touch originated on the target. + var isTouchOnTarget = function (checkTouch) { + var target = checkTouch.target; + return (target === eventTarget || + eventTarget.contains(target) || + (e.composed && e.composedPath().shift() === eventTarget)); + }; + // In the case of touchstart events, we need to make sure there is still no more than one + // touch on the target so we look amongst all touches. + if (e.type === "touchstart") { + var targetTouches = Array.prototype.filter.call(e.touches, isTouchOnTarget); + // Do not support more than one touch per handle. + if (targetTouches.length > 1) { + return false; + } + x = targetTouches[0].pageX; + y = targetTouches[0].pageY; + } + else { + // In the other cases, find on changedTouches is enough. + var targetTouch = Array.prototype.find.call(e.changedTouches, isTouchOnTarget); + // Cancel if the target touch has not moved. + if (!targetTouch) { + return false; + } + x = targetTouch.pageX; + y = targetTouch.pageY; + } + } + pageOffset = pageOffset || getPageOffset(scope_Document); + if (mouse || pointer) { + x = e.clientX + pageOffset.x; + y = e.clientY + pageOffset.y; + } + e.pageOffset = pageOffset; + e.points = [x, y]; + e.cursor = mouse || pointer; // Fix #435 + return e; + } + // Translate a coordinate in the document to a percentage on the slider + function calcPointToPercentage(calcPoint) { + var location = calcPoint - offset(scope_Base, options.ort); + var proposal = (location * 100) / baseSize(); + // Clamp proposal between 0% and 100% + // Out-of-bound coordinates may occur when .noUi-base pseudo-elements + // are used (e.g. contained handles feature) + proposal = limit(proposal); + return options.dir ? 100 - proposal : proposal; + } + // Find handle closest to a certain percentage on the slider + function getClosestHandle(clickedPosition) { + var smallestDifference = 100; + var handleNumber = false; + scope_Handles.forEach(function (handle, index) { + // Disabled handles are ignored + if (isHandleDisabled(index)) { + return; + } + var handlePosition = scope_Locations[index]; + var differenceWithThisHandle = Math.abs(handlePosition - clickedPosition); + // Initial state + var clickAtEdge = differenceWithThisHandle === 100 && smallestDifference === 100; + // Difference with this handle is smaller than the previously checked handle + var isCloser = differenceWithThisHandle < smallestDifference; + var isCloserAfter = differenceWithThisHandle <= smallestDifference && clickedPosition > handlePosition; + if (isCloser || isCloserAfter || clickAtEdge) { + handleNumber = index; + smallestDifference = differenceWithThisHandle; + } + }); + return handleNumber; + } + // Fire 'end' when a mouse or pen leaves the document. + function documentLeave(event, data) { + if (event.type === "mouseout" && + event.target.nodeName === "HTML" && + event.relatedTarget === null) { + eventEnd(event, data); + } + } + // Handle movement on document for handle and range drag. + function eventMove(event, data) { + // Fix #498 + // Check value of .buttons in 'start' to work around a bug in IE10 mobile (data.buttonsProperty). + // https://connect.microsoft.com/IE/feedback/details/927005/mobile-ie10-windows-phone-buttons-property-of-pointermove-event-always-zero + // IE9 has .buttons and .which zero on mousemove. + // Firefox breaks the spec MDN defines. + if (navigator.appVersion.indexOf("MSIE 9") === -1 && event.buttons === 0 && data.buttonsProperty !== 0) { + return eventEnd(event, data); + } + // Check if we are moving up or down + var movement = (options.dir ? -1 : 1) * (event.calcPoint - data.startCalcPoint); + // Convert the movement into a percentage of the slider width/height + var proposal = (movement * 100) / data.baseSize; + moveHandles(movement > 0, proposal, data.locations, data.handleNumbers, data.connect); + } + // Unbind move events on document, call callbacks. + function eventEnd(event, data) { + // The handle is no longer active, so remove the class. + if (data.handle) { + removeClass(data.handle, options.cssClasses.active); + scope_ActiveHandlesCount -= 1; + } + // Unbind the move and end events, which are added on 'start'. + data.listeners.forEach(function (c) { + scope_DocumentElement.removeEventListener(c[0], c[1]); + }); + if (scope_ActiveHandlesCount === 0) { + // Remove dragging class. + removeClass(scope_Target, options.cssClasses.drag); + setZindex(); + // Remove cursor styles and text-selection events bound to the body. + if (event.cursor) { + scope_Body.style.cursor = ""; + scope_Body.removeEventListener("selectstart", preventDefault); + } + } + if (options.events.smoothSteps) { + data.handleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false); + }); + data.handleNumbers.forEach(function (handleNumber) { + fireEvent("update", handleNumber); + }); + } + data.handleNumbers.forEach(function (handleNumber) { + fireEvent("change", handleNumber); + fireEvent("set", handleNumber); + fireEvent("end", handleNumber); + }); + } + // Bind move events on document. + function eventStart(event, data) { + // Ignore event if any handle is disabled + if (data.handleNumbers.some(isHandleDisabled)) { + return; + } + var handle; + if (data.handleNumbers.length === 1) { + var handleOrigin = scope_Handles[data.handleNumbers[0]]; + handle = handleOrigin.children[0]; + scope_ActiveHandlesCount += 1; + // Mark the handle as 'active' so it can be styled. + addClass(handle, options.cssClasses.active); + } + // A drag should never propagate up to the 'tap' event. + event.stopPropagation(); + // Record the event listeners. + var listeners = []; + // Attach the move and end events. + var moveEvent = attachEvent(actions.move, scope_DocumentElement, eventMove, { + // The event target has changed so we need to propagate the original one so that we keep + // relying on it to extract target touches. + target: event.target, + handle: handle, + connect: data.connect, + listeners: listeners, + startCalcPoint: event.calcPoint, + baseSize: baseSize(), + pageOffset: event.pageOffset, + handleNumbers: data.handleNumbers, + buttonsProperty: event.buttons, + locations: scope_Locations.slice(), + }); + var endEvent = attachEvent(actions.end, scope_DocumentElement, eventEnd, { + target: event.target, + handle: handle, + listeners: listeners, + doNotReject: true, + handleNumbers: data.handleNumbers, + }); + var outEvent = attachEvent("mouseout", scope_DocumentElement, documentLeave, { + target: event.target, + handle: handle, + listeners: listeners, + doNotReject: true, + handleNumbers: data.handleNumbers, + }); + // We want to make sure we pushed the listeners in the listener list rather than creating + // a new one as it has already been passed to the event handlers. + listeners.push.apply(listeners, moveEvent.concat(endEvent, outEvent)); + // Text selection isn't an issue on touch devices, + // so adding cursor styles can be skipped. + if (event.cursor) { + // Prevent the 'I' cursor and extend the range-drag cursor. + scope_Body.style.cursor = getComputedStyle(event.target).cursor; + // Mark the target with a dragging state. + if (scope_Handles.length > 1) { + addClass(scope_Target, options.cssClasses.drag); + } + // Prevent text selection when dragging the handles. + // In noUiSlider <= 9.2.0, this was handled by calling preventDefault on mouse/touch start/move, + // which is scroll blocking. The selectstart event is supported by FireFox starting from version 52, + // meaning the only holdout is iOS Safari. This doesn't matter: text selection isn't triggered there. + // The 'cursor' flag is false. + // See: http://caniuse.com/#search=selectstart + scope_Body.addEventListener("selectstart", preventDefault, false); + } + data.handleNumbers.forEach(function (handleNumber) { + fireEvent("start", handleNumber); + }); + } + // Move closest handle to tapped location. + function eventTap(event) { + // The tap event shouldn't propagate up + event.stopPropagation(); + var proposal = calcPointToPercentage(event.calcPoint); + var handleNumber = getClosestHandle(proposal); + // Tackle the case that all handles are 'disabled'. + if (handleNumber === false) { + return; + } + // Flag the slider as it is now in a transitional state. + // Transition takes a configurable amount of ms (default 300). Re-enable the slider after that. + if (!options.events.snap) { + addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration); + } + setHandle(handleNumber, proposal, true, true); + setZindex(); + fireEvent("slide", handleNumber, true); + fireEvent("update", handleNumber, true); + if (!options.events.snap) { + fireEvent("change", handleNumber, true); + fireEvent("set", handleNumber, true); + } + else { + eventStart(event, { handleNumbers: [handleNumber] }); + } + } + // Fires a 'hover' event for a hovered mouse/pen position. + function eventHover(event) { + var proposal = calcPointToPercentage(event.calcPoint); + var to = scope_Spectrum.getStep(proposal); + var value = scope_Spectrum.fromStepping(to); + Object.keys(scope_Events).forEach(function (targetEvent) { + if ("hover" === targetEvent.split(".")[0]) { + scope_Events[targetEvent].forEach(function (callback) { + callback.call(scope_Self, value); + }); + } + }); + } + // Handles keydown on focused handles + // Don't move the document when pressing arrow keys on focused handles + function eventKeydown(event, handleNumber) { + if (isSliderDisabled() || isHandleDisabled(handleNumber)) { + return false; + } + var horizontalKeys = ["Left", "Right"]; + var verticalKeys = ["Down", "Up"]; + var largeStepKeys = ["PageDown", "PageUp"]; + var edgeKeys = ["Home", "End"]; + if (options.dir && !options.ort) { + // On an right-to-left slider, the left and right keys act inverted + horizontalKeys.reverse(); + } + else if (options.ort && !options.dir) { + // On a top-to-bottom slider, the up and down keys act inverted + verticalKeys.reverse(); + largeStepKeys.reverse(); + } + // Strip "Arrow" for IE compatibility. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key + var key = event.key.replace("Arrow", ""); + var isLargeDown = key === largeStepKeys[0]; + var isLargeUp = key === largeStepKeys[1]; + var isDown = key === verticalKeys[0] || key === horizontalKeys[0] || isLargeDown; + var isUp = key === verticalKeys[1] || key === horizontalKeys[1] || isLargeUp; + var isMin = key === edgeKeys[0]; + var isMax = key === edgeKeys[1]; + if (!isDown && !isUp && !isMin && !isMax) { + return true; + } + event.preventDefault(); + var to; + if (isUp || isDown) { + var direction = isDown ? 0 : 1; + var steps = getNextStepsForHandle(handleNumber); + var step = steps[direction]; + // At the edge of a slider, do nothing + if (step === null) { + return false; + } + // No step set, use the default of 10% of the sub-range + if (step === false) { + step = scope_Spectrum.getDefaultStep(scope_Locations[handleNumber], isDown, options.keyboardDefaultStep); + } + if (isLargeUp || isLargeDown) { + step *= options.keyboardPageMultiplier; + } + else { + step *= options.keyboardMultiplier; + } + // Step over zero-length ranges (#948); + step = Math.max(step, 0.0000001); + // Decrement for down steps + step = (isDown ? -1 : 1) * step; + to = scope_Values[handleNumber] + step; + } + else if (isMax) { + // End key + to = options.spectrum.xVal[options.spectrum.xVal.length - 1]; + } + else { + // Home key + to = options.spectrum.xVal[0]; + } + setHandle(handleNumber, scope_Spectrum.toStepping(to), true, true); + fireEvent("slide", handleNumber); + fireEvent("update", handleNumber); + fireEvent("change", handleNumber); + fireEvent("set", handleNumber); + return false; + } + // Attach events to several slider parts. + function bindSliderEvents(behaviour) { + // Attach the standard drag event to the handles. + if (!behaviour.fixed) { + scope_Handles.forEach(function (handle, index) { + // These events are only bound to the visual handle + // element, not the 'real' origin element. + attachEvent(actions.start, handle.children[0], eventStart, { + handleNumbers: [index], + }); + }); + } + // Attach the tap event to the slider base. + if (behaviour.tap) { + attachEvent(actions.start, scope_Base, eventTap, {}); + } + // Fire hover events + if (behaviour.hover) { + attachEvent(actions.move, scope_Base, eventHover, { + hover: true, + }); + } + // Make the range draggable. + if (behaviour.drag) { + scope_Connects.forEach(function (connect, index) { + if (connect === false || index === 0 || index === scope_Connects.length - 1) { + return; + } + var handleBefore = scope_Handles[index - 1]; + var handleAfter = scope_Handles[index]; + var eventHolders = [connect]; + var handlesToDrag = [handleBefore, handleAfter]; + var handleNumbersToDrag = [index - 1, index]; + addClass(connect, options.cssClasses.draggable); + // When the range is fixed, the entire range can + // be dragged by the handles. The handle in the first + // origin will propagate the start event upward, + // but it needs to be bound manually on the other. + if (behaviour.fixed) { + eventHolders.push(handleBefore.children[0]); + eventHolders.push(handleAfter.children[0]); + } + if (behaviour.dragAll) { + handlesToDrag = scope_Handles; + handleNumbersToDrag = scope_HandleNumbers; + } + eventHolders.forEach(function (eventHolder) { + attachEvent(actions.start, eventHolder, eventStart, { + handles: handlesToDrag, + handleNumbers: handleNumbersToDrag, + connect: connect, + }); + }); + }); + } + } + // Attach an event to this slider, possibly including a namespace + function bindEvent(namespacedEvent, callback) { + scope_Events[namespacedEvent] = scope_Events[namespacedEvent] || []; + scope_Events[namespacedEvent].push(callback); + // If the event bound is 'update,' fire it immediately for all handles. + if (namespacedEvent.split(".")[0] === "update") { + scope_Handles.forEach(function (a, index) { + fireEvent("update", index); + }); + } + } + function isInternalNamespace(namespace) { + return namespace === INTERNAL_EVENT_NS.aria || namespace === INTERNAL_EVENT_NS.tooltips; + } + // Undo attachment of event + function removeEvent(namespacedEvent) { + var event = namespacedEvent && namespacedEvent.split(".")[0]; + var namespace = event ? namespacedEvent.substring(event.length) : namespacedEvent; + Object.keys(scope_Events).forEach(function (bind) { + var tEvent = bind.split(".")[0]; + var tNamespace = bind.substring(tEvent.length); + if ((!event || event === tEvent) && (!namespace || namespace === tNamespace)) { + // only delete protected internal event if intentional + if (!isInternalNamespace(tNamespace) || namespace === tNamespace) { + delete scope_Events[bind]; + } + } + }); + } + // External event handling + function fireEvent(eventName, handleNumber, tap) { + Object.keys(scope_Events).forEach(function (targetEvent) { + var eventType = targetEvent.split(".")[0]; + if (eventName === eventType) { + scope_Events[targetEvent].forEach(function (callback) { + callback.call( + // Use the slider public API as the scope ('this') + scope_Self, + // Return values as array, so arg_1[arg_2] is always valid. + scope_Values.map(options.format.to), + // Handle index, 0 or 1 + handleNumber, + // Un-formatted slider values + scope_Values.slice(), + // Event is fired by tap, true or false + tap || false, + // Left offset of the handle, in relation to the slider + scope_Locations.slice(), + // add the slider public API to an accessible parameter when this is unavailable + scope_Self); + }); + } + }); + } + // Split out the handle positioning logic so the Move event can use it, too + function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) { + var distance; + // For sliders with multiple handles, limit movement to the other handle. + // Apply the margin option by adding it to the handle positions. + if (scope_Handles.length > 1 && !options.events.unconstrained) { + if (lookBackward && handleNumber > 0) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber - 1], options.margin, false); + to = Math.max(to, distance); + } + if (lookForward && handleNumber < scope_Handles.length - 1) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber + 1], options.margin, true); + to = Math.min(to, distance); + } + } + // The limit option has the opposite effect, limiting handles to a + // maximum distance from another. Limit must be > 0, as otherwise + // handles would be unmovable. + if (scope_Handles.length > 1 && options.limit) { + if (lookBackward && handleNumber > 0) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber - 1], options.limit, false); + to = Math.min(to, distance); + } + if (lookForward && handleNumber < scope_Handles.length - 1) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber + 1], options.limit, true); + to = Math.max(to, distance); + } + } + // The padding option keeps the handles a certain distance from the + // edges of the slider. Padding must be > 0. + if (options.padding) { + if (handleNumber === 0) { + distance = scope_Spectrum.getAbsoluteDistance(0, options.padding[0], false); + to = Math.max(to, distance); + } + if (handleNumber === scope_Handles.length - 1) { + distance = scope_Spectrum.getAbsoluteDistance(100, options.padding[1], true); + to = Math.min(to, distance); + } + } + if (!smoothSteps) { + to = scope_Spectrum.getStep(to); + } + // Limit percentage to the 0 - 100 range + to = limit(to); + // Return false if handle can't move + if (to === reference[handleNumber] && !getValue) { + return false; + } + return to; + } + // Uses slider orientation to create CSS rules. a = base value; + function inRuleOrder(v, a) { + var o = options.ort; + return (o ? a : v) + ", " + (o ? v : a); + } + // Moves handle(s) by a percentage + // (bool, % to move, [% where handle started, ...], [index in scope_Handles, ...]) + function moveHandles(upward, proposal, locations, handleNumbers, connect) { + var proposals = locations.slice(); + // Store first handle now, so we still have it in case handleNumbers is reversed + var firstHandle = handleNumbers[0]; + var smoothSteps = options.events.smoothSteps; + var b = [!upward, upward]; + var f = [upward, !upward]; + // Copy handleNumbers so we don't change the dataset + handleNumbers = handleNumbers.slice(); + // Check to see which handle is 'leading'. + // If that one can't move the second can't either. + if (upward) { + handleNumbers.reverse(); + } + // Step 1: get the maximum percentage that any of the handles can move + if (handleNumbers.length > 1) { + handleNumbers.forEach(function (handleNumber, o) { + var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps); + // Stop if one of the handles can't move. + if (to === false) { + proposal = 0; + } + else { + proposal = to - proposals[handleNumber]; + proposals[handleNumber] = to; + } + }); + } + // If using one handle, check backward AND forward + else { + b = f = [true]; + } + var state = false; + // Step 2: Try to set the handles with the found percentage + handleNumbers.forEach(function (handleNumber, o) { + state = + setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state; + }); + // Step 3: If a handle moved, fire events + if (state) { + handleNumbers.forEach(function (handleNumber) { + fireEvent("update", handleNumber); + fireEvent("slide", handleNumber); + }); + // If target is a connect, then fire drag event + if (connect != undefined) { + fireEvent("drag", firstHandle); + } + } + } + // Takes a base value and an offset. This offset is used for the connect bar size. + // In the initial design for this feature, the origin element was 1% wide. + // Unfortunately, a rounding bug in Chrome makes it impossible to implement this feature + // in this manner: https://bugs.chromium.org/p/chromium/issues/detail?id=798223 + function transformDirection(a, b) { + return options.dir ? 100 - a - b : a; + } + // Updates scope_Locations and scope_Values, updates visual state + function updateHandlePosition(handleNumber, to) { + // Update locations. + scope_Locations[handleNumber] = to; + // Convert the value to the slider stepping/range. + scope_Values[handleNumber] = scope_Spectrum.fromStepping(to); + var translation = transformDirection(to, 0) - scope_DirOffset; + var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")"; + scope_Handles[handleNumber].style[options.transformRule] = translateRule; + // sanity check for at least 2 handles (e.g. during setup) + if (options.events.invertConnects && scope_Locations.length > 1) { + // check if handles passed each other, but don't match the ConnectsInverted state + var handlesAreInOrder = scope_Locations.every(function (position, index, locations) { + return index === 0 || position >= locations[index - 1]; + }); + if (scope_ConnectsInverted !== !handlesAreInOrder) { + // invert connects when handles pass each other + invertConnects(); + // invertConnects already updates all connect elements + return; + } + } + updateConnect(handleNumber); + updateConnect(handleNumber + 1); + if (scope_ConnectsInverted) { + // When connects are inverted, we also have to update adjacent connects + updateConnect(handleNumber - 1); + updateConnect(handleNumber + 2); + } + } + // Handles before the slider middle are stacked later = higher, + // Handles after the middle later is lower + // [[7] [8] .......... | .......... [5] [4] + function setZindex() { + scope_HandleNumbers.forEach(function (handleNumber) { + var dir = scope_Locations[handleNumber] > 50 ? -1 : 1; + var zIndex = 3 + (scope_Handles.length + dir * handleNumber); + scope_Handles[handleNumber].style.zIndex = String(zIndex); + }); + } + // Test suggested values and apply margin, step. + // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436) + function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) { + if (!exactInput) { + to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps); + } + if (to === false) { + return false; + } + updateHandlePosition(handleNumber, to); + return true; + } + // Updates style attribute for connect nodes + function updateConnect(index) { + // Skip connects set to false + if (!scope_Connects[index]) { + return; + } + // Create a copy of locations, so we can sort them for the local scope logic + var locations = scope_Locations.slice(); + if (scope_ConnectsInverted) { + locations.sort(function (a, b) { + return a - b; + }); + } + var l = 0; + var h = 100; + if (index !== 0) { + l = locations[index - 1]; + } + if (index !== scope_Connects.length - 1) { + h = locations[index]; + } + // We use two rules: + // 'translate' to change the left/top offset; + // 'scale' to change the width of the element; + // As the element has a width of 100%, a translation of 100% is equal to 100% of the parent (.noUi-base) + var connectWidth = h - l; + var translateRule = "translate(" + inRuleOrder(transformDirection(l, connectWidth) + "%", "0") + ")"; + var scaleRule = "scale(" + inRuleOrder(connectWidth / 100, "1") + ")"; + scope_Connects[index].style[options.transformRule] = + translateRule + " " + scaleRule; + } + // Parses value passed to .set method. Returns current value if not parse-able. + function resolveToValue(to, handleNumber) { + // Setting with null indicates an 'ignore'. + // Inputting 'false' is invalid. + if (to === null || to === false || to === undefined) { + return scope_Locations[handleNumber]; + } + // If a formatted number was passed, attempt to decode it. + if (typeof to === "number") { + to = String(to); + } + to = options.format.from(to); + if (to !== false) { + to = scope_Spectrum.toStepping(to); + } + // If parsing the number failed, use the current value. + if (to === false || isNaN(to)) { + return scope_Locations[handleNumber]; + } + return to; + } + // Set the slider value. + function valueSet(input, fireSetEvent, exactInput) { + var values = asArray(input); + var isInit = scope_Locations[0] === undefined; + // Event fires by default + fireSetEvent = fireSetEvent === undefined ? true : fireSetEvent; + // Animation is optional. + // Make sure the initial values were set before using animated placement. + if (options.animate && !isInit) { + addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration); + } + // First pass, without lookAhead but with lookBackward. Values are set from left to right. + scope_HandleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, resolveToValue(values[handleNumber], handleNumber), true, false, exactInput); + }); + var i = scope_HandleNumbers.length === 1 ? 0 : 1; + // Spread handles evenly across the slider if the range has no size (min=max) + if (isInit && scope_Spectrum.hasNoSize()) { + exactInput = true; + scope_Locations[0] = 0; + if (scope_HandleNumbers.length > 1) { + var space_1 = 100 / (scope_HandleNumbers.length - 1); + scope_HandleNumbers.forEach(function (handleNumber) { + scope_Locations[handleNumber] = handleNumber * space_1; + }); + } + } + // Secondary passes. Now that all base values are set, apply constraints. + // Iterate all handles to ensure constraints are applied for the entire slider (Issue #1009) + for (; i < scope_HandleNumbers.length; ++i) { + scope_HandleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, scope_Locations[handleNumber], true, true, exactInput); + }); + } + setZindex(); + scope_HandleNumbers.forEach(function (handleNumber) { + fireEvent("update", handleNumber); + // Fire the event only for handles that received a new value, as per #579 + if (values[handleNumber] !== null && fireSetEvent) { + fireEvent("set", handleNumber); + } + }); + } + // Reset slider to initial values + function valueReset(fireSetEvent) { + valueSet(options.start, fireSetEvent); + } + // Set value for a single handle + function valueSetHandle(handleNumber, value, fireSetEvent, exactInput) { + // Ensure numeric input + handleNumber = Number(handleNumber); + if (!(handleNumber >= 0 && handleNumber < scope_HandleNumbers.length)) { + throw new Error("noUiSlider: invalid handle number, got: " + handleNumber); + } + // Look both backward and forward, since we don't want this handle to "push" other handles (#960); + // The exactInput argument can be used to ignore slider stepping (#436) + setHandle(handleNumber, resolveToValue(value, handleNumber), true, true, exactInput); + fireEvent("update", handleNumber); + if (fireSetEvent) { + fireEvent("set", handleNumber); + } + } + // Get the slider value. + function valueGet(unencoded) { + if (unencoded === void 0) { unencoded = false; } + if (unencoded) { + // return a copy of the raw values + return scope_Values.length === 1 ? scope_Values[0] : scope_Values.slice(0); + } + var values = scope_Values.map(options.format.to); + // If only one handle is used, return a single value. + if (values.length === 1) { + return values[0]; + } + return values; + } + // Removes classes from the root and empties it. + function destroy() { + // remove protected internal listeners + removeEvent(INTERNAL_EVENT_NS.aria); + removeEvent(INTERNAL_EVENT_NS.tooltips); + Object.keys(options.cssClasses).forEach(function (key) { + removeClass(scope_Target, options.cssClasses[key]); + }); + while (scope_Target.firstChild) { + scope_Target.removeChild(scope_Target.firstChild); + } + delete scope_Target.noUiSlider; + } + function getNextStepsForHandle(handleNumber) { + var location = scope_Locations[handleNumber]; + var nearbySteps = scope_Spectrum.getNearbySteps(location); + var value = scope_Values[handleNumber]; + var increment = nearbySteps.thisStep.step; + var decrement = null; + // If snapped, directly use defined step value + if (options.snap) { + return [ + value - nearbySteps.stepBefore.startValue || null, + nearbySteps.stepAfter.startValue - value || null, + ]; + } + // If the next value in this step moves into the next step, + // the increment is the start of the next step - the current value + if (increment !== false) { + if (value + increment > nearbySteps.stepAfter.startValue) { + increment = nearbySteps.stepAfter.startValue - value; + } + } + // If the value is beyond the starting point + if (value > nearbySteps.thisStep.startValue) { + decrement = nearbySteps.thisStep.step; + } + else if (nearbySteps.stepBefore.step === false) { + decrement = false; + } + // If a handle is at the start of a step, it always steps back into the previous step first + else { + decrement = value - nearbySteps.stepBefore.highestStep; + } + // Now, if at the slider edges, there is no in/decrement + if (location === 100) { + increment = null; + } + else if (location === 0) { + decrement = null; + } + // As per #391, the comparison for the decrement step can have some rounding issues. + var stepDecimals = scope_Spectrum.countStepDecimals(); + // Round per #391 + if (increment !== null && increment !== false) { + increment = Number(increment.toFixed(stepDecimals)); + } + if (decrement !== null && decrement !== false) { + decrement = Number(decrement.toFixed(stepDecimals)); + } + return [decrement, increment]; + } + // Get the current step size for the slider. + function getNextSteps() { + return scope_HandleNumbers.map(getNextStepsForHandle); + } + // Updatable: margin, limit, padding, step, range, animate, snap + function updateOptions(optionsToUpdate, fireSetEvent) { + // Spectrum is created using the range, snap, direction and step options. + // 'snap' and 'step' can be updated. + // If 'snap' and 'step' are not passed, they should remain unchanged. + var v = valueGet(); + var updateAble = [ + "margin", + "limit", + "padding", + "range", + "animate", + "snap", + "step", + "format", + "pips", + "tooltips", + "connect", + ]; + // Only change options that we're actually passed to update. + updateAble.forEach(function (name) { + // Check for undefined. null removes the value. + if (optionsToUpdate[name] !== undefined) { + originalOptions[name] = optionsToUpdate[name]; + } + }); + var newOptions = testOptions(originalOptions); + // Load new options into the slider state + updateAble.forEach(function (name) { + if (optionsToUpdate[name] !== undefined) { + options[name] = newOptions[name]; + } + }); + scope_Spectrum = newOptions.spectrum; + // Limit, margin and padding depend on the spectrum but are stored outside of it. (#677) + options.margin = newOptions.margin; + options.limit = newOptions.limit; + options.padding = newOptions.padding; + // Update pips, removes existing. + if (options.pips) { + pips(options.pips); + } + else { + removePips(); + } + // Update tooltips, removes existing. + if (options.tooltips) { + tooltips(); + } + else { + removeTooltips(); + } + // Invalidate the current positioning so valueSet forces an update. + scope_Locations = []; + valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent); + // Update connects only if it was set + if (optionsToUpdate.connect) { + updateConnectOption(); + } + } + function updateConnectOption() { + // IE supported way of removing children including event handlers + while (scope_ConnectBase.firstChild) { + scope_ConnectBase.removeChild(scope_ConnectBase.firstChild); + } + // Adding new connects according to the new connect options + for (var i = 0; i <= options.handles; i++) { + scope_Connects[i] = addConnect(scope_ConnectBase, options.connect[i]); + updateConnect(i); + } + // re-adding drag events for the new connect elements + // to ignore the other events we have to negate the 'if (!behaviour.fixed)' check + bindSliderEvents({ drag: options.events.drag, fixed: true }); + } + // Invert options for connect handles + function invertConnects() { + scope_ConnectsInverted = !scope_ConnectsInverted; + testConnect(options, + // inverse the connect boolean array + options.connect.map(function (b) { return !b; })); + updateConnectOption(); + } + // Initialization steps + function setupSlider() { + // Create the base element, initialize HTML and set classes. + // Add handles and connect elements. + scope_Base = addSlider(scope_Target); + addElements(options.connect, scope_Base); + // Attach user events. + bindSliderEvents(options.events); + // Use the public value method to set the start values. + valueSet(options.start); + if (options.pips) { + pips(options.pips); + } + if (options.tooltips) { + tooltips(); + } + aria(); + } + setupSlider(); + var scope_Self = { + destroy: destroy, + steps: getNextSteps, + on: bindEvent, + off: removeEvent, + get: valueGet, + set: valueSet, + setHandle: valueSetHandle, + reset: valueReset, + disable: disable, + enable: enable, + // Exposed for unit testing, don't use this in your application. + __moveHandles: function (upward, proposal, handleNumbers) { + moveHandles(upward, proposal, scope_Locations, handleNumbers); + }, + options: originalOptions, + updateOptions: updateOptions, + target: scope_Target, + removePips: removePips, + removeTooltips: removeTooltips, + getPositions: function () { + return scope_Locations.slice(); + }, + getTooltips: function () { + return scope_Tooltips; + }, + getOrigins: function () { + return scope_Handles; + }, + pips: pips, // Issue #594 + }; + return scope_Self; + } + // Run the standard initializer + function initialize(target, originalOptions) { + if (!target || !target.nodeName) { + throw new Error("noUiSlider: create requires a single element, got: " + target); + } + // Throw an error if the slider was already initialized. + if (target.noUiSlider) { + throw new Error("noUiSlider: Slider was already initialized."); + } + // Test the options and create the slider environment; + var options = testOptions(originalOptions); + var api = scope(target, options, originalOptions); + target.noUiSlider = api; + return api; + } + var nouislider = { + // Exposed for unit testing, don't use this in your application. + __spectrum: Spectrum, + // A reference to the default classes, allows global changes. + // Use the cssClasses option for changes to one slider. + cssClasses: cssClasses, + create: initialize, + }; + + exports.create = initialize; + exports.cssClasses = cssClasses; + exports["default"] = nouislider; + + Object.defineProperty(exports, '__esModule', { value: true }); + +})); diff --git a/web/js/noUiSlider-15.8.1/dist/nouislider.min.css b/web/js/noUiSlider-15.8.1/dist/nouislider.min.css new file mode 100644 index 00000000000..60f217c09aa --- /dev/null +++ b/web/js/noUiSlider-15.8.1/dist/nouislider.min.css @@ -0,0 +1 @@ +.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px} \ No newline at end of file diff --git a/web/js/noUiSlider-15.8.1/dist/nouislider.min.js b/web/js/noUiSlider-15.8.1/dist/nouislider.min.js new file mode 100644 index 00000000000..978a4a351cd --- /dev/null +++ b/web/js/noUiSlider-15.8.1/dist/nouislider.min.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).noUiSlider={})}(this,function(ut){"use strict";function n(t){return"object"==typeof t&&"function"==typeof t.to}function ct(t){t.parentElement.removeChild(t)}function pt(t){return null!=t}function ft(t){t.preventDefault()}function i(t){return"number"==typeof t&&!isNaN(t)&&isFinite(t)}function dt(t,e,r){0=e[r];)r+=1;return r}function r(t,e,r){if(r>=t.slice(-1)[0])return 100;var n=l(r,t),i=t[n-1],o=t[n],t=e[n-1],n=e[n];return t+(r=r,a(o=[i,o],o[0]<0?r+Math.abs(o[0]):r-o[0],0)/s(t,n))}function o(t,e,r,n){if(100===n)return n;var i=l(n,t),o=t[i-1],s=t[i];return r?(s-o)/2this.xPct[n+1];)n++;else t===this.xPct[this.xPct.length-1]&&(n=this.xPct.length-2);r||t!==this.xPct[n+1]||n++;for(var i,o=1,s=(e=null===e?[]:e)[n],a=0,l=0,u=0,c=r?(t-this.xPct[n])/(this.xPct[n+1]-this.xPct[n]):(this.xPct[n+1]-t)/(this.xPct[n+1]-this.xPct[n]);0= 2) required for mode 'count'.");for(var e=t.values-1,r=100/e,n=[];e--;)n[e]=e*r;return n.push(100),U(n,t.stepped)}(d),m={},t=S.xVal[0],e=S.xVal[S.xVal.length-1],g=!1,v=!1,b=0;return(h=h.slice().sort(function(t,e){return t-e}).filter(function(t){return!this[t]&&(this[t]=!0)},{}))[0]!==t&&(h.unshift(t),g=!0),h[h.length-1]!==e&&(h.push(e),v=!0),h.forEach(function(t,e){var r,n,i,o,s,a,l,u,t=t,c=h[e+1],p=d.mode===ut.PipsMode.Steps,f=(f=p?S.xNumSteps[e]:f)||c-t;for(void 0===c&&(c=t),f=Math.max(f,1e-7),r=t;r<=c;r=Number((r+f).toFixed(7))){for(a=(o=(i=S.toStepping(r))-b)/(d.density||1),u=o/(l=Math.round(a)),n=1;n<=l;n+=1)m[(s=b+n*u).toFixed(5)]=[S.fromStepping(s),0];a=-1ut.PipsType.NoValue&&((t=P(a,!1)).className=p(n,f.cssClasses.value),t.setAttribute("data-value",String(r)),t.style[f.style]=e+"%",t.innerHTML=String(s.to(r))))}),a}function L(){s&&(ct(s),s=null)}function T(t){L();var e=D(t),r=t.filter,t=t.format||{to:function(t){return String(Math.round(t))}};return s=d.appendChild(O(e,r,t))}function j(){var t=i.getBoundingClientRect(),e="offset"+["Width","Height"][f.ort];return 0===f.ort?t.width||i[e]:t.height||i[e]}function z(n,i,o,s){function e(t){var e,r=function(e,t,r){var n=0===e.type.indexOf("touch"),i=0===e.type.indexOf("mouse"),o=0===e.type.indexOf("pointer"),s=0,a=0;0===e.type.indexOf("MSPointer")&&(o=!0);if("mousedown"===e.type&&!e.buttons&&!e.touches)return!1;if(n){var l=function(t){t=t.target;return t===r||r.contains(t)||e.composed&&e.composedPath().shift()===r};if("touchstart"===e.type){n=Array.prototype.filter.call(e.touches,l);if(1=r[e-1]});if(x!==!e)return x=!x,xt(f,f.connect.map(function(t){return!t})),void at()}rt(t),rt(t+1),x&&(rt(t-1),rt(t+2))}function tt(){g.forEach(function(t){var e=50r.stepAfter.startValue&&(i=r.stepAfter.startValue-n),t=n>r.thisStep.startValue?r.thisStep.step:!1!==r.stepBefore.step&&n-r.stepBefore.highestStep,100===e?i=null:0===e&&(t=null);e=S.countStepDecimals();return null!==i&&!1!==i&&(i=Number(i.toFixed(e))),[t=null!==t&&!1!==t?Number(t.toFixed(e)):t,i]}function at(){for(;n.firstChild;)n.removeChild(n.firstChild);for(var t=0;t<=f.handles;t++)u[t]=N(n,f.connect[t]),rt(t);Y({drag:f.events.drag,fixed:!0})}gt(t=d,f.cssClasses.target),0===f.dir?gt(t,f.cssClasses.ltr):gt(t,f.cssClasses.rtl),0===f.ort?gt(t,f.cssClasses.horizontal):gt(t,f.cssClasses.vertical),gt(t,"rtl"===getComputedStyle(t).direction?f.cssClasses.textDirectionRtl:f.cssClasses.textDirectionLtr),i=P(t,f.cssClasses.base),function(t,e){n=P(e,f.cssClasses.connects),l=[],(u=[]).push(N(n,t[0]));for(var r=0;r=e[r];)r+=1;return r}function toStepping(t,e,r){if(r>=t.slice(-1)[0])return 100;var n=getJ(r,t),i=t[n-1],s=t[n],t=e[n-1],n=e[n];return t+toPercentage([i,s],r)/subRangeRatio(t,n)}function fromStepping(t,e,r){if(100<=r)return t.slice(-1)[0];var n=getJ(r,e),i=t[n-1],s=t[n],t=e[n-1];return isPercentage([i,s],(r-t)*subRangeRatio(t,e[n]))}function getStep(t,e,r,n){if(100===n)return n;var i=getJ(n,t),s=t[i-1],o=t[i];return r?(o-s)/2this.xPct[n+1];)n++;else t===this.xPct[this.xPct.length-1]&&(n=this.xPct.length-2);r||t!==this.xPct[n+1]||n++;for(var i,s=1,o=(e=null===e?[]:e)[n],a=0,l=0,u=0,c=r?(t-this.xPct[n])/(this.xPct[n+1]-this.xPct[n]):(this.xPct[n+1]-t)/(this.xPct[n+1]-this.xPct[n]);0= 2) required for mode 'count'.");for(var e=t.values-1,r=100/e,n=[];e--;)n[e]=e*r;return n.push(100),D(n,t.stepped)}(f),m={},t=S.xVal[0],e=S.xVal[S.xVal.length-1],g=!1,v=!1,b=0;return(h=unique(h.slice().sort(function(t,e){return t-e})))[0]!==t&&(h.unshift(t),g=!0),h[h.length-1]!==e&&(h.push(e),v=!0),h.forEach(function(t,e){var r,n,i,s,o,a,l,u,t=t,c=h[e+1],p=f.mode===PipsMode.Steps,d=(d=p?S.xNumSteps[e]:d)||c-t;for(void 0===c&&(c=t),d=Math.max(d,1e-7),r=t;r<=c;r=Number((r+d).toFixed(7))){for(a=(s=(i=S.toStepping(r))-b)/(f.density||1),u=s/(l=Math.round(a)),n=1;n<=l;n+=1)m[(o=b+n*u).toFixed(5)]=[S.fromStepping(o),0];a=-1PipsType.NoValue&&((t=C(a,!1)).className=p(n,d.cssClasses.value),t.setAttribute("data-value",String(r)),t.style[d.style]=e+"%",t.innerHTML=String(o.to(r))))}),a}function L(){i&&(removeElement(i),i=null)}function O(t){L();var e=T(t),r=t.filter,t=t.format||{to:function(t){return String(Math.round(t))}};return i=p.appendChild(U(e,r,t))}function F(){var t=r.getBoundingClientRect(),e="offset"+["Width","Height"][d.ort];return 0===d.ort?t.width||r[e]:t.height||r[e]}function R(e,r,n,i){function s(t){return!!(t=function(e,t,r){var n=0===e.type.indexOf("touch"),i=0===e.type.indexOf("mouse"),s=0===e.type.indexOf("pointer"),o=0,a=0;0===e.type.indexOf("MSPointer")&&(s=!0);if("mousedown"===e.type&&!e.buttons&&!e.touches)return!1;if(n){var l=function(t){t=t.target;return t===r||r.contains(t)||e.composed&&e.composedPath().shift()===r};if("touchstart"===e.type){n=Array.prototype.filter.call(e.touches,l);if(1=r[e-1]});if(b!==!e)return b=!b,testConnect(d,d.connect.map(function(t){return!t})),void at()}rt(t),rt(t+1),b&&(rt(t-1),rt(t+2))}function tt(){m.forEach(function(t){var e=50r.stepAfter.startValue&&(i=r.stepAfter.startValue-n),t=n>r.thisStep.startValue?r.thisStep.step:!1!==r.stepBefore.step&&n-r.stepBefore.highestStep,100===e?i=null:0===e&&(t=null);e=S.countStepDecimals();return null!==i&&!1!==i&&(i=Number(i.toFixed(e))),[t=null!==t&&!1!==t?Number(t.toFixed(e)):t,i]}function at(){for(;n.firstChild;)n.removeChild(n.firstChild);for(var t=0;t<=d.handles;t++)u[t]=P(n,d.connect[t]),rt(t);q({drag:d.events.drag,fixed:!0})}addClass(t=p,d.cssClasses.target),0===d.dir?addClass(t,d.cssClasses.ltr):addClass(t,d.cssClasses.rtl),0===d.ort?addClass(t,d.cssClasses.horizontal):addClass(t,d.cssClasses.vertical),addClass(t,"rtl"===getComputedStyle(t).direction?d.cssClasses.textDirectionRtl:d.cssClasses.textDirectionLtr),r=C(t,d.cssClasses.base),function(t,e){n=C(e,d.cssClasses.connects),l=[],(u=[]).push(P(n,t[0]));for(var r=0;r 0) { + addClass(element, className); + setTimeout(function () { + removeClass(element, className); + }, duration); + } +} +// Limits a value to 0 - 100 +function limit(a) { + return Math.max(Math.min(a, 100), 0); +} +// Wraps a variable as an array, if it isn't one yet. +// Note that an input array is returned by reference! +function asArray(a) { + return Array.isArray(a) ? a : [a]; +} +// Counts decimals +function countDecimals(numStr) { + numStr = String(numStr); + var pieces = numStr.split("."); + return pieces.length > 1 ? pieces[1].length : 0; +} +// http://youmightnotneedjquery.com/#add_class +function addClass(el, className) { + if (el.classList && !/\s/.test(className)) { + el.classList.add(className); + } + else { + el.className += " " + className; + } +} +// http://youmightnotneedjquery.com/#remove_class +function removeClass(el, className) { + if (el.classList && !/\s/.test(className)) { + el.classList.remove(className); + } + else { + el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " "); + } +} +// https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/ +function hasClass(el, className) { + return el.classList ? el.classList.contains(className) : new RegExp("\\b" + className + "\\b").test(el.className); +} +// https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes +function getPageOffset(doc) { + var supportPageOffset = window.pageXOffset !== undefined; + var isCSS1Compat = (doc.compatMode || "") === "CSS1Compat"; + var x = supportPageOffset + ? window.pageXOffset + : isCSS1Compat + ? doc.documentElement.scrollLeft + : doc.body.scrollLeft; + var y = supportPageOffset + ? window.pageYOffset + : isCSS1Compat + ? doc.documentElement.scrollTop + : doc.body.scrollTop; + return { + x: x, + y: y, + }; +} +// we provide a function to compute constants instead +// of accessing window.* as soon as the module needs it +// so that we do not compute anything if not needed +function getActions() { + // Determine the events to bind. IE11 implements pointerEvents without + // a prefix, which breaks compatibility with the IE10 implementation. + return window.navigator.pointerEnabled + ? { + start: "pointerdown", + move: "pointermove", + end: "pointerup", + } + : window.navigator.msPointerEnabled + ? { + start: "MSPointerDown", + move: "MSPointerMove", + end: "MSPointerUp", + } + : { + start: "mousedown touchstart", + move: "mousemove touchmove", + end: "mouseup touchend", + }; +} +// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md +// Issue #785 +function getSupportsPassive() { + var supportsPassive = false; + /* eslint-disable */ + try { + var opts = Object.defineProperty({}, "passive", { + get: function () { + supportsPassive = true; + }, + }); + // @ts-ignore + window.addEventListener("test", null, opts); + } + catch (e) { } + /* eslint-enable */ + return supportsPassive; +} +function getSupportsTouchActionNone() { + return window.CSS && CSS.supports && CSS.supports("touch-action", "none"); +} +//endregion +//region Range Calculation +// Determine the size of a sub-range in relation to a full range. +function subRangeRatio(pa, pb) { + return 100 / (pb - pa); +} +// (percentage) How many percent is this value of this range? +function fromPercentage(range, value, startRange) { + return (value * 100) / (range[startRange + 1] - range[startRange]); +} +// (percentage) Where is this value on this range? +function toPercentage(range, value) { + return fromPercentage(range, range[0] < 0 ? value + Math.abs(range[0]) : value - range[0], 0); +} +// (value) How much is this percentage on this range? +function isPercentage(range, value) { + return (value * (range[1] - range[0])) / 100 + range[0]; +} +function getJ(value, arr) { + var j = 1; + while (value >= arr[j]) { + j += 1; + } + return j; +} +// (percentage) Input a value, find where, on a scale of 0-100, it applies. +function toStepping(xVal, xPct, value) { + if (value >= xVal.slice(-1)[0]) { + return 100; + } + var j = getJ(value, xVal); + var va = xVal[j - 1]; + var vb = xVal[j]; + var pa = xPct[j - 1]; + var pb = xPct[j]; + return pa + toPercentage([va, vb], value) / subRangeRatio(pa, pb); +} +// (value) Input a percentage, find where it is on the specified range. +function fromStepping(xVal, xPct, value) { + // There is no range group that fits 100 + if (value >= 100) { + return xVal.slice(-1)[0]; + } + var j = getJ(value, xPct); + var va = xVal[j - 1]; + var vb = xVal[j]; + var pa = xPct[j - 1]; + var pb = xPct[j]; + return isPercentage([va, vb], (value - pa) * subRangeRatio(pa, pb)); +} +// (percentage) Get the step that applies at a certain value. +function getStep(xPct, xSteps, snap, value) { + if (value === 100) { + return value; + } + var j = getJ(value, xPct); + var a = xPct[j - 1]; + var b = xPct[j]; + // If 'snap' is set, steps are used as fixed points on the slider. + if (snap) { + // Find the closest position, a or b. + if (value - a > (b - a) / 2) { + return b; + } + return a; + } + if (!xSteps[j - 1]) { + return value; + } + return xPct[j - 1] + closest(value - xPct[j - 1], xSteps[j - 1]); +} +//endregion +//region Spectrum +var Spectrum = /** @class */ (function () { + function Spectrum(entry, snap, singleStep) { + this.xPct = []; + this.xVal = []; + this.xSteps = []; + this.xNumSteps = []; + this.xHighestCompleteStep = []; + this.xSteps = [singleStep || false]; + this.xNumSteps = [false]; + this.snap = snap; + var index; + var ordered = []; + // Map the object keys to an array. + Object.keys(entry).forEach(function (index) { + ordered.push([asArray(entry[index]), index]); + }); + // Sort all entries by value (numeric sort). + ordered.sort(function (a, b) { + return a[0][0] - b[0][0]; + }); + // Convert all entries to subranges. + for (index = 0; index < ordered.length; index++) { + this.handleEntryPoint(ordered[index][1], ordered[index][0]); + } + // Store the actual step values. + // xSteps is sorted in the same order as xPct and xVal. + this.xNumSteps = this.xSteps.slice(0); + // Convert all numeric steps to the percentage of the subrange they represent. + for (index = 0; index < this.xNumSteps.length; index++) { + this.handleStepPoint(index, this.xNumSteps[index]); + } + } + Spectrum.prototype.getDistance = function (value) { + var distances = []; + for (var index = 0; index < this.xNumSteps.length - 1; index++) { + distances[index] = fromPercentage(this.xVal, value, index); + } + return distances; + }; + // Calculate the percentual distance over the whole scale of ranges. + // direction: 0 = backwards / 1 = forwards + Spectrum.prototype.getAbsoluteDistance = function (value, distances, direction) { + var xPct_index = 0; + // Calculate range where to start calculation + if (value < this.xPct[this.xPct.length - 1]) { + while (value > this.xPct[xPct_index + 1]) { + xPct_index++; + } + } + else if (value === this.xPct[this.xPct.length - 1]) { + xPct_index = this.xPct.length - 2; + } + // If looking backwards and the value is exactly at a range separator then look one range further + if (!direction && value === this.xPct[xPct_index + 1]) { + xPct_index++; + } + if (distances === null) { + distances = []; + } + var start_factor; + var rest_factor = 1; + var rest_rel_distance = distances[xPct_index]; + var range_pct = 0; + var rel_range_distance = 0; + var abs_distance_counter = 0; + var range_counter = 0; + // Calculate what part of the start range the value is + if (direction) { + start_factor = (value - this.xPct[xPct_index]) / (this.xPct[xPct_index + 1] - this.xPct[xPct_index]); + } + else { + start_factor = (this.xPct[xPct_index + 1] - value) / (this.xPct[xPct_index + 1] - this.xPct[xPct_index]); + } + // Do until the complete distance across ranges is calculated + while (rest_rel_distance > 0) { + // Calculate the percentage of total range + range_pct = this.xPct[xPct_index + 1 + range_counter] - this.xPct[xPct_index + range_counter]; + // Detect if the margin, padding or limit is larger then the current range and calculate + if (distances[xPct_index + range_counter] * rest_factor + 100 - start_factor * 100 > 100) { + // If larger then take the percentual distance of the whole range + rel_range_distance = range_pct * start_factor; + // Rest factor of relative percentual distance still to be calculated + rest_factor = (rest_rel_distance - 100 * start_factor) / distances[xPct_index + range_counter]; + // Set start factor to 1 as for next range it does not apply. + start_factor = 1; + } + else { + // If smaller or equal then take the percentual distance of the calculate percentual part of that range + rel_range_distance = ((distances[xPct_index + range_counter] * range_pct) / 100) * rest_factor; + // No rest left as the rest fits in current range + rest_factor = 0; + } + if (direction) { + abs_distance_counter = abs_distance_counter - rel_range_distance; + // Limit range to first range when distance becomes outside of minimum range + if (this.xPct.length + range_counter >= 1) { + range_counter--; + } + } + else { + abs_distance_counter = abs_distance_counter + rel_range_distance; + // Limit range to last range when distance becomes outside of maximum range + if (this.xPct.length - range_counter >= 1) { + range_counter++; + } + } + // Rest of relative percentual distance still to be calculated + rest_rel_distance = distances[xPct_index + range_counter] * rest_factor; + } + return value + abs_distance_counter; + }; + Spectrum.prototype.toStepping = function (value) { + value = toStepping(this.xVal, this.xPct, value); + return value; + }; + Spectrum.prototype.fromStepping = function (value) { + return fromStepping(this.xVal, this.xPct, value); + }; + Spectrum.prototype.getStep = function (value) { + value = getStep(this.xPct, this.xSteps, this.snap, value); + return value; + }; + Spectrum.prototype.getDefaultStep = function (value, isDown, size) { + var j = getJ(value, this.xPct); + // When at the top or stepping down, look at the previous sub-range + if (value === 100 || (isDown && value === this.xPct[j - 1])) { + j = Math.max(j - 1, 1); + } + return (this.xVal[j] - this.xVal[j - 1]) / size; + }; + Spectrum.prototype.getNearbySteps = function (value) { + var j = getJ(value, this.xPct); + return { + stepBefore: { + startValue: this.xVal[j - 2], + step: this.xNumSteps[j - 2], + highestStep: this.xHighestCompleteStep[j - 2], + }, + thisStep: { + startValue: this.xVal[j - 1], + step: this.xNumSteps[j - 1], + highestStep: this.xHighestCompleteStep[j - 1], + }, + stepAfter: { + startValue: this.xVal[j], + step: this.xNumSteps[j], + highestStep: this.xHighestCompleteStep[j], + }, + }; + }; + Spectrum.prototype.countStepDecimals = function () { + var stepDecimals = this.xNumSteps.map(countDecimals); + return Math.max.apply(null, stepDecimals); + }; + Spectrum.prototype.hasNoSize = function () { + return this.xVal[0] === this.xVal[this.xVal.length - 1]; + }; + // Outside testing + Spectrum.prototype.convert = function (value) { + return this.getStep(this.toStepping(value)); + }; + Spectrum.prototype.handleEntryPoint = function (index, value) { + var percentage; + // Covert min/max syntax to 0 and 100. + if (index === "min") { + percentage = 0; + } + else if (index === "max") { + percentage = 100; + } + else { + percentage = parseFloat(index); + } + // Check for correct input. + if (!isNumeric(percentage) || !isNumeric(value[0])) { + throw new Error("noUiSlider: 'range' value isn't numeric."); + } + // Store values. + this.xPct.push(percentage); + this.xVal.push(value[0]); + var value1 = Number(value[1]); + // NaN will evaluate to false too, but to keep + // logging clear, set step explicitly. Make sure + // not to override the 'step' setting with false. + if (!percentage) { + if (!isNaN(value1)) { + this.xSteps[0] = value1; + } + } + else { + this.xSteps.push(isNaN(value1) ? false : value1); + } + this.xHighestCompleteStep.push(0); + }; + Spectrum.prototype.handleStepPoint = function (i, n) { + // Ignore 'false' stepping. + if (!n) { + return; + } + // Step over zero-length ranges (#948); + if (this.xVal[i] === this.xVal[i + 1]) { + this.xSteps[i] = this.xHighestCompleteStep[i] = this.xVal[i]; + return; + } + // Factor to range ratio + this.xSteps[i] = + fromPercentage([this.xVal[i], this.xVal[i + 1]], n, 0) / subRangeRatio(this.xPct[i], this.xPct[i + 1]); + var totalSteps = (this.xVal[i + 1] - this.xVal[i]) / this.xNumSteps[i]; + var highestStep = Math.ceil(Number(totalSteps.toFixed(3)) - 1); + var step = this.xVal[i] + this.xNumSteps[i] * highestStep; + this.xHighestCompleteStep[i] = step; + }; + return Spectrum; +}()); +//endregion +//region Options +/* Every input option is tested and parsed. This will prevent + endless validation in internal methods. These tests are + structured with an item for every option available. An + option can be marked as required by setting the 'r' flag. + The testing function is provided with three arguments: + - The provided value for the option; + - A reference to the options object; + - The name for the option; + + The testing function returns false when an error is detected, + or true when everything is OK. It can also modify the option + object, to make sure all values can be correctly looped elsewhere. */ +//region Defaults +var defaultFormatter = { + to: function (value) { + return value === undefined ? "" : value.toFixed(2); + }, + from: Number, +}; +var cssClasses = { + target: "target", + base: "base", + origin: "origin", + handle: "handle", + handleLower: "handle-lower", + handleUpper: "handle-upper", + touchArea: "touch-area", + horizontal: "horizontal", + vertical: "vertical", + background: "background", + connect: "connect", + connects: "connects", + ltr: "ltr", + rtl: "rtl", + textDirectionLtr: "txt-dir-ltr", + textDirectionRtl: "txt-dir-rtl", + draggable: "draggable", + drag: "state-drag", + tap: "state-tap", + active: "active", + tooltip: "tooltip", + pips: "pips", + pipsHorizontal: "pips-horizontal", + pipsVertical: "pips-vertical", + marker: "marker", + markerHorizontal: "marker-horizontal", + markerVertical: "marker-vertical", + markerNormal: "marker-normal", + markerLarge: "marker-large", + markerSub: "marker-sub", + value: "value", + valueHorizontal: "value-horizontal", + valueVertical: "value-vertical", + valueNormal: "value-normal", + valueLarge: "value-large", + valueSub: "value-sub", +}; +// Namespaces of internal event listeners +var INTERNAL_EVENT_NS = { + tooltips: ".__tooltips", + aria: ".__aria", +}; +//endregion +function testStep(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'step' is not numeric."); + } + // The step option can still be used to set stepping + // for linear sliders. Overwritten if set in 'range'. + parsed.singleStep = entry; +} +function testKeyboardPageMultiplier(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'keyboardPageMultiplier' is not numeric."); + } + parsed.keyboardPageMultiplier = entry; +} +function testKeyboardMultiplier(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'keyboardMultiplier' is not numeric."); + } + parsed.keyboardMultiplier = entry; +} +function testKeyboardDefaultStep(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'keyboardDefaultStep' is not numeric."); + } + parsed.keyboardDefaultStep = entry; +} +function testRange(parsed, entry) { + // Filter incorrect input. + if (typeof entry !== "object" || Array.isArray(entry)) { + throw new Error("noUiSlider: 'range' is not an object."); + } + // Catch missing start or end. + if (entry.min === undefined || entry.max === undefined) { + throw new Error("noUiSlider: Missing 'min' or 'max' in 'range'."); + } + parsed.spectrum = new Spectrum(entry, parsed.snap || false, parsed.singleStep); +} +function testStart(parsed, entry) { + entry = asArray(entry); + // Validate input. Values aren't tested, as the public .val method + // will always provide a valid location. + if (!Array.isArray(entry) || !entry.length) { + throw new Error("noUiSlider: 'start' option is incorrect."); + } + // Store the number of handles. + parsed.handles = entry.length; + // When the slider is initialized, the .val method will + // be called with the start options. + parsed.start = entry; +} +function testSnap(parsed, entry) { + if (typeof entry !== "boolean") { + throw new Error("noUiSlider: 'snap' option must be a boolean."); + } + // Enforce 100% stepping within subranges. + parsed.snap = entry; +} +function testAnimate(parsed, entry) { + if (typeof entry !== "boolean") { + throw new Error("noUiSlider: 'animate' option must be a boolean."); + } + // Enforce 100% stepping within subranges. + parsed.animate = entry; +} +function testAnimationDuration(parsed, entry) { + if (typeof entry !== "number") { + throw new Error("noUiSlider: 'animationDuration' option must be a number."); + } + parsed.animationDuration = entry; +} +function testConnect(parsed, entry) { + var connect = [false]; + var i; + // Map legacy options + if (entry === "lower") { + entry = [true, false]; + } + else if (entry === "upper") { + entry = [false, true]; + } + // Handle boolean options + if (entry === true || entry === false) { + for (i = 1; i < parsed.handles; i++) { + connect.push(entry); + } + connect.push(false); + } + // Reject invalid input + else if (!Array.isArray(entry) || !entry.length || entry.length !== parsed.handles + 1) { + throw new Error("noUiSlider: 'connect' option doesn't match handle count."); + } + else { + connect = entry; + } + parsed.connect = connect; +} +function testOrientation(parsed, entry) { + // Set orientation to an a numerical value for easy + // array selection. + switch (entry) { + case "horizontal": + parsed.ort = 0; + break; + case "vertical": + parsed.ort = 1; + break; + default: + throw new Error("noUiSlider: 'orientation' option is invalid."); + } +} +function testMargin(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'margin' option must be numeric."); + } + // Issue #582 + if (entry === 0) { + return; + } + parsed.margin = parsed.spectrum.getDistance(entry); +} +function testLimit(parsed, entry) { + if (!isNumeric(entry)) { + throw new Error("noUiSlider: 'limit' option must be numeric."); + } + parsed.limit = parsed.spectrum.getDistance(entry); + if (!parsed.limit || parsed.handles < 2) { + throw new Error("noUiSlider: 'limit' option is only supported on linear sliders with 2 or more handles."); + } +} +function testPadding(parsed, entry) { + var index; + if (!isNumeric(entry) && !Array.isArray(entry)) { + throw new Error("noUiSlider: 'padding' option must be numeric or array of exactly 2 numbers."); + } + if (Array.isArray(entry) && !(entry.length === 2 || isNumeric(entry[0]) || isNumeric(entry[1]))) { + throw new Error("noUiSlider: 'padding' option must be numeric or array of exactly 2 numbers."); + } + if (entry === 0) { + return; + } + if (!Array.isArray(entry)) { + entry = [entry, entry]; + } + // 'getDistance' returns false for invalid values. + parsed.padding = [parsed.spectrum.getDistance(entry[0]), parsed.spectrum.getDistance(entry[1])]; + for (index = 0; index < parsed.spectrum.xNumSteps.length - 1; index++) { + // last "range" can't contain step size as it is purely an endpoint. + if (parsed.padding[0][index] < 0 || parsed.padding[1][index] < 0) { + throw new Error("noUiSlider: 'padding' option must be a positive number(s)."); + } + } + var totalPadding = entry[0] + entry[1]; + var firstValue = parsed.spectrum.xVal[0]; + var lastValue = parsed.spectrum.xVal[parsed.spectrum.xVal.length - 1]; + if (totalPadding / (lastValue - firstValue) > 1) { + throw new Error("noUiSlider: 'padding' option must not exceed 100% of the range."); + } +} +function testDirection(parsed, entry) { + // Set direction as a numerical value for easy parsing. + // Invert connection for RTL sliders, so that the proper + // handles get the connect/background classes. + switch (entry) { + case "ltr": + parsed.dir = 0; + break; + case "rtl": + parsed.dir = 1; + break; + default: + throw new Error("noUiSlider: 'direction' option was not recognized."); + } +} +function testBehaviour(parsed, entry) { + // Make sure the input is a string. + if (typeof entry !== "string") { + throw new Error("noUiSlider: 'behaviour' must be a string containing options."); + } + // Check if the string contains any keywords. + // None are required. + var tap = entry.indexOf("tap") >= 0; + var drag = entry.indexOf("drag") >= 0; + var fixed = entry.indexOf("fixed") >= 0; + var snap = entry.indexOf("snap") >= 0; + var hover = entry.indexOf("hover") >= 0; + var unconstrained = entry.indexOf("unconstrained") >= 0; + var invertConnects = entry.indexOf("invert-connects") >= 0; + var dragAll = entry.indexOf("drag-all") >= 0; + var smoothSteps = entry.indexOf("smooth-steps") >= 0; + if (fixed) { + if (parsed.handles !== 2) { + throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles"); + } + // Use margin to enforce fixed state + testMargin(parsed, parsed.start[1] - parsed.start[0]); + } + if (invertConnects && parsed.handles !== 2) { + throw new Error("noUiSlider: 'invert-connects' behaviour must be used with 2 handles"); + } + if (unconstrained && (parsed.margin || parsed.limit)) { + throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit"); + } + parsed.events = { + tap: tap || snap, + drag: drag, + dragAll: dragAll, + smoothSteps: smoothSteps, + fixed: fixed, + snap: snap, + hover: hover, + unconstrained: unconstrained, + invertConnects: invertConnects, + }; +} +function testTooltips(parsed, entry) { + if (entry === false) { + return; + } + if (entry === true || isValidPartialFormatter(entry)) { + parsed.tooltips = []; + for (var i = 0; i < parsed.handles; i++) { + parsed.tooltips.push(entry); + } + } + else { + entry = asArray(entry); + if (entry.length !== parsed.handles) { + throw new Error("noUiSlider: must pass a formatter for all handles."); + } + entry.forEach(function (formatter) { + if (typeof formatter !== "boolean" && !isValidPartialFormatter(formatter)) { + throw new Error("noUiSlider: 'tooltips' must be passed a formatter or 'false'."); + } + }); + parsed.tooltips = entry; + } +} +function testHandleAttributes(parsed, entry) { + if (entry.length !== parsed.handles) { + throw new Error("noUiSlider: must pass a attributes for all handles."); + } + parsed.handleAttributes = entry; +} +function testAriaFormat(parsed, entry) { + if (!isValidPartialFormatter(entry)) { + throw new Error("noUiSlider: 'ariaFormat' requires 'to' method."); + } + parsed.ariaFormat = entry; +} +function testFormat(parsed, entry) { + if (!isValidFormatter(entry)) { + throw new Error("noUiSlider: 'format' requires 'to' and 'from' methods."); + } + parsed.format = entry; +} +function testKeyboardSupport(parsed, entry) { + if (typeof entry !== "boolean") { + throw new Error("noUiSlider: 'keyboardSupport' option must be a boolean."); + } + parsed.keyboardSupport = entry; +} +function testDocumentElement(parsed, entry) { + // This is an advanced option. Passed values are used without validation. + parsed.documentElement = entry; +} +function testCssPrefix(parsed, entry) { + if (typeof entry !== "string" && entry !== false) { + throw new Error("noUiSlider: 'cssPrefix' must be a string or `false`."); + } + parsed.cssPrefix = entry; +} +function testCssClasses(parsed, entry) { + if (typeof entry !== "object") { + throw new Error("noUiSlider: 'cssClasses' must be an object."); + } + if (typeof parsed.cssPrefix === "string") { + parsed.cssClasses = {}; + Object.keys(entry).forEach(function (key) { + parsed.cssClasses[key] = parsed.cssPrefix + entry[key]; + }); + } + else { + parsed.cssClasses = entry; + } +} +// Test all developer settings and parse to assumption-safe values. +function testOptions(options) { + // To prove a fix for #537, freeze options here. + // If the object is modified, an error will be thrown. + // Object.freeze(options); + var parsed = { + margin: null, + limit: null, + padding: null, + animate: true, + animationDuration: 300, + ariaFormat: defaultFormatter, + format: defaultFormatter, + }; + // Tests are executed in the order they are presented here. + var tests = { + step: { r: false, t: testStep }, + keyboardPageMultiplier: { r: false, t: testKeyboardPageMultiplier }, + keyboardMultiplier: { r: false, t: testKeyboardMultiplier }, + keyboardDefaultStep: { r: false, t: testKeyboardDefaultStep }, + start: { r: true, t: testStart }, + connect: { r: true, t: testConnect }, + direction: { r: true, t: testDirection }, + snap: { r: false, t: testSnap }, + animate: { r: false, t: testAnimate }, + animationDuration: { r: false, t: testAnimationDuration }, + range: { r: true, t: testRange }, + orientation: { r: false, t: testOrientation }, + margin: { r: false, t: testMargin }, + limit: { r: false, t: testLimit }, + padding: { r: false, t: testPadding }, + behaviour: { r: true, t: testBehaviour }, + ariaFormat: { r: false, t: testAriaFormat }, + format: { r: false, t: testFormat }, + tooltips: { r: false, t: testTooltips }, + keyboardSupport: { r: true, t: testKeyboardSupport }, + documentElement: { r: false, t: testDocumentElement }, + cssPrefix: { r: true, t: testCssPrefix }, + cssClasses: { r: true, t: testCssClasses }, + handleAttributes: { r: false, t: testHandleAttributes }, + }; + var defaults = { + connect: false, + direction: "ltr", + behaviour: "tap", + orientation: "horizontal", + keyboardSupport: true, + cssPrefix: "noUi-", + cssClasses: cssClasses, + keyboardPageMultiplier: 5, + keyboardMultiplier: 1, + keyboardDefaultStep: 10, + }; + // AriaFormat defaults to regular format, if any. + if (options.format && !options.ariaFormat) { + options.ariaFormat = options.format; + } + // Run all options through a testing mechanism to ensure correct + // input. It should be noted that options might get modified to + // be handled properly. E.g. wrapping integers in arrays. + Object.keys(tests).forEach(function (name) { + // If the option isn't set, but it is required, throw an error. + if (!isSet(options[name]) && defaults[name] === undefined) { + if (tests[name].r) { + throw new Error("noUiSlider: '" + name + "' is required."); + } + return; + } + tests[name].t(parsed, !isSet(options[name]) ? defaults[name] : options[name]); + }); + // Forward pips options + parsed.pips = options.pips; + // All recent browsers accept unprefixed transform. + // We need -ms- for IE9 and -webkit- for older Android; + // Assume use of -webkit- if unprefixed and -ms- are not supported. + // https://caniuse.com/#feat=transforms2d + var d = document.createElement("div"); + var msPrefix = d.style.msTransform !== undefined; + var noPrefix = d.style.transform !== undefined; + parsed.transformRule = noPrefix ? "transform" : msPrefix ? "msTransform" : "webkitTransform"; + // Pips don't move, so we can place them using left/top. + var styles = [ + ["left", "top"], + ["right", "bottom"], + ]; + parsed.style = styles[parsed.dir][parsed.ort]; + return parsed; +} +//endregion +function scope(target, options, originalOptions) { + var actions = getActions(); + var supportsTouchActionNone = getSupportsTouchActionNone(); + var supportsPassive = supportsTouchActionNone && getSupportsPassive(); + // All variables local to 'scope' are prefixed with 'scope_' + // Slider DOM Nodes + var scope_Target = target; + var scope_Base; + var scope_ConnectBase; + var scope_Handles; + var scope_Connects; + var scope_Pips; + var scope_Tooltips; + // Slider state values + var scope_Spectrum = options.spectrum; + var scope_Values = []; + var scope_Locations = []; + var scope_HandleNumbers = []; + var scope_ActiveHandlesCount = 0; + var scope_Events = {}; + var scope_ConnectsInverted = false; + // Document Nodes + var scope_Document = target.ownerDocument; + var scope_DocumentElement = options.documentElement || scope_Document.documentElement; + var scope_Body = scope_Document.body; + // For horizontal sliders in standard ltr documents, + // make .noUi-origin overflow to the left so the document doesn't scroll. + var scope_DirOffset = scope_Document.dir === "rtl" || options.ort === 1 ? 0 : 100; + // Creates a node, adds it to target, returns the new node. + function addNodeTo(addTarget, className) { + var div = scope_Document.createElement("div"); + if (className) { + addClass(div, className); + } + addTarget.appendChild(div); + return div; + } + // Append a origin to the base + function addOrigin(base, handleNumber) { + var origin = addNodeTo(base, options.cssClasses.origin); + var handle = addNodeTo(origin, options.cssClasses.handle); + addNodeTo(handle, options.cssClasses.touchArea); + handle.setAttribute("data-handle", String(handleNumber)); + if (options.keyboardSupport) { + // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex + // 0 = focusable and reachable + handle.setAttribute("tabindex", "0"); + handle.addEventListener("keydown", function (event) { + return eventKeydown(event, handleNumber); + }); + } + if (options.handleAttributes !== undefined) { + var attributes_1 = options.handleAttributes[handleNumber]; + Object.keys(attributes_1).forEach(function (attribute) { + handle.setAttribute(attribute, attributes_1[attribute]); + }); + } + handle.setAttribute("role", "slider"); + handle.setAttribute("aria-orientation", options.ort ? "vertical" : "horizontal"); + if (handleNumber === 0) { + addClass(handle, options.cssClasses.handleLower); + } + else if (handleNumber === options.handles - 1) { + addClass(handle, options.cssClasses.handleUpper); + } + origin.handle = handle; + return origin; + } + // Insert nodes for connect elements + function addConnect(base, add) { + if (!add) { + return false; + } + return addNodeTo(base, options.cssClasses.connect); + } + // Add handles to the slider base. + function addElements(connectOptions, base) { + scope_ConnectBase = addNodeTo(base, options.cssClasses.connects); + scope_Handles = []; + scope_Connects = []; + scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[0])); + // [::::O====O====O====] + // connectOptions = [0, 1, 1, 1] + for (var i = 0; i < options.handles; i++) { + // Keep a list of all added handles. + scope_Handles.push(addOrigin(base, i)); + scope_HandleNumbers[i] = i; + scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[i + 1])); + } + } + // Initialize a single slider. + function addSlider(addTarget) { + // Apply classes and data to the target. + addClass(addTarget, options.cssClasses.target); + if (options.dir === 0) { + addClass(addTarget, options.cssClasses.ltr); + } + else { + addClass(addTarget, options.cssClasses.rtl); + } + if (options.ort === 0) { + addClass(addTarget, options.cssClasses.horizontal); + } + else { + addClass(addTarget, options.cssClasses.vertical); + } + var textDirection = getComputedStyle(addTarget).direction; + if (textDirection === "rtl") { + addClass(addTarget, options.cssClasses.textDirectionRtl); + } + else { + addClass(addTarget, options.cssClasses.textDirectionLtr); + } + return addNodeTo(addTarget, options.cssClasses.base); + } + function addTooltip(handle, handleNumber) { + if (!options.tooltips || !options.tooltips[handleNumber]) { + return false; + } + return addNodeTo(handle.firstChild, options.cssClasses.tooltip); + } + function isSliderDisabled() { + return scope_Target.hasAttribute("disabled"); + } + // Disable the slider dragging if any handle is disabled + function isHandleDisabled(handleNumber) { + var handleOrigin = scope_Handles[handleNumber]; + return handleOrigin.hasAttribute("disabled"); + } + function disable(handleNumber) { + if (handleNumber !== null && handleNumber !== undefined) { + scope_Handles[handleNumber].setAttribute("disabled", ""); + scope_Handles[handleNumber].handle.removeAttribute("tabindex"); + } + else { + scope_Target.setAttribute("disabled", ""); + scope_Handles.forEach(function (handle) { + handle.handle.removeAttribute("tabindex"); + }); + } + } + function enable(handleNumber) { + if (handleNumber !== null && handleNumber !== undefined) { + scope_Handles[handleNumber].removeAttribute("disabled"); + scope_Handles[handleNumber].handle.setAttribute("tabindex", "0"); + } + else { + scope_Target.removeAttribute("disabled"); + scope_Handles.forEach(function (handle) { + handle.removeAttribute("disabled"); + handle.handle.setAttribute("tabindex", "0"); + }); + } + } + function removeTooltips() { + if (scope_Tooltips) { + removeEvent("update" + INTERNAL_EVENT_NS.tooltips); + scope_Tooltips.forEach(function (tooltip) { + if (tooltip) { + removeElement(tooltip); + } + }); + scope_Tooltips = null; + } + } + // The tooltips option is a shorthand for using the 'update' event. + function tooltips() { + removeTooltips(); + // Tooltips are added with options.tooltips in original order. + scope_Tooltips = scope_Handles.map(addTooltip); + bindEvent("update" + INTERNAL_EVENT_NS.tooltips, function (values, handleNumber, unencoded) { + if (!scope_Tooltips || !options.tooltips) { + return; + } + if (scope_Tooltips[handleNumber] === false) { + return; + } + var formattedValue = values[handleNumber]; + if (options.tooltips[handleNumber] !== true) { + formattedValue = options.tooltips[handleNumber].to(unencoded[handleNumber]); + } + scope_Tooltips[handleNumber].innerHTML = formattedValue; + }); + } + function aria() { + removeEvent("update" + INTERNAL_EVENT_NS.aria); + bindEvent("update" + INTERNAL_EVENT_NS.aria, function (values, handleNumber, unencoded, tap, positions) { + // Update Aria Values for all handles, as a change in one changes min and max values for the next. + scope_HandleNumbers.forEach(function (index) { + var handle = scope_Handles[index]; + var min = checkHandlePosition(scope_Locations, index, 0, true, true, true); + var max = checkHandlePosition(scope_Locations, index, 100, true, true, true); + var now = positions[index]; + // Formatted value for display + var text = String(options.ariaFormat.to(unencoded[index])); + // Map to slider range values + min = scope_Spectrum.fromStepping(min).toFixed(1); + max = scope_Spectrum.fromStepping(max).toFixed(1); + now = scope_Spectrum.fromStepping(now).toFixed(1); + handle.children[0].setAttribute("aria-valuemin", min); + handle.children[0].setAttribute("aria-valuemax", max); + handle.children[0].setAttribute("aria-valuenow", now); + handle.children[0].setAttribute("aria-valuetext", text); + }); + }); + } + function getGroup(pips) { + // Use the range. + if (pips.mode === PipsMode.Range || pips.mode === PipsMode.Steps) { + return scope_Spectrum.xVal; + } + if (pips.mode === PipsMode.Count) { + if (pips.values < 2) { + throw new Error("noUiSlider: 'values' (>= 2) required for mode 'count'."); + } + // Divide 0 - 100 in 'count' parts. + var interval = pips.values - 1; + var spread = 100 / interval; + var values = []; + // List these parts and have them handled as 'positions'. + while (interval--) { + values[interval] = interval * spread; + } + values.push(100); + return mapToRange(values, pips.stepped); + } + if (pips.mode === PipsMode.Positions) { + // Map all percentages to on-range values. + return mapToRange(pips.values, pips.stepped); + } + if (pips.mode === PipsMode.Values) { + // If the value must be stepped, it needs to be converted to a percentage first. + if (pips.stepped) { + return pips.values.map(function (value) { + // Convert to percentage, apply step, return to value. + return scope_Spectrum.fromStepping(scope_Spectrum.getStep(scope_Spectrum.toStepping(value))); + }); + } + // Otherwise, we can simply use the values. + return pips.values; + } + return []; // pips.mode = never + } + function mapToRange(values, stepped) { + return values.map(function (value) { + return scope_Spectrum.fromStepping(stepped ? scope_Spectrum.getStep(value) : value); + }); + } + function generateSpread(pips) { + function safeIncrement(value, increment) { + // Avoid floating point variance by dropping the smallest decimal places. + return Number((value + increment).toFixed(7)); + } + var group = getGroup(pips); + var indexes = {}; + var firstInRange = scope_Spectrum.xVal[0]; + var lastInRange = scope_Spectrum.xVal[scope_Spectrum.xVal.length - 1]; + var ignoreFirst = false; + var ignoreLast = false; + var prevPct = 0; + // Create a copy of the group, sort it and filter away all duplicates. + group = unique(group.slice().sort(function (a, b) { + return a - b; + })); + // Make sure the range starts with the first element. + if (group[0] !== firstInRange) { + group.unshift(firstInRange); + ignoreFirst = true; + } + // Likewise for the last one. + if (group[group.length - 1] !== lastInRange) { + group.push(lastInRange); + ignoreLast = true; + } + group.forEach(function (current, index) { + // Get the current step and the lower + upper positions. + var step; + var i; + var q; + var low = current; + var high = group[index + 1]; + var newPct; + var pctDifference; + var pctPos; + var type; + var steps; + var realSteps; + var stepSize; + var isSteps = pips.mode === PipsMode.Steps; + // When using 'steps' mode, use the provided steps. + // Otherwise, we'll step on to the next subrange. + if (isSteps) { + step = scope_Spectrum.xNumSteps[index]; + } + // Default to a 'full' step. + if (!step) { + step = high - low; + } + // If high is undefined we are at the last subrange. Make sure it iterates once (#1088) + if (high === undefined) { + high = low; + } + // Make sure step isn't 0, which would cause an infinite loop (#654) + step = Math.max(step, 0.0000001); + // Find all steps in the subrange. + for (i = low; i <= high; i = safeIncrement(i, step)) { + // Get the percentage value for the current step, + // calculate the size for the subrange. + newPct = scope_Spectrum.toStepping(i); + pctDifference = newPct - prevPct; + steps = pctDifference / (pips.density || 1); + realSteps = Math.round(steps); + // This ratio represents the amount of percentage-space a point indicates. + // For a density 1 the points/percentage = 1. For density 2, that percentage needs to be re-divided. + // Round the percentage offset to an even number, then divide by two + // to spread the offset on both sides of the range. + stepSize = pctDifference / realSteps; + // Divide all points evenly, adding the correct number to this subrange. + // Run up to <= so that 100% gets a point, event if ignoreLast is set. + for (q = 1; q <= realSteps; q += 1) { + // The ratio between the rounded value and the actual size might be ~1% off. + // Correct the percentage offset by the number of points + // per subrange. density = 1 will result in 100 points on the + // full range, 2 for 50, 4 for 25, etc. + pctPos = prevPct + q * stepSize; + indexes[pctPos.toFixed(5)] = [scope_Spectrum.fromStepping(pctPos), 0]; + } + // Determine the point type. + type = group.indexOf(i) > -1 ? PipsType.LargeValue : isSteps ? PipsType.SmallValue : PipsType.NoValue; + // Enforce the 'ignoreFirst' option by overwriting the type for 0. + if (!index && ignoreFirst && i !== high) { + type = 0; + } + if (!(i === high && ignoreLast)) { + // Mark the 'type' of this point. 0 = plain, 1 = real value, 2 = step value. + indexes[newPct.toFixed(5)] = [i, type]; + } + // Update the percentage count. + prevPct = newPct; + } + }); + return indexes; + } + function addMarking(spread, filterFunc, formatter) { + var _a, _b; + var element = scope_Document.createElement("div"); + var valueSizeClasses = (_a = {}, + _a[PipsType.None] = "", + _a[PipsType.NoValue] = options.cssClasses.valueNormal, + _a[PipsType.LargeValue] = options.cssClasses.valueLarge, + _a[PipsType.SmallValue] = options.cssClasses.valueSub, + _a); + var markerSizeClasses = (_b = {}, + _b[PipsType.None] = "", + _b[PipsType.NoValue] = options.cssClasses.markerNormal, + _b[PipsType.LargeValue] = options.cssClasses.markerLarge, + _b[PipsType.SmallValue] = options.cssClasses.markerSub, + _b); + var valueOrientationClasses = [options.cssClasses.valueHorizontal, options.cssClasses.valueVertical]; + var markerOrientationClasses = [options.cssClasses.markerHorizontal, options.cssClasses.markerVertical]; + addClass(element, options.cssClasses.pips); + addClass(element, options.ort === 0 ? options.cssClasses.pipsHorizontal : options.cssClasses.pipsVertical); + function getClasses(type, source) { + var a = source === options.cssClasses.value; + var orientationClasses = a ? valueOrientationClasses : markerOrientationClasses; + var sizeClasses = a ? valueSizeClasses : markerSizeClasses; + return source + " " + orientationClasses[options.ort] + " " + sizeClasses[type]; + } + function addSpread(offset, value, type) { + // Apply the filter function, if it is set. + type = filterFunc ? filterFunc(value, type) : type; + if (type === PipsType.None) { + return; + } + // Add a marker for every point + var node = addNodeTo(element, false); + node.className = getClasses(type, options.cssClasses.marker); + node.style[options.style] = offset + "%"; + // Values are only appended for points marked '1' or '2'. + if (type > PipsType.NoValue) { + node = addNodeTo(element, false); + node.className = getClasses(type, options.cssClasses.value); + node.setAttribute("data-value", String(value)); + node.style[options.style] = offset + "%"; + node.innerHTML = String(formatter.to(value)); + } + } + // Append all points. + Object.keys(spread).forEach(function (offset) { + addSpread(offset, spread[offset][0], spread[offset][1]); + }); + return element; + } + function removePips() { + if (scope_Pips) { + removeElement(scope_Pips); + scope_Pips = null; + } + } + function pips(pips) { + // Fix #669 + removePips(); + var spread = generateSpread(pips); + var filter = pips.filter; + var format = pips.format || { + to: function (value) { + return String(Math.round(value)); + }, + }; + scope_Pips = scope_Target.appendChild(addMarking(spread, filter, format)); + return scope_Pips; + } + // Shorthand for base dimensions. + function baseSize() { + var rect = scope_Base.getBoundingClientRect(); + var alt = ("offset" + ["Width", "Height"][options.ort]); + return options.ort === 0 ? rect.width || scope_Base[alt] : rect.height || scope_Base[alt]; + } + // Handler for attaching events trough a proxy. + function attachEvent(events, element, callback, data) { + // This function can be used to 'filter' events to the slider. + // element is a node, not a nodeList + var method = function (event) { + var e = fixEvent(event, data.pageOffset, data.target || element); + // fixEvent returns false if this event has a different target + // when handling (multi-) touch events; + if (!e) { + return false; + } + // doNotReject is passed by all end events to make sure released touches + // are not rejected, leaving the slider "stuck" to the cursor; + if (isSliderDisabled() && !data.doNotReject) { + return false; + } + // Stop if an active 'tap' transition is taking place. + if (hasClass(scope_Target, options.cssClasses.tap) && !data.doNotReject) { + return false; + } + // Ignore right or middle clicks on start #454 + if (events === actions.start && e.buttons !== undefined && e.buttons > 1) { + return false; + } + // Ignore right or middle clicks on start #454 + if (data.hover && e.buttons) { + return false; + } + // 'supportsPassive' is only true if a browser also supports touch-action: none in CSS. + // iOS safari does not, so it doesn't get to benefit from passive scrolling. iOS does support + // touch-action: manipulation, but that allows panning, which breaks + // sliders after zooming/on non-responsive pages. + // See: https://bugs.webkit.org/show_bug.cgi?id=133112 + if (!supportsPassive) { + e.preventDefault(); + } + e.calcPoint = e.points[options.ort]; + // Call the event handler with the event [ and additional data ]. + callback(e, data); + return; + }; + var methods = []; + // Bind a closure on the target for every event type. + events.split(" ").forEach(function (eventName) { + element.addEventListener(eventName, method, supportsPassive ? { passive: true } : false); + methods.push([eventName, method]); + }); + return methods; + } + // Provide a clean event with standardized offset values. + function fixEvent(e, pageOffset, eventTarget) { + // Filter the event to register the type, which can be + // touch, mouse or pointer. Offset changes need to be + // made on an event specific basis. + var touch = e.type.indexOf("touch") === 0; + var mouse = e.type.indexOf("mouse") === 0; + var pointer = e.type.indexOf("pointer") === 0; + var x = 0; + var y = 0; + // IE10 implemented pointer events with a prefix; + if (e.type.indexOf("MSPointer") === 0) { + pointer = true; + } + // Erroneous events seem to be passed in occasionally on iOS/iPadOS after user finishes interacting with + // the slider. They appear to be of type MouseEvent, yet they don't have usual properties set. Ignore + // events that have no touches or buttons associated with them. (#1057, #1079, #1095) + if (e.type === "mousedown" && !e.buttons && !e.touches) { + return false; + } + // The only thing one handle should be concerned about is the touches that originated on top of it. + if (touch) { + // Returns true if a touch originated on the target. + var isTouchOnTarget = function (checkTouch) { + var target = checkTouch.target; + return (target === eventTarget || + eventTarget.contains(target) || + (e.composed && e.composedPath().shift() === eventTarget)); + }; + // In the case of touchstart events, we need to make sure there is still no more than one + // touch on the target so we look amongst all touches. + if (e.type === "touchstart") { + var targetTouches = Array.prototype.filter.call(e.touches, isTouchOnTarget); + // Do not support more than one touch per handle. + if (targetTouches.length > 1) { + return false; + } + x = targetTouches[0].pageX; + y = targetTouches[0].pageY; + } + else { + // In the other cases, find on changedTouches is enough. + var targetTouch = Array.prototype.find.call(e.changedTouches, isTouchOnTarget); + // Cancel if the target touch has not moved. + if (!targetTouch) { + return false; + } + x = targetTouch.pageX; + y = targetTouch.pageY; + } + } + pageOffset = pageOffset || getPageOffset(scope_Document); + if (mouse || pointer) { + x = e.clientX + pageOffset.x; + y = e.clientY + pageOffset.y; + } + e.pageOffset = pageOffset; + e.points = [x, y]; + e.cursor = mouse || pointer; // Fix #435 + return e; + } + // Translate a coordinate in the document to a percentage on the slider + function calcPointToPercentage(calcPoint) { + var location = calcPoint - offset(scope_Base, options.ort); + var proposal = (location * 100) / baseSize(); + // Clamp proposal between 0% and 100% + // Out-of-bound coordinates may occur when .noUi-base pseudo-elements + // are used (e.g. contained handles feature) + proposal = limit(proposal); + return options.dir ? 100 - proposal : proposal; + } + // Find handle closest to a certain percentage on the slider + function getClosestHandle(clickedPosition) { + var smallestDifference = 100; + var handleNumber = false; + scope_Handles.forEach(function (handle, index) { + // Disabled handles are ignored + if (isHandleDisabled(index)) { + return; + } + var handlePosition = scope_Locations[index]; + var differenceWithThisHandle = Math.abs(handlePosition - clickedPosition); + // Initial state + var clickAtEdge = differenceWithThisHandle === 100 && smallestDifference === 100; + // Difference with this handle is smaller than the previously checked handle + var isCloser = differenceWithThisHandle < smallestDifference; + var isCloserAfter = differenceWithThisHandle <= smallestDifference && clickedPosition > handlePosition; + if (isCloser || isCloserAfter || clickAtEdge) { + handleNumber = index; + smallestDifference = differenceWithThisHandle; + } + }); + return handleNumber; + } + // Fire 'end' when a mouse or pen leaves the document. + function documentLeave(event, data) { + if (event.type === "mouseout" && + event.target.nodeName === "HTML" && + event.relatedTarget === null) { + eventEnd(event, data); + } + } + // Handle movement on document for handle and range drag. + function eventMove(event, data) { + // Fix #498 + // Check value of .buttons in 'start' to work around a bug in IE10 mobile (data.buttonsProperty). + // https://connect.microsoft.com/IE/feedback/details/927005/mobile-ie10-windows-phone-buttons-property-of-pointermove-event-always-zero + // IE9 has .buttons and .which zero on mousemove. + // Firefox breaks the spec MDN defines. + if (navigator.appVersion.indexOf("MSIE 9") === -1 && event.buttons === 0 && data.buttonsProperty !== 0) { + return eventEnd(event, data); + } + // Check if we are moving up or down + var movement = (options.dir ? -1 : 1) * (event.calcPoint - data.startCalcPoint); + // Convert the movement into a percentage of the slider width/height + var proposal = (movement * 100) / data.baseSize; + moveHandles(movement > 0, proposal, data.locations, data.handleNumbers, data.connect); + } + // Unbind move events on document, call callbacks. + function eventEnd(event, data) { + // The handle is no longer active, so remove the class. + if (data.handle) { + removeClass(data.handle, options.cssClasses.active); + scope_ActiveHandlesCount -= 1; + } + // Unbind the move and end events, which are added on 'start'. + data.listeners.forEach(function (c) { + scope_DocumentElement.removeEventListener(c[0], c[1]); + }); + if (scope_ActiveHandlesCount === 0) { + // Remove dragging class. + removeClass(scope_Target, options.cssClasses.drag); + setZindex(); + // Remove cursor styles and text-selection events bound to the body. + if (event.cursor) { + scope_Body.style.cursor = ""; + scope_Body.removeEventListener("selectstart", preventDefault); + } + } + if (options.events.smoothSteps) { + data.handleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false); + }); + data.handleNumbers.forEach(function (handleNumber) { + fireEvent("update", handleNumber); + }); + } + data.handleNumbers.forEach(function (handleNumber) { + fireEvent("change", handleNumber); + fireEvent("set", handleNumber); + fireEvent("end", handleNumber); + }); + } + // Bind move events on document. + function eventStart(event, data) { + // Ignore event if any handle is disabled + if (data.handleNumbers.some(isHandleDisabled)) { + return; + } + var handle; + if (data.handleNumbers.length === 1) { + var handleOrigin = scope_Handles[data.handleNumbers[0]]; + handle = handleOrigin.children[0]; + scope_ActiveHandlesCount += 1; + // Mark the handle as 'active' so it can be styled. + addClass(handle, options.cssClasses.active); + } + // A drag should never propagate up to the 'tap' event. + event.stopPropagation(); + // Record the event listeners. + var listeners = []; + // Attach the move and end events. + var moveEvent = attachEvent(actions.move, scope_DocumentElement, eventMove, { + // The event target has changed so we need to propagate the original one so that we keep + // relying on it to extract target touches. + target: event.target, + handle: handle, + connect: data.connect, + listeners: listeners, + startCalcPoint: event.calcPoint, + baseSize: baseSize(), + pageOffset: event.pageOffset, + handleNumbers: data.handleNumbers, + buttonsProperty: event.buttons, + locations: scope_Locations.slice(), + }); + var endEvent = attachEvent(actions.end, scope_DocumentElement, eventEnd, { + target: event.target, + handle: handle, + listeners: listeners, + doNotReject: true, + handleNumbers: data.handleNumbers, + }); + var outEvent = attachEvent("mouseout", scope_DocumentElement, documentLeave, { + target: event.target, + handle: handle, + listeners: listeners, + doNotReject: true, + handleNumbers: data.handleNumbers, + }); + // We want to make sure we pushed the listeners in the listener list rather than creating + // a new one as it has already been passed to the event handlers. + listeners.push.apply(listeners, moveEvent.concat(endEvent, outEvent)); + // Text selection isn't an issue on touch devices, + // so adding cursor styles can be skipped. + if (event.cursor) { + // Prevent the 'I' cursor and extend the range-drag cursor. + scope_Body.style.cursor = getComputedStyle(event.target).cursor; + // Mark the target with a dragging state. + if (scope_Handles.length > 1) { + addClass(scope_Target, options.cssClasses.drag); + } + // Prevent text selection when dragging the handles. + // In noUiSlider <= 9.2.0, this was handled by calling preventDefault on mouse/touch start/move, + // which is scroll blocking. The selectstart event is supported by FireFox starting from version 52, + // meaning the only holdout is iOS Safari. This doesn't matter: text selection isn't triggered there. + // The 'cursor' flag is false. + // See: http://caniuse.com/#search=selectstart + scope_Body.addEventListener("selectstart", preventDefault, false); + } + data.handleNumbers.forEach(function (handleNumber) { + fireEvent("start", handleNumber); + }); + } + // Move closest handle to tapped location. + function eventTap(event) { + // The tap event shouldn't propagate up + event.stopPropagation(); + var proposal = calcPointToPercentage(event.calcPoint); + var handleNumber = getClosestHandle(proposal); + // Tackle the case that all handles are 'disabled'. + if (handleNumber === false) { + return; + } + // Flag the slider as it is now in a transitional state. + // Transition takes a configurable amount of ms (default 300). Re-enable the slider after that. + if (!options.events.snap) { + addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration); + } + setHandle(handleNumber, proposal, true, true); + setZindex(); + fireEvent("slide", handleNumber, true); + fireEvent("update", handleNumber, true); + if (!options.events.snap) { + fireEvent("change", handleNumber, true); + fireEvent("set", handleNumber, true); + } + else { + eventStart(event, { handleNumbers: [handleNumber] }); + } + } + // Fires a 'hover' event for a hovered mouse/pen position. + function eventHover(event) { + var proposal = calcPointToPercentage(event.calcPoint); + var to = scope_Spectrum.getStep(proposal); + var value = scope_Spectrum.fromStepping(to); + Object.keys(scope_Events).forEach(function (targetEvent) { + if ("hover" === targetEvent.split(".")[0]) { + scope_Events[targetEvent].forEach(function (callback) { + callback.call(scope_Self, value); + }); + } + }); + } + // Handles keydown on focused handles + // Don't move the document when pressing arrow keys on focused handles + function eventKeydown(event, handleNumber) { + if (isSliderDisabled() || isHandleDisabled(handleNumber)) { + return false; + } + var horizontalKeys = ["Left", "Right"]; + var verticalKeys = ["Down", "Up"]; + var largeStepKeys = ["PageDown", "PageUp"]; + var edgeKeys = ["Home", "End"]; + if (options.dir && !options.ort) { + // On an right-to-left slider, the left and right keys act inverted + horizontalKeys.reverse(); + } + else if (options.ort && !options.dir) { + // On a top-to-bottom slider, the up and down keys act inverted + verticalKeys.reverse(); + largeStepKeys.reverse(); + } + // Strip "Arrow" for IE compatibility. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key + var key = event.key.replace("Arrow", ""); + var isLargeDown = key === largeStepKeys[0]; + var isLargeUp = key === largeStepKeys[1]; + var isDown = key === verticalKeys[0] || key === horizontalKeys[0] || isLargeDown; + var isUp = key === verticalKeys[1] || key === horizontalKeys[1] || isLargeUp; + var isMin = key === edgeKeys[0]; + var isMax = key === edgeKeys[1]; + if (!isDown && !isUp && !isMin && !isMax) { + return true; + } + event.preventDefault(); + var to; + if (isUp || isDown) { + var direction = isDown ? 0 : 1; + var steps = getNextStepsForHandle(handleNumber); + var step = steps[direction]; + // At the edge of a slider, do nothing + if (step === null) { + return false; + } + // No step set, use the default of 10% of the sub-range + if (step === false) { + step = scope_Spectrum.getDefaultStep(scope_Locations[handleNumber], isDown, options.keyboardDefaultStep); + } + if (isLargeUp || isLargeDown) { + step *= options.keyboardPageMultiplier; + } + else { + step *= options.keyboardMultiplier; + } + // Step over zero-length ranges (#948); + step = Math.max(step, 0.0000001); + // Decrement for down steps + step = (isDown ? -1 : 1) * step; + to = scope_Values[handleNumber] + step; + } + else if (isMax) { + // End key + to = options.spectrum.xVal[options.spectrum.xVal.length - 1]; + } + else { + // Home key + to = options.spectrum.xVal[0]; + } + setHandle(handleNumber, scope_Spectrum.toStepping(to), true, true); + fireEvent("slide", handleNumber); + fireEvent("update", handleNumber); + fireEvent("change", handleNumber); + fireEvent("set", handleNumber); + return false; + } + // Attach events to several slider parts. + function bindSliderEvents(behaviour) { + // Attach the standard drag event to the handles. + if (!behaviour.fixed) { + scope_Handles.forEach(function (handle, index) { + // These events are only bound to the visual handle + // element, not the 'real' origin element. + attachEvent(actions.start, handle.children[0], eventStart, { + handleNumbers: [index], + }); + }); + } + // Attach the tap event to the slider base. + if (behaviour.tap) { + attachEvent(actions.start, scope_Base, eventTap, {}); + } + // Fire hover events + if (behaviour.hover) { + attachEvent(actions.move, scope_Base, eventHover, { + hover: true, + }); + } + // Make the range draggable. + if (behaviour.drag) { + scope_Connects.forEach(function (connect, index) { + if (connect === false || index === 0 || index === scope_Connects.length - 1) { + return; + } + var handleBefore = scope_Handles[index - 1]; + var handleAfter = scope_Handles[index]; + var eventHolders = [connect]; + var handlesToDrag = [handleBefore, handleAfter]; + var handleNumbersToDrag = [index - 1, index]; + addClass(connect, options.cssClasses.draggable); + // When the range is fixed, the entire range can + // be dragged by the handles. The handle in the first + // origin will propagate the start event upward, + // but it needs to be bound manually on the other. + if (behaviour.fixed) { + eventHolders.push(handleBefore.children[0]); + eventHolders.push(handleAfter.children[0]); + } + if (behaviour.dragAll) { + handlesToDrag = scope_Handles; + handleNumbersToDrag = scope_HandleNumbers; + } + eventHolders.forEach(function (eventHolder) { + attachEvent(actions.start, eventHolder, eventStart, { + handles: handlesToDrag, + handleNumbers: handleNumbersToDrag, + connect: connect, + }); + }); + }); + } + } + // Attach an event to this slider, possibly including a namespace + function bindEvent(namespacedEvent, callback) { + scope_Events[namespacedEvent] = scope_Events[namespacedEvent] || []; + scope_Events[namespacedEvent].push(callback); + // If the event bound is 'update,' fire it immediately for all handles. + if (namespacedEvent.split(".")[0] === "update") { + scope_Handles.forEach(function (a, index) { + fireEvent("update", index); + }); + } + } + function isInternalNamespace(namespace) { + return namespace === INTERNAL_EVENT_NS.aria || namespace === INTERNAL_EVENT_NS.tooltips; + } + // Undo attachment of event + function removeEvent(namespacedEvent) { + var event = namespacedEvent && namespacedEvent.split(".")[0]; + var namespace = event ? namespacedEvent.substring(event.length) : namespacedEvent; + Object.keys(scope_Events).forEach(function (bind) { + var tEvent = bind.split(".")[0]; + var tNamespace = bind.substring(tEvent.length); + if ((!event || event === tEvent) && (!namespace || namespace === tNamespace)) { + // only delete protected internal event if intentional + if (!isInternalNamespace(tNamespace) || namespace === tNamespace) { + delete scope_Events[bind]; + } + } + }); + } + // External event handling + function fireEvent(eventName, handleNumber, tap) { + Object.keys(scope_Events).forEach(function (targetEvent) { + var eventType = targetEvent.split(".")[0]; + if (eventName === eventType) { + scope_Events[targetEvent].forEach(function (callback) { + callback.call( + // Use the slider public API as the scope ('this') + scope_Self, + // Return values as array, so arg_1[arg_2] is always valid. + scope_Values.map(options.format.to), + // Handle index, 0 or 1 + handleNumber, + // Un-formatted slider values + scope_Values.slice(), + // Event is fired by tap, true or false + tap || false, + // Left offset of the handle, in relation to the slider + scope_Locations.slice(), + // add the slider public API to an accessible parameter when this is unavailable + scope_Self); + }); + } + }); + } + // Split out the handle positioning logic so the Move event can use it, too + function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) { + var distance; + // For sliders with multiple handles, limit movement to the other handle. + // Apply the margin option by adding it to the handle positions. + if (scope_Handles.length > 1 && !options.events.unconstrained) { + if (lookBackward && handleNumber > 0) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber - 1], options.margin, false); + to = Math.max(to, distance); + } + if (lookForward && handleNumber < scope_Handles.length - 1) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber + 1], options.margin, true); + to = Math.min(to, distance); + } + } + // The limit option has the opposite effect, limiting handles to a + // maximum distance from another. Limit must be > 0, as otherwise + // handles would be unmovable. + if (scope_Handles.length > 1 && options.limit) { + if (lookBackward && handleNumber > 0) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber - 1], options.limit, false); + to = Math.min(to, distance); + } + if (lookForward && handleNumber < scope_Handles.length - 1) { + distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber + 1], options.limit, true); + to = Math.max(to, distance); + } + } + // The padding option keeps the handles a certain distance from the + // edges of the slider. Padding must be > 0. + if (options.padding) { + if (handleNumber === 0) { + distance = scope_Spectrum.getAbsoluteDistance(0, options.padding[0], false); + to = Math.max(to, distance); + } + if (handleNumber === scope_Handles.length - 1) { + distance = scope_Spectrum.getAbsoluteDistance(100, options.padding[1], true); + to = Math.min(to, distance); + } + } + if (!smoothSteps) { + to = scope_Spectrum.getStep(to); + } + // Limit percentage to the 0 - 100 range + to = limit(to); + // Return false if handle can't move + if (to === reference[handleNumber] && !getValue) { + return false; + } + return to; + } + // Uses slider orientation to create CSS rules. a = base value; + function inRuleOrder(v, a) { + var o = options.ort; + return (o ? a : v) + ", " + (o ? v : a); + } + // Moves handle(s) by a percentage + // (bool, % to move, [% where handle started, ...], [index in scope_Handles, ...]) + function moveHandles(upward, proposal, locations, handleNumbers, connect) { + var proposals = locations.slice(); + // Store first handle now, so we still have it in case handleNumbers is reversed + var firstHandle = handleNumbers[0]; + var smoothSteps = options.events.smoothSteps; + var b = [!upward, upward]; + var f = [upward, !upward]; + // Copy handleNumbers so we don't change the dataset + handleNumbers = handleNumbers.slice(); + // Check to see which handle is 'leading'. + // If that one can't move the second can't either. + if (upward) { + handleNumbers.reverse(); + } + // Step 1: get the maximum percentage that any of the handles can move + if (handleNumbers.length > 1) { + handleNumbers.forEach(function (handleNumber, o) { + var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps); + // Stop if one of the handles can't move. + if (to === false) { + proposal = 0; + } + else { + proposal = to - proposals[handleNumber]; + proposals[handleNumber] = to; + } + }); + } + // If using one handle, check backward AND forward + else { + b = f = [true]; + } + var state = false; + // Step 2: Try to set the handles with the found percentage + handleNumbers.forEach(function (handleNumber, o) { + state = + setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state; + }); + // Step 3: If a handle moved, fire events + if (state) { + handleNumbers.forEach(function (handleNumber) { + fireEvent("update", handleNumber); + fireEvent("slide", handleNumber); + }); + // If target is a connect, then fire drag event + if (connect != undefined) { + fireEvent("drag", firstHandle); + } + } + } + // Takes a base value and an offset. This offset is used for the connect bar size. + // In the initial design for this feature, the origin element was 1% wide. + // Unfortunately, a rounding bug in Chrome makes it impossible to implement this feature + // in this manner: https://bugs.chromium.org/p/chromium/issues/detail?id=798223 + function transformDirection(a, b) { + return options.dir ? 100 - a - b : a; + } + // Updates scope_Locations and scope_Values, updates visual state + function updateHandlePosition(handleNumber, to) { + // Update locations. + scope_Locations[handleNumber] = to; + // Convert the value to the slider stepping/range. + scope_Values[handleNumber] = scope_Spectrum.fromStepping(to); + var translation = transformDirection(to, 0) - scope_DirOffset; + var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")"; + scope_Handles[handleNumber].style[options.transformRule] = translateRule; + // sanity check for at least 2 handles (e.g. during setup) + if (options.events.invertConnects && scope_Locations.length > 1) { + // check if handles passed each other, but don't match the ConnectsInverted state + var handlesAreInOrder = scope_Locations.every(function (position, index, locations) { + return index === 0 || position >= locations[index - 1]; + }); + if (scope_ConnectsInverted !== !handlesAreInOrder) { + // invert connects when handles pass each other + invertConnects(); + // invertConnects already updates all connect elements + return; + } + } + updateConnect(handleNumber); + updateConnect(handleNumber + 1); + if (scope_ConnectsInverted) { + // When connects are inverted, we also have to update adjacent connects + updateConnect(handleNumber - 1); + updateConnect(handleNumber + 2); + } + } + // Handles before the slider middle are stacked later = higher, + // Handles after the middle later is lower + // [[7] [8] .......... | .......... [5] [4] + function setZindex() { + scope_HandleNumbers.forEach(function (handleNumber) { + var dir = scope_Locations[handleNumber] > 50 ? -1 : 1; + var zIndex = 3 + (scope_Handles.length + dir * handleNumber); + scope_Handles[handleNumber].style.zIndex = String(zIndex); + }); + } + // Test suggested values and apply margin, step. + // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436) + function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) { + if (!exactInput) { + to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps); + } + if (to === false) { + return false; + } + updateHandlePosition(handleNumber, to); + return true; + } + // Updates style attribute for connect nodes + function updateConnect(index) { + // Skip connects set to false + if (!scope_Connects[index]) { + return; + } + // Create a copy of locations, so we can sort them for the local scope logic + var locations = scope_Locations.slice(); + if (scope_ConnectsInverted) { + locations.sort(function (a, b) { + return a - b; + }); + } + var l = 0; + var h = 100; + if (index !== 0) { + l = locations[index - 1]; + } + if (index !== scope_Connects.length - 1) { + h = locations[index]; + } + // We use two rules: + // 'translate' to change the left/top offset; + // 'scale' to change the width of the element; + // As the element has a width of 100%, a translation of 100% is equal to 100% of the parent (.noUi-base) + var connectWidth = h - l; + var translateRule = "translate(" + inRuleOrder(transformDirection(l, connectWidth) + "%", "0") + ")"; + var scaleRule = "scale(" + inRuleOrder(connectWidth / 100, "1") + ")"; + scope_Connects[index].style[options.transformRule] = + translateRule + " " + scaleRule; + } + // Parses value passed to .set method. Returns current value if not parse-able. + function resolveToValue(to, handleNumber) { + // Setting with null indicates an 'ignore'. + // Inputting 'false' is invalid. + if (to === null || to === false || to === undefined) { + return scope_Locations[handleNumber]; + } + // If a formatted number was passed, attempt to decode it. + if (typeof to === "number") { + to = String(to); + } + to = options.format.from(to); + if (to !== false) { + to = scope_Spectrum.toStepping(to); + } + // If parsing the number failed, use the current value. + if (to === false || isNaN(to)) { + return scope_Locations[handleNumber]; + } + return to; + } + // Set the slider value. + function valueSet(input, fireSetEvent, exactInput) { + var values = asArray(input); + var isInit = scope_Locations[0] === undefined; + // Event fires by default + fireSetEvent = fireSetEvent === undefined ? true : fireSetEvent; + // Animation is optional. + // Make sure the initial values were set before using animated placement. + if (options.animate && !isInit) { + addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration); + } + // First pass, without lookAhead but with lookBackward. Values are set from left to right. + scope_HandleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, resolveToValue(values[handleNumber], handleNumber), true, false, exactInput); + }); + var i = scope_HandleNumbers.length === 1 ? 0 : 1; + // Spread handles evenly across the slider if the range has no size (min=max) + if (isInit && scope_Spectrum.hasNoSize()) { + exactInput = true; + scope_Locations[0] = 0; + if (scope_HandleNumbers.length > 1) { + var space_1 = 100 / (scope_HandleNumbers.length - 1); + scope_HandleNumbers.forEach(function (handleNumber) { + scope_Locations[handleNumber] = handleNumber * space_1; + }); + } + } + // Secondary passes. Now that all base values are set, apply constraints. + // Iterate all handles to ensure constraints are applied for the entire slider (Issue #1009) + for (; i < scope_HandleNumbers.length; ++i) { + scope_HandleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, scope_Locations[handleNumber], true, true, exactInput); + }); + } + setZindex(); + scope_HandleNumbers.forEach(function (handleNumber) { + fireEvent("update", handleNumber); + // Fire the event only for handles that received a new value, as per #579 + if (values[handleNumber] !== null && fireSetEvent) { + fireEvent("set", handleNumber); + } + }); + } + // Reset slider to initial values + function valueReset(fireSetEvent) { + valueSet(options.start, fireSetEvent); + } + // Set value for a single handle + function valueSetHandle(handleNumber, value, fireSetEvent, exactInput) { + // Ensure numeric input + handleNumber = Number(handleNumber); + if (!(handleNumber >= 0 && handleNumber < scope_HandleNumbers.length)) { + throw new Error("noUiSlider: invalid handle number, got: " + handleNumber); + } + // Look both backward and forward, since we don't want this handle to "push" other handles (#960); + // The exactInput argument can be used to ignore slider stepping (#436) + setHandle(handleNumber, resolveToValue(value, handleNumber), true, true, exactInput); + fireEvent("update", handleNumber); + if (fireSetEvent) { + fireEvent("set", handleNumber); + } + } + // Get the slider value. + function valueGet(unencoded) { + if (unencoded === void 0) { unencoded = false; } + if (unencoded) { + // return a copy of the raw values + return scope_Values.length === 1 ? scope_Values[0] : scope_Values.slice(0); + } + var values = scope_Values.map(options.format.to); + // If only one handle is used, return a single value. + if (values.length === 1) { + return values[0]; + } + return values; + } + // Removes classes from the root and empties it. + function destroy() { + // remove protected internal listeners + removeEvent(INTERNAL_EVENT_NS.aria); + removeEvent(INTERNAL_EVENT_NS.tooltips); + Object.keys(options.cssClasses).forEach(function (key) { + removeClass(scope_Target, options.cssClasses[key]); + }); + while (scope_Target.firstChild) { + scope_Target.removeChild(scope_Target.firstChild); + } + delete scope_Target.noUiSlider; + } + function getNextStepsForHandle(handleNumber) { + var location = scope_Locations[handleNumber]; + var nearbySteps = scope_Spectrum.getNearbySteps(location); + var value = scope_Values[handleNumber]; + var increment = nearbySteps.thisStep.step; + var decrement = null; + // If snapped, directly use defined step value + if (options.snap) { + return [ + value - nearbySteps.stepBefore.startValue || null, + nearbySteps.stepAfter.startValue - value || null, + ]; + } + // If the next value in this step moves into the next step, + // the increment is the start of the next step - the current value + if (increment !== false) { + if (value + increment > nearbySteps.stepAfter.startValue) { + increment = nearbySteps.stepAfter.startValue - value; + } + } + // If the value is beyond the starting point + if (value > nearbySteps.thisStep.startValue) { + decrement = nearbySteps.thisStep.step; + } + else if (nearbySteps.stepBefore.step === false) { + decrement = false; + } + // If a handle is at the start of a step, it always steps back into the previous step first + else { + decrement = value - nearbySteps.stepBefore.highestStep; + } + // Now, if at the slider edges, there is no in/decrement + if (location === 100) { + increment = null; + } + else if (location === 0) { + decrement = null; + } + // As per #391, the comparison for the decrement step can have some rounding issues. + var stepDecimals = scope_Spectrum.countStepDecimals(); + // Round per #391 + if (increment !== null && increment !== false) { + increment = Number(increment.toFixed(stepDecimals)); + } + if (decrement !== null && decrement !== false) { + decrement = Number(decrement.toFixed(stepDecimals)); + } + return [decrement, increment]; + } + // Get the current step size for the slider. + function getNextSteps() { + return scope_HandleNumbers.map(getNextStepsForHandle); + } + // Updatable: margin, limit, padding, step, range, animate, snap + function updateOptions(optionsToUpdate, fireSetEvent) { + // Spectrum is created using the range, snap, direction and step options. + // 'snap' and 'step' can be updated. + // If 'snap' and 'step' are not passed, they should remain unchanged. + var v = valueGet(); + var updateAble = [ + "margin", + "limit", + "padding", + "range", + "animate", + "snap", + "step", + "format", + "pips", + "tooltips", + "connect", + ]; + // Only change options that we're actually passed to update. + updateAble.forEach(function (name) { + // Check for undefined. null removes the value. + if (optionsToUpdate[name] !== undefined) { + originalOptions[name] = optionsToUpdate[name]; + } + }); + var newOptions = testOptions(originalOptions); + // Load new options into the slider state + updateAble.forEach(function (name) { + if (optionsToUpdate[name] !== undefined) { + options[name] = newOptions[name]; + } + }); + scope_Spectrum = newOptions.spectrum; + // Limit, margin and padding depend on the spectrum but are stored outside of it. (#677) + options.margin = newOptions.margin; + options.limit = newOptions.limit; + options.padding = newOptions.padding; + // Update pips, removes existing. + if (options.pips) { + pips(options.pips); + } + else { + removePips(); + } + // Update tooltips, removes existing. + if (options.tooltips) { + tooltips(); + } + else { + removeTooltips(); + } + // Invalidate the current positioning so valueSet forces an update. + scope_Locations = []; + valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent); + // Update connects only if it was set + if (optionsToUpdate.connect) { + updateConnectOption(); + } + } + function updateConnectOption() { + // IE supported way of removing children including event handlers + while (scope_ConnectBase.firstChild) { + scope_ConnectBase.removeChild(scope_ConnectBase.firstChild); + } + // Adding new connects according to the new connect options + for (var i = 0; i <= options.handles; i++) { + scope_Connects[i] = addConnect(scope_ConnectBase, options.connect[i]); + updateConnect(i); + } + // re-adding drag events for the new connect elements + // to ignore the other events we have to negate the 'if (!behaviour.fixed)' check + bindSliderEvents({ drag: options.events.drag, fixed: true }); + } + // Invert options for connect handles + function invertConnects() { + scope_ConnectsInverted = !scope_ConnectsInverted; + testConnect(options, + // inverse the connect boolean array + options.connect.map(function (b) { return !b; })); + updateConnectOption(); + } + // Initialization steps + function setupSlider() { + // Create the base element, initialize HTML and set classes. + // Add handles and connect elements. + scope_Base = addSlider(scope_Target); + addElements(options.connect, scope_Base); + // Attach user events. + bindSliderEvents(options.events); + // Use the public value method to set the start values. + valueSet(options.start); + if (options.pips) { + pips(options.pips); + } + if (options.tooltips) { + tooltips(); + } + aria(); + } + setupSlider(); + var scope_Self = { + destroy: destroy, + steps: getNextSteps, + on: bindEvent, + off: removeEvent, + get: valueGet, + set: valueSet, + setHandle: valueSetHandle, + reset: valueReset, + disable: disable, + enable: enable, + // Exposed for unit testing, don't use this in your application. + __moveHandles: function (upward, proposal, handleNumbers) { + moveHandles(upward, proposal, scope_Locations, handleNumbers); + }, + options: originalOptions, + updateOptions: updateOptions, + target: scope_Target, + removePips: removePips, + removeTooltips: removeTooltips, + getPositions: function () { + return scope_Locations.slice(); + }, + getTooltips: function () { + return scope_Tooltips; + }, + getOrigins: function () { + return scope_Handles; + }, + pips: pips, // Issue #594 + }; + return scope_Self; +} +// Run the standard initializer +function initialize(target, originalOptions) { + if (!target || !target.nodeName) { + throw new Error("noUiSlider: create requires a single element, got: " + target); + } + // Throw an error if the slider was already initialized. + if (target.noUiSlider) { + throw new Error("noUiSlider: Slider was already initialized."); + } + // Test the options and create the slider environment; + var options = testOptions(originalOptions); + var api = scope(target, options, originalOptions); + target.noUiSlider = api; + return api; +} +export { initialize as create }; +export { cssClasses }; +export default { + // Exposed for unit testing, don't use this in your application. + __spectrum: Spectrum, + // A reference to the default classes, allows global changes. + // Use the cssClasses option for changes to one slider. + cssClasses: cssClasses, + create: initialize, +}; diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index 8daf4a966fb..6321f3df1f2 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1349,6 +1349,65 @@ button.btn.btn-view-watch:hover { } /* --- Style for --- */ +/* +++ Volume сontrol +++ */ +.audio-control-mute { + position: relative; + cursor: pointer; + color: var(--colorBackgroundButtons); + /*color: #DDD; + float: right; + right: 3px; + margin: 5px;*/ +} + +.volumeSlider { + position: relative; + width: 80px; + display: inline-block; + margin: 0 10px 0 10px; + /*float: right; + right: 15px; + margin-top: 10px;*/ +} + +.noUi-target { + /*border: 1px solid var(--scrollbarBG); + box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb;*/ +} + +.noUi-base, .noUi-touch-area { + cursor: pointer; +} + +.noUi-base .noUi-connect { + background: var(--colorBackgroundButtons); +} + +.noUi-mute .noUi-connect { + background: #ccc; +} + +.noUi-round { + height: 10px; +} + +.noUi-handle:before, .noUi-handle:after { + height: 5px; +} + +.noUi-round .noUi-connects { + /*background: #c0392b;*/ +} + +.noUi-round .noUi-handle { + height: 18px; + width: 18px; + top: -5px; + right: -9px; /* half the width */ + border-radius: 9px; +} +/* --- Volume сontrol --- */ + video-stream { position: relative; } diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php index 9a0a8cab44d..bc3e8f49935 100644 --- a/web/skins/classic/includes/functions.php +++ b/web/skins/classic/includes/functions.php @@ -99,6 +99,7 @@ function xhtmlHeadersStart($file, $title) { { + return parseInt(o["id"]) === mid; + }); + currentMonitor.controlMute('switch'); + } + }); + }); } $j( window ).on("load", initPageGeneral); diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js index 4841c61b221..2a6d2c8c0cd 100644 --- a/web/skins/classic/views/js/watch.js +++ b/web/skins/classic/views/js/watch.js @@ -831,8 +831,6 @@ function handleMouseLeave(event) { function streamStart(monitor = null) { monitorStream = new MonitorStream(monitor ? monitor : monitorData[monIdx]); - monitorStream.setup_volume(document.getElementById('volume')); - monitorStream.setup_mute(document.getElementById('mute')); monitorStream.setPlayer($j('#player').val()); monitorStream.setBottomElement(document.getElementById('dvrControls')); diff --git a/web/skins/classic/views/watch.php b/web/skins/classic/views/watch.php index 7d8912f1bbb..af30906afc3 100644 --- a/web/skins/classic/views/watch.php +++ b/web/skins/classic/views/watch.php @@ -453,14 +453,11 @@ $muted = (isset($_REQUEST['muted']) and $_REQUEST['muted'] == 'true') ? true : ((isset($_COOKIE['zmWatchMuted']) and $_COOKIE['zmWatchMuted'] == 'true') ? true : false); ZM\Debug("Muted $muted"); - ?> - - - - + +
+ +