https://www.harrywinston.com/-/media/base-themes/hw-search-theme/s…&hash=5DF3F482D35EE72FC919BC5934BE9BD0

1/**
2 * Loads more component functionality
3 * @module searchLoadMore
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Document} document dom document object
6 * @return {Object} list of methods for working with load more component
7 */
8XA.component.search.loadMore = (function ($, document) {
9  /**
10   * This object stores all public api methods
11   * @type {Object.<Methods>}
12   * @memberOf module:searchFacetRangeSlider
13   */
14  var api = {},
15    initialized = false,
16    SearchLoadMoreModel,
17    SearchLoadMoreView;
18  /**
19   * @name module:searchLoadMore.SearchLoadMoreModel
20   * @constructor
21   * @augments Backbone.Model
22   */
23  SearchLoadMoreModel = Backbone.Model.extend(
24    /** @lends module:searchLoadMore.SearchLoadMoreModel.prototype **/
25
26    {
27      /**
28       * Default model options
29       * @default
30       */
31      defaults: {
32        dataProperties: {},
33        sig: [],
34      },
35    }
36  );
37  /**
38   * @name module:searchLoadMore.SearchLoadMoreView
39   * @constructor
40   * @augments Backbone.View
41   */
42  SearchLoadMoreView = Backbone.View.extend(
43    /** @lends module:searchLoadMore.SearchLoadMoreView.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:searchLoadMore.SearchLoadMoreView
50       */
51      initialize: function () {
52        var dataProperties = this.$el.data(),
53          that = this;
54
55        if (dataProperties.properties.searchResultsSignature === null) {
56          dataProperties.properties.searchResultsSignature = "";
57        }
58
59        if (this.model) {
60          this.model.set(
61            "sig",
62            dataProperties.properties.searchResultsSignature.split(",")
63          );
64        }
65
66        XA.component.search.vent.on("results-loaded", function (results) {
67          var sig = that.model.get("sig"),
68            offset = typeof results.offset !== "undefined" ? results.offset : 0,
69            i;
70
71          for (i = 0; i < sig.length; i++) {
72            if (sig[i] === results.searchResultsSignature) {
73              if (
74                results.pageSize >= results.dataCount ||
75                offset + results.pageSize >= results.dataCount
76              ) {
77                that.$el.hide();
78              } else {
79                that.$el.show();
80              }
81            }
82          }
83        });
84      },
85      /**
86       * list of events for Backbone View
87       * @memberof module:searchLoadMore.SearchLoadMoreView
88       * @alias module:searchLoadMore.SearchLoadMoreView#events
89       */
90      events: {
91        "mousedown input": "loadMore",
92        "keydown input": "handleKeyPress",
93      },
94
95      /**
96       * Handle key press event
97       * @param {Event} event - The key press event
98       * @memberof module:searchLoadMore.SearchLoadMoreView
99       * @alias module:searchLoadMore.SearchLoadMoreView#handleKeyPress
100       */
101      handleKeyPress: function (event) {
102        if (event.keyCode === 13 || event.keyCode === 32) {
103          const initialItemsCount = document.querySelectorAll(
104            ".search-result-list > li"
105          ).length;
106
107          this.loadMore();
108
109          setTimeout(() => {
110            const updatedItemsCount = document.querySelectorAll(
111              ".search-result-list > li"
112            ).length;
113            const lastOldItem = initialItemsCount - 1;
114
115            if (initialItemsCount < updatedItemsCount) {
116              const firstNewItem = document.querySelectorAll(
117                ".search-result-list > li"
118              )[lastOldItem];
119              if (firstNewItem) {
120                const itemLink = firstNewItem.querySelector("a");
121                itemLink.focus();
122              }
123            }
124          }, 1000);
125        }
126      },
127      /**
128       * Load more search results
129       * @fires  XA.component.search.vent~event:loadMore
130       * @listens module:XA.component.search.vent~event:results-loaded
131       * @memberof module:searchLoadMore.SearchLoadMoreView
132       * @alias module:searchLoadMore.SearchLoadMoreView#loadMore
133       */

134      loadMore: function () {
135        var sig = this.model.get("sig"),
136          i;
137
138        for (i = 0; i < sig.length; i++) {
139          XA.component.search.vent.trigger("loadMore", {
140            sig: sig[i],
141          });
142        }
143      },
144    }
145  );
146  /**
147   * For each search facet range slider component on a page creates instance of
148   * ["SearchLoadMoreModel"]{@link module:searchLoadMore.SearchLoadMoreModel} and
149   * ["SearchLoadMoreView"]{@link module:searchLoadMore.SearchLoadMoreView}
150   * @memberOf module:searchLoadMore
151   * @alias module:searchLoadMore.init
152   */
153  api.init = function () {
154    if ($("body").hasClass("on-page-editor") || initialized) {
155      return;
156    }
157
158    var searchLoadMore = $(".load-more");
159    _.each(searchLoadMore, function (elem) {
160      new SearchLoadMoreView({ el: $(elem), model: new SearchLoadMoreModel() });
161    });
162
163    initialized = true;
164  };
165
166  return api;
167})(jQuery, document);
168
169XA.register("searchLoadMore", XA.component.search.loadMore);