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

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