blacklight 7.34.0 → 8.0.0.beta1

data/app/javascript/blacklight/button_focus.js

@@ -1,10 +1,12 @@
-Blacklight.onLoad(function() {
-  // Button clicks should change focus. As of 10/3/19, Firefox for Mac and
-  // Safari both do not set focus to a button on button click.
-  // See https://zellwk.com/blog/inconsistent-button-behavior/ for background information
-  document.querySelectorAll('button.collapse-toggle').forEach((button) => {
-    button.addEventListener('click', () => {
-      event.target.focus();
-    });
-  });
-});
+const ButtonFocus = (() => {
+  document.addEventListener('click', (e) => {
+    // Button clicks should change focus. As of 10/3/19, Firefox for Mac and
+    // Safari both do not set focus to a button on button click.
+    // See https://zellwk.com/blog/inconsistent-button-behavior/ for background information
+    if (e.target.matches('[data-toggle="collapse"]') || e.target.matches('[data-bs-toggle="collapse"]')) {
+      e.target.focus()
+    }
+  })
+})()
+
+export default ButtonFocus

data/app/javascript/blacklight/checkbox_submit.js

@@ -1,134 +1,80 @@
-/* A JQuery plugin (should this be implemented as a widget instead? not sure)
-   that will convert a "toggle" form, with single submit button to add/remove
+/* Converts a "toggle" form, with single submit button to add/remove
    something, like used for Bookmarks, into an AJAXy checkbox instead.
-
    Apply to a form. Does require certain assumption about the form:
     1) The same form 'action' href must be used for both ADD and REMOVE
        actions, with the different being the hidden input name="_method"
        being set to "put" or "delete" -- that's the Rails method to pretend
        to be doing a certain HTTP verb. So same URL, PUT to add, DELETE
        to remove. This plugin assumes that.
-
        Plus, the form this is applied to should provide a data-doc-id
        attribute (HTML5-style doc-*) that contains the id/primary key
        of the object in question -- used by plugin for a unique value for
        DOM id's.
-
-  Uses HTML for a checkbox compatible with Bootstrap 3.
-
-   Pass in options for your class name and labels:
-   $("form.something").blCheckboxSubmit({
-        //cssClass is added to elements added, plus used for id base
-        cssClass: "toggle_my_kinda_form",
-        error: function() {
-          #optional callback
-        },
-        success: function(after_success_check_state) {
-          #optional callback
-        }
-   });
+  Uses HTML for a checkbox compatible with Bootstrap 4.
+   new CheckboxSubmit(document.querySelector('form.something')).render()
 */
