https://www.gilead.com/ja-jp/-/media/base-themes/gilead-search-theme/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
18    /**
19    * @name module:searchFacetSlider.SearchFacetSliderModel
20    * @constructor
21    * @augments Backbone.Model
22    */
23    var SearchFacetSliderModel = Backbone.Model.extend(
24        /** @lends module:searchFacetSlider.SearchFacetSliderModel.prototype **/
25        {
26            /**
27            * Default model options
28            * @default
29            */
30            defaults: {
31                dataProperties: {},
32                selectedValue: null,
33                sig: [],
34                timeStamp: ''
35            }
36        });
37
38    /**
39     * @name module:searchFacetSlider.SearchFacetSliderView
40     * @constructor
41     * @augments Backbone.View
42     */
43    var SearchFacetSliderView = XA.component.search.baseView.extend(
44        /** @lends module:searchFacetSlider.SearchFacetSliderView.prototype **/
45        {
46            /**
47            * Initially sets data to model and watches events on which
48            * view should be updated
49            * @listens module:searchFacetSlider.SearchFacetSliderView~event:change
50            * @listens module:XA.component.search.vent~event:hashChanged
51            * @memberof module:searchFacetSlider.SearchFacetSliderView
52            */
53            initialize: function () {
54                var dataProperties = this.$el.data(),
55                    that = this;
56                this.properties = dataProperties.properties;
57
58                if (this.model) {
59                    this.model.set({ dataProperties: this.properties });
60                    this.model.set("sig", this.translateSignatures(this.properties.searchResultsSignature, this.properties.f));
61                }
62
63                this.model.on("change", this.updateSelectedValue, this);
64
65                XA.component.search.vent.on("hashChanged", this.updateModel.bind(this));
66
67                this.render();
68            },
69            /**
70           * list of events for Backbone View
71           * @memberof module:searchFacetSlider.SearchFacetSliderView
72           * @alias module:searchFacetSlider.SearchFacetSliderView#events
73           */
74            events: {
75                'click .bottom-remove-filter, .clear-filter': 'removeFacet',
76                'mouseup .ui-slider-handle': 'updateModel'
77            },
78            /**
79            * Render view. Use jQueryUI slider with set up from searchFacetSlider
80            * properties
81            * @memberof module:searchFacetSlider.SearchFacetSliderView
82            * @alias module:searchFacetSlider.SearchFacetSliderView#render
83            */
84            render: function () {
85                var self = this, i,
86                    sig = this.model.get('sig'),
87                    dataProperties = this.model.get('dataProperties'),
88                    hashObj = queryModel.parseHashParameters(window.location.hash),
89                    min = parseFloat(dataProperties.minValue),
90                    max = parseFloat(dataProperties.maxValue),
91                    selectedValue = !_.isEmpty(_.pick(hashObj, dataProperties.f)) ? _.values(_.pick(hashObj, dataProperties.f))[0] : parseFloat(dataProperties.selectedValue),
92                    changeStep = parseFloat(dataProperties.changeStep),
93                    $sliderValue = $('<div />').addClass('slider-value'),
94                    $slider = this.$el.find('.slider');
95
96                queryModel = XA.component.search.query;
97                urlHelperModel = XA.component.search.url;
98
99                if (isNaN(min)) {
100                    min = 0;
101                }
102                if (isNaN(max)) {
103                    max = 0;
104                }

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

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