123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061 |
- "use strict";
- var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
- var windowIsDefined = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object";
- (function (factory) {
- if (typeof define === "function" && define.amd) {
- define(["jquery"], factory);
- } else if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === "object" && module.exports) {
- var jQuery;
- try {
- jQuery = require("jquery");
- } catch (err) {
- jQuery = null;
- }
- module.exports = factory(jQuery);
- } else if (window) {
- window.Slider = factory(window.jQuery);
- }
- })(function ($) {
-
- var NAMESPACE_MAIN = 'slider';
- var NAMESPACE_ALTERNATE = 'bootstrapSlider';
-
- if (windowIsDefined && !window.console) {
- window.console = {};
- }
- if (windowIsDefined && !window.console.log) {
- window.console.log = function () {};
- }
- if (windowIsDefined && !window.console.warn) {
- window.console.warn = function () {};
- }
-
- var Slider;
- (function ($) {
- 'use strict';
-
- var slice = Array.prototype.slice;
- function noop() {}
-
- function defineBridget($) {
-
- if (!$) {
- return;
- }
-
-
- function addOptionMethod(PluginClass) {
-
- if (PluginClass.prototype.option) {
- return;
- }
-
- PluginClass.prototype.option = function (opts) {
-
- if (!$.isPlainObject(opts)) {
- return;
- }
- this.options = $.extend(true, this.options, opts);
- };
- }
-
-
-
- var logError = typeof console === 'undefined' ? noop : function (message) {
- console.error(message);
- };
-
- function bridge(namespace, PluginClass) {
-
- $.fn[namespace] = function (options) {
- if (typeof options === 'string') {
-
-
- var args = slice.call(arguments, 1);
- for (var i = 0, len = this.length; i < len; i++) {
- var elem = this[i];
- var instance = $.data(elem, namespace);
- if (!instance) {
- logError("cannot call methods on " + namespace + " prior to initialization; " + "attempted to call '" + options + "'");
- continue;
- }
- if (!$.isFunction(instance[options]) || options.charAt(0) === '_') {
- logError("no such method '" + options + "' for " + namespace + " instance");
- continue;
- }
-
- var returnValue = instance[options].apply(instance, args);
-
- if (returnValue !== undefined && returnValue !== instance) {
- return returnValue;
- }
- }
-
- return this;
- } else {
- var objects = this.map(function () {
- var instance = $.data(this, namespace);
- if (instance) {
-
- instance.option(options);
- instance._init();
- } else {
-
- instance = new PluginClass(this, options);
- $.data(this, namespace, instance);
- }
- return $(this);
- });
- if (objects.length === 1) {
- return objects[0];
- }
- return objects;
- }
- };
- }
-
-
- $.bridget = function (namespace, PluginClass) {
- addOptionMethod(PluginClass);
- bridge(namespace, PluginClass);
- };
- return $.bridget;
- }
-
- defineBridget($);
- })($);
-
- (function ($) {
- var autoRegisterNamespace = void 0;
- var ErrorMsgs = {
- formatInvalidInputErrorMsg: function formatInvalidInputErrorMsg(input) {
- return "Invalid input value '" + input + "' passed in";
- },
- callingContextNotSliderInstance: "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method"
- };
- var SliderScale = {
- linear: {
- getValue: function getValue(value, options) {
- if (value < options.min) {
- return options.min;
- } else if (value > options.max) {
- return options.max;
- } else {
- return value;
- }
- },
- toValue: function toValue(percentage) {
- var rawValue = percentage / 100 * (this.options.max - this.options.min);
- var shouldAdjustWithBase = true;
- if (this.options.ticks_positions.length > 0) {
- var minv,
- maxv,
- minp,
- maxp = 0;
- for (var i = 1; i < this.options.ticks_positions.length; i++) {
- if (percentage <= this.options.ticks_positions[i]) {
- minv = this.options.ticks[i - 1];
- minp = this.options.ticks_positions[i - 1];
- maxv = this.options.ticks[i];
- maxp = this.options.ticks_positions[i];
- break;
- }
- }
- var partialPercentage = (percentage - minp) / (maxp - minp);
- rawValue = minv + partialPercentage * (maxv - minv);
- shouldAdjustWithBase = false;
- }
- var adjustment = shouldAdjustWithBase ? this.options.min : 0;
- var value = adjustment + Math.round(rawValue / this.options.step) * this.options.step;
- return SliderScale.linear.getValue(value, this.options);
- },
- toPercentage: function toPercentage(value) {
- if (this.options.max === this.options.min) {
- return 0;
- }
- if (this.options.ticks_positions.length > 0) {
- var minv,
- maxv,
- minp,
- maxp = 0;
- for (var i = 0; i < this.options.ticks.length; i++) {
- if (value <= this.options.ticks[i]) {
- minv = i > 0 ? this.options.ticks[i - 1] : 0;
- minp = i > 0 ? this.options.ticks_positions[i - 1] : 0;
- maxv = this.options.ticks[i];
- maxp = this.options.ticks_positions[i];
- break;
- }
- }
- if (i > 0) {
- var partialPercentage = (value - minv) / (maxv - minv);
- return minp + partialPercentage * (maxp - minp);
- }
- }
- return 100 * (value - this.options.min) / (this.options.max - this.options.min);
- }
- },
- logarithmic: {
-
- toValue: function toValue(percentage) {
- var offset = 1 - this.options.min;
- var min = Math.log(this.options.min + offset);
- var max = Math.log(this.options.max + offset);
- var value = Math.exp(min + (max - min) * percentage / 100) - offset;
- if (Math.round(value) === max) {
- return max;
- }
- value = this.options.min + Math.round((value - this.options.min) / this.options.step) * this.options.step;
-
- return SliderScale.linear.getValue(value, this.options);
- },
- toPercentage: function toPercentage(value) {
- if (this.options.max === this.options.min) {
- return 0;
- } else {
- var offset = 1 - this.options.min;
- var max = Math.log(this.options.max + offset);
- var min = Math.log(this.options.min + offset);
- var v = Math.log(value + offset);
- return 100 * (v - min) / (max - min);
- }
- }
- }
- };
-
- Slider = function Slider(element, options) {
- createNewSlider.call(this, element, options);
- return this;
- };
- function createNewSlider(element, options) {
-
- this._state = {
- value: null,
- enabled: null,
- offset: null,
- size: null,
- percentage: null,
- inDrag: false,
- over: false,
- tickIndex: null
- };
-
- this.ticksCallbackMap = {};
- this.handleCallbackMap = {};
- if (typeof element === "string") {
- this.element = document.querySelector(element);
- } else if (element instanceof HTMLElement) {
- this.element = element;
- }
-
- options = options ? options : {};
- var optionTypes = Object.keys(this.defaultOptions);
- var isMinSet = options.hasOwnProperty('min');
- var isMaxSet = options.hasOwnProperty('max');
- for (var i = 0; i < optionTypes.length; i++) {
- var optName = optionTypes[i];
-
- var val = options[optName];
-
- val = typeof val !== 'undefined' ? val : getDataAttrib(this.element, optName);
-
- val = val !== null ? val : this.defaultOptions[optName];
-
- if (!this.options) {
- this.options = {};
- }
- this.options[optName] = val;
- }
- this.ticksAreValid = Array.isArray(this.options.ticks) && this.options.ticks.length > 0;
-
- if (!this.ticksAreValid) {
- this.options.lock_to_ticks = false;
- }
-
- if (this.options.rtl === 'auto') {
- var computedStyle = window.getComputedStyle(this.element);
- if (computedStyle != null) {
- this.options.rtl = computedStyle.direction === 'rtl';
- } else {
-
-
-
- this.options.rtl = this.element.style.direction === 'rtl';
- }
- }
-
- if (this.options.orientation === "vertical" && (this.options.tooltip_position === "top" || this.options.tooltip_position === "bottom")) {
- if (this.options.rtl) {
- this.options.tooltip_position = "left";
- } else {
- this.options.tooltip_position = "right";
- }
- } else if (this.options.orientation === "horizontal" && (this.options.tooltip_position === "left" || this.options.tooltip_position === "right")) {
- this.options.tooltip_position = "top";
- }
- function getDataAttrib(element, optName) {
- var dataName = "data-slider-" + optName.replace(/_/g, '-');
- var dataValString = element.getAttribute(dataName);
- try {
- return JSON.parse(dataValString);
- } catch (err) {
- return dataValString;
- }
- }
-
- var origWidth = this.element.style.width;
- var updateSlider = false;
- var parent = this.element.parentNode;
- var sliderTrackSelection;
- var sliderTrackLow, sliderTrackHigh;
- var sliderMinHandle;
- var sliderMaxHandle;
- if (this.sliderElem) {
- updateSlider = true;
- } else {
-
- this.sliderElem = document.createElement("div");
- this.sliderElem.className = "slider";
-
- var sliderTrack = document.createElement("div");
- sliderTrack.className = "slider-track";
- sliderTrackLow = document.createElement("div");
- sliderTrackLow.className = "slider-track-low";
- sliderTrackSelection = document.createElement("div");
- sliderTrackSelection.className = "slider-selection";
- sliderTrackHigh = document.createElement("div");
- sliderTrackHigh.className = "slider-track-high";
- sliderMinHandle = document.createElement("div");
- sliderMinHandle.className = "slider-handle min-slider-handle";
- sliderMinHandle.setAttribute('role', 'slider');
- sliderMinHandle.setAttribute('aria-valuemin', this.options.min);
- sliderMinHandle.setAttribute('aria-valuemax', this.options.max);
- sliderMaxHandle = document.createElement("div");
- sliderMaxHandle.className = "slider-handle max-slider-handle";
- sliderMaxHandle.setAttribute('role', 'slider');
- sliderMaxHandle.setAttribute('aria-valuemin', this.options.min);
- sliderMaxHandle.setAttribute('aria-valuemax', this.options.max);
- sliderTrack.appendChild(sliderTrackLow);
- sliderTrack.appendChild(sliderTrackSelection);
- sliderTrack.appendChild(sliderTrackHigh);
-
- this.rangeHighlightElements = [];
- var rangeHighlightsOpts = this.options.rangeHighlights;
- if (Array.isArray(rangeHighlightsOpts) && rangeHighlightsOpts.length > 0) {
- for (var j = 0; j < rangeHighlightsOpts.length; j++) {
- var rangeHighlightElement = document.createElement("div");
- var customClassString = rangeHighlightsOpts[j].class || "";
- rangeHighlightElement.className = "slider-rangeHighlight slider-selection " + customClassString;
- this.rangeHighlightElements.push(rangeHighlightElement);
- sliderTrack.appendChild(rangeHighlightElement);
- }
- }
-
- var isLabelledbyArray = Array.isArray(this.options.labelledby);
- if (isLabelledbyArray && this.options.labelledby[0]) {
- sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby[0]);
- }
- if (isLabelledbyArray && this.options.labelledby[1]) {
- sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby[1]);
- }
- if (!isLabelledbyArray && this.options.labelledby) {
- sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby);
- sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby);
- }
-
- this.ticks = [];
- if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
- this.ticksContainer = document.createElement('div');
- this.ticksContainer.className = 'slider-tick-container';
- for (i = 0; i < this.options.ticks.length; i++) {
- var tick = document.createElement('div');
- tick.className = 'slider-tick';
- if (this.options.ticks_tooltip) {
- var tickListenerReference = this._addTickListener();
- var enterCallback = tickListenerReference.addMouseEnter(this, tick, i);
- var leaveCallback = tickListenerReference.addMouseLeave(this, tick);
- this.ticksCallbackMap[i] = {
- mouseEnter: enterCallback,
- mouseLeave: leaveCallback
- };
- }
- this.ticks.push(tick);
- this.ticksContainer.appendChild(tick);
- }
- sliderTrackSelection.className += " tick-slider-selection";
- }
- this.tickLabels = [];
- if (Array.isArray(this.options.ticks_labels) && this.options.ticks_labels.length > 0) {
- this.tickLabelContainer = document.createElement('div');
- this.tickLabelContainer.className = 'slider-tick-label-container';
- for (i = 0; i < this.options.ticks_labels.length; i++) {
- var label = document.createElement('div');
- var noTickPositionsSpecified = this.options.ticks_positions.length === 0;
- var tickLabelsIndex = this.options.reversed && noTickPositionsSpecified ? this.options.ticks_labels.length - (i + 1) : i;
- label.className = 'slider-tick-label';
- label.innerHTML = this.options.ticks_labels[tickLabelsIndex];
- this.tickLabels.push(label);
- this.tickLabelContainer.appendChild(label);
- }
- }
- var createAndAppendTooltipSubElements = function createAndAppendTooltipSubElements(tooltipElem) {
- var arrow = document.createElement("div");
- arrow.className = "arrow";
- var inner = document.createElement("div");
- inner.className = "tooltip-inner";
- tooltipElem.appendChild(arrow);
- tooltipElem.appendChild(inner);
- };
-
- var sliderTooltip = document.createElement("div");
- sliderTooltip.className = "tooltip tooltip-main";
- sliderTooltip.setAttribute('role', 'presentation');
- createAndAppendTooltipSubElements(sliderTooltip);
- var sliderTooltipMin = document.createElement("div");
- sliderTooltipMin.className = "tooltip tooltip-min";
- sliderTooltipMin.setAttribute('role', 'presentation');
- createAndAppendTooltipSubElements(sliderTooltipMin);
- var sliderTooltipMax = document.createElement("div");
- sliderTooltipMax.className = "tooltip tooltip-max";
- sliderTooltipMax.setAttribute('role', 'presentation');
- createAndAppendTooltipSubElements(sliderTooltipMax);
-
- this.sliderElem.appendChild(sliderTrack);
- this.sliderElem.appendChild(sliderTooltip);
- this.sliderElem.appendChild(sliderTooltipMin);
- this.sliderElem.appendChild(sliderTooltipMax);
- if (this.tickLabelContainer) {
- this.sliderElem.appendChild(this.tickLabelContainer);
- }
- if (this.ticksContainer) {
- this.sliderElem.appendChild(this.ticksContainer);
- }
- this.sliderElem.appendChild(sliderMinHandle);
- this.sliderElem.appendChild(sliderMaxHandle);
-
- parent.insertBefore(this.sliderElem, this.element);
-
- this.element.style.display = "none";
- }
-
- if ($) {
- this.$element = $(this.element);
- this.$sliderElem = $(this.sliderElem);
- }
-
- this.eventToCallbackMap = {};
- this.sliderElem.id = this.options.id;
- this.touchCapable = 'ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch;
- this.touchX = 0;
- this.touchY = 0;
- this.tooltip = this.sliderElem.querySelector('.tooltip-main');
- this.tooltipInner = this.tooltip.querySelector('.tooltip-inner');
- this.tooltip_min = this.sliderElem.querySelector('.tooltip-min');
- this.tooltipInner_min = this.tooltip_min.querySelector('.tooltip-inner');
- this.tooltip_max = this.sliderElem.querySelector('.tooltip-max');
- this.tooltipInner_max = this.tooltip_max.querySelector('.tooltip-inner');
- if (SliderScale[this.options.scale]) {
- this.options.scale = SliderScale[this.options.scale];
- }
- if (updateSlider === true) {
-
- this._removeClass(this.sliderElem, 'slider-horizontal');
- this._removeClass(this.sliderElem, 'slider-vertical');
- this._removeClass(this.sliderElem, 'slider-rtl');
- this._removeClass(this.tooltip, 'hide');
- this._removeClass(this.tooltip_min, 'hide');
- this._removeClass(this.tooltip_max, 'hide');
-
- ["left", "right", "top", "width", "height"].forEach(function (prop) {
- this._removeProperty(this.trackLow, prop);
- this._removeProperty(this.trackSelection, prop);
- this._removeProperty(this.trackHigh, prop);
- }, this);
-
- [this.handle1, this.handle2].forEach(function (handle) {
- this._removeProperty(handle, 'left');
- this._removeProperty(handle, 'right');
- this._removeProperty(handle, 'top');
- }, this);
-
- [this.tooltip, this.tooltip_min, this.tooltip_max].forEach(function (tooltip) {
- this._removeProperty(tooltip, 'bs-tooltip-left');
- this._removeProperty(tooltip, 'bs-tooltip-right');
- this._removeProperty(tooltip, 'bs-tooltip-top');
- this._removeClass(tooltip, 'bs-tooltip-right');
- this._removeClass(tooltip, 'bs-tooltip-left');
- this._removeClass(tooltip, 'bs-tooltip-top');
- }, this);
- }
- if (this.options.orientation === 'vertical') {
- this._addClass(this.sliderElem, 'slider-vertical');
- this.stylePos = 'top';
- this.mousePos = 'pageY';
- this.sizePos = 'offsetHeight';
- } else {
- this._addClass(this.sliderElem, 'slider-horizontal');
- this.sliderElem.style.width = origWidth;
- this.options.orientation = 'horizontal';
- if (this.options.rtl) {
- this.stylePos = 'right';
- } else {
- this.stylePos = 'left';
- }
- this.mousePos = 'clientX';
- this.sizePos = 'offsetWidth';
- }
-
- if (this.options.rtl) {
- this._addClass(this.sliderElem, 'slider-rtl');
- }
- this._setTooltipPosition();
-
- if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
- if (!isMaxSet) {
- this.options.max = Math.max.apply(Math, this.options.ticks);
- }
- if (!isMinSet) {
- this.options.min = Math.min.apply(Math, this.options.ticks);
- }
- }
- if (Array.isArray(this.options.value)) {
- this.options.range = true;
- this._state.value = this.options.value;
- } else if (this.options.range) {
-
- this._state.value = [this.options.value, this.options.max];
- } else {
- this._state.value = this.options.value;
- }
- this.trackLow = sliderTrackLow || this.trackLow;
- this.trackSelection = sliderTrackSelection || this.trackSelection;
- this.trackHigh = sliderTrackHigh || this.trackHigh;
- if (this.options.selection === 'none') {
- this._addClass(this.trackLow, 'hide');
- this._addClass(this.trackSelection, 'hide');
- this._addClass(this.trackHigh, 'hide');
- } else if (this.options.selection === 'after' || this.options.selection === 'before') {
- this._removeClass(this.trackLow, 'hide');
- this._removeClass(this.trackSelection, 'hide');
- this._removeClass(this.trackHigh, 'hide');
- }
- this.handle1 = sliderMinHandle || this.handle1;
- this.handle2 = sliderMaxHandle || this.handle2;
- if (updateSlider === true) {
-
- this._removeClass(this.handle1, 'round triangle');
- this._removeClass(this.handle2, 'round triangle hide');
- for (i = 0; i < this.ticks.length; i++) {
- this._removeClass(this.ticks[i], 'round triangle hide');
- }
- }
- var availableHandleModifiers = ['round', 'triangle', 'custom'];
- var isValidHandleType = availableHandleModifiers.indexOf(this.options.handle) !== -1;
- if (isValidHandleType) {
- this._addClass(this.handle1, this.options.handle);
- this._addClass(this.handle2, this.options.handle);
- for (i = 0; i < this.ticks.length; i++) {
- this._addClass(this.ticks[i], this.options.handle);
- }
- }
- this._state.offset = this._offset(this.sliderElem);
- this._state.size = this.sliderElem[this.sizePos];
- this.setValue(this._state.value);
-
-
- this.handle1Keydown = this._keydown.bind(this, 0);
- this.handle1.addEventListener("keydown", this.handle1Keydown, false);
- this.handle2Keydown = this._keydown.bind(this, 1);
- this.handle2.addEventListener("keydown", this.handle2Keydown, false);
- this.mousedown = this._mousedown.bind(this);
- this.touchstart = this._touchstart.bind(this);
- this.touchmove = this._touchmove.bind(this);
- if (this.touchCapable) {
- this.sliderElem.addEventListener("touchstart", this.touchstart, false);
- this.sliderElem.addEventListener("touchmove", this.touchmove, false);
- }
- this.sliderElem.addEventListener("mousedown", this.mousedown, false);
-
- this.resize = this._resize.bind(this);
- window.addEventListener("resize", this.resize, false);
-
- if (this.options.tooltip === 'hide') {
- this._addClass(this.tooltip, 'hide');
- this._addClass(this.tooltip_min, 'hide');
- this._addClass(this.tooltip_max, 'hide');
- } else if (this.options.tooltip === 'always') {
- this._showTooltip();
- this._alwaysShowTooltip = true;
- } else {
- this.showTooltip = this._showTooltip.bind(this);
- this.hideTooltip = this._hideTooltip.bind(this);
- if (this.options.ticks_tooltip) {
- var callbackHandle = this._addTickListener();
-
- var mouseEnter = callbackHandle.addMouseEnter(this, this.handle1);
- var mouseLeave = callbackHandle.addMouseLeave(this, this.handle1);
- this.handleCallbackMap.handle1 = {
- mouseEnter: mouseEnter,
- mouseLeave: mouseLeave
- };
-
- mouseEnter = callbackHandle.addMouseEnter(this, this.handle2);
- mouseLeave = callbackHandle.addMouseLeave(this, this.handle2);
- this.handleCallbackMap.handle2 = {
- mouseEnter: mouseEnter,
- mouseLeave: mouseLeave
- };
- } else {
- this.sliderElem.addEventListener("mouseenter", this.showTooltip, false);
- this.sliderElem.addEventListener("mouseleave", this.hideTooltip, false);
- if (this.touchCapable) {
- this.sliderElem.addEventListener("touchstart", this.showTooltip, false);
- this.sliderElem.addEventListener("touchmove", this.showTooltip, false);
- this.sliderElem.addEventListener("touchend", this.hideTooltip, false);
- }
- }
- this.handle1.addEventListener("focus", this.showTooltip, false);
- this.handle1.addEventListener("blur", this.hideTooltip, false);
- this.handle2.addEventListener("focus", this.showTooltip, false);
- this.handle2.addEventListener("blur", this.hideTooltip, false);
- if (this.touchCapable) {
- this.handle1.addEventListener("touchstart", this.showTooltip, false);
- this.handle1.addEventListener("touchmove", this.showTooltip, false);
- this.handle1.addEventListener("touchend", this.hideTooltip, false);
- this.handle2.addEventListener("touchstart", this.showTooltip, false);
- this.handle2.addEventListener("touchmove", this.showTooltip, false);
- this.handle2.addEventListener("touchend", this.hideTooltip, false);
- }
- }
- if (this.options.enabled) {
- this.enable();
- } else {
- this.disable();
- }
- }
-
- Slider.prototype = {
- _init: function _init() {},
- constructor: Slider,
- defaultOptions: {
- id: "",
- min: 0,
- max: 10,
- step: 1,
- precision: 0,
- orientation: 'horizontal',
- value: 5,
- range: false,
- selection: 'before',
- tooltip: 'show',
- tooltip_split: false,
- lock_to_ticks: false,
- handle: 'round',
- reversed: false,
- rtl: 'auto',
- enabled: true,
- formatter: function formatter(val) {
- if (Array.isArray(val)) {
- return val[0] + " : " + val[1];
- } else {
- return val;
- }
- },
- natural_arrow_keys: false,
- ticks: [],
- ticks_positions: [],
- ticks_labels: [],
- ticks_snap_bounds: 0,
- ticks_tooltip: false,
- scale: 'linear',
- focus: false,
- tooltip_position: null,
- labelledby: null,
- rangeHighlights: []
- },
- getElement: function getElement() {
- return this.sliderElem;
- },
- getValue: function getValue() {
- if (this.options.range) {
- return this._state.value;
- } else {
- return this._state.value[0];
- }
- },
- setValue: function setValue(val, triggerSlideEvent, triggerChangeEvent) {
- if (!val) {
- val = 0;
- }
- var oldValue = this.getValue();
- this._state.value = this._validateInputValue(val);
- var applyPrecision = this._applyPrecision.bind(this);
- if (this.options.range) {
- this._state.value[0] = applyPrecision(this._state.value[0]);
- this._state.value[1] = applyPrecision(this._state.value[1]);
- if (this.ticksAreValid && this.options.lock_to_ticks) {
- this._state.value[0] = this.options.ticks[this._getClosestTickIndex(this._state.value[0])];
- this._state.value[1] = this.options.ticks[this._getClosestTickIndex(this._state.value[1])];
- }
- this._state.value[0] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[0]));
- this._state.value[1] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[1]));
- } else {
- this._state.value = applyPrecision(this._state.value);
- if (this.ticksAreValid && this.options.lock_to_ticks) {
- this._state.value = this.options.ticks[this._getClosestTickIndex(this._state.value)];
- }
- this._state.value = [Math.max(this.options.min, Math.min(this.options.max, this._state.value))];
- this._addClass(this.handle2, 'hide');
- if (this.options.selection === 'after') {
- this._state.value[1] = this.options.max;
- } else {
- this._state.value[1] = this.options.min;
- }
- }
-
- this._setTickIndex();
- if (this.options.max > this.options.min) {
- this._state.percentage = [this._toPercentage(this._state.value[0]), this._toPercentage(this._state.value[1]), this.options.step * 100 / (this.options.max - this.options.min)];
- } else {
- this._state.percentage = [0, 0, 100];
- }
- this._layout();
- var newValue = this.options.range ? this._state.value : this._state.value[0];
- this._setDataVal(newValue);
- if (triggerSlideEvent === true) {
- this._trigger('slide', newValue);
- }
- var hasChanged = false;
- if (Array.isArray(newValue)) {
- hasChanged = oldValue[0] !== newValue[0] || oldValue[1] !== newValue[1];
- } else {
- hasChanged = oldValue !== newValue;
- }
- if (hasChanged && triggerChangeEvent === true) {
- this._trigger('change', {
- oldValue: oldValue,
- newValue: newValue
- });
- }
- return this;
- },
- destroy: function destroy() {
-
- this._removeSliderEventHandlers();
-
- this.sliderElem.parentNode.removeChild(this.sliderElem);
-
- this.element.style.display = "";
-
- this._cleanUpEventCallbacksMap();
-
- this.element.removeAttribute("data");
-
- if ($) {
- this._unbindJQueryEventHandlers();
- if (autoRegisterNamespace === NAMESPACE_MAIN) {
- this.$element.removeData(autoRegisterNamespace);
- }
- this.$element.removeData(NAMESPACE_ALTERNATE);
- }
- },
- disable: function disable() {
- this._state.enabled = false;
- this.handle1.removeAttribute("tabindex");
- this.handle2.removeAttribute("tabindex");
- this._addClass(this.sliderElem, 'slider-disabled');
- this._trigger('slideDisabled');
- return this;
- },
- enable: function enable() {
- this._state.enabled = true;
- this.handle1.setAttribute("tabindex", 0);
- this.handle2.setAttribute("tabindex", 0);
- this._removeClass(this.sliderElem, 'slider-disabled');
- this._trigger('slideEnabled');
- return this;
- },
- toggle: function toggle() {
- if (this._state.enabled) {
- this.disable();
- } else {
- this.enable();
- }
- return this;
- },
- isEnabled: function isEnabled() {
- return this._state.enabled;
- },
- on: function on(evt, callback) {
- this._bindNonQueryEventHandler(evt, callback);
- return this;
- },
- off: function off(evt, callback) {
- if ($) {
- this.$element.off(evt, callback);
- this.$sliderElem.off(evt, callback);
- } else {
- this._unbindNonQueryEventHandler(evt, callback);
- }
- },
- getAttribute: function getAttribute(attribute) {
- if (attribute) {
- return this.options[attribute];
- } else {
- return this.options;
- }
- },
- setAttribute: function setAttribute(attribute, value) {
- this.options[attribute] = value;
- return this;
- },
- refresh: function refresh(options) {
- var currentValue = this.getValue();
- this._removeSliderEventHandlers();
- createNewSlider.call(this, this.element, this.options);
-
- if (options && options.useCurrentValue === true) {
- this.setValue(currentValue);
- }
- if ($) {
-
- if (autoRegisterNamespace === NAMESPACE_MAIN) {
- $.data(this.element, NAMESPACE_MAIN, this);
- $.data(this.element, NAMESPACE_ALTERNATE, this);
- } else {
- $.data(this.element, NAMESPACE_ALTERNATE, this);
- }
- }
- return this;
- },
- relayout: function relayout() {
- this._resize();
- return this;
- },
-
- _removeTooltipListener: function _removeTooltipListener(event, handler) {
- this.handle1.removeEventListener(event, handler, false);
- this.handle2.removeEventListener(event, handler, false);
- },
- _removeSliderEventHandlers: function _removeSliderEventHandlers() {
-
- this.handle1.removeEventListener("keydown", this.handle1Keydown, false);
- this.handle2.removeEventListener("keydown", this.handle2Keydown, false);
-
- if (this.options.ticks_tooltip) {
- var ticks = this.ticksContainer.getElementsByClassName('slider-tick');
- for (var i = 0; i < ticks.length; i++) {
- ticks[i].removeEventListener('mouseenter', this.ticksCallbackMap[i].mouseEnter, false);
- ticks[i].removeEventListener('mouseleave', this.ticksCallbackMap[i].mouseLeave, false);
- }
- if (this.handleCallbackMap.handle1 && this.handleCallbackMap.handle2) {
- this.handle1.removeEventListener('mouseenter', this.handleCallbackMap.handle1.mouseEnter, false);
- this.handle2.removeEventListener('mouseenter', this.handleCallbackMap.handle2.mouseEnter, false);
- this.handle1.removeEventListener('mouseleave', this.handleCallbackMap.handle1.mouseLeave, false);
- this.handle2.removeEventListener('mouseleave', this.handleCallbackMap.handle2.mouseLeave, false);
- }
- }
- this.handleCallbackMap = null;
- this.ticksCallbackMap = null;
- if (this.showTooltip) {
- this._removeTooltipListener("focus", this.showTooltip);
- }
- if (this.hideTooltip) {
- this._removeTooltipListener("blur", this.hideTooltip);
- }
-
- if (this.showTooltip) {
- this.sliderElem.removeEventListener("mouseenter", this.showTooltip, false);
- }
- if (this.hideTooltip) {
- this.sliderElem.removeEventListener("mouseleave", this.hideTooltip, false);
- }
- this.sliderElem.removeEventListener("mousedown", this.mousedown, false);
- if (this.touchCapable) {
-
- if (this.showTooltip) {
- this.handle1.removeEventListener("touchstart", this.showTooltip, false);
- this.handle1.removeEventListener("touchmove", this.showTooltip, false);
- this.handle2.removeEventListener("touchstart", this.showTooltip, false);
- this.handle2.removeEventListener("touchmove", this.showTooltip, false);
- }
- if (this.hideTooltip) {
- this.handle1.removeEventListener("touchend", this.hideTooltip, false);
- this.handle2.removeEventListener("touchend", this.hideTooltip, false);
- }
-
- if (this.showTooltip) {
- this.sliderElem.removeEventListener("touchstart", this.showTooltip, false);
- this.sliderElem.removeEventListener("touchmove", this.showTooltip, false);
- }
- if (this.hideTooltip) {
- this.sliderElem.removeEventListener("touchend", this.hideTooltip, false);
- }
- this.sliderElem.removeEventListener("touchstart", this.touchstart, false);
- this.sliderElem.removeEventListener("touchmove", this.touchmove, false);
- }
-
- window.removeEventListener("resize", this.resize, false);
- },
- _bindNonQueryEventHandler: function _bindNonQueryEventHandler(evt, callback) {
- if (this.eventToCallbackMap[evt] === undefined) {
- this.eventToCallbackMap[evt] = [];
- }
- this.eventToCallbackMap[evt].push(callback);
- },
- _unbindNonQueryEventHandler: function _unbindNonQueryEventHandler(evt, callback) {
- var callbacks = this.eventToCallbackMap[evt];
- if (callbacks !== undefined) {
- for (var i = 0; i < callbacks.length; i++) {
- if (callbacks[i] === callback) {
- callbacks.splice(i, 1);
- break;
- }
- }
- }
- },
- _cleanUpEventCallbacksMap: function _cleanUpEventCallbacksMap() {
- var eventNames = Object.keys(this.eventToCallbackMap);
- for (var i = 0; i < eventNames.length; i++) {
- var eventName = eventNames[i];
- delete this.eventToCallbackMap[eventName];
- }
- },
- _showTooltip: function _showTooltip() {
- if (this.options.tooltip_split === false) {
- this._addClass(this.tooltip, 'show');
- this.tooltip_min.style.display = 'none';
- this.tooltip_max.style.display = 'none';
- } else {
- this._addClass(this.tooltip_min, 'show');
- this._addClass(this.tooltip_max, 'show');
- this.tooltip.style.display = 'none';
- }
- this._state.over = true;
- },
- _hideTooltip: function _hideTooltip() {
- if (this._state.inDrag === false && this._alwaysShowTooltip !== true) {
- this._removeClass(this.tooltip, 'show');
- this._removeClass(this.tooltip_min, 'show');
- this._removeClass(this.tooltip_max, 'show');
- }
- this._state.over = false;
- },
- _setToolTipOnMouseOver: function _setToolTipOnMouseOver(tempState) {
- var self = this;
- var formattedTooltipVal = this.options.formatter(!tempState ? this._state.value[0] : tempState.value[0]);
- var positionPercentages = !tempState ? getPositionPercentages(this._state, this.options.reversed) : getPositionPercentages(tempState, this.options.reversed);
- this._setText(this.tooltipInner, formattedTooltipVal);
- this.tooltip.style[this.stylePos] = positionPercentages[0] + "%";
- function getPositionPercentages(state, reversed) {
- if (reversed) {
- return [100 - state.percentage[0], self.options.range ? 100 - state.percentage[1] : state.percentage[1]];
- }
- return [state.percentage[0], state.percentage[1]];
- }
- },
- _copyState: function _copyState() {
- return {
- value: [this._state.value[0], this._state.value[1]],
- enabled: this._state.enabled,
- offset: this._state.offset,
- size: this._state.size,
- percentage: [this._state.percentage[0], this._state.percentage[1], this._state.percentage[2]],
- inDrag: this._state.inDrag,
- over: this._state.over,
-
- dragged: this._state.dragged,
- keyCtrl: this._state.keyCtrl
- };
- },
- _addTickListener: function _addTickListener() {
- return {
- addMouseEnter: function addMouseEnter(reference, element, index) {
- var enter = function enter() {
- var tempState = reference._copyState();
-
- var val = element === reference.handle1 ? tempState.value[0] : tempState.value[1];
- var per = void 0;
-
- if (index !== undefined) {
- val = reference.options.ticks[index];
- per = reference.options.ticks_positions.length > 0 && reference.options.ticks_positions[index] || reference._toPercentage(reference.options.ticks[index]);
- } else {
- per = reference._toPercentage(val);
- }
- tempState.value[0] = val;
- tempState.percentage[0] = per;
- reference._setToolTipOnMouseOver(tempState);
- reference._showTooltip();
- };
- element.addEventListener("mouseenter", enter, false);
- return enter;
- },
- addMouseLeave: function addMouseLeave(reference, element) {
- var leave = function leave() {
- reference._hideTooltip();
- };
- element.addEventListener("mouseleave", leave, false);
- return leave;
- }
- };
- },
- _layout: function _layout() {
- var positionPercentages;
- var formattedValue;
- if (this.options.reversed) {
- positionPercentages = [100 - this._state.percentage[0], this.options.range ? 100 - this._state.percentage[1] : this._state.percentage[1]];
- } else {
- positionPercentages = [this._state.percentage[0], this._state.percentage[1]];
- }
- this.handle1.style[this.stylePos] = positionPercentages[0] + "%";
- this.handle1.setAttribute('aria-valuenow', this._state.value[0]);
- formattedValue = this.options.formatter(this._state.value[0]);
- if (isNaN(formattedValue)) {
- this.handle1.setAttribute('aria-valuetext', formattedValue);
- } else {
- this.handle1.removeAttribute('aria-valuetext');
- }
- this.handle2.style[this.stylePos] = positionPercentages[1] + "%";
- this.handle2.setAttribute('aria-valuenow', this._state.value[1]);
- formattedValue = this.options.formatter(this._state.value[1]);
- if (isNaN(formattedValue)) {
- this.handle2.setAttribute('aria-valuetext', formattedValue);
- } else {
- this.handle2.removeAttribute('aria-valuetext');
- }
-
- if (this.rangeHighlightElements.length > 0 && Array.isArray(this.options.rangeHighlights) && this.options.rangeHighlights.length > 0) {
- for (var _i = 0; _i < this.options.rangeHighlights.length; _i++) {
- var startPercent = this._toPercentage(this.options.rangeHighlights[_i].start);
- var endPercent = this._toPercentage(this.options.rangeHighlights[_i].end);
- if (this.options.reversed) {
- var sp = 100 - endPercent;
- endPercent = 100 - startPercent;
- startPercent = sp;
- }
- var currentRange = this._createHighlightRange(startPercent, endPercent);
- if (currentRange) {
- if (this.options.orientation === 'vertical') {
- this.rangeHighlightElements[_i].style.top = currentRange.start + "%";
- this.rangeHighlightElements[_i].style.height = currentRange.size + "%";
- } else {
- if (this.options.rtl) {
- this.rangeHighlightElements[_i].style.right = currentRange.start + "%";
- } else {
- this.rangeHighlightElements[_i].style.left = currentRange.start + "%";
- }
- this.rangeHighlightElements[_i].style.width = currentRange.size + "%";
- }
- } else {
- this.rangeHighlightElements[_i].style.display = "none";
- }
- }
- }
-
- if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
- var styleSize = this.options.orientation === 'vertical' ? 'height' : 'width';
- var styleMargin;
- if (this.options.orientation === 'vertical') {
- styleMargin = 'marginTop';
- } else {
- if (this.options.rtl) {
- styleMargin = 'marginRight';
- } else {
- styleMargin = 'marginLeft';
- }
- }
- var labelSize = this._state.size / (this.options.ticks.length - 1);
- if (this.tickLabelContainer) {
- var extraMargin = 0;
- if (this.options.ticks_positions.length === 0) {
- if (this.options.orientation !== 'vertical') {
- this.tickLabelContainer.style[styleMargin] = -labelSize / 2 + "px";
- }
- extraMargin = this.tickLabelContainer.offsetHeight;
- } else {
-
- for (i = 0; i < this.tickLabelContainer.childNodes.length; i++) {
- if (this.tickLabelContainer.childNodes[i].offsetHeight > extraMargin) {
- extraMargin = this.tickLabelContainer.childNodes[i].offsetHeight;
- }
- }
- }
- if (this.options.orientation === 'horizontal') {
- this.sliderElem.style.marginBottom = extraMargin + "px";
- }
- }
- for (var i = 0; i < this.options.ticks.length; i++) {
- var percentage = this.options.ticks_positions[i] || this._toPercentage(this.options.ticks[i]);
- if (this.options.reversed) {
- percentage = 100 - percentage;
- }
- this.ticks[i].style[this.stylePos] = percentage + "%";
-
- this._removeClass(this.ticks[i], 'in-selection');
- if (!this.options.range) {
- if (this.options.selection === 'after' && percentage >= positionPercentages[0]) {
- this._addClass(this.ticks[i], 'in-selection');
- } else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) {
- this._addClass(this.ticks[i], 'in-selection');
- }
- } else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) {
- this._addClass(this.ticks[i], 'in-selection');
- }
- if (this.tickLabels[i]) {
- this.tickLabels[i].style[styleSize] = labelSize + "px";
- if (this.options.orientation !== 'vertical' && this.options.ticks_positions[i] !== undefined) {
- this.tickLabels[i].style.position = 'absolute';
- this.tickLabels[i].style[this.stylePos] = percentage + "%";
- this.tickLabels[i].style[styleMargin] = -labelSize / 2 + 'px';
- } else if (this.options.orientation === 'vertical') {
- if (this.options.rtl) {
- this.tickLabels[i].style['marginRight'] = this.sliderElem.offsetWidth + "px";
- } else {
- this.tickLabels[i].style['marginLeft'] = this.sliderElem.offsetWidth + "px";
- }
- this.tickLabelContainer.style[styleMargin] = this.sliderElem.offsetWidth / 2 * -1 + 'px';
- }
-
- this._removeClass(this.tickLabels[i], 'label-in-selection label-is-selection');
- if (!this.options.range) {
- if (this.options.selection === 'after' && percentage >= positionPercentages[0]) {
- this._addClass(this.tickLabels[i], 'label-in-selection');
- } else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) {
- this._addClass(this.tickLabels[i], 'label-in-selection');
- }
- if (percentage === positionPercentages[0]) {
- this._addClass(this.tickLabels[i], 'label-is-selection');
- }
- } else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) {
- this._addClass(this.tickLabels[i], 'label-in-selection');
- if (percentage === positionPercentages[0] || positionPercentages[1]) {
- this._addClass(this.tickLabels[i], 'label-is-selection');
- }
- }
- }
- }
- }
- var formattedTooltipVal;
- if (this.options.range) {
- formattedTooltipVal = this.options.formatter(this._state.value);
- this._setText(this.tooltipInner, formattedTooltipVal);
- this.tooltip.style[this.stylePos] = (positionPercentages[1] + positionPercentages[0]) / 2 + "%";
- var innerTooltipMinText = this.options.formatter(this._state.value[0]);
- this._setText(this.tooltipInner_min, innerTooltipMinText);
- var innerTooltipMaxText = this.options.formatter(this._state.value[1]);
- this._setText(this.tooltipInner_max, innerTooltipMaxText);
- this.tooltip_min.style[this.stylePos] = positionPercentages[0] + "%";
- this.tooltip_max.style[this.stylePos] = positionPercentages[1] + "%";
- } else {
- formattedTooltipVal = this.options.formatter(this._state.value[0]);
- this._setText(this.tooltipInner, formattedTooltipVal);
- this.tooltip.style[this.stylePos] = positionPercentages[0] + "%";
- }
- if (this.options.orientation === 'vertical') {
- this.trackLow.style.top = '0';
- this.trackLow.style.height = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
- this.trackSelection.style.top = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
- this.trackSelection.style.height = Math.abs(positionPercentages[0] - positionPercentages[1]) + '%';
- this.trackHigh.style.bottom = '0';
- this.trackHigh.style.height = 100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1]) + '%';
- } else {
- if (this.stylePos === 'right') {
- this.trackLow.style.right = '0';
- } else {
- this.trackLow.style.left = '0';
- }
- this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
- if (this.stylePos === 'right') {
- this.trackSelection.style.right = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
- } else {
- this.trackSelection.style.left = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
- }
- this.trackSelection.style.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + '%';
- if (this.stylePos === 'right') {
- this.trackHigh.style.left = '0';
- } else {
- this.trackHigh.style.right = '0';
- }
- this.trackHigh.style.width = 100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1]) + '%';
- var offset_min = this.tooltip_min.getBoundingClientRect();
- var offset_max = this.tooltip_max.getBoundingClientRect();
- if (this.options.tooltip_position === 'bottom') {
- if (offset_min.right > offset_max.left) {
- this._removeClass(this.tooltip_max, 'bs-tooltip-bottom');
- this._addClass(this.tooltip_max, 'bs-tooltip-top');
- this.tooltip_max.style.top = '';
- this.tooltip_max.style.bottom = 22 + 'px';
- } else {
- this._removeClass(this.tooltip_max, 'bs-tooltip-top');
- this._addClass(this.tooltip_max, 'bs-tooltip-bottom');
- this.tooltip_max.style.top = this.tooltip_min.style.top;
- this.tooltip_max.style.bottom = '';
- }
- } else {
- if (offset_min.right > offset_max.left) {
- this._removeClass(this.tooltip_max, 'bs-tooltip-top');
- this._addClass(this.tooltip_max, 'bs-tooltip-bottom');
- this.tooltip_max.style.top = 18 + 'px';
- } else {
- this._removeClass(this.tooltip_max, 'bs-tooltip-bottom');
- this._addClass(this.tooltip_max, 'bs-tooltip-top');
- this.tooltip_max.style.top = this.tooltip_min.style.top;
- }
- }
- }
- },
- _createHighlightRange: function _createHighlightRange(start, end) {
- if (this._isHighlightRange(start, end)) {
- if (start > end) {
- return { 'start': end, 'size': start - end };
- }
- return { 'start': start, 'size': end - start };
- }
- return null;
- },
- _isHighlightRange: function _isHighlightRange(start, end) {
- if (0 <= start && start <= 100 && 0 <= end && end <= 100) {
- return true;
- } else {
- return false;
- }
- },
- _resize: function _resize(ev) {
-
- this._state.offset = this._offset(this.sliderElem);
- this._state.size = this.sliderElem[this.sizePos];
- this._layout();
- },
- _removeProperty: function _removeProperty(element, prop) {
- if (element.style.removeProperty) {
- element.style.removeProperty(prop);
- } else {
- element.style.removeAttribute(prop);
- }
- },
- _mousedown: function _mousedown(ev) {
- if (!this._state.enabled) {
- return false;
- }
- if (ev.preventDefault) {
- ev.preventDefault();
- }
- this._state.offset = this._offset(this.sliderElem);
- this._state.size = this.sliderElem[this.sizePos];
- var percentage = this._getPercentage(ev);
- if (this.options.range) {
- var diff1 = Math.abs(this._state.percentage[0] - percentage);
- var diff2 = Math.abs(this._state.percentage[1] - percentage);
- this._state.dragged = diff1 < diff2 ? 0 : 1;
- this._adjustPercentageForRangeSliders(percentage);
- } else {
- this._state.dragged = 0;
- }
- this._state.percentage[this._state.dragged] = percentage;
- if (this.touchCapable) {
- document.removeEventListener("touchmove", this.mousemove, false);
- document.removeEventListener("touchend", this.mouseup, false);
- }
- if (this.mousemove) {
- document.removeEventListener("mousemove", this.mousemove, false);
- }
- if (this.mouseup) {
- document.removeEventListener("mouseup", this.mouseup, false);
- }
- this.mousemove = this._mousemove.bind(this);
- this.mouseup = this._mouseup.bind(this);
- if (this.touchCapable) {
-
- document.addEventListener("touchmove", this.mousemove, false);
- document.addEventListener("touchend", this.mouseup, false);
- }
-
- document.addEventListener("mousemove", this.mousemove, false);
- document.addEventListener("mouseup", this.mouseup, false);
- this._state.inDrag = true;
- var newValue = this._calculateValue();
- this._trigger('slideStart', newValue);
- this.setValue(newValue, false, true);
- ev.returnValue = false;
- if (this.options.focus) {
- this._triggerFocusOnHandle(this._state.dragged);
- }
- return true;
- },
- _touchstart: function _touchstart(ev) {
- this._mousedown(ev);
- },
- _triggerFocusOnHandle: function _triggerFocusOnHandle(handleIdx) {
- if (handleIdx === 0) {
- this.handle1.focus();
- }
- if (handleIdx === 1) {
- this.handle2.focus();
- }
- },
- _keydown: function _keydown(handleIdx, ev) {
- if (!this._state.enabled) {
- return false;
- }
- var dir;
- switch (ev.keyCode) {
- case 37:
- case 40:
-
- dir = -1;
- break;
- case 39:
- case 38:
-
- dir = 1;
- break;
- }
- if (!dir) {
- return;
- }
-
- if (this.options.natural_arrow_keys) {
- var isHorizontal = this.options.orientation === 'horizontal';
- var isVertical = this.options.orientation === 'vertical';
- var isRTL = this.options.rtl;
- var isReversed = this.options.reversed;
- if (isHorizontal) {
- if (isRTL) {
- if (!isReversed) {
- dir = -dir;
- }
- } else {
- if (isReversed) {
- dir = -dir;
- }
- }
- } else if (isVertical) {
- if (!isReversed) {
- dir = -dir;
- }
- }
- }
- var val;
- if (this.ticksAreValid && this.options.lock_to_ticks) {
- var index = void 0;
-
- index = this.options.ticks.indexOf(this._state.value[handleIdx]);
- if (index === -1) {
-
- index = 0;
- window.console.warn('(lock_to_ticks) _keydown: index should not be -1');
- }
- index += dir;
- index = Math.max(0, Math.min(this.options.ticks.length - 1, index));
- val = this.options.ticks[index];
- } else {
- val = this._state.value[handleIdx] + dir * this.options.step;
- }
- var percentage = this._toPercentage(val);
- this._state.keyCtrl = handleIdx;
- if (this.options.range) {
- this._adjustPercentageForRangeSliders(percentage);
- var val1 = !this._state.keyCtrl ? val : this._state.value[0];
- var val2 = this._state.keyCtrl ? val : this._state.value[1];
-
- val = [Math.max(this.options.min, Math.min(this.options.max, val1)), Math.max(this.options.min, Math.min(this.options.max, val2))];
- } else {
- val = Math.max(this.options.min, Math.min(this.options.max, val));
- }
- this._trigger('slideStart', val);
- this.setValue(val, true, true);
- this._trigger('slideStop', val);
- this._pauseEvent(ev);
- delete this._state.keyCtrl;
- return false;
- },
- _pauseEvent: function _pauseEvent(ev) {
- if (ev.stopPropagation) {
- ev.stopPropagation();
- }
- if (ev.preventDefault) {
- ev.preventDefault();
- }
- ev.cancelBubble = true;
- ev.returnValue = false;
- },
- _mousemove: function _mousemove(ev) {
- if (!this._state.enabled) {
- return false;
- }
- var percentage = this._getPercentage(ev);
- this._adjustPercentageForRangeSliders(percentage);
- this._state.percentage[this._state.dragged] = percentage;
- var val = this._calculateValue(true);
- this.setValue(val, true, true);
- return false;
- },
- _touchmove: function _touchmove(ev) {
- if (ev.changedTouches === undefined) {
- return;
- }
-
- if (ev.preventDefault) {
- ev.preventDefault();
- }
- },
- _adjustPercentageForRangeSliders: function _adjustPercentageForRangeSliders(percentage) {
- if (this.options.range) {
- var precision = this._getNumDigitsAfterDecimalPlace(percentage);
- precision = precision ? precision - 1 : 0;
- var percentageWithAdjustedPrecision = this._applyToFixedAndParseFloat(percentage, precision);
- if (this._state.dragged === 0 && this._applyToFixedAndParseFloat(this._state.percentage[1], precision) < percentageWithAdjustedPrecision) {
- this._state.percentage[0] = this._state.percentage[1];
- this._state.dragged = 1;
- } else if (this._state.dragged === 1 && this._applyToFixedAndParseFloat(this._state.percentage[0], precision) > percentageWithAdjustedPrecision) {
- this._state.percentage[1] = this._state.percentage[0];
- this._state.dragged = 0;
- } else if (this._state.keyCtrl === 0 && this._toPercentage(this._state.value[1]) < percentage) {
- this._state.percentage[0] = this._state.percentage[1];
- this._state.keyCtrl = 1;
- this.handle2.focus();
- } else if (this._state.keyCtrl === 1 && this._toPercentage(this._state.value[0]) > percentage) {
- this._state.percentage[1] = this._state.percentage[0];
- this._state.keyCtrl = 0;
- this.handle1.focus();
- }
- }
- },
- _mouseup: function _mouseup(ev) {
- if (!this._state.enabled) {
- return false;
- }
- var percentage = this._getPercentage(ev);
- this._adjustPercentageForRangeSliders(percentage);
- this._state.percentage[this._state.dragged] = percentage;
- if (this.touchCapable) {
-
- document.removeEventListener("touchmove", this.mousemove, false);
- document.removeEventListener("touchend", this.mouseup, false);
- }
-
- document.removeEventListener("mousemove", this.mousemove, false);
- document.removeEventListener("mouseup", this.mouseup, false);
- this._state.inDrag = false;
- if (this._state.over === false) {
- this._hideTooltip();
- }
- var val = this._calculateValue(true);
- this.setValue(val, false, true);
- this._trigger('slideStop', val);
-
- this._state.dragged = null;
- return false;
- },
- _setValues: function _setValues(index, val) {
- var comp = 0 === index ? 0 : 100;
- if (this._state.percentage[index] !== comp) {
- val.data[index] = this._toValue(this._state.percentage[index]);
- val.data[index] = this._applyPrecision(val.data[index]);
- }
- },
- _calculateValue: function _calculateValue(snapToClosestTick) {
- var val = {};
- if (this.options.range) {
- val.data = [this.options.min, this.options.max];
- this._setValues(0, val);
- this._setValues(1, val);
- if (snapToClosestTick) {
- val.data[0] = this._snapToClosestTick(val.data[0]);
- val.data[1] = this._snapToClosestTick(val.data[1]);
- }
- } else {
- val.data = this._toValue(this._state.percentage[0]);
- val.data = parseFloat(val.data);
- val.data = this._applyPrecision(val.data);
- if (snapToClosestTick) {
- val.data = this._snapToClosestTick(val.data);
- }
- }
- return val.data;
- },
- _snapToClosestTick: function _snapToClosestTick(val) {
- var min = [val, Infinity];
- for (var i = 0; i < this.options.ticks.length; i++) {
- var diff = Math.abs(this.options.ticks[i] - val);
- if (diff <= min[1]) {
- min = [this.options.ticks[i], diff];
- }
- }
- if (min[1] <= this.options.ticks_snap_bounds) {
- return min[0];
- }
- return val;
- },
- _applyPrecision: function _applyPrecision(val) {
- var precision = this.options.precision || this._getNumDigitsAfterDecimalPlace(this.options.step);
- return this._applyToFixedAndParseFloat(val, precision);
- },
- _getNumDigitsAfterDecimalPlace: function _getNumDigitsAfterDecimalPlace(num) {
- var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
- if (!match) {
- return 0;
- }
- return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
- },
- _applyToFixedAndParseFloat: function _applyToFixedAndParseFloat(num, toFixedInput) {
- var truncatedNum = num.toFixed(toFixedInput);
- return parseFloat(truncatedNum);
- },
-
- _getPercentage: function _getPercentage(ev) {
- if (this.touchCapable && (ev.type === 'touchstart' || ev.type === 'touchmove' || ev.type === 'touchend')) {
- ev = ev.changedTouches[0];
- }
- var eventPosition = ev[this.mousePos];
- var sliderOffset = this._state.offset[this.stylePos];
- var distanceToSlide = eventPosition - sliderOffset;
- if (this.stylePos === 'right') {
- distanceToSlide = -distanceToSlide;
- }
-
- var percentage = distanceToSlide / this._state.size * 100;
- percentage = Math.round(percentage / this._state.percentage[2]) * this._state.percentage[2];
- if (this.options.reversed) {
- percentage = 100 - percentage;
- }
-
-
-
- return Math.max(0, Math.min(100, percentage));
- },
- _validateInputValue: function _validateInputValue(val) {
- if (!isNaN(+val)) {
- return +val;
- } else if (Array.isArray(val)) {
- this._validateArray(val);
- return val;
- } else {
- throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(val));
- }
- },
- _validateArray: function _validateArray(val) {
- for (var i = 0; i < val.length; i++) {
- var input = val[i];
- if (typeof input !== 'number') {
- throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(input));
- }
- }
- },
- _setDataVal: function _setDataVal(val) {
- this.element.setAttribute('data-value', val);
- this.element.setAttribute('value', val);
- this.element.value = val;
- },
- _trigger: function _trigger(evt, val) {
- val = val || val === 0 ? val : undefined;
- var callbackFnArray = this.eventToCallbackMap[evt];
- if (callbackFnArray && callbackFnArray.length) {
- for (var i = 0; i < callbackFnArray.length; i++) {
- var callbackFn = callbackFnArray[i];
- callbackFn(val);
- }
- }
-
- if ($) {
- this._triggerJQueryEvent(evt, val);
- }
- },
- _triggerJQueryEvent: function _triggerJQueryEvent(evt, val) {
- var eventData = {
- type: evt,
- value: val
- };
- this.$element.trigger(eventData);
- this.$sliderElem.trigger(eventData);
- },
- _unbindJQueryEventHandlers: function _unbindJQueryEventHandlers() {
- this.$element.off();
- this.$sliderElem.off();
- },
- _setText: function _setText(element, text) {
- if (typeof element.textContent !== "undefined") {
- element.textContent = text;
- } else if (typeof element.innerText !== "undefined") {
- element.innerText = text;
- }
- },
- _removeClass: function _removeClass(element, classString) {
- var classes = classString.split(" ");
- var newClasses = element.className;
- for (var i = 0; i < classes.length; i++) {
- var classTag = classes[i];
- var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)");
- newClasses = newClasses.replace(regex, " ");
- }
- element.className = newClasses.trim();
- },
- _addClass: function _addClass(element, classString) {
- var classes = classString.split(" ");
- var newClasses = element.className;
- for (var i = 0; i < classes.length; i++) {
- var classTag = classes[i];
- var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)");
- var ifClassExists = regex.test(newClasses);
- if (!ifClassExists) {
- newClasses += " " + classTag;
- }
- }
- element.className = newClasses.trim();
- },
- _offsetLeft: function _offsetLeft(obj) {
- return obj.getBoundingClientRect().left;
- },
- _offsetRight: function _offsetRight(obj) {
- return obj.getBoundingClientRect().right;
- },
- _offsetTop: function _offsetTop(obj) {
- var offsetTop = obj.offsetTop;
- while ((obj = obj.offsetParent) && !isNaN(obj.offsetTop)) {
- offsetTop += obj.offsetTop;
- if (obj.tagName !== 'BODY') {
- offsetTop -= obj.scrollTop;
- }
- }
- return offsetTop;
- },
- _offset: function _offset(obj) {
- return {
- left: this._offsetLeft(obj),
- right: this._offsetRight(obj),
- top: this._offsetTop(obj)
- };
- },
- _css: function _css(elementRef, styleName, value) {
- if ($) {
- $.style(elementRef, styleName, value);
- } else {
- var style = styleName.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function (all, letter) {
- return letter.toUpperCase();
- });
- elementRef.style[style] = value;
- }
- },
- _toValue: function _toValue(percentage) {
- return this.options.scale.toValue.apply(this, [percentage]);
- },
- _toPercentage: function _toPercentage(value) {
- return this.options.scale.toPercentage.apply(this, [value]);
- },
- _setTooltipPosition: function _setTooltipPosition() {
- var tooltips = [this.tooltip, this.tooltip_min, this.tooltip_max];
- if (this.options.orientation === 'vertical') {
- var tooltipPos;
- if (this.options.tooltip_position) {
- tooltipPos = this.options.tooltip_position;
- } else {
- if (this.options.rtl) {
- tooltipPos = 'left';
- } else {
- tooltipPos = 'right';
- }
- }
- var oppositeSide = tooltipPos === 'left' ? 'right' : 'left';
- tooltips.forEach(function (tooltip) {
- this._addClass(tooltip, 'bs-tooltip-' + tooltipPos);
- tooltip.style[oppositeSide] = '100%';
- }.bind(this));
- } else if (this.options.tooltip_position === 'bottom') {
- tooltips.forEach(function (tooltip) {
- this._addClass(tooltip, 'bs-tooltip-bottom');
- tooltip.style.top = 22 + 'px';
- }.bind(this));
- } else {
- tooltips.forEach(function (tooltip) {
- this._addClass(tooltip, 'bs-tooltip-top');
- tooltip.style.top = -this.tooltip.outerHeight - 14 + 'px';
- }.bind(this));
- }
- },
- _getClosestTickIndex: function _getClosestTickIndex(val) {
- var difference = Math.abs(val - this.options.ticks[0]);
- var index = 0;
- for (var i = 0; i < this.options.ticks.length; ++i) {
- var d = Math.abs(val - this.options.ticks[i]);
- if (d < difference) {
- difference = d;
- index = i;
- }
- }
- return index;
- },
-
- _setTickIndex: function _setTickIndex() {
- if (this.ticksAreValid) {
- this._state.tickIndex = [this.options.ticks.indexOf(this._state.value[0]), this.options.ticks.indexOf(this._state.value[1])];
- }
- }
- };
-
- if ($ && $.fn) {
- if (!$.fn.slider) {
- $.bridget(NAMESPACE_MAIN, Slider);
- autoRegisterNamespace = NAMESPACE_MAIN;
- } else {
- if (windowIsDefined) {
- window.console.warn("bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead.");
- }
- autoRegisterNamespace = NAMESPACE_ALTERNATE;
- }
- $.bridget(NAMESPACE_ALTERNATE, Slider);
-
- $(function () {
- $("input[data-provide=slider]")[autoRegisterNamespace]();
- });
- }
- })($);
- return Slider;
- });
|