https://terrancelaw.github.io/cow_event/js/filterSlider.js

1function FilterSlider(filterContentEl) {
2	const self = this;
3
4	self.filterContentEl = filterContentEl;
5	self.slider = null;
6}
7
8FilterSlider.prototype.init = initFilterSlider;
9FilterSlider.prototype.initHandleValues = initFilterSliderHandleValues;
10FilterSlider.prototype.initDragBehaviour = initDragFilterSliderBehaviour;
11FilterSlider.prototype.updateMinMax = updateFilterSliderMinMax;
12FilterSlider.prototype.updateValues = updateFilterSliderValues;
13FilterSlider.prototype.updateStep = updateFilterSliderStep;
14FilterSlider.prototype.updateHandles = updateFilterSliderHandles;
15FilterSlider.prototype.updateMinMaxText = updateFilterSliderMinMaxText;
16
17function initFilterSlider() {
18	const self = this;
19	var filterContentEl = self.filterContentEl;
20
21	self.slider = $(filterContentEl).find('input')
22		.bootstrapSlider({
23			tooltip: 'hide',
24			min: 0, max: 10,
25			value: [ 0, 10 ]
26		});
27}
28
29function initFilterSliderHandleValues() {
30	const self = this;
31	var filterContentEl = self.filterContentEl;
32	var slider = self.slider;
33	var minHandleLeft = $(filterContentEl).find('.slider .min-slider-handle').position().left;
34	var minHandleValue = slider.bootstrapSlider('getValue')[0];
35	var maxHandleLeft = $(filterContentEl).find('.slider .max-slider-handle').position().left;
36	var maxHandleValue = slider.bootstrapSlider('getValue')[1];
37
38	// add the lines and the values
39	$(filterContentEl).find('.slider')
40		.prepend('<div class="min-handle-line"></div>');
41	$(filterContentEl).find('.slider')
42		.prepend('<div class="max-handle-line"></div>');
43	$(filterContentEl).find('.slider')
44		.prepend('<span class="min-handle-text"></span>');
45	$(filterContentEl).find('.slider')
46		.prepend('<span class="max-handle-text"></span>');
47
48	// init the lines and the values
49	$(filterContentEl).find('.min-handle-line')
50		.css('left', minHandleLeft);
51	$(filterContentEl).find('.max-handle-line')
52		.css('left', maxHandleLeft);
53	$(filterContentEl).find('.min-handle-text')
54		.css('left', minHandleLeft)
55		.html(minHandleValue);
56	$(filterContentEl).find('.max-handle-text')
57		.css('left', maxHandleLeft)
58		.html(maxHandleValue);
59}
60
61function initDragFilterSliderBehaviour() {
62	const self = this;
63	var slider = self.slider;
64	var changeSliderTimer = null;
65	var filterCapsuleEl = self.filterContentEl.parentNode;
66
67	slider.bootstrapSlider('on', 'change', function() {
68		self.updateHandles();
69		RangeFilter.changeSlider(filterCapsuleEl, slider); // update states
70
71		// update vis after sliding is done
72		clearTimeout(changeSliderTimer);
73		changeSliderTimer = setTimeout(onSlidingEnd, 200);		
74	});
75
76	function onSlidingEnd() {
77		RightColumn.update();
78	}
79}
80
81function updateFilterSliderMinMax(min, max) {
82	const self = this;
83	var slider = self.slider;
84
85	slider.bootstrapSlider('setAttribute', 'min', min);
86	slider.bootstrapSlider('setAttribute', 'max', max);
87}
88
89function updateFilterSliderValues(range) {
90	const self = this;
91	var slider = self.slider;
92
93	slider.bootstrapSlider('setValue', range);
94}
95
96function updateFilterSliderStep(step) {
97	const self = this;
98	var slider = self.slider;
99
100	slider.bootstrapSlider('setAttribute', 'step', step);
101}
102
103function updateFilterSliderHandles() {
104	const self = this;
105	var filterContentEl = self.filterContentEl;
106	var slider = self.slider;
107	var minHandleLeft = $(filterContentEl).find('.slider .min-slider-handle').position().left;
108	var minHandleValue = slider.bootstrapSlider('getValue')[0];
109	var maxHandleLeft = $(filterContentEl).find('.slider .max-slider-handle').position().left
110	var maxHandleValue = slider.bootstrapSlider('getValue')[1];
111
112	$(filterContentEl).find('.min-handle-line')
113		.css('left', minHandleLeft);
114	$(filterContentEl).find('.max-handle-line')
115		.css('left', maxHandleLeft);
116	$(filterContentEl).find('.min-handle-text')
117		.css('left', minHandleLeft)
118		.html(minHandleValue);
119	$(filterContentEl).find('.max-handle-text')
120		.css('left', maxHandleLeft)
121		.html(maxHandleValue);
122}
123
124function updateFilterSliderMinMaxText() {
125	const self = this;
126	var filterContentEl = self.filterContentEl;
127	var slider = self.slider;
128	var minValue = slider.bootstrapSlider('getAttribute', 'min');

129	var maxValue = slider.bootstrapSlider('getAttribute', 'max');
130
131	$(filterContentEl).find('.min-text').html(minValue);
132	$(filterContentEl).find('.max-text').html(maxValue);
133}