blacklight 8.11.0 → 9.0.0.beta2

data/VERSION

@@ -1 +1 @@
-8.11.0
+9.0.0.beta2

data/app/assets/builds/blacklight.css

@@ -0,0 +1,452 @@
+/* This is the default blacklight theme. */
+/* This file is generated by Blacklight. You probably don't want to edit
+   this file directly, or you'll have to manually merge your changes if later
+   versions of Blacklight change this file. Instead, use your own CSS file
+   which over-rides things in this file. Or of course you can choose
+   not to use the Blacklight CSS file at all in your local app. */
+:root {
+  --bl-logo-image: url("blacklight/logo.png");
+  --bl-logo-width: 150px;
+  --bl-logo-height: 50px;
+  --bs-secondary-color: rgba(
+    33,
+    37,
+    41,
+    0.75
+  ); /* for compatability with BS < 5.3  */
+  --bl-main-padding-y: 0.5rem;
+  --bl-constraint-remove-hover-bg: #bb2d3b;
+  --bl-constraint-remove-hover-border-color: #bb2d3b;
+  --bl-field-name-color: var(--bs-secondary-color);
+  /* emulate Bootstrap backdrop bg & opacity */
+  --bl-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+}
+
+.page-link {
+  white-space: nowrap;
+}
+
+dialog.modal[open] {
+  display: block;
+  background: none;
+  border: none;
+  max-height: unset;
+  max-width: unset;
+}
+dialog.modal[open]::backdrop {
+  background-color: var(--bl-modal-backdrop-bg);
+}
+
+/* Generic layout stuff */
+main {
+  padding-block: var(--bl-main-padding-y);
+}
+
+/*
+  Header bar at top (Bootstrap nav-bar)
+*/
+.navbar.bg-dark {
+  --bs-emphasis-color-rgb: 255, 255, 255;
+}
+
+.navbar-logo {
+  /* The main logo image for the Blacklight instance */
+  background: transparent var(--bl-logo-image) no-repeat top left;
+  background-size: var(--bl-logo-width) var(--bl-logo-height);
+  height: var(--bl-logo-height);
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  width: var(--bl-logo-width);
+}
+
+.navbar-search {
+  z-index: 1;
+}
+.navbar-search search {
+  display: contents;
+}
+.navbar-search .search-field {
+  min-width: 7em;
+}
+
+.constraints-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.25rem;
+}
+
+.applied-filter {
+  --separator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
+}
+.applied-filter .constraint-value {
+  cursor: default;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: clamp(288px, 30vw, 500px);
+}
+.applied-filter .constraint-value .filter-name:after {
+  background-color: var(--bs-btn-color);
+  content: "";
+  mask: var(--separator-icon);
+  mask-repeat: no-repeat;
+  display: inline-block;
+  height: 1.1rem;
+  width: 1.25rem;
+  vertical-align: text-bottom;
+  margin-right: -0.2rem;
+  margin-left: 0.25rem;
+  transition: background-color 0.15s ease-in-out;
+}
+.applied-filter .remove {
+  --bs-btn-hover-bg: var(--bl-constraint-remove-hover-bg);
+  --bs-btn-hover-border-color: var(--bl-constraint-remove-hover-border-color);
+  --bs-btn-active-bg: var(--bl-constraint-remove-hover-bg);
+  --bs-btn-active-border-color: var(
+    --bl-constraint-remove-hover-border-color
+  );
+}
+
+.search-widgets {
+  display: flex;
+}
+
+.sort-pagination,
+.pagination-search-widgets {
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+}
+
+.sort-pagination .dropdown-toggle {
+  cursor: pointer;
+}
+
+.no-js .btn-group:focus-within .dropdown-menu {
+  display: block; /* show menu when tabbing to it, without Javascript */
+}
+
+.view-type {
+  display: inline-block;
+}
+
+.modal_form {
+  margin-bottom: 0;
+}
+
+.input-group > .search-q {
+  flex-grow: 4;
+}
+
+.input-group > .search-autocomplete-wrapper {
+  display: inline-block;
+  flex-grow: 4;
+  padding: 0;
+  position: relative;
+}
+.input-group > .search-autocomplete-wrapper .search-q {
+  border: 0;
+  height: 100%;
+  width: 100%;
+}
+.input-group > .search-autocomplete-wrapper ul {
+  display: block;
+}
+
+.search-btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  display: flex;
+}
+
+.search-field,
+.search-q {
+  scroll-margin: 5rem;
+}
+
+.documents-list {
+  --bl-results-document-margin-top: 1rem;
+  --bl-results-document-padding-top: 1rem;
+}
+.documents-list .document {
+  display: flex;
+  border-bottom: 1px dotted var(--bs-border-color);
+  margin-top: var(--bl-results-document-margin-top);
+  padding-top: var(--bl-results-document-padding-top);
+}
+.documents-list .document .document-main-section {
+  flex-grow: 1;
+}
+.documents-list .document .document-thumbnail {
+  flex-grow: 0;
+  margin-bottom: 3rem;
+  padding-left: 3rem;
+}
+
+.page-links {
+  display: inline-block;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  padding-left: 0;
+}
+
+.pagination {
+  flex-wrap: wrap;
+}
+
+.group-key {
+  --bl-border-color: var(--bs-gray-600);
+  border-bottom: 1px solid var(--bl-border-color);
+  clear: right;
+}
+
+.grouped-documents .document {
+  border-bottom: 0;
+}
+
+.bookmark-toggle {
+  --bl-icon-color: var(--bs-primary);
+  /* override for line 21.
+      Creates weird spacing in toolbar when min-width is set to 8rem */
+}
+.no-js .bookmark-toggle input[type=submit] {
+  display: inline;
+}
+.no-js .bookmark-toggle .toggle-bookmark {
+  display: none;
+}
+.bookmark-toggle input[type=submit] {
+  display: none;
+}
+.bookmark-toggle .toggle-bookmark {
+  cursor: pointer;
+}
+.bookmark-toggle .toggle-bookmark .toggle-bookmark-label {
+  font-weight: inherit;
+  min-width: 8.5em;
+}
+.bookmark-toggle .toggle-bookmark .toggle-bookmark-label .blacklight-icons svg {
+  height: 1.25rem;
+  width: 1.25rem;
+  overflow: visible;
+  fill: var(--bl-icon-color);
+}
+.bookmark-toggle .toggle-bookmark .toggle-bookmark-label .blacklight-icons svg.bookmark-checked {
+  display: none;
+}
+.bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-checked {
+  display: inherit;
+}
+.bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-unchecked {
+  display: none;
+}
+.bookmark-toggle .header-tools .toggle-bookmark-label {
+  min-width: 2rem;
+}
+
+.dl-invert dt {
+  font-weight: normal;
+  color: var(--bl-field-name-color);
+}
+@media (min-width: 768px) {
+  .dl-invert dt {
+    text-align: end;
+  }
+}
+
+.sidenav {
+  --bl-facet-active-bg: var(--bs-success);
+  --bl-facet-active-item-color: var(--bs-success);
+  --bl-facet-remove-color: var(--bs-secondary-color);
+  --bl-facet-remove-hover-color: var(--bs-danger);
+  --bl-facet-label-indent: -15px;
+  --bl-facet-label-padding-left: 15px;
+  --bl-facet-header-padding-y: 0.5rem;
+  --bl-facet-value-padding-y: 0.2rem;
+}
+.sidenav .facet-toggle-button [data-hide-label] {
+  display: inline;
+}
+.sidenav .facet-toggle-button [data-show-label] {
+  display: none;
+}
+.sidenav .facet-toggle-button[aria-expanded=false] [data-hide-label] {
+  display: none;
+}
+.sidenav .facet-toggle-button[aria-expanded=false] [data-show-label] {
+  display: inline;
+}
+
+@media (max-width: 991.98px) {
+  .no-js #sidebar {
+    order: 6 !important;
+  }
+}
+.no-js .facet-content.collapse {
+  display: block;
+}
+.no-js .facet-toggle-handle {
+  display: none;
+}
+.no-js .pivot-facet.collapse {
+  display: block;
+}
+.no-js .facets-collapse.collapse {
+  display: block;
+}
+
+.facets-header {
+  display: flex;
+  justify-content: space-between;
+  padding-block: var(--bl-facet-header-padding-y);
+}
+
+.facets-heading {
+  line-height: inherit;
+}
+
+.facet-limit {
+  --bs-accordion-btn-bg: var(--bs-gray-100);
+  --bs-btn-hover-bg: var(--bs-gray-200);
+  --bs-accordion-active-bg: var(--bs-accordion-btn-bg);
+}
+
+.facet-limit-active {
+  --bs-accordion-btn-bg: var(--bl-facet-active-bg);
+  --bs-btn-hover-bg: var(--bs-accordion-btn-bg);
+  --bs-accordion-btn-color: var(--bs-light);
+  --bs-btn-hover-color: var(--bs-accordion-btn-color);
+  --bs-accordion-active-color: var(--bs-accordion-btn-color);
+}
+
+.facet-values {
+  margin-bottom: 0;
+}
+.facet-values a {
+  text-decoration: none;
+}
+.facet-values li {
+  display: flex;
+  align-items: flex-start;
+  padding-block: var(--bl-facet-value-padding-y);
+}
+.facet-values li.treeitem {
+  display: block;
+}
+.facet-values li .selected {
+  color: var(--bl-facet-active-item-color);
+}
+.facet-values .remove {
+  color: var(--bl-facet-remove-color);
+  font-weight: bold;
+  text-decoration: none;
+}
+.facet-values .remove:hover {
+  color: var(--bl-facet-remove-hover-color);
+  text-decoration: none;
+}
+.facet-values .facet-label {
+  hyphens: auto;
+  overflow-wrap: break-word;
+  padding-left: var(--bl-facet-label-padding-left);
+  padding-right: 1em;
+  text-indent: var(--bl-facet-label-indent);
+}
+.facet-values .facet-count {
+  margin-left: auto;
+}
+.facet-values .facet-checkbox {
+  width: 1.25rem;
+}
+
+.facet-extended-list .sort-options {
+  text-align: right;
+}
+.facet-extended-list .prev-next-links {
+  float: left;
+}
+
+.facet-field-heading {
+  /* This prevents the contained stretch link from covering the panel body */
+  position: relative;
+}
+.facet-field-heading a {
+  color: inherit;
+}
+
+/* Sidenav
+-------------------------------------------------- */
+.pivot-facet.show {
+  display: flex;
+}
+
+.facet-toggle-handle {
+  margin-block: 0;
+  padding-block: 0;
+  padding-inline: 0.5rem;
+  margin-inline-start: -0.75rem;
+}
+.pivot-facet .facet-toggle-handle {
+  margin-inline-start: -1.5rem;
+}
+.facet-toggle-handle.collapsed .show {
+  display: flex;
+}
+.facet-toggle-handle.collapsed .hide {
+  display: none;
+}
+.facet-toggle-handle .show {
+  display: none;
+}
+.facet-toggle-handle .hide {
+  display: flex;
+}
+.facet-toggle-handle .show .icon,
+.facet-toggle-handle .hide .icon {
+  width: 1em;
+  height: 1em;
+  padding: 0.375rem 0.75rem;
+}
+.facet-toggle-handle .show .icon {
+  background: transparent url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16"%3e%3cpath d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /%3e%3cpath d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" /%3e%3c/svg%3e') center/1em auto no-repeat;
+}
+.facet-toggle-handle .hide .icon {
+  background: transparent url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16"%3e%3cpath d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /%3e%3cpath d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" /%3e%3c/svg%3e') center/1em auto no-repeat;
+}
+
+/* Search History */
+.search-history {
+  --bl-history-filter-name-color: var(--bs-secondary-color);
+}
+.search-history .constraint {
+  padding-inline-end: 1rem;
+  display: block;
+}
+.search-history .filter-name {
+  color: var(--bl-history-filter-name-color);
+}
+
+.modal-dialog {
+  border-radius: 5px;
+}
+
+.modal-content .page-sidebar {
+  display: none;
+}
+.modal-content .blacklight-modal-close {
+  display: block;
+}
+
+.blacklight-modal-close {
+  display: none;
+}
+
+.modal-footer:not(.modal .modal-footer) {
+  border-top: var(--bs-border-width) solid var(--bs-border-color);
+  padding-top: 1rem;
+  margin-top: 1rem;
+}
+
+.remove .bi {
+  height: 1em;
+  width: 1em;
+}

