https://www.epogen.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    /**
19    * @name module:variantFilter.VariantSelectorModel
20    * @constructor
21    * @augments Backbone.Model
22    */
23    var VariantSelectorModel = Backbone.Model.extend(
24        /** @lends module:variantFilter.VariantSelectorModel.prototype **/
25        {
26            /**
27            * Default model options
28            * @default
29            */
30            defaults: {
31                dataProperties: {},
32                sig: []
33            }
34        });
35    /**
36    * @name module:variantFilter.VariantSelectorView
37    * @constructor
38    * @augments Backbone.View
39    */
40    var VariantSelectorView = XA.component.search.baseView.extend(
41        /** @lends module:variantFilter.VariantSelectorView.prototype **/
42        {
43            /**
44            * Initially sets data to model and watches events on which
45            * view should be updated
46            * @listens module:XA.component.search.vent~event:results-loaded
47            * @memberof module:variantFilter.VariantSelectorView
48            * @alias module:variantFilter.VariantSelectorView#initialize
49            */
50            initialize: function () {
51                var hashObj = queryModel.parseHashParameters(window.location.hash),
52                    dataProperties = this.$el.data(),
53                    sig = this.translateSignatures(dataProperties.properties.searchResultsSignature, "v"),
54                    inst = this,
55                    i;
56
57                if (dataProperties.properties.searchResultsSignature === null) {
58                    dataProperties.properties.searchResultsSignature = "";
59                }
60
61                this.model.set({ dataProperties: dataProperties });
62                this.model.set("sig", sig);
63
64                for (i = 0; i < sig.length; i++) {
65                    if (hashObj.hasOwnProperty(sig[i])) {
66                        this.selectVariantIcon(hashObj[sig[i]]);
67                    }
68                }
69
70                XA.component.search.vent.on("results-loaded", function (resultsData) {
71                    var rawSignatures = dataProperties.properties.searchResultsSignature.split(','),
72                        signature,
73                        startingVariant,
74                        signatureVariants;

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

162        queryModel = XA.component.search.query;
163        queryParameters = XA.component.search.parameters;
164
165        var variantSelectors = $(".variant-selector:not(.initialized)");
166
167        _.each(variantSelectors, function (elem) {
168            var $el = $(elem),
169                view = new VariantSelectorView({ el: $el, model: new VariantSelectorModel() });
170        
171            $el.addClass("initialized");
172        });
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