ISSUE-459: Ajax/Facet/Views improvements + ML similarity contextual filter and facets and 10.3 compatibility

js/mirador_strawberry.js

@@ -281,13 +281,6 @@
             );
           }
 
-          // Build page parameter
-          const canvasIndices = visibleCanvases.map(c => canvasIds.indexOf(c) + 1)
-          if (view === 'single' || canvasIndices.length == 1) {
-            newParams.page = canvasIndices[0]
-          } else if (view === 'book') {
-            newParams.page = canvasIndices.find(e => !!e).join(',')
-          }
           // Now at the end. If a VTT annotation requested a Canvas to be set. we need to check if we have in the config
           // A temporary stored valued of the last clicked annotation.
           // Use if here.
@@ -305,22 +298,33 @@
           const { windowId, companionWindowId } = action
           const query = yield effects.select(Mirador.selectors.getSearchQuery, { companionWindowId, windowId })
           newParams.search = query
+          let $fragment = '';
+          for (const [p, val] of new URLSearchParams(newParams).entries()) {
+            $fragment += `${p}/${val}/`;
+          };
+          $fragment = $fragment.slice(0, -1);
+          history.replaceState(
+            { searchParams: newParams },
+            '',
+            `${window.location.pathname}#${$fragment}`
+          );
         }
         else if (action.type === ActionTypes.REMOVE_SEARCH) {
           delete newParams.search
+          let $fragment = '';
+          for (const [p, val] of new URLSearchParams(newParams).entries()) {
+            $fragment += `${p}/${val}/`;
+          };
+          $fragment = $fragment.slice(0, -1);
+          history.replaceState(
+            { searchParams: newParams },
+            '',
+            `${window.location.pathname}#${$fragment}`
+          );
         }
 
-        let $fragment = '';
-        for (const [p, val] of new URLSearchParams(newParams).entries()) {
-          $fragment += `${p}/${val}/`;
-        };
-        $fragment = $fragment.slice(0, -1);
 
-        history.replaceState(
-          { searchParams: newParams },
-          '',
-          `${window.location.pathname}#${$fragment}`
-        );
+
       }
       function* rootSaga() {
         yield effects.takeEvery(
@@ -403,6 +407,25 @@
             $options.manifests = $manifests;
           }
 
+          const readFragmentSearch = function() {
+            const urlArray = window.location.hash.replace('#','').split('/');
+            const urlHash = {};
+            for (let i = 0; i < urlArray.length; i += 2) {
+              urlHash[urlArray[i]] = urlArray[i + 1];
+            }
+            if (urlHash['search'] != undefined) {
+              return decodeURIComponent(urlHash['search'].replace(/\+/g, " "));
+            }
+            else {
+              return '';
+            }
+          };
+
+          const search_string = readFragmentSearch();
+          if (search_string.length > 0 ) {
+            $options.windows[0].defaultSearchQuery = search_string;
+          }
+
           // Allow last minute overrides. These are more complex bc we have windows as an array and window too.
           // Allow a last minute override, exclude main element manifest
           if (typeof drupalSettings.format_strawberryfield.mirador[element_id]['viewer_overrides'] == 'object' &&
@@ -434,6 +457,8 @@
             };
           }
 
+
+
           //@TODO add an extra Manifests key with every other one so people can select the others.
           if (drupalSettings.format_strawberryfield.mirador[element_id]['custom_js'] == true) {
             const miradorInstance = renderMirador($options);

modules/format_strawberryfield_views/js/facets-views-ajax.js

@@ -22,7 +22,7 @@
       // Loop through all facets.
       $.each(settings.facets_views_ajax, function (facetId, facetSettings) {
         // Get the View for the current facet.
-        var view, current_dom_id, view_path;
+        var view, current_dom_id, view_path, all_dom_ids_need_refresh = [];
         if (settings.views && settings.views.ajaxViews) {
           $.each(settings.views.ajaxViews, function (domId, viewSettings) {
             // Check if we have facet for this view.
@@ -31,20 +31,37 @@
               current_dom_id = viewSettings.view_dom_id;
               view_path = facetSettings.ajax_path;
             }
+            else {
+              // Means we don't have facets for this view, but we still might have a pager that needs to be reloaded, so it catches up with the Facet Query arguments.
+              const pagers = $('.js-view-dom-id-' + viewSettings.view_dom_id).find(
+                '.js-pager__items a, th.views-field a, .attachment .views-summary a',
+              );
+              if (typeof pagers !== "undefined" &&  pagers.length > 0) {
+                // means we have a pager
+                all_dom_ids_need_refresh.push(viewSettings.view_dom_id);
+              }
+            }
           });
         }
 
         if (!view || view.length != 1) {
           return;
         }
-
+        all_dom_ids_need_refresh = Array.from(new Set(all_dom_ids_need_refresh));
         // Update view on summary block click.
         if (Drupal.AjaxFacetsView.updateFacetsSummaryBlock() && (facetId === 'facets_summary_ajax')) {
             const elementsToAttach = once('summaryblock_attache', '[data-drupal-facets-summary-id=' + facetSettings.facets_summary_id + ']', context);
             $(elementsToAttach).children('ul').children('li').click(function (e) {
             e.preventDefault();
             var facetLink = $(this).find('a');
+            // Note for myself here. Only the actual View that is targeted by the current Facet can use facetLink.attr('href')
+            // the other ones need to use the original URL cleaned up + the arguments of the facetLink.attr('href')
+            // This is needed since Facet URL generator will (for good reasons) the ?page=argument.
+            // And also is absolutely unaware of pagers with different names!
             Drupal.AjaxFacetsView.UpdateView(facetLink.attr('href'), current_dom_id, view_path);
+              all_dom_ids_need_refresh.forEach((other_dom_id) => {
+              });
+
           });
         }
         // Update view on facet item click.
@@ -54,7 +71,13 @@
               $(facet_item).unbind('facets_filter.facets');
               $(facet_item).on('facets_filter.facets', function (event, url) {
                 $('.js-facets-widget').trigger('facets_filtering');
+                // Note for myself here. Only the actual View that is targeted by the current Facet can use facetLink.attr('href')
+                // the other ones need to use the original URL cleaned up + the arguments of the facetLink.attr('href')
+                // This is needed since Facet URL generator will (for good reasons) the ?page=argument.
+                // And also is absolutely unaware of pagers with different names!
                 Drupal.AjaxFacetsView.UpdateView(url, current_dom_id, view_path);
+                all_dom_ids_need_refresh.forEach((other_dom_id) => {
+                });
               });
             }
           });