data/app/assets/javascripts/blacklight/blacklight.esm.js

@@ -36,6 +36,9 @@ class CheckboxSubmit {
     }).then((json) => {
       this.labelTarget.removeAttribute('disabled');
       this.checkboxTarget.removeAttribute('disabled');
+      // For accessibility return keyboard focus 
+      // back to the checkbox after form submission
+      this.checkboxTarget.focus();
       this.updateStateFor(!this.checked);
       this.bookmarksCounter().forEach(counter => {
         counter.innerHTML = json.bookmarks.count;
@@ -151,8 +154,6 @@ const FacetSuggest = async (e) => {
         const blob = await response.blob();
         const text = await blob.text();
 
-        const facetArea = document.querySelector('.facet-extended-list');
-
         if (text && facetArea) {
             facetArea.innerHTML = text;
         }
@@ -283,7 +284,7 @@ const Modal = (() => {
     }
     elements.forEach((el) => frag.appendChild(el));
     modal.activateScripts(frag);
-    
+
     modal.target().querySelector('.modal-content').replaceChildren(frag);
 
     // send custom event with the modal dialog div as the target
@@ -292,7 +293,6 @@ const Modal = (() => {
 
     // if they did preventDefault, don't show the dialog
     if (e.defaultPrevented) return;
-
     modal.show();
   };
 
@@ -377,67 +377,6 @@ const Modal = (() => {
   return modal;
 })();
 
-// 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.
-class ModalForm {
-    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));
-    }
-}
-
 const SearchContext = (e) => {
   const contextLink = e.target.closest('[data-context-href]');
   if (contextLink) {
@@ -509,14 +448,6 @@ const Core = function() {
       const listeners = [];
       if (typeof Turbo !== 'undefined') {
         listeners.push('turbo:load', 'turbo:frame-load');
-      } else 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');
       }
@@ -526,8 +457,8 @@ const Core = function() {
   };
 }();
 
-// turbolinks triggers page:load events on page transition
-// If app isn't using turbolinks, this event will never be triggered, no prob.
+// turbo triggers turbo:load events on page transition
+// If app isn't using turbo, this event will never be triggered, no prob.
 Core.listeners().forEach(function(listener) {
   document.addEventListener(listener, function() {
     Core.activate();
@@ -550,7 +481,6 @@ const index = {
   ButtonFocus,
   FacetSuggest,
   Modal,
-  ModalForm,
   SearchContext,
   Core,
   onLoad: Core.onLoad