arclight 0.4.0 → 1.0.0.beta1

data/README.md

@@ -6,17 +6,16 @@
 
 A Rails engine supporting discovery of archival materials, based on [Blacklight](https://projectblacklight.org/)
 
-> ℹ️ From August-October 2019, Stanford University, University of Michigan, Indiana University, Princeton University, and Duke University are collaborating on a second phase of ArcLight! See the [project board](https://github.com/projectblacklight/arclight/projects/2) or our [demo videos](https://www.youtube.com/playlist?list=PLMdUaIJ0G8QiIXZ_SFHASJErD14CJW-p5) to follow our work.
 
 ## Requirements
 
-* [Ruby](https://www.ruby-lang.org/en/) 2.6 or later
-* [Rails](http://rubyonrails.org) 5.2 or later
+* [Ruby](https://www.ruby-lang.org/en/) 2.7 or later
+* [Rails](http://rubyonrails.org) 6.1 or later
 * Solr 8.1 or later
 
 ## Installation
 
-[Installing ArcLight](https://github.com/sul-dlss/arclight/wiki/Creating,-installing,-and-running-your-ArcLight-application) is straightforward in a Rails environment.
+[Installing ArcLight](https://github.com/projectblacklight/arclight/wiki/Creating,-installing,-and-running-your-ArcLight-application) is straightforward in a Rails environment.
 
 Basically, add this line to your application's `Gemfile`:
 
@@ -36,7 +35,7 @@ Or install it yourself as:
 $ gem install arclight
 ```
 
-For further details, see our [Installing ArcLight](https://github.com/sul-dlss/arclight/wiki/Creating,-installing,-and-running-your-ArcLight-application) documentation.
+For further details, see our [Installing ArcLight](https://github.com/projectblacklight/arclight/wiki/Creating,-installing,-and-running-your-ArcLight-application) documentation.
 
 ## Usage
 
@@ -48,9 +47,9 @@ Browsing allows you to view the Overview or Contents (when it exists) of a colle
 
 Some pages include an inline view tab to the right of an item which will expand the Contents further.
 
-See the [ArcLight demo](https://arclight-demo.projectblacklight.org/) and [ArcLight MVP Wiki](https://github.com/sul-dlss/arclight/wiki) for usage.
+See the [ArcLight demo](https://arclight-demo.projectblacklight.org/) and [ArcLight MVP Wiki](https://github.com/projectblacklight/arclight/wiki) for usage.
 
-See [Arclight Major Features](https://github.com/sul-dlss/arclight/wiki/Arclight-Major-Features) for a list of features.
+See [Arclight Major Features](https://github.com/projectblacklight/arclight/wiki/Arclight-Major-Features) for a list of features.
 
 ### Traject indexing of EAD content
 [Traject](https://github.com/traject/traject) is a high performance way of transforming documents for indexing into Solr and how ArcLight does indexing. An EAD2 can be indexed by doing the following:
@@ -70,7 +69,7 @@ bundle exec rake arclight:seed
 * General
   * [ArcLight demo site](https://arclight-demo.projectblacklight.org/)
   * [ArcLight project wiki](https://bit.ly/arclightproject): includes design process documentation
-  * [ArcLight Github Wiki](https://github.com/sul-dlss/arclight/wiki): developer/implementor documentation
+  * [ArcLight Github Wiki](https://github.com/projectblacklight/arclight/wiki): developer/implementor documentation
   * [Blacklight wiki](https://github.com/projectblacklight/blacklight/wiki)
   * Use the [ArcLight Google Group](http://groups.google.com/d/forum/arclight-community) to contact us with questions
 * ArcLight Phase II:
@@ -85,7 +84,7 @@ See the [CONTRIBUTORS](CONTRIBUTORS.md) file.
 
 ## Development
 
-ArcLight development uses [`solr_wrapper`](https://rubygems.org/gems/solr_wrapper/versions/0.18.1) and [`engine_cart`](https://rubygems.org/gems/engine_cart) to host development instances of Solr and Rails server on your local machine.
+ArcLight requires Solr to be running.  For development you can start this using `solr_wrapper` or you may choose to use Docker. Start Solr using Docker by doing `docker compose up`.
 
 ### Run the test suite
 
@@ -108,16 +107,23 @@ Then visit http://localhost:3000. It will also start a Solr instance on port 898
 
 You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
-### Release a new version of the gem
+### Releasing
 
-To release a new version:
+#### To release a new gem:
 
 1. Update the version number in `lib/arclight/version.rb`
 2. Run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, build the gem file (e.g., `gem build arclight.gemspec`) and push the `.gem` file to [rubygems.org](https://rubygems.org) (e.g., `gem push arclight-x.y.z.gem`).
 
+#### To release the frontend sources:
+
+When any of the javascript components or SASS sources in the gem are changed, this package should be published to NPM with the following steps:
+1. [Install npm](https://www.npmjs.com/get-npm)
+2. Bump the version number in `package.json`
+3. run `npm publish` to push the javascript package to https://npmjs.org/package/arclight
+
 ## Contributing
 
-[Bug reports](https://github.com/sul-dlss/arclight/issues) and [pull requests](https://github.com/sul-dlss/arclight/pulls) are welcome on ArcLight -- see [CONTRIBUTING.md](https://github.com/sul-dlss/arclight/blob/master/CONTRIBUTING.md) for details.
+[Bug reports](https://github.com/projectblacklight/arclight/issues) and [pull requests](https://github.com/projectblacklight/arclight/pulls) are welcome on ArcLight -- see [CONTRIBUTING.md](https://github.com/projectblacklight/arclight/blob/main/CONTRIBUTING.md) for details.
 ## License
 
 The gem is available as open source under the terms of the [Apache 2 License](https://opensource.org/licenses/Apache-2.0).

data/app/assets/javascripts/arclight/arclight.js

@@ -1,8 +1,4 @@
-//= require arclight/collection_scrollspy
-//= require arclight/collection_navigation
-//= require arclight/context_navigation
-//= require arclight/oembed_viewer
-//= require arclight/truncator
+import 'arclight/oembed_viewer'
 
-// Vendor Scripts
-//= require responsiveTruncator
+import Truncate from 'arclight/truncate_controller'
+Stimulus.register('arclight-truncate', Truncate)

data/app/assets/javascripts/arclight/oembed_viewer.js

@@ -1,46 +1,71 @@
-Blacklight.onLoad(function () {
-  'use strict';
+class OembedLoader {
+  constructor(el) {
+    this.el = el
+  }
 
-  var onlineContentTabSelector = '[data-arclight-online-content-tab="true"]';
-  var oEmbedViewerSelector = '[data-arclight-oembed="true"]';
+  load() {
+    const loadedAttr = this.el.getAttribute('loaded')
+    const { arclightOembed, arclightOembedUrl, ...extraOembedParams } = this.el.dataset
+    const extraParams = OembedLoader.normalizeParams(extraOembedParams)
 
-  $(onlineContentTabSelector).on('shown.bs.tab', function () {
-    var $viewerElements = $(oEmbedViewerSelector);
-    if ($viewerElements.length === 0) {
-      return;
+    if (loadedAttr && loadedAttr === 'loaded') {
+      return
     }
 
-    $viewerElements.each(function (i, element) {
-      var $el = $(element);
-      var loadedAttr = $el.attr('loaded');
-      var data = $el.data();
-      var resourceUrl = data.arclightOembedUrl;
-      if (loadedAttr && loadedAttr === 'loaded') {
-        return;
-      }
-
-      $.ajax({
-        url: resourceUrl,
-        dataType: 'html'
-      }).done(function (response) {
-        var links = $('<div>' + response.match(/<link .*>/g).join('') + '</div>'); // Parse out link elements so image assets are not loaded
-        var oEmbedEndPoint = links.find('link[rel="alternate"][type="application/json+oembed"]').prop('href');
-
+    fetch(arclightOembedUrl)
+      .then((response) => response.text())
+      .then((body) => {
+        const oEmbedEndPoint = OembedLoader.findOEmbedEndPoint(body, extraParams)
         if (!oEmbedEndPoint || oEmbedEndPoint.length === 0) {
-          return;
+          console.warn(`No oEmbed endpoint found in <head> at ${arclightOembedUrl}`)
+          return
         }
+        this.loadEndPoint(oEmbedEndPoint)
+      })
+  }
+
+  // Convert data-arclight-oembed-* attributes to URL parameters for the viewer
+  static normalizeParams(attributes) {
+    return Object.keys(attributes).reduce((acc, attribute) => {
+      // Reverse data attribute name conversion. See:
+      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset#name_conversion
+      const parameterName = attribute.replace('arclightOembed', '')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+
+      acc[parameterName] = attributes[attribute]
+      return acc
+    }, {})
+  }
+
+  static findOEmbedEndPoint(body, extraParams = {}) {
+    // Parse out link elements so image assets are not loaded
+    const template = document.createElement('template')
+    template.innerHTML = body.match(/<link .*>/g).join('')
 
-        $.ajax({
-          url: oEmbedEndPoint
-        }).done(function (oEmbedResponse) {
-          if (oEmbedResponse.html) {
-            $el.hide()
-               .html(oEmbedResponse.html)
-               .fadeIn(500);
-            $el.attr('loaded', 'loaded');
-          }
-        });
-      });
-    });
-  });
-});
+    // Look for a link element containing the oEmbed endpoint; bail out if none
+    const endpoint = template.content.querySelector('link[rel="alternate"][type="application/json+oembed"]')
+      ?.getAttribute('href')
+    if (!endpoint) return ''
+
+    // Serialize any extra params and append them to the endpoint
+    const qs = new URLSearchParams(extraParams).toString()
+    return `${endpoint}&${qs}`
+  }
+
+  loadEndPoint(oEmbedEndPoint) {
+    fetch(oEmbedEndPoint)
+      .then((response) => response.json())
+      .then((json) => {
+        this.el.innerHTML = json.html
+        this.el.setAttribute('loaded', 'loaded')
+      })
+  }
+}
+
+Blacklight.onLoad(function () {
+  document.querySelectorAll('[data-arclight-oembed="true"]').forEach((element) => {
+    const loader = new OembedLoader(element)
+    loader.load()
+  })
+})

data/app/assets/javascripts/arclight/truncate_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['content']
+
+  connect() {
+    // target elements
+    const contentInner = Array.from(this.contentTarget.children)
+
+    // calculate total scrollable inner height vs. observed outer height
+    const outerHeight = this.contentTarget.clientHeight
+    const innerHeight = contentInner.map(e => e.scrollHeight).reduce((a, b) => a + b, 0)
+
+    // truncation occurred if total inner height exceeds outer (observed) height.
+    // if no longer truncated, reset the expanded state (e.g. on window resize).
+    if (innerHeight > outerHeight) {
+      this.element.classList.add('truncated')
+    } else {
+      this.element.classList.remove('truncated')
+      this.contentTarget.classList.remove('expanded')
+    }
+  }
+
+  trigger() {
+    this.element.classList.toggle('expanded')
+  }
+}

data/app/assets/stylesheets/arclight/application.scss

@@ -1,7 +1,3 @@
-@import 'bootstrap/functions';
-@import 'bootstrap/variables';
-@import 'bootstrap/mixins/breakpoints';
-@import 'bootstrap_overrides';
 @import 'variables';
 @import 'responsive';
 @import 'modules/collection_search';
@@ -14,4 +10,4 @@
 @import 'modules/repository_card.scss';
 @import 'modules/search_results';
 @import 'modules/show_collection';
-@import 'modules/context_navigation'
+@import 'modules/truncator';

data/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss

@@ -1,112 +1,86 @@
-.documents-online_contents {
-  .document-title-heading {
-    font-size: $h5-font-size;
+//< !-- ! Font Awesome Pro 6.2.0 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+$hierarchy-view-expand-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>") !default;
+$hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>") !default;
+
+// Collapse +/- indicators
+.al-toggle-view-children {
+  background-image: escape-svg($hierarchy-view-expand-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 1.25rem;
+  margin-left: -1.25rem;
+  margin-right: 0.25 * $spacer;
+  margin-top: 0.1 * $spacer;
+  vertical-align: middle;
+  width: 1rem;
+
+  &:not(.collapsed) {
+    background-image: escape-svg($hierarchy-view-collapse-icon);
   }
+}
 
-  .document-title-containers {
-    &:after {
-      padding-right: 3px;
-    }
-  }
+.al-hierarchy-highlight > .documentHeader {
+  background: $mark-bg;
+}
 
-  .al-hierarchy-children-status {
-    font-size: $h6-font-size;
-    margin-top: 6px;
-    text-align: left;
-  }
+#collection-context {
+  ul {
+    list-style: none;
 
-  .bookmark-toggle,
-  .al-request-form {
-    font-size: $font-size-sm;
-  }
+    padding-left: 1.5rem;
 
-  // Headings and text
-  .al-document-abstract-or-scope {
-    font-size: 0.85rem;
-    line-height: 1.5;
-    max-width: 45em;
+    ul {
+      padding-left: 1rem;
+    }
   }
 
-  .al-hierarchy-sub-heading {
-    color: $gray-600;
-    font-size: $font-size-sm;
-    font-weight: normal;
-    text-transform: uppercase;
+  .documentHeader {
+    display: flex;
+    margin-bottom: 0.5 * $spacer;
   }
 
-  // Series level
-  .blacklight-series .document-title-heading,
-  .blacklight-subseries .document-title-heading,
-  .blacklight-file .document-title-heading,
-  .blacklight-binder .document-title-heading,
-  .blacklight-other .document-title-heading {
-    font-size: $h5-font-size;
-    font-weight: 400;
-    margin-bottom: ($spacer / 2);
+  .al-document-container {
+    display: none;
   }
 
-  .blacklight-series,
-  .blacklight-file {
-    // Additional for levels below series
-    .blacklight-subseries .document-title-heading,
-    .blacklight-file .document-title-heading,
-    .blacklight-binder .document-title-heading,
-    .blacklight-other .document-title-heading {
-      font-size: $h6-font-size;
-
-      .documentHeader {
-        margin-top: $spacer;
-      }
+  turbo-frame[loading]:not([complete]) {
+    &::after {
+      @extend .placeholder !optional;
+      animation: placeholder-glow 2s ease-in-out infinite;
+      content: 'Loading...';
+      display: inline-block;
+      margin-left: 1.5rem;
     }
+  }
+}
 
-    // Icongraphy for each level
-    .blacklight-subseries .document-title-heading,
-    .al-hierarchy-level-1 .blacklight-file .document-title-heading,
-    .al-hierarchy-level-1 .blacklight-binder .document-title-heading,
-    .al-hierarchy-level-1 .blacklight-other .document-title-heading {
-      padding-left: 10px;
-
-      &:before {
-        color: $gray-600;
-        content: "\027E9";
-        padding-right: 3px;
-      }
-    }
+#contents {
+  .documents {
+    list-style: none;
+    padding-left: 0;
 
-    .al-hierarchy-level-2 .document-title-heading,
-    .al-hierarchy-level-2 .blacklight-file .document-title-heading {
-      &:before {
-        content: "\027E9 \027E9";
-      }
+    li {
+      padding: 0.25 * $spacer 0.5 * $spacer;
     }
 
-    .al-hierarchy-level-3 .document-title-heading,
-    .al-hierarchy-level-3 .blacklight-file .document-title-heading {
-      &:before {
-        content: "\027E9 \027E9 \027E9";
-      }
+    li:nth-of-type(odd) {
+      background-color: $table-striped-bg;
     }
   }
-}
 
-.al-hierarchy-highlight > .documentHeader {
-  background: $mark-bg;
-}
-
-// Placeholder styling
-.al-hierarchy-placeholder {
-  margin-top: $spacer;
-
-  h3 {
-    background-color: $gray-200;
-    border-radius: 5px;
-    height: $h3-font-size;
+  .documentHeader {
+    display: flex;
+    gap: 2rem;
+    justify-content: space-between;
+    margin-bottom: 0.5 * $spacer;
   }
 
-  p {
-    background-color: $gray-200;
-    border-radius: 5px;
-    height: $font-size-base;
+  .al-document-container {
+    flex-basis: 25%;
+    text-align: right;
   }
 }
 
@@ -118,60 +92,60 @@
   margin-bottom: $spacer;
 }
 
-// Component show page, Collection context section
-#collection-context {
-  h1 {
-    font-size: $h5-font-size;
+.alert {
+  .blacklight-icons svg {
+    height: 1.5rem;
+    width: 1.5rem;
   }
+}
 
-  ul {
-    list-style: none;
-    flex-grow: 1;
+.title-container {
+  border-bottom: $border-width solid $border-color;
+  padding-bottom: $spacer * .5;
+  margin-bottom: $spacer * .75;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-areas:
+    "title bookmark-toggle"
+    "request request"
+    "sidebar-toggle sidebar-toggle"
+    "online-contents online-contents";
+  justify-content: space-between; // This will push the bookmark control to the right when the title is short
+  align-items: start;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "title request bookmark-toggle"
+      "sidebar-toggle sidebar-toggle sidebar-toggle"
+      "online-contents online-contents online-contents";
   }
 
-  .documents-online_contents {
-    .documentHeader {
-      margin-top: 1.5rem;
-    }
+  h1 {
+    grid-area: title;
+    margin-bottom: 0;
   }
 
-  // Top-level context
-  .al-hierarchy-level-0 .document-title-heading {
-    font-size: $h5-font-size;
-    margin-bottom: ($spacer / 2);
+  .al-request {
+    grid-area: request;
   }
 
-  // All subsequent levels
-  @for $i from 1 through 12 {
-    .al-hierarchy-level-#{$i} .document-title-heading {
-      font-size: $h6-font-size;
-    }
+  .bookmark-toggle {
+    grid-area: bookmark-toggle;
+    margin-left: 0 !important;
   }
 
-  .prev-siblings li, li.al-collection-context {
-    visibility: visible;
-    opacity: 1;
-    transition: visibility 0s, height 0.5s, opacity 0.5s linear;
-
-    &.collapsed {
-      visibility: hidden;
-      height: 0;
-      opacity: 0;
-    }
+  .sidebar-toggle {
+    grid-area: sidebar-toggle;
+    max-width: fit-content;
   }
-}
 
-// Indentation styling for all level hierarchies
-@mixin hierarchy-levels {
-  @for $i from 1 through 12 {
-    .al-hierarchy-level-#{$i} {
-      margin-left: 20px;
-      // provides for n indention
-      &.extra-indent {
-        margin-left: ($i * 20) + px;
-      }
+  .online-contents {
+    grid-area: online-contents;
+    margin-bottom: 1rem;
+  
+    h2 {
+      font-size: 1rem;
+      text-transform: uppercase;
     }
   }
 }
-
-@include hierarchy-levels;

data/app/assets/stylesheets/arclight/modules/icons.scss

@@ -1,4 +1,15 @@
-.blacklight-icons svg {
-  height: 1rem;
-  width: 1rem;
+
+.toggle-bookmark, .breadcrumb-item, .document, .al-online-content-icon {
+  .blacklight-icons svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.al-online-content-icon .blacklight-icons svg {
+  fill: $online-icon-color;
+}
+
+.btn > .bi:first-child {
+  @extend .me-1
 }