-(function($) {
-    $.fn.blCheckboxSubmit = function(argOpts) {
-      this.each(function() {
-        var options = $.extend({}, $.fn.blCheckboxSubmit.defaults, argOpts);
-
-
-        var form = $(this);
-        form.children().hide();
-        //We're going to use the existing form to actually send our add/removes
-        //This works conveneintly because the exact same action href is used
-        //for both bookmarks/$doc_id.  But let's take out the irrelevant parts
-        //of the form to avoid any future confusion.
-        form.find('input[type=submit]').remove();
-
-        //View needs to set data-doc-id so we know a unique value
-        //for making DOM id
-        var uniqueId = form.attr('data-doc-id') || Math.random();
-        // if form is currently using method delete to change state,
-        // then checkbox is currently checked
-        var checked = (form.find('input[name=_method][value=delete]').length != 0);
-
-        var checkbox = $('<input type="checkbox">')
-          .addClass( options.cssClass )
-          .attr('id', options.cssClass + '_' + uniqueId);
-        var label = $('<label>')
-          .addClass( options.cssClass )
-          .attr('for', options.cssClass + '_' + uniqueId)
-          .attr('title', form.attr('title') || '');
-        var span = $('<span>');
-
-        label.append(checkbox);
-        label.append(' ');
-        label.append(span);
-
-        var checkboxDiv = $('<div class="checkbox" />')
-          .addClass(options.cssClass)
-          .append(label);
-
-        function updateStateFor(state) {
-            checkbox.prop('checked', state);
-            label.toggleClass('checked', state);
-            if (state) {
-               //Set the Rails hidden field that fakes an HTTP verb
-               //properly for current state action.
-               form.find('input[name=_method]').val('delete');
-               span.html(form.attr('data-present'));
-            } else {
-               form.find('input[name=_method]').val('put');
-               span.html(form.attr('data-absent'));
-            }
-          }
-
-        form.append(checkboxDiv);
-        updateStateFor(checked);
-
-        checkbox.click(function() {
-            span.html(form.attr('data-inprogress'));
-            label.attr('disabled', 'disabled');
-            checkbox.attr('disabled', 'disabled');
-
-            $.ajax({
-                url: form.attr('action'),
-                dataType: 'json',
-                type: form.attr('method').toUpperCase(),
-                data: form.serialize(),
-                error: function() {
-                   label.removeAttr('disabled');
-                   checkbox.removeAttr('disabled');
-                   options.error.call();
-                },
-                success: function(data, status, xhr) {
-                  //if app isn't running at all, xhr annoyingly
-                  //reports success with status 0.
-                  if (xhr.status != 0) {
-                    checked = ! checked;
-                    updateStateFor(checked);
-                    label.removeAttr('disabled');
-                    checkbox.removeAttr('disabled');
-                    options.success.call(form, checked, xhr.responseJSON);
-                  } else {
-                    label.removeAttr('disabled');
-                    checkbox.removeAttr('disabled');
-                    options.error.call();
-                  }
-                }
-            });
-
-            return false;
-        }); //checkbox.click
-
-
-      }); //this.each
-      return this;
-    };
-
-  $.fn.blCheckboxSubmit.defaults =  {
-            //cssClass is added to elements added, plus used for id base
-            cssClass: 'blCheckboxSubmit',
-            error: function() {
-              alert("Error");
-            },
-            success: function() {} //callback
-  };
-})(jQuery);
+export default class CheckboxSubmit {
+  constructor(form) {
+    this.form = form
+  }
+
+  async clicked(evt) {
+    this.spanTarget.innerHTML = this.form.getAttribute('data-inprogress')
+    this.labelTarget.setAttribute('disabled', 'disabled');
+    this.checkboxTarget.setAttribute('disabled', 'disabled');
+    const response = await fetch(this.formTarget.getAttribute('action'), {
+      body: new FormData(this.formTarget),
+      method: this.formTarget.getAttribute('method').toUpperCase(),
+      headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': document.querySelector('meta[name=csrf-token]')?.content
+      }
+    })
+    this.labelTarget.removeAttribute('disabled')
+    this.checkboxTarget.removeAttribute('disabled')
+    if (response.ok) {
+      const json = await response.json()
+      this.updateStateFor(!this.checked)
+      document.querySelector('[data-role=bookmark-counter]').innerHTML = json.bookmarks.count
+    } else {
+      alert('Error')
+    }
+  }
+
+  get checked() {
+    return (this.form.querySelectorAll('input[name=_method][value=delete]').length != 0)
+  }
+
+  get formTarget() {
+    return this.form
+  }
+
+  get labelTarget() {
+    return this.form.querySelector('[data-checkboxsubmit-target="label"]')
+  }
+
+  get checkboxTarget() {
+    return this.form.querySelector('[data-checkboxsubmit-target="checkbox"]')
+  }
+
+  get spanTarget() {
+    return this.form.querySelector('[data-checkboxsubmit-target="span"]')
+  }
+
+  updateStateFor(state) {
+    this.checkboxTarget.checked = state
+
+    if (state) {
+      this.labelTarget.classList.add('checked')
+      //Set the Rails hidden field that fakes an HTTP verb
+      //properly for current state action.
+      this.formTarget.querySelector('input[name=_method]').value = 'delete'
+      this.spanTarget.innerHTML = this.form.getAttribute('data-present')
+    } else {
+      this.labelTarget.classList.remove('checked')
+      this.formTarget.querySelector('input[name=_method]').value = 'put'
+      this.spanTarget.innerHTML = this.form.getAttribute('data-absent')
+    }
+  }
+}

