@behance/helicropter
Advanced tools
Comparing version 15.6.2 to 16.0.0
{ | ||
"name": "@behance/helicropter", | ||
"version": "15.6.2", | ||
"version": "16.0.0", | ||
"description": "My helicropter goes \"whosh whosh whosh\"", | ||
@@ -5,0 +5,0 @@ "main": "src/js/index.js", |
@@ -14,5 +14,15 @@ import View from '@behance/beff/View'; | ||
rendered() { | ||
this._isEdge = this._detectEdge(); | ||
this._$slider = this.$view.find('.js-scale-slider'); | ||
this._$slider.on('input', () => this.trigger('scale', this._currentScale())); | ||
this._$slider.on('input', () => { | ||
this.trigger('scale', this._currentScale()); | ||
this._colorSlider(); | ||
}); | ||
this._$slider.toggleClass('helicropter--edge-slider', this._isEdge); | ||
this._sliderTrackBackgroudColor = this._model.sliderTrackBackgroundColor || '#cccccc'; | ||
this._sliderTrackActiveColor = this._model.sliderTrackActiveColor || '#0057ff'; | ||
this.on({ | ||
@@ -23,2 +33,3 @@ 'image-loaded'({ scale, minScale }) { | ||
this._evaluateScalability(); | ||
this._colorSlider(); | ||
}, | ||
@@ -35,2 +46,4 @@ | ||
}); | ||
this._colorSlider(); | ||
}, | ||
@@ -52,2 +65,16 @@ | ||
_detectEdge() { | ||
return window.navigator.userAgent.indexOf('Edge') > -1; | ||
}, | ||
_colorSlider() { | ||
if (this._isEdge) { | ||
return; | ||
} | ||
const value = this._$slider[0].value; | ||
this._$slider.css('background', `linear-gradient(to right, ${this._sliderTrackActiveColor} ${value}%, ${this._sliderTrackBackgroudColor} ${value}%)`); | ||
}, | ||
_evaluateScalability() { | ||
@@ -54,0 +81,0 @@ if (MAX_SCALE === this._scaleMin) { |
@@ -5,4 +5,11 @@ import { maxScale, ZoomSlider } from 'ZoomSlider'; | ||
beforeEach(function() { | ||
this.getExpectedSliderStyle = (value) => { | ||
return `background: linear-gradient(to right, rgb(255, 255, 255) ${value}%, rgb(0, 0, 0) ${value}%);`; | ||
}; | ||
this.$el = affix('.js-zoom-slider-parent'); | ||
this.zoomSlider = new ZoomSlider(); | ||
this.zoomSlider = new ZoomSlider({ | ||
sliderTrackBackgroundColor: '#000', | ||
sliderTrackActiveColor: '#fff', | ||
}); | ||
this.zoomSlider.render(this.$el); | ||
@@ -24,2 +31,11 @@ }); | ||
}); | ||
it('colors _$slider initially', function() { | ||
const value = 20; | ||
const expectedStyle = this.getExpectedSliderStyle(value); | ||
this.zoomSlider.$view.find('.js-scale-slider').val(value).trigger('input'); | ||
expect(this.zoomSlider.$view.find('.js-scale-slider')[0].getAttribute('style')).toEqual(expectedStyle); | ||
}); | ||
}); | ||
@@ -173,3 +189,34 @@ | ||
}); | ||
describe('Additional behaviors', function() { | ||
it('colors _$slider when user slides the input range', function() { | ||
const value = 50; | ||
const expectedStyle = this.getExpectedSliderStyle(value); | ||
this.zoomSlider.$view.find('.js-scale-slider').val(value).trigger('input'); | ||
expect(this.zoomSlider.$view.find('.js-scale-slider')[0].getAttribute('style')).toEqual(expectedStyle); | ||
}); | ||
it('should add "helicropter--edge-slider" class if it is edge', function() { | ||
this.zoomSlider = new ZoomSlider(); | ||
spyOn(this.zoomSlider, '_detectEdge').and.returnValue(true); | ||
this.zoomSlider.render(this.$el); | ||
expect(this.zoomSlider.$view.find('.js-scale-slider')).toHaveClass('helicropter--edge-slider'); | ||
}); | ||
it('should not add "helicropter--edge-slider" class if it is not edge', function() { | ||
this.zoomSlider = new ZoomSlider(); | ||
spyOn(this.zoomSlider, '_detectEdge').and.returnValue(false); | ||
this.zoomSlider.render(this.$el); | ||
expect(this.zoomSlider.$view.find('.js-scale-slider')).not.toHaveClass('helicropter--edge-slider'); | ||
}); | ||
}); | ||
}); | ||
}); |
Sorry, the diff of this file is not supported yet
8702297
4999