https://www.xanax.com/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-slider.js

1/**
2 * Facet Slider component functionality
3 * @module searchFacetSlider
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Document} document dom document object
6 * @return {Object} list of methods for working with slider
7*/
8XA.component.search.facet.slider = (function ($, document) {
9    /**
10    * This object stores all public api methods
11    * @type {Object.<Methods>}
12    * @memberOf module:searchFacetRangeSlider
13    */
14    var api = {},
15        urlHelperModel,
16        queryModel,
17        initialized = false;
18
19    /**
20    * @name module:searchFacetSlider.SearchFacetSliderModel
21    * @constructor
22    * @augments Backbone.Model
23    */
24    var SearchFacetSliderModel = Backbone.Model.extend(
25        /** @lends module:searchFacetSlider.SearchFacetSliderModel.prototype **/
26        {
27            /**
28            * Default model options
29            * @default
30            */
31            defaults: {
32                dataProperties: {},
33                selectedValue: null,
34                sig: [],
35                timeStamp: ''
36            }
37        });
38
39    /**
40     * @name module:searchFacetSlider.SearchFacetSliderView
41     * @constructor
42     * @augments Backbone.View
43     */
44    var SearchFacetSliderView = XA.component.search.baseView.extend(
45        /** @lends module:searchFacetSlider.SearchFacetSliderView.prototype **/
46        {
47            /**
48            * Initially sets data to model and watches events on which
49            * view should be updated
50            * @listens module:searchFacetSlider.SearchFacetSliderView~event:change
51            * @listens module:XA.component.search.vent~event:hashChanged
52            * @memberof module:searchFacetSlider.SearchFacetSliderView
53            */
54            initialize: function () {
55                var dataProperties = this.$el.data(),
56                    that = this;
57                this.properties = dataProperties.properties;
58
59                if (this.model) {
60                    this.model.set({ dataProperties: this.properties });
61                    this.model.set("sig", this.translateSignatures(this.properties.searchResultsSignature, this.properties.f));
62                }
63
64                this.model.on("change", this.updateSelectedValue, this);
65
66                XA.component.search.vent.on("hashChanged", this.updateModel.bind(this));
67
68                this.render();
69            },
70            /**
71           * list of events for Backbone View
72           * @memberof module:searchFacetSlider.SearchFacetSliderView
73           * @alias module:searchFacetSlider.SearchFacetSliderView#events
74           */
75            events: {
76                'click .bottom-remove-filter, .clear-filter': 'removeFacet',
77                'mouseup .ui-slider-handle': 'updateModel'
78            },
79            /**
80            * Render view. Use jQueryUI slider with set up from searchFacetSlider
81            * properties
82            * @memberof module:searchFacetSlider.SearchFacetSliderView
83            * @alias module:searchFacetSlider.SearchFacetSliderView#render
84            */
85            render: function () {
86                var self = this, i,
87                    sig = this.model.get('sig'),
88                    dataProperties = this.model.get('dataProperties'),
89                    hashObj = queryModel.parseHashParameters(window.location.hash),
90                    min = parseFloat(dataProperties.minValue),
91                    max = parseFloat(dataProperties.maxValue),
92                    selectedValue = !_.isEmpty(_.pick(hashObj, dataProperties.f)) ? _.values(_.pick(hashObj, dataProperties.f))[0] : parseFloat(dataProperties.selectedValue),
93                    changeStep = parseFloat(dataProperties.changeStep),
94                    $sliderValue = $('<div />').addClass('slider-value'),
95                    $slider = this.$el.find('.slider');
96
97                queryModel = XA.component.search.query;
98                urlHelperModel = XA.component.search.url;
99
100                if (isNaN(min)) {
101                    min = 0;
102                }
103                if (isNaN(max)) {
104                    max = 0;
105                }

106                if (isNaN(changeStep)) {
107                    changeStep = 1;
108                }
109                if (isNaN(selectedValue)) {
110                    selectedValue = 0;
111                }
112
113                $slider.slider({
114                    min: min,
115                    max: max,
116                    step: changeStep,
117                    value: selectedValue,
118                    slide: function (event, ui) {
119                        self.updateModel(self.updateSignaturesHash(sig, ui.value, {}));
120                    }
121                });
122
123
124                $(".slider-value").remove();
125                $sliderValue.html(dataProperties.formatingString.replace('{value}', selectedValue));
126                $slider.after($sliderValue);
127            },
128            /**
129             * Sets default values for Facet Slider and updates hash accordingly
130            * @memberof module:searchFacetSlider.SearchFacetSliderView
131            * @alias module:searchFacetSlider.SearchFacetSliderView#removeFacet
132             */
133            removeFacet: function () {
134                var facet = this.$el,
135                    sig = this.model.get('sig'),
136                    $slider = this.$el.find('.slider'),
137                    $sliderValueField = this.$el.find('.slider-value'),
138                    $facetClose = facet.find('.facet-heading > span'),
139                    properties = this.model.get('dataProperties'),
140                    dataProperties = facet.data('properties'),
141                    facetName = dataProperties.f;
142
143                $facetClose.removeClass('has-active-facet');
144
145                //Removes slider text
146                $sliderValueField.html("");
147
148                //Sets slider valued to default min and max range values
149                $slider.slider("value", dataProperties.minValue);
150
151                properties[facetName] = "";
152                queryModel.updateHash(this.updateSignaturesHash(sig, "", {}));
153                this.model.set({ dataProperties: properties });
154            },
155            /**
156            * Updates model based on hash parameters
157            * @param {Object} hash Object that contains hash parameters
158            * @memberof module:searchFacetSlider.SearchFacetSliderView
159            * @alias module:searchFacetSlider.SearchFacetSliderView#updateModel
160            */
161            updateModel: function (hash) {
162                var sig = this.model.get('sig'),
163                    dataProperties,
164                    facetPart,
165                    value,
166                    i;
167
168                if (!hash) {
169                    hash = queryModel.parseHashParameters(window.location.hash);
170                }
171
172                for (i = 0; i < sig.length; i++) {
173                    facetPart = sig[i].toLowerCase();
174                    if (hash.hasOwnProperty(facetPart)) {
175                        value = _.values(_.pick(hash, facetPart))[0];
176                        if (value !== '') {
177                            dataProperties = this.model.get('dataProperties');
178                            dataProperties.selectedValue = value;
179                            this.model.set('dataProperties', dataProperties);
180                            this.model.set("timeStamp", (new Date()).getTime());
181                        } else {
182                            this.removeFacet();
183                        }
184                    }
185                }
186            },
187            /**
188            * Updates slider selected values text
189            * @param {Object} hash Object that contains hash parameters
190            * @memberof module:searchFacetSlider.SearchFacetSliderView
191            * @alias module:searchFacetSlider.SearchFacetSliderView#updateSelectedValue
192            **/
193            updateSelectedValue: function () {
194                var dataProperties = this.model.get('dataProperties'),
195                    value = dataProperties.selectedValue,
196                    $sliderValueField = this.$el.find('.slider-value'),
197                    $slider = this.$el.find('.slider'),
198                    sig = this.model.get('sig'),
199                    sliderText;
200
201                $slider.slider("value", value);
202                sliderText = dataProperties.formatingString.replace('{value}', value);
203                $sliderValueField.html(sliderText);
204
205                this.$el.find('.facet-heading > span').addClass('has-active-facet');
206

207                queryModel.updateHash(this.updateSignaturesHash(sig, value, {}));
208            }
209        });
210    /**
211     * For each search facet range slider component on a page creates instance of 
212     * ["SearchFacetSliderModel"]{@link module:searchFacetSlider.SearchFacetSliderModel} and 
213     * ["SearchFacetSliderView"]{@link module:searchFacetSlider.SearchFacetSliderView} 
214     * @memberOf module:searchFacetSlider
215     * @alias module:searchFacetSlider.init
216     */
217    api.init = function () {
218        queryModel = XA.component.search.query;
219        urlHelperModel = XA.component.search.url;
220
221        var searchFacetSlider = $(".facet-slider");
222        _.each(searchFacetSlider, function (elem) {
223            var searchFacetSliderModel = new SearchFacetSliderModel(),
224                searchFacetSliderView = new SearchFacetSliderView({ el: $(elem), model: searchFacetSliderModel });
225        });
226
227        initialized = true;
228    };
229
230    return api;
231
232}(jQuery, document));
233
234XA.register('searchFacetSlider', XA.component.search.facet.slider);