@@ -68,29 +91,45 @@
 
   Drupal.AjaxFacetsView.UpdateView = function (href, current_dom_id, view_path) {
     // Refresh view.
-    if (typeof(Drupal.views.instances['views_dom_id:' + current_dom_id]) !== 'undefined') {
+    var atLeastone = false;
+      if (typeof(Drupal.views.instances['views_dom_id:' + current_dom_id]) !== 'undefined') {
+        atLeastone = true;
       var views_parameters = Drupal.Views.parseQueryString(href);
       let views_path = 'search';
       if (Drupal.views.instances['views_dom_id:' + current_dom_id].settings.view_base_path !== 'undefined') {
         views_path = Drupal.views.instances['views_dom_id:' + current_dom_id].settings.view_base_path;
       }
-      var views_arguments = Drupal.Views.parseViewArgs(href, views_path);
-      var views_settings = $.extend(
+      const views_arguments = Drupal.Views.parseViewArgs(href, views_path);
+      const views_settings = $.extend(
         {},
         Drupal.views.instances['views_dom_id:' + current_dom_id].settings,
         views_arguments,
         views_parameters
       );
       // Not even needed here if we are using the original element settings ....mmmm
       // Update View.
-      var views_ajax_settings = Drupal.views.instances['views_dom_id:' + current_dom_id].element_settings;
+      const views_ajax_settings = Drupal.views.instances['views_dom_id:' + current_dom_id].element_settings;
       views_ajax_settings.submit = views_settings;
       // Used to be the way in Drupal 9.x to 10.0 ... views_ajax_settings.url = view_path + '?q=' + href;
       views_ajax_settings.url = view_path;
 
-      var viewRefreshAjaxObject = Drupal.ajax(views_ajax_settings);
+      const viewRefreshAjaxObject = Drupal.ajax(views_ajax_settings);
+      const success = viewRefreshAjaxObject.success();
+
+      viewRefreshAjaxObject.success = function (response, status) {
+        return Promise.resolve(
+          Drupal.Ajax.prototype.success.call(viewRefreshAjaxObject, response, status),
+        ).then(() => {
+          Drupal.AjaxFacetsView.updateFacetsBlocks(href, views_settings.view_name, views_settings.view_display_id);
+          if (typeof(drupalSettings.format_strawberryfield_views) !== 'undefined') {
+            // Refresh facets blocks.
+            Drupal.updateModalViewsFormBlocks(href, views_settings.view_name, views_settings.view_display_id);
+          }
+        });
+      };
       viewRefreshAjaxObject.execute();
-
+    }
+    if (atLeastone) {
       // Update url.
       window.historyInitiated = true;
       window.history.pushState(null, document.title, href);
@@ -102,11 +141,6 @@
           window.location.reload();
         }
       });
-      this.updateFacetsBlocks(href, views_settings.view_name, views_settings.view_display_id);
-      if (typeof(drupalSettings.format_strawberryfield_views) !== 'undefined') {
-        // Refresh facets blocks.
-        Drupal.updateModalViewsFormBlocks(href, views_settings.view_name, views_settings.view_display_id);
-      }
     }
   }
   Drupal.AjaxFacetsView.updateFacetsBlocks = function (href, view_id, current_display_id) {
@@ -133,7 +167,6 @@
 
     // Update facets summary block.
     if (this.updateFacetsSummaryBlock()) {
-
       var $facet_summary_wrapper = $('[data-drupal-facets-summary-id=' + settings.facets_views_ajax.facets_summary_ajax.facets_summary_id + ']');
       if ($facet_summary_wrapper.length > 0) {
         var facet_summary_wrapper_id = $facet_summary_wrapper.attr('id');
@@ -148,7 +181,9 @@
         facet_settings.submit.facet_summary_wrapper_id = settings.facets_views_ajax.facets_summary_ajax.facets_summary_id;
       }
     }
-    Drupal.ajax(facet_settings).execute();
+    if (Object.keys(facet_settings.submit.facets_blocks).length > 0) {
+      Drupal.ajax(facet_settings).execute();
+    }
   };
 
   // Helper function to determine if we should update the summary block.

modules/format_strawberryfield_views/js/sbf-views-ajax-interactions.js

@@ -35,7 +35,16 @@
                 view_instance.settings.view_args = image_annotation;
               }
             }
-            view_instance.$view.trigger("RefreshView");
+            //view_instance.$view.trigger("RefreshView");
+
+            let href = window.location.href;
+            if (typeof Drupal.AjaxFacetsView != "undefined") {
+              Drupal.AjaxFacetsView.UpdateView(href, view_instance.settings.view_dom_id, "/views/ajax"/*view_instance.settings.view_path*/);
+            }
+            else {
+              view_instance.$view.trigger("RefreshView");
+            }
+            //Drupal.AjaxFacetsView.updateFacetsBlocks(href, view_instance.settings.view_name ,  view_instance.settings.view_display_id);
           }
         }
       }