Merge pull request #12608 from CartoDB/slider-initialization

Slider initialization
pull/12628/head^2
Rubén Moya 7 years ago committed by GitHub
commit 181fb072a1

@ -40,6 +40,7 @@ Development
* Mustache conditionals support improved in popups (#support/763)
### Bug fixes / enhancements
* Slider initialization waits for it to be attached to the DOM
* Fix timeseries animation for pixel styles (#12571)
* Change request order in user-actions (#12548)
* Implement responsive behaviour for time series (#12470)

@ -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);

@ -41,11 +41,18 @@ describe('components/form-components/editors/slider', function () {
expect($(this.viewWithValues.$('.js-tick').get(5)).hasClass('is-highlighted')).toBeTruthy();
});
it('should display neither the ticks nor the slider when there is only one value', function () {
it('should display neither the ticks nor the slider when there is only one value', function (done) {
var self = this;
this.view._values = ['1'];
document.body.appendChild(this.view.el);
this.view.render();
expect(this.view.$('.js-slider').css('display')).toBe('none');
expect(this.view.$('.js-ticks').css('display')).toBe('none');
setTimeout(function () {
expect(self.view.$('.js-slider').css('display')).toBe('none');
expect(self.view.$('.js-ticks').css('display')).toBe('none');
done();
}, 0);
});
});

Loading…
Cancel
Save