blacklight 6.20.0 → 7.3.0

data/app/{assets/javascripts → javascript}/blacklight/autocomplete.js

@@ -1,4 +1,5 @@
 /*global Bloodhound */
+import Bloodhound from 'typeahead.js/dist/bloodhound.js'
 
 Blacklight.onLoad(function() {
   'use strict';
@@ -9,7 +10,7 @@ Blacklight.onLoad(function() {
       return;
     }
     var suggestUrl = $el.data().autocompletePath;
-    
+
     var terms = new Bloodhound({
       datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
       queryTokenizer: Bloodhound.tokenizers.whitespace,
@@ -18,7 +19,7 @@ Blacklight.onLoad(function() {
         wildcard: '%QUERY'
       }
     });
-    
+
     terms.initialize();
 
     $el.typeahead({

data/app/javascript/blacklight/bookmark_toggle.js

@@ -0,0 +1,25 @@
+(function($) {
+    //change form submit toggle to checkbox
+    Blacklight.doBookmarkToggleBehavior = function() {
+      if (typeof Blacklight.do_bookmark_toggle_behavior == 'function') {
+        console.warn("do_bookmark_toggle_behavior is deprecated. Use doBookmarkToggleBehavior instead.");
+        return Blacklight.do_bookmark_toggle_behavior();
+      }
+      $(Blacklight.doBookmarkToggleBehavior.selector).blCheckboxSubmit({
+         // cssClass is added to elements added, plus used for id base
+         cssClass: 'toggle-bookmark',
+         success: function(checked, response) {
+           if (response.bookmarks) {
+             $('[data-role=bookmark-counter]').text(response.bookmarks.count);
+           }
+         }
+      });
+    };
+    Blacklight.doBookmarkToggleBehavior.selector = 'form.bookmark-toggle';
+
+Blacklight.onLoad(function() {
+  Blacklight.doBookmarkToggleBehavior();
+});
+
+
+})(jQuery);

data/app/javascript/blacklight/button_focus.js

@@ -0,0 +1,9 @@
+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.
+  document.querySelectorAll('button.collapse-toggle').forEach((button) => {
+    button.addEventListener('click', () => {
+      event.target.focus();
+    });
+  });
+});

data/app/javascript/blacklight/checkbox_submit.js

@@ -0,0 +1,134 @@
+/* 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
+   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
+        }
+   });
+*/
+(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);

data/app/javascript/blacklight/core.js

@@ -0,0 +1,41 @@
+Blacklight = function() {
+  var buffer = new Array;
+  return {
+    onLoad: function(func) {
+      buffer.push(func);
+    },
+
+    activate: function() {
+      for(var i = 0; i < buffer.length; i++) {
+        buffer[i].call();
+      }
+    },
+
+    listeners: function () {
+      var listeners = [];
+      if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) {
+        // Turbolinks 5
+        if (Turbolinks.BrowserAdapter) {
+          listeners.push('turbolinks:load');
+        } else {
+          // Turbolinks < 5
+          listeners.push('page:load', 'DOMContentLoaded');
+        }
+      } else {
+        listeners.push('DOMContentLoaded');
+      }
+
+      return listeners;
+    }
+  };
+}();
+
+// turbolinks triggers page:load events on page transition
+// If app isn't using turbolinks, this event will never be triggered, no prob.
+Blacklight.listeners().forEach(function(listener) {
+  document.addEventListener(listener, function() {
+    Blacklight.activate()
+  })
+})
+
+$('.no-js').removeClass('no-js').addClass('js');

data/app/javascript/blacklight/facet_load.js

@@ -0,0 +1,22 @@
+/*global Blacklight */
+
+'use strict';
+
+Blacklight.doResizeFacetLabelsAndCounts = function() {
+  // adjust width of facet columns to fit their contents
+  function longer (a,b) { return b.textContent.length - a.textContent.length }
+
+  document.querySelectorAll('.facet-values, .pivot-facet').forEach(function(elem){
+    const nodes = elem.querySelectorAll('.facet-count')
+    // TODO: when we drop ie11 support, this can become the spread operator:
+    const longest = Array.from(nodes).sort(longer)[0]
+    if (longest && longest.textContent) {
+      const width = longest.textContent.length + 1 + 'ch'
+      elem.querySelector('.facet-count').style.width = width
+    }
+  })
+}
+
+Blacklight.onLoad(function() {
+  Blacklight.doResizeFacetLabelsAndCounts()
+})

data/app/{assets/javascripts/blacklight/ajax_modal.js → javascript/blacklight/modal.js}

@@ -1,27 +1,25 @@
-//= require blacklight/core
-
 /*
-  The ajax_modal plugin can display some interactions inside a Bootstrap
+  The blacklight modal plugin can display some interactions inside a Bootstrap
   modal window, including some multi-page interactions.
 
   It supports unobtrusive Javascript, where a link or form that would have caused
   a new page load is changed to display it's results inside a modal dialog,
   by this plugin.  The plugin assumes there is a Bootstrap modal div
-  on the page with id #ajax-modal to use as the modal -- the standard Blacklight
+  on the page with id #blacklight-modal to use as the modal -- the standard Blacklight
   layout provides this.
 
   To make a link or form have their results display inside a modal, add
-  `data-ajax-modal="trigger"` to the link or form. (Note, form itself not submit input)
+  `data-blacklight-modal="trigger"` to the link or form. (Note, form itself not submit input)
   With Rails link_to helper, you'd do that like:
 
-      link_to something, link, :data => {:ajax_modal => "trigger"}
+      link_to something, link, data: { blacklight_modal: "trigger" }
 
   The results of the link href or form submit will be displayed inside
   a modal -- they should include the proper HTML markup for a bootstrap modal's
   contents. Also, you ordinarily won't want the Rails template with wrapping
   navigational elements to be used.  The Rails controller could suppress
   the layout when a JS AJAX request is detected, OR the response
-  can include a `<div data-ajax-modal="container">` -- only the contents
+  can include a `<div data-blacklight-modal="container">` -- only the contents
   of the container will be placed inside the modal, the rest of the
   page will be ignored.
 
@@ -33,12 +31,12 @@
 
   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-ajax-modal="preserve"`
+  to stay within the modal, just add `data-blacklight-modal="preserve"`
   to the link or form.
 
   Here's an example of what might be returned, demonstrating most of the devices available:
 
-    <div data-ajax-modal="container">
+    <div data-blacklight-modal="container">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 class="modal-title">Request Placed</h3>
@@ -46,47 +44,46 @@
 
       <div class="modal-body">
         <p>Some message</p>
-        <%= link_to "This result will still be within modal", some_link, :data => {:ajax_modal => "preserve"} %>
+        <%= link_to "This result will still be within modal", some_link, data: { blacklight: "preserve" } %>
       </div>
 
 
       <div class="modal-footer">
-        <%= link_to "Close the modal", request_done_path, :class => "submit button dialog-close", :data => {:dismiss => "modal"} %>
+        <%= link_to "Close the modal", request_done_path, class: "submit button dialog-close", data: { dismiss: "modal" } %>
       </div>
     </div>
 
 
   One additional feature. If the content returned from the AJAX modal load
-  has an element with `data-ajax-modal=close`, that will trigger the modal
+  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.
 
   == Events
 
-  We'll send out an event 'loaded.blacklight.ajax-modal' with the #ajax-modal
+  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.
 
-  The data-ajax-modal=close behavior is implemented with this event, see for example.
+  The data-blacklight-modal=close behavior is implemented with this event, see for example.
 */
 
-// We keep all our data in Blacklight.ajaxModal object.
+// We keep all our data in Blacklight.modal object.
 // Create lazily if someone else created first.
-if (Blacklight.ajaxModal === undefined) {
-  Blacklight.ajaxModal = {};
+if (Blacklight.modal === undefined) {
+  Blacklight.modal = {};
 }
 
-
 // a Bootstrap modal div that should be already on the page hidden
-Blacklight.ajaxModal.modalSelector = "#ajax-modal";
+Blacklight.modal.modalSelector = '#blacklight-modal';
 
 // Trigger selectors identify forms or hyperlinks that should open
 // inside a modal dialog.
-Blacklight.ajaxModal.triggerLinkSelector  = "a[data-ajax-modal~=trigger], a.lightboxLink,a.more_facets_link,.ajax_modal_launch";
-Blacklight.ajaxModal.triggerFormSelector  = "form[data-ajax-modal~=trigger], form.ajax_form";
+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
@@ -95,57 +92,58 @@ Blacklight.ajaxModal.triggerFormSelector  = "form[data-ajax-modal~=trigger], for
 // 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.ajaxModal.preserveLinkSelector = Blacklight.ajaxModal.modalSelector + ' a[data-ajax-modal~=preserve]';
-Blacklight.ajaxModal.preserveFormSelector = Blacklight.ajaxModal.modalSelector + ' form[data-ajax-modal~=preserve]'
+Blacklight.modal.preserveLinkSelector = Blacklight.modal.modalSelector + ' a[data-blacklight-modal~=preserve]';
 
-Blacklight.ajaxModal.containerSelector    = "[data-ajax-modal~=container]";
+Blacklight.modal.containerSelector    = '[data-blacklight-modal~=container]';
 
-Blacklight.ajaxModal.modalCloseSelector   = "[data-ajax-modal~=close], span.ajax-close-modal";
+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.ajaxModal.onFailure = function(data) {
-  var contents =  "<div class='modal-header'>" +
-           "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" +
-           "Network Error</div>";
-  $(Blacklight.ajaxModal.modalSelector).find('.modal-content').html(contents);
-  $(Blacklight.ajaxModal.modalSelector).modal('show');
+Blacklight.modal.onFailure = function(data) {
+  var contents =  '<div class="modal-header">' +
+            '<div class="modal-title">Network Error</div>' +
+            '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' +
+            '  <span aria-hidden="true">&times;</span>' +
+            '</button>';
+  $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
+  $(Blacklight.modal.modalSelector).modal('show');
 }
 
-Blacklight.ajaxModal.receiveAjax = function (contents) {
+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/master/src/ajax/load.js?source=c#L62
-    var container =  $("<div>").
-      append( jQuery.parseHTML(contents) ).find( Blacklight.ajaxModal.containerSelector ).first();
+    var container =  $('<div>').
+      append( jQuery.parseHTML(contents) ).find( Blacklight.modal.containerSelector ).first();
     if (container.length !== 0) {
       contents = container.html();
     }
 
-    $(Blacklight.ajaxModal.modalSelector).find('.modal-content').html(contents);
+    $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
 
     // send custom event with the modal dialog div as the target
-    var e    = $.Event('loaded.blacklight.ajax-modal');
-    $(Blacklight.ajaxModal.modalSelector).trigger(e);
+    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.ajaxModal.modalSelector).modal('show');
+    $(Blacklight.modal.modalSelector).modal('show');
 };
 
 
-Blacklight.ajaxModal.modalAjaxLinkClick = function(e) {
+Blacklight.modal.modalAjaxLinkClick = function(e) {
   e.preventDefault();
 
   $.ajax({
     url: $(this).attr('href')
   })
-  .fail(Blacklight.ajaxModal.onFailure)
-  .done(Blacklight.ajaxModal.receiveAjax)
+  .fail(Blacklight.modal.onFailure)
+  .done(Blacklight.modal.receiveAjax)
 };
 
-Blacklight.ajaxModal.modalAjaxFormSubmit = function(e) {
+Blacklight.modal.modalAjaxFormSubmit = function(e) {
     e.preventDefault();
 
     $.ajax({
@@ -153,54 +151,54 @@ Blacklight.ajaxModal.modalAjaxFormSubmit = function(e) {
       data: $(this).serialize(),
       type: $(this).attr('method') // POST
     })
-    .fail(Blacklight.ajaxModal.onFailure)
-    .done(Blacklight.ajaxModal.receiveAjax)
+    .fail(Blacklight.modal.onFailure)
+    .done(Blacklight.modal.receiveAjax)
 }
 
 
 
-Blacklight.ajaxModal.setup_modal = function() {
+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.ajax-modal');
-	$("body").trigger(e);
+	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.ajaxModal.triggerLinkSelector  + ", " + Blacklight.ajaxModal.preserveLinkSelector,
-    Blacklight.ajaxModal.modalAjaxLinkClick);
-  $("body").on("submit", Blacklight.ajaxModal.triggerFormSelector + ", " + Blacklight.ajaxModal.preserveFormSelector,
-    Blacklight.ajaxModal.modalAjaxFormSubmit);
+  $('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-ajax-modal=closed
-  $("body").on("loaded.blacklight.ajax-modal", Blacklight.ajaxModal.check_close_ajax_modal);
+  // 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.ajaxModal.modalSelector + " a[data-dismiss~=modal]", function (e) {
+  $('body').on('click', Blacklight.modal.modalSelector + ' a[data-dismiss~=modal]', function (e) {
     e.preventDefault();
   });
 };
 
-// A function used as an event handler on loaded.blacklight.ajax-modal
-// to catch contained data-ajax-modal=closed directions
-Blacklight.ajaxModal.check_close_ajax_modal = function(event) {
-  if ($(event.target).find(Blacklight.ajaxModal.modalCloseSelector).length) {
-    modal_flashes = $(this).find('.flash_messages');
+// 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');
 
-    $(event.target).modal("hide");
+    $(event.target).modal('hide');
     event.preventDefault();
 
-    main_flashes = $('#main-flashes');
-    main_flashes.append(modal_flashes);
-    modal_flashes.fadeIn(500);
+    var mainFlashes = $('#main-flashes');
+    mainFlashes.append(modalFlashes);
+    modalFlashes.fadeIn(500);
   }
 }
 
 Blacklight.onLoad(function() {
-  Blacklight.ajaxModal.setup_modal();
+  Blacklight.modal.setupModal();
 });