https://www.daltile.com/-/media/Base-Themes/SearchTheme/Scripts/component-search-page-size.js

1/**
2 * Page size component functionality
3 * @module searchPageSize
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Document} document dom document object
6 * @return {Object} list of methods for working with component page size
7*/
8XA.component.search.pageSize = (function ($, document) {
9    /**
10    * This object stores all public api methods
11    * @type {Object.<Methods>}
12    * @memberOf module:searchPageSize
13    */
14    var api = {},
15        queryModel,
16        queryParameters,
17        searchResultModels,
18        facetName = "p";
19    /**
20    * @name module:searchPageSize.SearchPageSizeModel
21    * @constructor
22    * @augments Backbone.Model
23    */
24    var SearchPageSizeModel = Backbone.Model.extend(
25        /** @lends module:searchPageSize.SearchPageSizeModel.prototype **/
26        {
27            /**
28            * Default model options
29            */
30            defaults: {
31                sig: []
32            }
33        });
34    /**
35     * @name module:searchPageSize.SearchPageSizeView
36     * @constructor
37     * @augments Backbone.View
38     */
39    var SearchPageSizeView = XA.component.search.baseView.extend(
40        /** @lends module:searchPageSize.SearchPageSizeView **/
41        {
42            clicks: 0,
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:hashChanged
47            * @memberof module:searchPageSize.SearchPageSizeView
48            * @alias module:searchPageSize.SearchPageSizeView#initialize
49            */
50            initialize: function () {
51                var inst = this,
52                    pageSize = this.getCurrentPageSize(),
53                    dataProperties = this.$el.data().properties;
54
55
56                this.model.set("sig", this.translateSignatures(dataProperties.searchResultsSignature, facetName));
57
58                this.selectOption(pageSize);
59
60                if (typeof pageSize === 'undefined' && dataProperties.defaultPageSize !== "") {
61                    inst.selectOption(dataProperties.defaultPageSize);
62                }
63
64                XA.component.search.vent.on("hashChanged", function (hash) {
65                    var sig = inst.model.get("sig"), i;
66                    for (i = 0; i < sig.length; i++) {
67                        if (hash.hasOwnProperty(sig[i])) {
68                            inst.selectOption(hash[sig[i]]);
69                        }
70                    }
71                });
72            },
73            /**
74             * list of events for Backbone View
75             * @memberof module:searchPageSize.SearchPageSizeView
76             * @alias module:searchPageSize.SearchPageSizeView#events
77             */
78            events: {
79                'click select': 'updatePageSizeClick',
80                'change select': 'updatePageSizeSelect'
81            },
82            /**
83            * Get page size value from hash
84            * @memberOf module:searchPageSize.SearchPageSizeView
85            * @alias module:searchPageSize.SearchPageSizeView#getCurrentPageSize
86            * @returns {String} value of current page size
87            */
88            getCurrentPageSize: function () {
89                var hashObj = queryModel.parseHashParameters(window.location.hash),
90                    sig = this.model.get("sig"),
91                    i;
92
93                for (i = 0; i < sig.length; i++) {
94                    if (hash.hasOwnProperty(sig[i])) {
95                        return hash[sig[i]];
96                    }
97                }
98            },
99            /**
100            * Manage 'selected' attribute for options 
101            * @param {String} pageSize active page 
102            * @memberOf module:searchPageSize.SearchPageSizeView
103            * @alias module:searchPageSize.SearchPageSizeView#selectOption
104            */
105            selectOption: function (pageSize) {
106                if (pageSize !== undefined) {
107                    var selectedOption = this.$el.find("select option[value='" + pageSize + "']");
108                    selectedOption.siblings().removeAttr('selected');
109                    selectedOption.attr('selected', 'selected');
110                }
111            },
112            /**
113            * Updates page size according to value of selected option
114            * @param {Event} event active page 
115            * @memberOf module:searchPageSize.SearchPageSizeView
116            * @alias module:searchPageSize.SearchPageSizeView#updatePageSizeClick
117            */
118            updatePageSizeClick: function (event) {
119                this.clicks++;
120                if (this.clicks === 2) {
121                    var pageSize = $(event.target).find("option:selected").val();
122                    if (pageSize !== undefined) {
123                        this.updatePageSize(pageSize);
124                    }
125                    this.clicks = 0;
126                }
127            },
128            /**
129           * Updates hash with selected page value
130           * @param {String} pageSize active page 
131           * @memberOf module:searchPageSize.updatePageSize
132           * @alias module:searchPageSize.SearchPageSizeView#updatePageSize
133           */
134            updatePageSize: function (pageSize) {
135                var sig = this.model.get("sig");
136                queryParameters.updateHash(this.updateSignaturesHash(sig, pageSize, {}));
137            },
138            /**
139            * Calls ['updatePageSize']{@link module:searchPageSize.SearchPageSizeView#updatePageSize}
140            *  with select page as a parameter
141            *  @param {Event} param event object with target element
142            * @memberOf module:searchPageSize.updatePageSize
143            * @alias module:searchPageSize.SearchPageSizeView#updatePageSizeSelect
144            */
145            updatePageSizeSelect: function (param) {
146                var pageSize = param.currentTarget.value;
147                this.updatePageSize(pageSize);
148            }
149        });
150
151    /**
152    * For each page size component on a page creates instance of 
153    * ["SearchPageSizeModel"]{@link module:searchPageSize.SearchPageSizeModel} and 

154    * ["SearchPageSizeView"]{@link module:searchPageSize.SearchPageSizeView} 
155    * @memberOf module:searchPageSelector
156    * @alias module:searchPageSize.SearchPageSizeView.init
157    */
158    api.init = function () {
159        if ($("body").hasClass("on-page-editor")) {
160            return;
161        }
162
163        queryModel = XA.component.search.query;
164        queryParameters = XA.component.search.parameters;
165        searchResultModels = XA.component.search.results.searchResultModels;
166
167        var searchPageSize = $(".page-size:not(.initialized)");
168
169        _.each(searchPageSize, function (elem) {
170            var $el = $(elem),
171                view = new SearchPageSizeView({ el: $el, model: new SearchPageSizeModel() });
172
173            $el.addClass("initialized");
174        });
175    };
176    /**
177   * Returns default page size 
178   * @memberOf module:searchPageSize
179   * @alias module:searchPageSize.getDefaultPageSizes
180   * @returns {Array|Number} array with signature and page sizes or -1
181   */
182    api.getDefaultPageSizes = function () {
183        var pageSizeComponents = $(".page-size"),
184            data,
185            i,
186            defaultPageSize,
187            searchResultsSignatures,
188            pageSize,
189            result = [];
190
191        if (pageSizeComponents.length > 0) {
192            for (i = 0; i < pageSizeComponents.length; i++) {
193                pageSize = $(pageSizeComponents[i]);
194                data = pageSize.data();
195                searchResultsSignatures = data.properties.searchResultsSignature.split(',')
196                defaultPageSize = data.properties.defaultPageSize;
197                result.push({
198                    signatures: searchResultsSignatures,
199                    defaultPageSize: defaultPageSize !== '' ? defaultPageSize : pageSize.find("select option:first-child").val()
200                });
201            }
202            return result;
203        }
204
205        return -1;
206    }
207
208    return api;
209
210}(jQuery, document));
211
212XA.register('searchPageSize', XA.component.search.pageSize);