|
|
|
@ -3,6 +3,7 @@ var _ = require('underscore');
|
|
|
|
|
var Backbone = require('backbone');
|
|
|
|
|
var EditorHelpers = require('../editor-helpers-extend');
|
|
|
|
|
var template = require('./slider.tpl');
|
|
|
|
|
var MutationObserver = window.MutationObserver;
|
|
|
|
|
|
|
|
|
|
var TICKS_PLACEHOLDER = 5;
|
|
|
|
|
var HANDLE_WIDTH = 12;
|
|
|
|
@ -95,15 +96,44 @@ Backbone.Form.editors.Slider = Backbone.Form.editors.Base.extend({
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_renderSlider: function () {
|
|
|
|
|
var numberOfValues = this._getNumberOfValues();
|
|
|
|
|
var element;
|
|
|
|
|
var field;
|
|
|
|
|
var onMutationObserver;
|
|
|
|
|
var observer;
|
|
|
|
|
var config = { subtree: true, childList: true };
|
|
|
|
|
|
|
|
|
|
if (!MutationObserver) {
|
|
|
|
|
this._initializeSlider();
|
|
|
|
|
} else {
|
|
|
|
|
element = document.body;
|
|
|
|
|
field = this.$('.js-slider').get(0);
|
|
|
|
|
onMutationObserver = function () {
|
|
|
|
|
if (element.contains(field)) {
|
|
|
|
|
this._initializeSlider();
|
|
|
|
|
observer.disconnect();
|
|
|
|
|
}
|
|
|
|
|
}.bind(this);
|
|
|
|
|
|
|
|
|
|
observer = new MutationObserver(onMutationObserver);
|
|
|
|
|
onMutationObserver();
|
|
|
|
|
|
|
|
|
|
observer.observe(element, config);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
if (numberOfValues !== 1) {
|
|
|
|
|
_initializeSlider: function () {
|
|
|
|
|
var numberOfValues = this._getNumberOfValues();
|
|
|
|
|
var init = function () {
|
|
|
|
|
this.$('.js-slider').rangeslider({
|
|
|
|
|
polyfill: false,
|
|
|
|
|
fillClass: 'rangesliderFill',
|
|
|
|
|
handleClass: 'rangesliderHandle',
|
|
|
|
|
onSlideEnd: this._onSlideChange
|
|
|
|
|
});
|
|
|
|
|
}.bind(this);
|
|
|
|
|
|
|
|
|
|
if (numberOfValues !== 1) {
|
|
|
|
|
!MutationObserver ? setTimeout(init, 0) : init();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$('.js-slider').toggle(numberOfValues !== 1);
|
|
|
|
|