X-Git-Url: http://aleph1.co.uk/gitweb/?a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Fviews%2Fjs%2Fajax_view.es6.js;h=55c85fda18832ba4659c41dda97d3a5e815c3349;hb=5b8bb166bfa98770daef9de5c127fc2e6ef02340;hp=0c8535890b5a005ae7f1f3da748ccc0e6b038d65;hpb=af6d1fb995500ae68849458ee10d66abbdcfb252;p=yaffs-website diff --git a/web/core/modules/views/js/ajax_view.es6.js b/web/core/modules/views/js/ajax_view.es6.js index 0c8535890..55c85fda1 100644 --- a/web/core/modules/views/js/ajax_view.es6.js +++ b/web/core/modules/views/js/ajax_view.es6.js @@ -3,7 +3,7 @@ * Handles AJAX fetching of views, including filter submission and response. */ -(function ($, Drupal, drupalSettings) { +(function($, Drupal, drupalSettings) { /** * Attaches the AJAX behavior to exposed filters forms and key View links. * @@ -13,14 +13,32 @@ * Attaches ajaxView functionality to relevant elements. */ Drupal.behaviors.ViewsAjaxView = {}; - Drupal.behaviors.ViewsAjaxView.attach = function () { - if (drupalSettings && drupalSettings.views && drupalSettings.views.ajaxViews) { - const ajaxViews = drupalSettings.views.ajaxViews; - Object.keys(ajaxViews || {}).forEach((i) => { + Drupal.behaviors.ViewsAjaxView.attach = function(context, settings) { + if (settings && settings.views && settings.views.ajaxViews) { + const { + views: { ajaxViews }, + } = settings; + Object.keys(ajaxViews || {}).forEach(i => { Drupal.views.instances[i] = new Drupal.views.ajaxView(ajaxViews[i]); }); } }; + Drupal.behaviors.ViewsAjaxView.detach = (context, settings, trigger) => { + if (trigger === 'unload') { + if (settings && settings.views && settings.views.ajaxViews) { + const { + views: { ajaxViews }, + } = settings; + Object.keys(ajaxViews || {}).forEach(i => { + const selector = `.js-view-dom-id-${ajaxViews[i].view_dom_id}`; + if ($(selector, context).length) { + delete Drupal.views.instances[i]; + delete settings.views.ajaxViews[i]; + } + }); + } + } + }; /** * @namespace @@ -42,7 +60,7 @@ * @param {string} settings.view_dom_id * The DOM id of the view. */ - Drupal.views.ajaxView = function (settings) { + Drupal.views.ajaxView = function(settings) { const selector = `.js-view-dom-id-${settings.view_dom_id}`; this.$view = $(selector); @@ -59,11 +77,13 @@ let queryString = window.location.search || ''; if (queryString !== '') { // Remove the question mark and Drupal path component if any. - queryString = queryString.slice(1).replace(/q=[^&]+&?|&?render=[^&]+/, ''); + queryString = queryString + .slice(1) + .replace(/q=[^&]+&?|&?render=[^&]+/, ''); if (queryString !== '') { // If there is a '?' in ajaxPath, clean url are on and & should be // used to add parameters. - queryString = ((/\?/.test(ajaxPath)) ? '&' : '?') + queryString; + queryString = (/\?/.test(ajaxPath) ? '&' : '?') + queryString; } } @@ -79,15 +99,23 @@ this.settings = settings; // Add the ajax to exposed forms. - this.$exposed_form = $(`form#views-exposed-form-${settings.view_name.replace(/_/g, '-')}-${settings.view_display_id.replace(/_/g, '-')}`); - this.$exposed_form.once('exposed-form').each($.proxy(this.attachExposedFormAjax, this)); + this.$exposed_form = $( + `form#views-exposed-form-${settings.view_name.replace( + /_/g, + '-', + )}-${settings.view_display_id.replace(/_/g, '-')}`, + ); + this.$exposed_form + .once('exposed-form') + .each($.proxy(this.attachExposedFormAjax, this)); // Add the ajax to pagers. this.$view // Don't attach to nested views. Doing so would attach multiple behaviors // to a given element. .filter($.proxy(this.filterNestedViews, this)) - .once('ajax-pager').each($.proxy(this.attachPagerAjax, this)); + .once('ajax-pager') + .each($.proxy(this.attachPagerAjax, this)); // Add a trigger to update this view specifically. In order to trigger a // refresh use the following code. @@ -106,25 +134,27 @@ /** * @method */ - Drupal.views.ajaxView.prototype.attachExposedFormAjax = function () { + Drupal.views.ajaxView.prototype.attachExposedFormAjax = function() { const that = this; this.exposedFormAjax = []; // Exclude the reset buttons so no AJAX behaviours are bound. Many things // break during the form reset phase if using AJAX. - $('input[type=submit], input[type=image]', this.$exposed_form).not('[data-drupal-selector=edit-reset]').each(function (index) { - const selfSettings = $.extend({}, that.element_settings, { - base: $(this).attr('id'), - element: this, + $('input[type=submit], input[type=image]', this.$exposed_form) + .not('[data-drupal-selector=edit-reset]') + .each(function(index) { + const selfSettings = $.extend({}, that.element_settings, { + base: $(this).attr('id'), + element: this, + }); + that.exposedFormAjax[index] = Drupal.ajax(selfSettings); }); - that.exposedFormAjax[index] = Drupal.ajax(selfSettings); - }); }; /** * @return {bool} * If there is at least one parent with a view class return false. */ - Drupal.views.ajaxView.prototype.filterNestedViews = function () { + Drupal.views.ajaxView.prototype.filterNestedViews = function() { // If there is at least one parent with a view class, this view // is nested (e.g., an attachment). Bail. return !this.$view.parents('.view').length; @@ -133,8 +163,11 @@ /** * Attach the ajax behavior to each link. */ - Drupal.views.ajaxView.prototype.attachPagerAjax = function () { - this.$view.find('ul.js-pager__items > li > a, th.views-field a, .attachment .views-summary a') + Drupal.views.ajaxView.prototype.attachPagerAjax = function() { + this.$view + .find( + 'ul.js-pager__items > li > a, th.views-field a, .attachment .views-summary a', + ) .each($.proxy(this.attachPagerLinkAjax, this)); }; @@ -146,7 +179,7 @@ * @param {HTMLElement} link * The link element. */ - Drupal.views.ajaxView.prototype.attachPagerLinkAjax = function (id, link) { + Drupal.views.ajaxView.prototype.attachPagerLinkAjax = function(id, link) { const $link = $(link); const viewData = {}; const href = $link.attr('href'); @@ -178,7 +211,7 @@ * @param {string} response.selector * Selector to use. */ - Drupal.AjaxCommands.prototype.viewsScrollTop = function (ajax, response) { + Drupal.AjaxCommands.prototype.viewsScrollTop = function(ajax, response) { // Scroll to the top of the view. This will allow users // to browse newly loaded content after e.g. clicking a pager // link. @@ -193,7 +226,7 @@ } // Only scroll upward. if (offset.top - 10 < $(scrollTarget).scrollTop()) { - $(scrollTarget).animate({ scrollTop: (offset.top - 10) }, 500); + $(scrollTarget).animate({ scrollTop: offset.top - 10 }, 500); } }; -}(jQuery, Drupal, drupalSettings)); +})(jQuery, Drupal, drupalSettings);