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

1/**
2 * Facet dropdown component functionality
3 * @module variantFilter
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Document} document dom document object
6 * @return {Object} list of methods for variant filter component
7*/
8XA.component.search.variantFilter = (function ($, document) {
9    /**
10    * This object stores all public api methods
11    * @type {Object.<Methods>}
12    * @memberOf module:variantFilter
13    */
14    var api = {},
15        queryModel,
16        queryParameters,
17        variantMappings = [],
18        initialized = false,
19        variantMappings = {};
20    /**
21    * @name module:variantFilter.VariantSelectorModel
22    * @constructor
23    * @augments Backbone.Model
24    */
25    var VariantSelectorModel = Backbone.Model.extend(
26        /** @lends module:variantFilter.VariantSelectorModel.prototype **/
27        {
28            /**
29            * Default model options
30            * @default
31            */
32            defaults: {
33                dataProperties: {},
34                sig: []
35            }
36        });
37    /**
38    * @name module:variantFilter.VariantSelectorView
39    * @constructor
40    * @augments Backbone.View
41    */
42    var VariantSelectorView = XA.component.search.baseView.extend(
43        /** @lends module:variantFilter.VariantSelectorView.prototype **/
44        {
45            /**
46            * Initially sets data to model and watches events on which
47            * view should be updated
48            * @listens module:XA.component.search.vent~event:results-loaded
49            * @memberof module:variantFilter.VariantSelectorView
50            * @alias module:variantFilter.VariantSelectorView#initialize
51            */
52            initialize: function () {
53                var hashObj = queryModel.parseHashParameters(window.location.hash),
54                    dataProperties = this.$el.data(),
55                    sig = this.translateSignatures(dataProperties.properties.searchResultsSignature, "v"),
56                    inst = this,
57                    i;
58
59                if (dataProperties.properties.searchResultsSignature === null) {
60                    dataProperties.properties.searchResultsSignature = "";
61                }
62
63                this.model.set({ dataProperties: dataProperties });
64                this.model.set("sig", sig);
65
66                for (i = 0; i < sig.length; i++) {
67                    if (hashObj.hasOwnProperty(sig[i])) {
68                        this.selectVariantIcon(hashObj[sig[i]]);
69                    }
70                }
71
72                XA.component.search.vent.on("results-loaded", function (resultsData) {
73                    var rawSignatures = dataProperties.properties.searchResultsSignature.split(','),
74                        signature,
75                        startingVariant,
76                        signatureVariants;

77
78                    hashObj = queryModel.parseHashParameters(window.location.hash);
79
80                    for (i = 0; i < rawSignatures.length; i++) {
81                        signature = rawSignatures[i];
82                        if (hashObj.hasOwnProperty(sig[i]) && variantMappings.hasOwnProperty(signature)) {
83                            signatureVariants = variantMappings[signature];
84                            startingVariant = signatureVariants[hashObj[sig[i]]];
85                            inst.triggerAddVariant(startingVariant.cssClass, signature);
86                            inst.selectVariantIcon(hashObj[sig[i]]);
87                        } else {
88                            //selects first variant if there is no variant param in the hash
89                            if (variantMappings.hasOwnProperty(signature) && variantMappings[signature].hasOwnProperty(0)) {
90                                setTimeout(function () {
91                                    inst.triggerAddVariant(variantMappings[signature][0].cssClass, signature);
92                                    inst.selectVariantIcon(0);
93                                }, 100);
94                            }
95                        }
96                    }
97                });
98            },
99            /**
100            * list of events for Backbone View
101            * @memberof module:variantFilter.VariantSelectorView
102            * @alias module:variantFilter.VariantSelectorView#events
103            */
104            events: {
105                "click div > div": "changeVariant"
106            },
107            /**
108            * Changes variant of search result view
109            * @param {Event} EVent object with selected variant as a current Target
110            * @listens module:XA.component.search.vent~event:results-loaded
111            * @memberof module:variantFilter.VariantSelectorView
112            * @alias module:variantFilter.VariantSelectorView#changeVariant
113            */
114            changeVariant: function (event) {
115                var $target = $(event.currentTarget),
116                    sig = this.model.get("sig"),
117                    props = $target.data();
118
119                this.$el.find(".active-variant").removeClass("active-variant");
120                $target.addClass("active-variant");
121
122                queryParameters.updateHash(this.updateSignaturesHash(sig, props.variantindex, {}));
123                this.triggerAddVariant($(event.currentTarget).attr("class"));
124            },
125            /**
126            * Changes variant of search result view
127            * @param {String} classes css class of chosen variant
128            * @param {String} signature component signature
129            * @fires module:XA.component.search.vent~event:add-variant-class
130            * @memberof module:variantFilter.VariantSelectorView
131            * @alias module:variantFilter.VariantSelectorView#triggerAddVariant
132            */
133            triggerAddVariant: function (classes, signature) {
134                XA.component.search.vent.trigger("add-variant-class", {
135                    classes: classes,
136                    sig: signature
137                });
138            },
139            /**
140            * Manages active-variant class for variant icons
141            * @param {String} v data variant index of selected element 
142            * @fires module:XA.component.search.vent~event:add-variant-class
143            * @memberof module:variantFilter.VariantSelectorView
144            * @alias module:variantFilter.VariantSelectorView#selectVariantIcon
145            */
146            selectVariantIcon: function (v) {
147                this.$el.find("div[data-variantIndex]").removeClass("active-variant");
148                this.$el.find("div[data-variantIndex=" + v + "]").addClass("active-variant");
149            }
150        });
151
152    /**
153    * For each search variant filters component on a page creates instance of 
154    * ["VariantSelectorModel"]{@link module:variantFilter.VariantSelectorModel} and 
155    * ["VariantSelectorView"]{@link module:variantFilter.VariantSelectorView} 
156    * @memberOf module:variantFilter
157    * @alias module:variantFilter.init
158    */
159    api.init = function () {
160        if ($("body").hasClass("on-page-editor") || initialized) {
161            return;
162        }
163

164        queryModel = XA.component.search.query;
165        queryParameters = XA.component.search.parameters;
166
167        var variantSelectors = $(".variant-selector");
168        _.each(variantSelectors, function (elem) {
169            var view = new VariantSelectorView({ el: $(elem), model: new VariantSelectorModel() });
170        });
171
172        initialized = true;
173    };
174
175    /**
176    * 
177    * @param signature
178    * @param {String} signature component signature
179    * @memberOf module:variantFilter
180    * @alias module:variantFilter.getVariantMappings
181    */
182    api.getVariantMappings = function (signature) {
183        var variantSelectors = $(".variant-selector"),
184            componentVariants = {},
185            allVariantItems,
186            signatures = [],
187            properties,
188            i;
189
190        if (!variantMappings.hasOwnProperty(signature)) {
191            for (i = 0; i < variantSelectors.length; i++) {
192                properties = $(variantSelectors[i]).data().properties;
193                signatures = properties.searchResultsSignature.split(',');
194
195                if (signatures.indexOf(signature) !== -1) {
196                    allVariantItems = $(variantSelectors[i]).find(".variant-option");
197                    _.each(allVariantItems, function (variant) {
198                        var data = $(variant).data();
199                        componentVariants[data.variantindex] = { id: data.variant, cssClass: $(variant).attr("class") };
200                    });
201                    variantMappings[signature] = componentVariants;

202                }
203            }
204        }
205
206        if (variantMappings.hasOwnProperty(signature)) {
207            return variantMappings[signature];
208        }
209
210        return {};
211    };
212
213    return api;
214
215}(jQuery, document));
216
217XA.register('variantFilter', XA.component.search.variantFilter);
218