https://www.ametekinstruments.it/-/media/base-themes/searchtheme/s…omponent-search-facet-range-slider.js?thm=1

1XA.component.search.facet.rangeslider = (function ($, document) {
2
3    var api = {},
4        urlHelperModel,
5        queryModel,
6        initialized = false;
7
8
9    var SearchFacetRangeSliderModel = Backbone.Model.extend({
10        defaults: {
11            dataProperties: {},
12            sig: [],
13            timeStamp: ''
14        }
15    });
16
17    var SearchFacetRangeSliderView = XA.component.search.baseView.extend({
18        initialize : function () {
19            var dataProperties = this.$el.data();
20            this.properties = dataProperties.properties;
21
22            if (this.model) {
23                this.model.set({dataProperties: this.properties});
24                this.model.set("sig", this.translateSignatures(this.properties.searchResultsSignature, this.properties.f));
25            }
26            this.model.on("change", this.updateSelectedValue, this);
27
28            XA.component.search.vent.on("hashChanged", this.updateModel.bind(this));
29
30            this.render();
31        },
32        events : {
33            'click .bottom-remove-filter, .clear-filter' : 'removeFacet',
34            'mouseup .ui-slider-handle' : 'updateModel'
35        },
36        render : function () {
37            var self = this,
38                sig = this.model.get('sig'),
39                queryModel = XA.component.search.query,
40                hashObj = queryModel.parseHashParameters(window.location.hash),
41                minRangeValue = parseFloat(this.model.get('dataProperties').minRangeValue),
42                maxRangeValue = parseFloat(this.model.get('dataProperties').maxRangeValue),
43                changeStep = parseFloat(this.model.get('dataProperties').changeStep),
44                $sliderValue = $('<div />').addClass('slider-value'),
45                facetClose = this.$el.find('.facet-heading > span'),
46                $slider = this.$el.find('.slider'),
47                selectedMinValue,
48                selectedMaxValue,
49                i;
50
51            for (i = 0; i < sig.length; i++) {
52                if (!jQuery.isEmptyObject(_.pick(hashObj, sig[i]))) {
53                    var values = _.values(_.pick(hashObj, sig[i]))[0];
54                    if (values) {
55                        selectedMinValue = values.split("|")[0];
56                        selectedMaxValue = values.split("|")[1];
57                        //add active class to group close button
58                        facetClose.addClass('has-active-facet');
59                    }
60                } else {
61                    selectedMinValue = parseFloat(this.model.get('dataProperties').selectedMinValue);
62                    selectedMaxValue = parseFloat(this.model.get('dataProperties').selectedMaxValue);
63                    facetClose.removeClass('has-active-facet');
64                }
65            }            
66
67            if (isNaN(minRangeValue)) {
68                minRangeValue = 0;
69            }
70            if (isNaN(maxRangeValue)) {
71                maxRangeValue = 0;
72            }
73            if (isNaN(changeStep) || changeStep===0) {
74                changeStep = 1;
75            } 
76            if (isNaN(selectedMinValue)) {
77                selectedMinValue = 0;
78            }
79            if (isNaN(selectedMaxValue)) {
80                selectedMaxValue = 0;
81            }            
82
83            $slider.slider({
84                range: true,
85                min: minRangeValue,
86                max: maxRangeValue,
87                step: changeStep,
88                values: [selectedMinValue, selectedMaxValue],
89                create: function (event, ui) {
90                    $(".slider-value").remove();
91                    $slider.after($sliderValue);
92                    if (selectedMinValue !== 0 || selectedMaxValue !== 0) {
93                        self.updateText(selectedMinValue, selectedMaxValue);
94                    }                    
95                },
96                slide: function (event, ui) {
97                    self.updateModel(self.updateSignaturesHash(sig, ui.values[0] + "|" + ui.values[1], {}));
98               }
99            });
100                        
101        },
102        removeFacet : function () {
103            var facet = this.$el,
104                sig = this.model.get('sig'),
105                $slider = this.$el.find('.slider'),
106                $facetClose = facet.find('.facet-heading > span'),
107                properties = this.model.get('dataProperties'),
108                hash = queryModel.parseHashParameters(window.location.hash);
109
110            $facetClose.removeClass('has-active-facet');
111
112            properties.selectedMinValue = properties.minRangeValue;
113            properties.selectedMaxValue = properties.maxRangeValue;
114
115            //update slider text to default min and max range values
116            this.updateText(properties.minRangeValue, properties.maxRangeValue);
117
118            //set slider valued to default min and max range values
119            $slider.slider("values", [properties.minRangeValue, properties.maxRangeValue]);
120
121            this.model.set({dataProperties : properties});
122
123            if (hash.hasOwnProperty(this.model.get('sig'))) {

124                queryModel.updateHash(this.updateSignaturesHash(sig, "", hash));
125            }
126        },
127        updateModel: function (hash) {
128            var sig = this.model.get('sig'),
129                facetPart,
130                dataProperties, 
131                values, 
132                selectedMinValue, 
133                selectedMaxValue,
134                i;
135
136            if (!hash) {
137                hash = queryModel.parseHashParameters(window.location.hash);
138            }
139
140            for (i = 0; i < sig.length; i++) {
141                facetPart = sig[i].toLocaleString();
142                if (hash.hasOwnProperty(facetPart)) {
143                    values = _.values(_.pick(hash, facetPart))[0];
144                    if (values !== '') {
145                        selectedMinValue = values.split("|")[0];
146                        selectedMaxValue = values.split("|")[1];
147
148                        if (typeof selectedMaxValue === "undefined" ||
149                            typeof selectedMinValue === "undefined") {
150                            continue;
151                        }
152
153                        dataProperties = this.model.get('dataProperties');
154                        dataProperties.selectedMinValue = selectedMinValue;
155                        dataProperties.selectedMaxValue = selectedMaxValue;
156                        this.model.set('dataProperties', dataProperties);
157                        this.model.set("timeStamp", (new Date()).getTime());
158                    } else {
159                        this.removeFacet();
160                    }
161                }
162            }
163        },
164        updateSelectedValue: function() {
165            var dataProperties = this.model.get('dataProperties'),
166                facetMinValue = dataProperties.selectedMinValue,
167                facetMaxValue = dataProperties.selectedMaxValue,
168                $slider = this.$el.find('.slider'),
169                sig = this.model.get('sig');
170
171            $slider.slider("values", [facetMinValue, facetMaxValue]);
172            this.updateText(facetMinValue, facetMaxValue);
173            this.$el.find('.facet-heading > span').addClass('has-active-facet');
174
175            queryModel.updateHash(this.updateSignaturesHash(sig, facetMinValue + "|" + facetMaxValue, {}));
176        },
177        updateText: function (facetMinValue, facetMaxValue) {
178            var $sliderValueField = this.$el.find('.slider-value'),
179                sliderText = this.model.get('dataProperties').formatingString;
180
181            sliderText = sliderText.replace('{from}', facetMinValue).replace('{to}', facetMaxValue);
182            $sliderValueField.html(sliderText);
183        }
184    });
185
186    api.init = function () {
187        queryModel = XA.component.search.query;
188        urlHelperModel = XA.component.search.url;
189
190        var searchFacetRangeSlider = $(".facet-range-selector");
191        _.each(searchFacetRangeSlider, function (elem) {
192            var searchFacetRangeSliderModel = new SearchFacetRangeSliderModel(),
193                searchFacetRangeSliderView = new SearchFacetRangeSliderView({el: $(elem), model : searchFacetRangeSliderModel});
194        });
195
196        initialized = true;
197    };
198
199    return api;
200
201}(jQuery, document));
202
203XA.register('searchFacetRangeSlider', XA.component.search.facet.rangeslider);