data/app/javascript/blacklight/core.js

@@ -1,20 +1,20 @@
 const Blacklight = function() {
-  var buffer = new Array;
+  const buffer = new Array;
   return {
     onLoad: function(func) {
       buffer.push(func);
     },
 
     activate: function() {
-      for(var i = 0; i < buffer.length; i++) {
+      for(let i = 0; i < buffer.length; i++) {
         buffer[i].call();
       }
     },
 
     listeners: function () {
-      var listeners = [];
+      const listeners = [];
       if (typeof Turbo !== 'undefined') {
-        listeners.push('turbo:load');
+        listeners.push('turbo:load', 'turbo:frame-load');
       } else if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) {
         // Turbolinks 5
         if (Turbolinks.BrowserAdapter) {
@@ -51,4 +51,5 @@ Blacklight.onLoad(function () {
   elem.classList.add('js')
 })
 
-window.Blacklight = Blacklight
+
+export default Blacklight

data/app/javascript/blacklight/index.js

@@ -0,0 +1,13 @@
+import BookmarkToggle from './bookmark_toggle'
+import ButtonFocus from './button_focus'
+import Modal from './modal'
+import SearchContext from './search_context'
+import Core from './core'
+
+export default {
+  BookmarkToggle,
+  ButtonFocus,
+  Modal,
+  SearchContext,
+  onLoad: Core.onLoad
+}

data/app/javascript/blacklight/modal.js

@@ -23,12 +23,6 @@
   of the container will be placed inside the modal, the rest of the
   page will be ignored.
 
-  If you'd like to have a link or button that closes the modal,
-  you can just add a `data-dismiss="modal"` to the link,
-  standard Bootstrap convention. But you can also have
-  an href on this link for non-JS contexts, we'll make sure
-  inside the modal it closes the modal and the link is NOT followed.
-
   Link or forms inside the modal will ordinarily cause page loads
   when they are triggered. However, if you'd like their results
   to stay within the modal, just add `data-blacklight-modal="preserve"`
@@ -49,178 +43,119 @@
 
 
       <div class="modal-footer">
-        <%= link_to "Close the modal", request_done_path, class: "submit button dialog-close", data: { dismiss: "modal" } %>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       </div>
     </div>
 
 
-  One additional feature. If the content returned from the AJAX modal load
-  has an element with `data-blacklight-modal=close`, that will trigger the modal
-  to be closed. And if this element includes a node with class "flash_messages",
-  the flash-messages node will be added to the main page inside #main-flahses.
+  One additional feature. If the content returned from the AJAX form submission
+  can be a turbo-stream that defines some HTML fragementsand where on the page to put them:
+  https://turbo.hotwired.dev/handbook/streams
+*/
+import Blacklight from './core'
+import ModalForm from './modalForm'
+
+const Modal = (() => {
+  // We keep all our data in Blacklight.modal object.
+  // Create lazily if someone else created first.
+  if (Blacklight.modal === undefined) {
+    Blacklight.modal = {};
+  }
 
-  == Events
+  const modal = Blacklight.modal
+
+  // a Bootstrap modal div that should be already on the page hidden
+  modal.modalSelector = '#blacklight-modal';
+
+  // Trigger selectors identify forms or hyperlinks that should open
+  // inside a modal dialog.
+  modal.triggerLinkSelector  = 'a[data-blacklight-modal~=trigger]';
+
+  // preserve selectors identify forms or hyperlinks that, if activated already
+  // inside a modal dialog, should have destinations remain inside the modal -- but
+  // won't trigger a modal if not already in one.
+  //
+  // No need to repeat selectors from trigger selectors, those will already
+  // be preserved. MUST be manually prefixed with the modal selector,
+  // so they only apply to things inside a modal.
+  modal.preserveLinkSelector = modal.modalSelector + ' a[data-blacklight-modal~=preserve]';
+
+  modal.containerSelector    = '[data-blacklight-modal~=container]';
+
+  // Called on fatal failure of ajax load, function returns content
+  // to show to user in modal.  Right now called only for extreme
+  // network errors.
+  modal.onFailure = function (jqXHR, textStatus, errorThrown) {
+      console.error('Server error:', this.url, jqXHR.status, errorThrown);
+
+      const contents = `<div class="modal-header">
+        <div class="modal-title">There was a problem with your request.</div>
+        <button type="button" class="blacklight-modal-close btn-close close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        </div>
+        <div class="modal-body">
+          <p>Expected a successful response from the server, but got an error</p>
+          <pre>${this.type} ${this.url}\n${jqXHR.status}: ${errorThrown}</pre>
+        </div>`
+
+      document.querySelector(`${modal.modalSelector} .modal-content`).innerHTML = contents
+
+      modal.show();
+  }
 
-  We'll send out an event 'loaded.blacklight.blacklight-modal' with the #blacklight-modal
-  dialog as the target, right after content is loaded into the modal but before
-  it is shown (if not already a shown modal).  In an event handler, you can
-  inspect loaded content by looking inside $(this).  If you call event.preventDefault(),
-  we won't 'show' the dialog (although it may already have been shown, you may want to
-  $(this).modal("hide") if you want to ensure hidden/closed.
+  // Add the passed in contents to the modal and display it.
+modal.receiveAjax = function (contents) {
+      const domparser = new DOMParser();
+      const dom = domparser.parseFromString(contents, "text/html")
+      const elements = dom.querySelectorAll(`${modal.containerSelector} > *`)
+      document.querySelector(`${modal.modalSelector} .modal-content`).replaceChildren(...elements)
 
-  The data-blacklight-modal=close behavior is implemented with this event, see for example.
-*/
+      modal.show();
+  };
 
-// We keep all our data in Blacklight.modal object.
-// Create lazily if someone else created first.
-if (Blacklight.modal === undefined) {
-  Blacklight.modal = {};
-}
-
-// a Bootstrap modal div that should be already on the page hidden
-Blacklight.modal.modalSelector = '#blacklight-modal';
-
-// Trigger selectors identify forms or hyperlinks that should open
-// inside a modal dialog.
-Blacklight.modal.triggerLinkSelector  = 'a[data-blacklight-modal~=trigger]';
-Blacklight.modal.triggerFormSelector  = 'form[data-blacklight-modal~=trigger]';
-
-// preserve selectors identify forms or hyperlinks that, if activated already
-// inside a modal dialog, should have destinations remain inside the modal -- but
-// won't trigger a modal if not already in one.
-//
-// No need to repeat selectors from trigger selectors, those will already
-// be preserved. MUST be manually prefixed with the modal selector,
-// so they only apply to things inside a modal.
-Blacklight.modal.preserveLinkSelector = Blacklight.modal.modalSelector + ' a[data-blacklight-modal~=preserve]';
-
-Blacklight.modal.containerSelector    = '[data-blacklight-modal~=container]';
-
-Blacklight.modal.modalCloseSelector   = '[data-blacklight-modal~=close]';
-
-// Called on fatal failure of ajax load, function returns content
-// to show to user in modal.  Right now called only for extreme
-// network errors.
-Blacklight.modal.onFailure = function(jqXHR, textStatus, errorThrown) {
-  console.error('Server error:', this.url, jqXHR.status, errorThrown);
-
-  var contents = '<div class="modal-header">' +
-            '<div class="modal-title">There was a problem with your request.</div>' +
-            '<button type="button" class="blacklight-modal-close btn-close close" data-dismiss="modal" aria-label="Close">' +
-            '  <span aria-hidden="true">&times;</span>' +
-            '</button></div>' +
-            ' <div class="modal-body"><p>Expected a successful response from the server, but got an error</p>' +
-            '<pre>' +
-            this.type + ' ' + this.url + "\n" + jqXHR.status + ': ' + errorThrown +
-            '</pre></div>';
-  $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
-  Blacklight.modal.show();
-}
-
-Blacklight.modal.receiveAjax = function (contents) {
-    // does it have a data- selector for container?
-    // important we don't execute script tags, we shouldn't.
-    // code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/main/src/ajax/load.js?source=c#L62
-    var container =  $('<div>').
-      append( jQuery.parseHTML(contents) ).find( Blacklight.modal.containerSelector ).first();
-    if (container.length !== 0) {
-      contents = container.html();
-    }
-
-    $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
-
-    // send custom event with the modal dialog div as the target
-    var e    = $.Event('loaded.blacklight.blacklight-modal')
-    $(Blacklight.modal.modalSelector).trigger(e);
-    // if they did preventDefault, don't show the dialog
-    if (e.isDefaultPrevented()) return;
-
-    Blacklight.modal.show();
-};
-
-
-Blacklight.modal.modalAjaxLinkClick = function(e) {
-  e.preventDefault();
-
-  $.ajax({
-    url: $(this).attr('href')
-  })
-  .fail(Blacklight.modal.onFailure)
-  .done(Blacklight.modal.receiveAjax)
-};
-
-Blacklight.modal.modalAjaxFormSubmit = function(e) {
-    e.preventDefault();
 
-    $.ajax({
-      url: $(this).attr('action'),
-      data: $(this).serialize(),
-      type: $(this).attr('method') // POST
-    })
-    .fail(Blacklight.modal.onFailure)
-    .done(Blacklight.modal.receiveAjax)
-}
-
-
-
-Blacklight.modal.setupModal = function() {
-	// Event indicating blacklight is setting up a modal link,
-  // you can catch it and call e.preventDefault() to abort
-  // setup.
-	var e = $.Event('setup.blacklight.blacklight-modal');
-	$('body').trigger(e);
-	if (e.isDefaultPrevented()) return;
-
-  // Register both trigger and preserve selectors in ONE event handler, combining
-  // into one selector with a comma, so if something matches BOTH selectors, it
-  // still only gets the event handler called once.
-  $('body').on('click', Blacklight.modal.triggerLinkSelector + ', ' + Blacklight.modal.preserveLinkSelector,
-    Blacklight.modal.modalAjaxLinkClick);
-  $('body').on('submit', Blacklight.modal.triggerFormSelector + ', ' + Blacklight.modal.preserveFormSelector,
-    Blacklight.modal.modalAjaxFormSubmit);
-
-  // Catch our own custom loaded event to implement data-blacklight-modal=closed
-  $('body').on('loaded.blacklight.blacklight-modal', Blacklight.modal.checkCloseModal);
-
-  // we support doing data-dismiss=modal on a <a> with a href for non-ajax
-  // use, we need to suppress following the a's href that's there for
-  // non-JS contexts.
-  $('body').on('click', Blacklight.modal.modalSelector + ' a[data-dismiss~=modal]', function (e) {
+  modal.modalAjaxLinkClick = function(e) {
     e.preventDefault();
-  });
-};
-
-// A function used as an event handler on loaded.blacklight.blacklight-modal
-// to catch contained data-blacklight-modal=closed directions
-Blacklight.modal.checkCloseModal = function(event) {
-  if ($(event.target).find(Blacklight.modal.modalCloseSelector).length) {
-    var modalFlashes = $(this).find('.flash_messages');
+    const href = e.target.getAttribute('href')
+    fetch(href)
+      .then(response => {
+         if (!response.ok) {
+           throw new TypeError("Request failed");
+         }
+         return response.text();
+       })
+      .then(data => modal.receiveAjax(data))
+      .catch(error => modal.onFailure(error))
+  };
+
+  modal.setupModal = function() {
+    // Register both trigger and preserve selectors in ONE event handler, combining
+    // into one selector with a comma, so if something matches BOTH selectors, it
+    // still only gets the event handler called once.
+    document.addEventListener('click', (e) => {
+      if (e.target.matches(`${modal.triggerLinkSelector}, ${modal.preserveLinkSelector}`))
+        modal.modalAjaxLinkClick(e)
+      else if (e.target.matches('[data-bl-dismiss="modal"]'))
+        modal.hide()
+    })
+  };
 
-    Blacklight.modal.hide(event.target);
-    event.preventDefault();
+  modal.hide = function (el) {
+    const dom = document.querySelector(Blacklight.modal.modalSelector)
 
-    var mainFlashes = $('#main-flashes');
-    mainFlashes.append(modalFlashes);
-    modalFlashes.fadeIn(500);
+    if (!dom.open) return
+    dom.close()
   }
-}
 
-Blacklight.modal.hide = function(el) {
-  if (typeof bootstrap !== 'undefined' && typeof bootstrap.Modal !== 'undefined' && bootstrap.Modal.VERSION >= "5") {
-    bootstrap.Modal.getOrCreateInstance(el || document.querySelector(Blacklight.modal.modalSelector)).hide();
-  } else {
-    $(el || Blacklight.modal.modalSelector).modal('hide');
-  }
-}
+  modal.show = function(el) {
+    const dom = document.querySelector(Blacklight.modal.modalSelector)
 
-Blacklight.modal.show = function(el) {
-  if (typeof bootstrap !== 'undefined' && typeof bootstrap.Modal !== 'undefined' && bootstrap.Modal.VERSION >= "5") {
-    bootstrap.Modal.getOrCreateInstance(el || document.querySelector(Blacklight.modal.modalSelector)).show();
-  } else {
-    $(el || Blacklight.modal.modalSelector).modal('show');
+    if (dom.open) return
+    dom.showModal()
   }
-}
 
-Blacklight.onLoad(function() {
-  Blacklight.modal.setupModal();
-});
+  modal.setupModal()
+})()
+
+export default Modal

data/app/javascript/blacklight/modalForm.js

@@ -0,0 +1,60 @@
+// The email and sms forms are displayed inside a modal.  When the form is submitted,
+// this script closes the modal and puts the output on the main part of the page.
+// By default it is rendering catalog/sms_success and catalog/email_succcess.
+// These templates deliver a payload of the format used by turbo-streams.
+// See https://turbo.hotwired.dev/handbook/streams
+// That format allows a downstream application to override the template to define
+// multiple customizable areas of the page to get updated.
+export default class {
+    constructor(errorHandler, badRequestHandler, hideModal) {
+      this.errorHandler = errorHandler
+      this.badRequestHandler = badRequestHandler
+      this.hideModal = hideModal
+    }
+
+    get triggerFormSelector() {
+      return 'form[data-blacklight-modal~=trigger]'
+    }
+
+    bind() {
+      document.addEventListener('submit', (e) => {
+         if (e.target.matches(this.triggerFormSelector))
+          this.onSubmit(e)
+      })
+    }
+
+    // This is like a light-weight version of turbo that only supports append presently.
+    updateTurboStream(data) {
+        this.hideModal()
+        const domparser = new DOMParser();
+        const dom = domparser.parseFromString(data, "text/html")
+        dom.querySelectorAll("turbo-stream[action='append']").forEach((node) => {
+          const target = node.getAttribute('target')
+          const element = document.getElementById(target)
+          if (element)
+            element.append(node.querySelector('template').content.cloneNode(true))
+          else
+            console.error(`Unable to find an element on the page with and ID of "${target}""`)
+        })
+    }
+
+    onSubmit(e) {
+        e.preventDefault();
+        const form = e.target
+        fetch(form.action, {
+            body: new FormData(form),
+            headers: { "X-Requested-With": "XMLHttpRequest" }, // Ensures rails will return true when checking request.xhr?
+            method: form.method,
+          })
+          .then(response => {
+             if (response.status === 422) {
+               return response.text().then(content => this.badRequestHandler(content) )
+             }
+             if (!response.ok) {
+               throw new TypeError("Request failed");
+             }
+             response.text().then(content => this.updateTurboStream(content))
+           })
+          .catch(error => this.errorHandler(error))
+    }
+}