Commit d0071977 authored by nod_'s avatar nod_ Committed by Sam152

Issue #2771485 by nod_: Adhere to JavaScript coding standards

parent 4e76edbc
(function ($, Drupal) {
(function ($, Drupal, debounce) {
"use strict";
// Cached reference to $(window).
var $window = $(window);
// The threshold for how far to the bottom you should reach before reloading.
var scroll_threshold = 200;
var scrollThreshold = 200;
// The selector for the automatic pager.
var automatic_pager_selector = '.infinite-scroll-automatic-pager';
var automaticPagerSelector = '[data-drupal-views-infinite-scroll-pager="automatic"]';
// The selector for both manual load and automatic pager.
var pager_selector = '.infinite-scroll-pager';
var pagerSelector = '[data-drupal-views-infinite-scroll-pager]';
// The selector for the automatic pager.
var content_wrapper_selector = '.views-infinite-scroll-content-wrapper';
var contentWrapperSelector = '[data-drupal-views-infinite-scroll-content-wrapper]';
// The event and namespace that is bound to window for automatic scrolling.
var scroll_event = 'scroll.views_infinite_scroll';
var scrollEvent = 'scroll.views_infinite_scroll';
/**
* Insert a views infinite scroll view into the document.
*
* @param {jQuery} $newView
* New content detached from the DOM.
*/
$.fn.infiniteScrollInsertView = function ($new_view) {
var current_view_id = this.selector.replace('.js-view-dom-id-', 'views_dom_id:');
$.fn.infiniteScrollInsertView = function ($newView) {
var currentViewId = this.selector.replace('.js-view-dom-id-', 'views_dom_id:');
// Get the existing ajaxViews object.
var view = Drupal.views.instances[current_view_id];
var view = Drupal.views.instances[currentViewId];
// Remove once so that the exposed form and pager are processed on
// behavior attach.
view.$view.removeOnce('ajax-pager');
view.$exposed_form.removeOnce('exposed-form');
// Make sure infinite scroll can be reinitialized.
var $existing_pager = view.$view.find(pager_selector);
$existing_pager.removeOnce('infinite-scroll');
var $existingPager = view.$view.find(pagerSelector);
$existingPager.removeOnce('infinite-scroll');
var $new_rows = $new_view.find(content_wrapper_selector).children();
var $new_pager = $new_view.find('.js-pager__items');
var $newRows = $newView.find(contentWrapperSelector).children();
var $newPager = $newView.find('.js-pager__items');
// Add the new rows to existing view.
view.$view.find(content_wrapper_selector).append($new_rows);
view.$view.find(contentWrapperSelector).append($newRows);
// Replace the pager link with the new link and ajaxPageState values.
$existing_pager.replaceWith($new_pager);
$existingPager.replaceWith($newPager);
// Run views and VIS behaviors.
Drupal.attachBehaviors(view.$view[0]);
......@@ -48,18 +51,25 @@
/**
* Handle the automatic paging based on the scroll amount.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Initialize infinite scroll pagers and bind the scroll event.
* @prop {Drupal~behaviorDetach} detach
* During `unload` remove the scroll event binding.
*/
Drupal.behaviors.views_infinite_scroll_automatic = {
attach : function(context, settings) {
$(context).find(automatic_pager_selector).once('infinite-scroll').each(function() {
$(context).find(automaticPagerSelector).once('infinite-scroll').each(function() {
var $pager = $(this);
$pager.addClass('visually-hidden');
$window.on(scroll_event, function() {
if (window.innerHeight + window.pageYOffset > $pager.offset().top - scroll_threshold) {
$window.on(scrollEvent, debounce(function() {
if (window.innerHeight + window.pageYOffset > $pager.offset().top - scrollThreshold) {
$pager.find('[rel=next]').click();
$window.off(scroll_event);
$window.off(scrollEvent);
}
});
}, 200));
});
},
detach: function (context, settings, trigger) {
......@@ -68,11 +78,11 @@
// other than a scroll. AJAX filters are a good example of the event needing
// to be destroyed earlier than above.
if (trigger === 'unload') {
if ($(context).find(automatic_pager_selector).removeOnce('infinite-scroll').length) {
$window.off(scroll_event);
if ($(context).find(automaticPagerSelector).removeOnce('infinite-scroll').length) {
$window.off(scrollEvent);
}
}
}
};
})(jQuery, Drupal);
})(jQuery, Drupal, Drupal.debounce);
......@@ -59,7 +59,7 @@ class IntegrationSmokeTest extends WebTestBase {
// Ensure the wrapper div appears on the page.
$this->drupalGet('test-plugin');
$this->assertRaw('views-infinite-scroll-content-wrapper');
$this->assertRaw('data-drupal-views-infinite-scroll-content-wrapper');
}
}
......@@ -6,7 +6,7 @@
#}
{% if items.next %}
<ul class="js-pager__items pager infinite-scroll-pager{% if options.automatically_load_content %} infinite-scroll-automatic-pager{% endif %}">
<ul{{ attributes }}>
<li class="pager__item">
<a class="button" href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next">{{ options.button_text }}</a>
</li>
......
......@@ -5,3 +5,4 @@ views-infinite-scroll:
dependencies:
- core/jquery
- core/drupal
- core/drupal.debounce
......@@ -6,6 +6,7 @@
*/
use Drupal\Core\Url;
use Drupal\Core\Template\Attribute;
use Drupal\views_infinite_scroll\Plugin\views\pager\InfiniteScroll;
/**
......@@ -24,6 +25,11 @@ function views_infinite_scroll_preprocess_views_infinite_scroll_pager(&$vars) {
$vars['items']['next']['href'] = Url::fromRoute('<current>', [], $options);
}
$vars['#cache']['contexts'][] = 'url.query_args';
$vars['attributes'] = new Attribute([
'class' => ['js-pager__items', 'pager'],
'data-drupal-views-infinite-scroll-pager' => $vars['options']['automatically_load_content'] ? 'automatic' : TRUE,
]);
}
/**
......@@ -36,6 +42,7 @@ function views_infinite_scroll_preprocess_views_view(&$vars) {
if ($pager && $pager instanceof InfiniteScroll) {
$vars['rows']['#theme_wrappers'] = ['container'];
$vars['rows']['#attributes'] = [
'data-drupal-views-infinite-scroll-content-wrapper' => TRUE,
'class' => [
'views-infinite-scroll-content-wrapper',
'clearfix',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment