https://www.middelfartbibliotek.dk/modules/contrib/views_infinite_scroll/js/infinite-scroll.js?v=11.4.7

1/**
2 * @file
3 * Infinite Scroll JS.
4 */
5
6(function ($, Drupal, debounce) {
7  "use strict";
8
9  // Cached reference to $(window).
10  var $window = $(window);
11
12  // The threshold for how far to the bottom you should reach before reloading.
13  var scrollThreshold = 200;
14
15  // The selector for the automatic pager.
16  var automaticPagerSelector = '[data-drupal-views-infinite-scroll-pager="automatic"]';
17
18  // The selector for both manual load and automatic pager.
19  var pagerSelector = '[data-drupal-views-infinite-scroll-pager]';
20
21  // The selector for the automatic pager.
22  var contentWrapperSelector = '[data-drupal-views-infinite-scroll-content-wrapper]';
23
24  // The event and namespace that is bound to window for automatic scrolling.
25  var scrollEvent = 'scroll.views_infinite_scroll';
26
27  /**
28   * Insert a views infinite scroll view into the document.
29   *
30   * @param {jQuery} $newView
31   *   New content detached from the DOM.
32   */
33  $.fn.infiniteScrollInsertView = function ($newView) {
34    // Extract the view DOM ID from the view classes.
35    var matches = /(js-view-dom-id-\w+)/.exec(this.attr('class'));
36
37    if (!matches) {
38      return;
39    }
40
41    var currentViewId = matches[1].replace('js-view-dom-id-', 'views_dom_id:');
42
43    // Get the existing ajaxViews object.
44    var view = Drupal.views.instances[currentViewId];
45    // Remove once so that the exposed form and pager are processed on
46    // behavior attach.
47    once.remove('ajax-pager', view.$view);
48    once.remove('exposed-form', view.$exposed_form);
49    // Make sure infinite scroll can be reinitialized.
50    var $existingPager = view.$view.find(pagerSelector);
51    once.remove('infinite-scroll', $existingPager);
52
53    var $newRows = $newView.find(contentWrapperSelector).children();
54    var $newPager = $newView.find(pagerSelector);
55
56    view.$view.find(contentWrapperSelector)
57      // Trigger a jQuery event on the wrapper to inform that new content was
58      // loaded and allow other scripts to respond to the event.
59      .trigger('views_infinite_scroll.new_content', $newRows.clone())
60      // Add the new rows to existing view.
61      .append($newRows);
62
63    // Replace the pager link with the new link and ajaxPageState values.
64    $existingPager.replaceWith($newPager);
65
66    // Run views and VIS behaviors.
67    Drupal.attachBehaviors(view.$view[0]);
68
69    window.history.pushState({}, '', $existingPager.find('a').attr('href'));
70  };
71
72  /**
73   * Handle the automatic paging based on the scroll amount.
74   *
75   * @type {Drupal~behavior}
76   *
77   * @prop {Drupal~behaviorAttach} attach
78   *   Initialize infinite scroll pagers and bind the scroll event.
79   * @prop {Drupal~behaviorDetach} detach
80   *   During `unload` remove the scroll event binding.
81   */
82  Drupal.behaviors.views_infinite_scroll_automatic = {
83    attach : function (context, settings) {
84      once('infinite-scroll', automaticPagerSelector, context).forEach(function (elem) {
85        var $pager = $(elem);
86        // Keep the pager in the layout (rather than visually-hidden) so the
87        // inline AJAX loading indicator, which is inserted inside it, is
88        // visible at the bottom of the list. The "Show more" button and title
89        // are hidden via CSS on this class instead. The class is added by JS so
90        // that, without JS, the button remains as a working fallback.
91        $pager.addClass('infinite-scroll-loading');
92        var isLoadNeeded = function () {
93          return window.innerHeight + window.pageYOffset > $pager.offset().top - scrollThreshold;
94        };
95        $window.on(scrollEvent, debounce(function () {
96          if (isLoadNeeded()) {
97            $pager.find('[rel=next]').click();
98            $window.off(scrollEvent);
99          }
100        }, 200));
101        if (isLoadNeeded()) {
102          $window.trigger(scrollEvent);
103        }
104      });
105    },
106    detach: function (context, settings, trigger) {
107      // In the case where the view is removed from the document, remove it's
108      // events. This is important in the case a view being refreshed for a reason
109      // other than a scroll. AJAX filters are a good example of the event needing
110      // to be destroyed earlier than above.
111      if (trigger === 'unload') {
112        if (once.remove('infinite-scroll', automaticPagerSelector, context).length) {
113          $window.off(scrollEvent);
114        }
115      }
116    }
117  };
118
119  /**
120   * Views AJAX pagination filter.
121   *
122   * In case the Entity View Attachment is rendered in a view context,
123   * the default filter function prevents the required 'Use AJAX' setting
124   * to work.
125   *
126   * @return {Boolean}
127   *   Whether to apply the Views AJAX paginator. VIS requires this setting
128   *   for pagination.
129   */
130  Drupal.views.ajaxView.prototype.filterNestedViews = function () {
131    return this.$view.hasClass('view-eva') || !this.$view.parents('.view').length;
132  };
133
134  /**
135   * Show the pager loading indicator inline instead of full screen.
136   *
137   * Views defaults pager AJAX to a full-screen progress indicator, which
138   * Drupal positions fixed in the middle of the viewport. For infinite scroll

139   * that means a spinner floats on screen even when the visitor has not
140   * scrolled down to where the next results load. Switching to the inline
141   * "throbber" indicator renders it next to the pager - at the bottom of the
142   * list - so it only appears once the visitor reaches it.
143   */
144  var originalAttachPagerLinkAjax = Drupal.views.ajaxView.prototype.attachPagerLinkAjax;
145  Drupal.views.ajaxView.prototype.attachPagerLinkAjax = function (id, link) {
146    originalAttachPagerLinkAjax.call(this, id, link);
147    if (this.pagerAjax && this.pagerAjax.progress) {
148      this.pagerAjax.progress.type = 'throbber';
149    }
150  };
151
152})(jQuery, Drupal, Drupal.debounce);