arclight 0.1.4 → 0.3.3

data/Rakefile

@@ -12,6 +12,5 @@ Dir.glob('./tasks/*.rake').each { |f| load f }
 Dir.glob('./lib/tasks/*.rake').each { |f| load f }
 
 require 'engine_cart/rake_task'
-require 'solr_ead'
 
 task default: %i[rubocop eslint ci]

data/app/assets/images/blacklight/bookmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 384 512"><path d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z"/></svg>

data/app/assets/images/blacklight/collection.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M32 448c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V160H32v288zm160-212c0-6.6 5.4-12 12-12h104c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-8zM480 32H32C14.3 32 0 46.3 0 64v48c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16V64c0-17.7-14.3-32-32-32z"/></svg>

data/app/assets/images/blacklight/compact.svg

@@ -1,25 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
-    <title>Compact</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
-        <g id="Compact" stroke="#000000">
-            <path d="M1.43885093,2.44444444 L6.83349609,2.44444444" id="Line"></path>
-            <path d="M1.43885093,4.44444444 L6.83349609,4.44444444" id="Line"></path>
-            <path d="M1.43885093,6.44444444 L6.83349609,6.44444444" id="Line"></path>
-            <path d="M1.43885093,8.44444444 L6.83349609,8.44444444" id="Line"></path>
-            <path d="M1.43885093,10.4444444 L6.83349609,10.4444444" id="Line"></path>
-            <path d="M1.43885093,12.4444444 L6.83349609,12.4444444" id="Line"></path>
-            <path d="M1.43885093,14.4444444 L6.83349609,14.4444444" id="Line"></path>
-            <path d="M9.43885093,2.44444444 L14.8334961,2.44444444" id="Line"></path>
-            <path d="M9.43885093,4.44444444 L14.8334961,4.44444444" id="Line"></path>
-            <path d="M9.43885093,6.44444444 L14.8334961,6.44444444" id="Line"></path>
-            <path d="M9.43885093,8.44444444 L14.8334961,8.44444444" id="Line"></path>
-            <path d="M9.43885093,10.4444444 L14.8334961,10.4444444" id="Line"></path>
-            <path d="M9.43885093,12.4444444 L14.8334961,12.4444444" id="Line"></path>
-            <path d="M9.43885093,14.4444444 L14.8334961,14.4444444" id="Line"></path>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M3,15H21V13H3Zm0,4H21V17H3Zm0-8H21V9H3ZM3,5V7H21V5Z"/></svg>

data/app/assets/images/blacklight/container.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>

data/app/assets/images/blacklight/ead.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512"><path d="M149.9 349.1l-.2-.2-32.8-28.9 32.8-28.9c3.6-3.2 4-8.8.8-12.4l-.2-.2-17.4-18.6c-3.4-3.6-9-3.7-12.4-.4l-57.7 54.1c-3.7 3.5-3.7 9.4 0 12.8l57.7 54.1c1.6 1.5 3.8 2.4 6 2.4 2.4 0 4.8-1 6.4-2.8l17.4-18.6c3.3-3.5 3.1-9.1-.4-12.4zm220-251.2L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM256 51.9l76.1 76.1H256zM336 464H48V48h160v104c0 13.3 10.7 24 24 24h104zM209.6 214c-4.7-1.4-9.5 1.3-10.9 6L144 408.1c-1.4 4.7 1.3 9.6 6 10.9l24.4 7.1c4.7 1.4 9.6-1.4 10.9-6L240 231.9c1.4-4.7-1.3-9.6-6-10.9zm24.5 76.9l.2.2 32.8 28.9-32.8 28.9c-3.6 3.2-4 8.8-.8 12.4l.2.2 17.4 18.6c3.3 3.5 8.9 3.7 12.4.4l57.7-54.1c3.7-3.5 3.7-9.4 0-12.8l-57.7-54.1c-3.5-3.3-9.1-3.2-12.4.4l-17.4 18.6c-3.3 3.5-3.1 9.1.4 12.4z"/></svg>

data/app/assets/images/blacklight/file.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 384 512"><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg>

data/app/assets/images/blacklight/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>

data/app/assets/images/blacklight/list.svg

@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>file</title><path d="M0,0H24V24H0Z" fill="none"/><path d="M3,19H21V13.45H3ZM3,5v5.61H21V5Z"/></svg>

data/app/assets/images/blacklight/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

data/app/assets/images/blacklight/online.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 640 512"><path d="M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32 32 32 0 0 1 32-32zm288 224H64v-32l64-64 32 32 128-128 96 96z"/></svg>

data/app/assets/images/blacklight/pdf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512"><path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm250.2-143.7c-12.2-12-47-8.7-64.4-6.5-17.2-10.5-28.7-25-36.8-46.3 3.9-16.1 10.1-40.6 5.4-56-4.2-26.2-37.8-23.6-42.6-5.9-4.4 16.1-.4 38.5 7 67.1-10 23.9-24.9 56-35.4 74.4-20 10.3-47 26.2-51 46.2-3.3 15.8 26 55.2 76.1-31.2 22.4-7.4 46.8-16.5 68.4-20.1 18.9 10.2 41 17 55.8 17 25.5 0 28-28.2 17.5-38.7zm-198.1 77.8c5.1-13.7 24.5-29.5 30.4-35-19 30.3-30.4 35.7-30.4 35zm81.6-190.6c7.4 0 6.7 32.1 1.8 40.8-4.4-13.9-4.3-40.8-1.8-40.8zm-24.4 136.6c9.7-16.9 18-37 24.7-54.7 8.3 15.1 18.9 27.2 30.1 35.5-20.8 4.3-38.9 13.1-54.8 19.2zm131.6-5s-5 6-37.3-7.8c35.1-2.6 40.9 5.4 37.3 7.8z"/></svg>

data/app/assets/images/blacklight/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

data/app/assets/images/blacklight/repository.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></svg>

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

@@ -1,7 +1,6 @@
 //= require arclight/collection_scrollspy
 //= require arclight/collection_navigation
-//= require arclight/collection_context
-//= require arclight/component_ancestors
+//= require arclight/context_navigation
 //= require arclight/oembed_viewer
 //= require arclight/truncator
 

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

@@ -1,51 +1,8 @@
 (function (global) {
   var CollectionNavigation;
-  /**
-   * Converts documents that should be used in a hierarchy, to highlighted
-   * localized siblings.
-   */
-  function convertDocsForContext(id, $doc) {
-    var newDocs;
-    var $currentDoc;
-    var $previousDocs;
-    var $nextDocs;
-    var headers = $doc.find('article header[data-document-id="' + id + '"]')
-    if (headers.length == 0) {
-      $.error('Document is missing id=' + id);
-    }
-    $currentDoc = $(headers[0].parentNode); // need article element
-    $currentDoc.addClass('al-hierarchy-highlight');
-
-    // We want to show 0-1 or 0-2 siblings depending on where highlighted component is
-    $previousDocs = $currentDoc.prevUntil().slice(0, 2);
-    $nextDocs = $currentDoc.nextUntil().slice(0, 2);
-
-    if ($previousDocs.length > 0 && $nextDocs.length > 0) {
-      // Case where there are siblings on both sides, show 1 each
-      newDocs = $('<div>');
-      newDocs.append($previousDocs.first());
-      newDocs.append($currentDoc);
-      newDocs.append($nextDocs.first());
-    } else if ($previousDocs.length > 0) {
-      // Case where there are only previous siblings, show 2 of them
-      newDocs = $('<div>');
-      newDocs.append($previousDocs.get().reverse()); // previous is not in the order we need
-      newDocs.append($currentDoc);
-    } else {
-      // Case where there are only next siblings, show 2 of them
-      newDocs = $('<div>');
-      newDocs.append($currentDoc);
-      newDocs.append($nextDocs);
-    }
-    // Cleanup to remove collapsible children stuff
-    newDocs.find('.al-toggle-view-more').remove();
-    newDocs.find('.collapse').remove();
-    newDocs.find('hr').remove();
-    return newDocs;
-  }
 
   CollectionNavigation = {
-    init: function (el) {
+    init: function (el, page = 1) {
       var $el = $(el);
       var data = $el.data();
       // Add a placeholder so flashes of text are not as significant
@@ -63,7 +20,8 @@
           'f[component_level_isim][]': data.arclight.level,
           'f[has_online_content_ssim][]': data.arclight.access,
           'f[collection_sim][]': data.arclight.name,
-          'f[parent_ssi][]': data.arclight.parent,
+          'f[parent_ssim][]': data.arclight.parent,
+          page: page,
           search_field: data.arclight.search_field,
           view: data.arclight.view || 'hierarchy'
         }
@@ -72,13 +30,39 @@
         var $doc = $(resp);
         var showDocs = $doc.find('article.document');
         var newDocs = $doc.find('#documents');
+        var sortPerPage = $doc.find('#sortAndPerPage');
+        var pageEntries = sortPerPage.find('.page-entries');
+        var numberEntries = parseInt(pageEntries.find('strong').last().text().replace(/,/g, ''), 10);
+
+        // Hide these until we re-enable in the future
+        sortPerPage.find('.result-type-group').hide();
+        sortPerPage.find('.search-widgets').hide();
 
-        // Add a highlight class for the article matching the highlight id
-        if (data.arclight.highlightId) {
-          newDocs = convertDocsForContext(data.arclight.highlightId, $doc);
+        if (!isNaN(numberEntries)) {
+          $('[data-arclight-online-content-tab-count]').html(
+            $(
+              '<span class="badge badge-pill badge-secondary al-online-content-badge">'
+                + numberEntries
+                + '<span class="sr-only">components</span></span>'
+            )
+          );
         }
 
-        $el.hide().html(newDocs).fadeIn(500);
+        sortPerPage.find('a').on('click', function (e) {
+          var pages = [];
+          var $target = $(e.target);
+          e.preventDefault();
+          pages = /page=(\d+)&/.exec($target.attr('href'));
+          if (pages) {
+            CollectionNavigation.init($el, pages[1]);
+          } else {
+            // Case where the "first" page
+            CollectionNavigation.init($el);
+          }
+        });
+
+        $el.hide().html('').append(sortPerPage).append(newDocs)
+          .fadeIn(500);
         if (showDocs.length > 0) {
           $el.trigger('navigation.contains.elements');
         }
@@ -99,8 +83,10 @@ Blacklight.onLoad(function () {
 
   $('.al-contents').on('navigation.contains.elements', function (e) {
     var toEnable = $('[data-hierarchy-enable-me]');
+    var srOnly = $('h2[data-sr-enable-me]');
     toEnable.removeClass('disabled');
-    toEnable.text('Contents');
+    toEnable.text(srOnly.data('hasContents'));
+    srOnly.text(srOnly.data('hasContents'));
 
     $(e.target).find('.collapse').on('show.bs.collapse', function (ee) {
       var $newTarget = $(ee.target);

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

@@ -2,5 +2,5 @@ Blacklight.onLoad(function () {
   'use strict';
 
   $('.al-sticky-sidebar').Stickyfill();
-  $('body').scrollspy({ target: '.al-sidebar-navigation-overview' });
+  $('body').scrollspy({ target: '.al-sidebar-navigation-context' });
 });

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

@@ -0,0 +1,386 @@
+class NavigationDocument {
+  constructor(el) {
+    this.el = $(el);
+  }
+
+  get id() {
+    return this.el.find('[data-document-id]').data().documentId;
+  }
+
+  setAsHighlighted() {
+    this.el.find('li.al-collection-context').addClass('al-hierarchy-highlight');
+  }
+
+  collapse() {
+    this.el.find('li.al-collection-context').addClass('collapsed');
+  }
+
+  render() {
+    return this.el.html();
+  }
+}
+
+/**
+ * Models the "Expand"/"Collapse" button, and provides an onClick event handler
+ * for the jQuery element
+ * @class
+ */
+class ExpandButton {
+  /**
+   * This retrieves the <li> elements which are hidden/rendered in response to
+   *   clicking the <button> element
+   * @param {jQuery} $li - the <button> element
+   * @return {jQuery} - a jQuery object containing the targeted <li>
+   */
+  findSiblings() {
+    const $siblings = this.$el.parent().children('li');
+    return $siblings.slice(0, -1);
+  }
+
+  /**
+   * This adds a "collapsed" class to all of the <li> children, as well as
+   *   updates the text for the <button> element
+   * @param {Event} event - the event propagated in response to clicking on the
+   *   <button> element
+   */
+  handleClick() {
+    const $targeted = this.findSiblings();
+
+    $targeted.toggleClass('collapsed');
+    this.$el.toggleClass('collapsed');
+
+    const containerText = this.$el.hasClass('collapsed') ? this.collapseText : this.expandText;
+    this.$el.text(containerText);
+  }
+
+  /**
+   * @constructor
+   */
+  constructor(data) {
+    this.collapseText = data.collapse;
+    this.expandText = data.expand;
+
+    this.$el = $(`<button class="my-3 btn btn-secondary btn-sm">${this.expandText}</button>`);
+    this.handleClick = this.handleClick.bind(this);
+    this.$el.click(this.handleClick);
+  }
+}
+
+/**
+ * Modeling <button> Elements which hide or retrieve <li> elements for sibling
+ *   documents nested within the <li> elements of the <ul> tree
+ * @class
+ */
+class NestedExpandButton extends ExpandButton {
+  /**
+   * This retrieves the <li> elements which are hidden/rendered in response to
+   *   clicking the <button> element
+   * @param {jQuery} $li - the <button> element
+   * @return {jQuery} - a jQuery object containing the targeted <li>
+   */
+  findSiblings() {
+    const highlighted = this.$el.siblings('.al-hierarchy-highlight');
+    const $siblings = highlighted.prevAll('.al-collection-context');
+    return $siblings.slice(0, -1);
+  }
+}
+
+/**
+ * Models the placeholder display elements for content loading from AJAX
+ *   requests
+ * @class
+ */
+class Placeholder {
+  /*
+   * Builds the element set which contains the placeholder markup
+   *   classes
+   */
+  /* eslint-disable class-methods-use-this */
+  buildElement() {
+    const elementMarkup = '<div class="al-hierarchy-placeholder">' +
+      '<h3 class="col-md-9"></h3>' +
+      '<p class="col-md-6"></p>' +
+      '<p class="col-md-12"></p>' +
+      '<p class="col-md-3"></p>' +
+      '</div>';
+    const markup = Array(3).join(elementMarkup);
+
+    return $(markup);
+  }
+  /* eslint-enable class-methods-use-this */
+
+  /*
+   * @constructor
+   */
+  constructor() {
+    this.$el = this.buildElement();
+  }
+}
+
+class ContextNavigation {
+  constructor(el, originalParents = null, originalDocument = null) {
+    this.el = $(el);
+    this.data = this.el.data();
+    this.parentLi = this.el.parent();
+    this.eadid = this.data.arclight.eadid;
+    this.originalParents = originalParents; // let originalParents stay null
+    this.originalDocument = originalDocument || this.data.arclight.originalDocument;
+    this.ul = $('<ul class="al-context-nav-parent"></ul>');
+  }
+
+  // Gets the targetId to select, based off of parents and current level
+  get targetId() {
+    if (this.originalParents && this.originalParents[this.data.arclight.level]) {
+      return `${this.eadid}${this.originalParents[this.data.arclight.level]}`;
+    }
+    return this.data.arclight.originalDocument;
+  }
+
+  get requestParent() {
+    // Cases where you're viewing a component page (use its ancestor trail)...
+    if (this.originalParents && this.originalParents[this.data.arclight.level - 1]) {
+      return this.originalParents[this.data.arclight.level - 1];
+    }
+    // Cases where there are no parents provided...
+    //   1) when on a top-level collection page
+    //   2) when +/- gets clicked
+    return this.data.arclight.originalDocument.replace(this.eadid, '');
+  }
+
+  getData() {
+    const that = this;
+    // Add a placeholder so flashes of text are not as significant
+    const placeholder = new Placeholder();
+    this.el.after(placeholder.$el);
+    $.ajax({
+      url: this.data.arclight.path,
+      data: {
+        'f[component_level_isim][]': this.data.arclight.level,
+        'f[has_online_content_ssim][]': this.data.arclight.access,
+        'f[collection_sim][]': this.data.arclight.name,
+        'f[parent_ssi][]': this.requestParent,
+        search_field: this.data.arclight.search_field,
+        original_parents: this.data.arclight.originalParents,
+        original_document: this.originalDocument,
+        view: 'collection_context'
+      }
+    }).done((response) => that.updateView(response));
+  }
+
+  /**
+   * Constructs a <ul> container element with an ElementButton instance appended
+   * within it
+   * @returns {jQuery}
+   */
+  buildExpandList() {
+    const $ul = $('<ul></ul>');
+    $ul.addClass('pl-0');
+    $ul.addClass('prev-siblings');
+    const button = new ExpandButton(this.data);
+    $ul.append(button.$el);
+    return $ul;
+  }
+
+  /**
+   * Highlights the <li> element for the current Document and appends <li> the
+   *   sibling documents for a given Document element
+   * @param {NavigationDocument[]} newDocs - the NavigationDocument objects for
+   *   each resulting Solr Document
+   * @param {number} originalDocumentIndex
+   */
+  updateSiblings(newDocs, originalDocumentIndex) {
+    newDocs[originalDocumentIndex].setAsHighlighted();
+
+    // Hide all but the first previous sibling
+    const prevSiblingDocs = newDocs.slice(0, originalDocumentIndex);
+    let nextSiblingDocs = [];
+
+    if (prevSiblingDocs.length > 1 && originalDocumentIndex > 0) {
+      const hiddenPrevSiblingDocs = prevSiblingDocs.slice(0, -1);
+      hiddenPrevSiblingDocs.forEach(siblingDoc => {
+        siblingDoc.collapse();
+      });
+
+      const prevSiblingList = this.buildExpandList();
+      const renderedPrevSiblingItems = prevSiblingDocs.map(doc => doc.render()).join('');
+
+      prevSiblingList.append(renderedPrevSiblingItems);
+      this.ul.append(prevSiblingList);
+
+      nextSiblingDocs = newDocs.slice(originalDocumentIndex);
+    } else {
+      nextSiblingDocs = newDocs;
+    }
+
+    const renderedNextSiblingItems = nextSiblingDocs.map(newDoc => newDoc.render()).join('');
+
+    // Insert the rendered sibling documents before the <li> elements
+    this.ul.append(renderedNextSiblingItems);
+    this.el.html(this.ul);
+  }
+
+  /**
+   * Inserts <li> elements for parents (e. g. components or collections) for the
+   *   current Document and appends <li> for each of these
+   * @param {NavigationDocument[]} newDocs - the NavigationDocument objects for
+   *   each resulting Solr Document
+   */
+  updateParents(newDocs) {
+    const that = this;
+    // Case where this is a parent list and needs to be filed correctly
+    //
+    // Otherwise, retrieve the parent...
+    let newDocIndex = newDocs.findIndex(doc => doc.id === this.targetId);
+
+    if (newDocIndex === -1) {
+      const renderedDocs = newDocs.map(newDoc => newDoc.render()).join('');
+      this.ul.append(renderedDocs);
+      this.el.html(this.ul);
+      return;
+    }
+    // Update the docs before the item
+    // Retrieves the documents up to and including the "new document"
+    const beforeDocs = newDocs.slice(0, newDocIndex);
+    let prevParentList = null;
+    let renderedBeforeDocs;
+    if (beforeDocs.length > 1) {
+      beforeDocs.forEach(function (parentDoc) {
+        parentDoc.collapse();
+      });
+      renderedBeforeDocs = beforeDocs.map(newDoc => newDoc.render()).join('');
+      prevParentList = this.buildExpandList();
+      prevParentList.append(renderedBeforeDocs);
+    } else {
+      renderedBeforeDocs = beforeDocs.map(newDoc => newDoc.render()).join('');
+    }
+
+    // Silly but works for now
+    this.ul.append(prevParentList || renderedBeforeDocs);
+
+    let itemDoc = newDocs.slice(newDocIndex, newDocIndex + 1);
+    let renderedItemDoc = itemDoc.map(doc => doc.render()).join('');
+
+    // Update the item
+    const $itemDoc = $(renderedItemDoc);
+    this.ul.append($itemDoc);
+
+    // Update the docs after the item
+    const afterDocs = newDocs.slice(newDocIndex + 1, newDocs.length);
+    const renderedAfterDocs = afterDocs.map(newDoc => newDoc.render()).join('');
+
+    // Insert the documents after the current
+    this.ul.append(renderedAfterDocs);
+    this.el.html(this.ul);
+
+    // Initialize additional things
+    $itemDoc.find('.context-navigator').each(function (i, e) {
+      const contextNavigation = new ContextNavigation(
+        e, that.originalParents, that.originalDocument
+      );
+      contextNavigation.getData();
+    });
+  }
+
+
+  /**
+   * Update the ancestors for <li> elements
+   * @param {jQuery} $li - the <li> element for the current, highlighted
+   *   Document in the <ul> context list of collections, components, and
+   *   containers
+   */
+  /* eslint-disable class-methods-use-this */
+  updateListSiblings($li) {
+    const prevSiblings = $li.prevAll('.al-collection-context');
+    if (prevSiblings.length > 1) {
+      const hiddenNextSiblings = prevSiblings.slice(0, -1);
+      hiddenNextSiblings.toggleClass('collapsed');
+
+      const button = new NestedExpandButton();
+
+      const lastHiddenNextSibling = hiddenNextSiblings[hiddenNextSiblings.length - 1];
+      button.$el.insertAfter(lastHiddenNextSibling);
+    }
+  }
+  /* eslint-enable class-methods-use-this */
+
+  /**
+   * This updates the elements in the View DOM using an AJAX response containing
+   *   the HTML of a server-rendered View template.
+   * It is this which is primarily used to populate the <ul> element with
+   *   children for the navigation context, containing <li> elements for
+   *   collections, components, and containers.
+   * @param {string} response - the AJAX response body
+   */
+  updateView(response) {
+    const that = this;
+    var resp = $.parseHTML(response);
+    var $doc = $(resp);
+    var newDocs = $doc.find('#documents')
+      .find('article')
+      .toArray().map(el => new NavigationDocument(el));
+
+    // See if the original document is located in the returned documents
+    const originalDocumentIndex = newDocs
+      .findIndex(doc => doc.id === that.originalDocument);
+    that.parentLi.find('.al-hierarchy-placeholder').remove();
+
+    // If the original document in the results, update it. If not update with a
+    // more complex procedure
+    if (originalDocumentIndex !== -1) {
+      this.updateSiblings(newDocs, originalDocumentIndex);
+    } else {
+      this.updateParents(
+        newDocs,
+        that.data.arclight.originalParents,
+        that.data.arclight.parent,
+        that.parentLi
+      );
+    }
+    this.el.parent().data('resolved', true);
+    this.addListenersForPlusMinus();
+    this.enablebuttons();
+    Blacklight.doBookmarkToggleBehavior();
+    this.el.trigger('navigation.contains.elements');
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  enablebuttons() {
+    var toEnable = $('[data-hierarchy-enable-me]');
+    var srOnly = $('h2[data-sr-enable-me]');
+    toEnable.removeClass('disabled');
+    toEnable.text(srOnly.data('hasContents'));
+    srOnly.text(srOnly.data('hasContents'));
+  }
+
+  addListenersForPlusMinus() {
+    const that = this;
+    this.ul.find('.al-toggle-view-children').on('click', (e) => {
+      e.preventDefault();
+      const targetArea = $($(e.target).attr('href'));
+      if (!targetArea.data().resolved) {
+        targetArea.find('.context-navigator').each((i, ee) => {
+          const contextNavigation = new ContextNavigation(
+            // Send null for originalParents. We want to disregard the original
+            // component's ancestor trail and instead use the current ID as the
+            // parent in the query to populate the navigator.
+            ee, null, that.originalDocument
+          );
+          contextNavigation.getData();
+        });
+      }
+    });
+  }
+}
+
+/**
+ * Integrate the behavior into the DOM using the Blacklight#onLoad callback
+ *
+ */
+Blacklight.onLoad(function () {
+  $('.context-navigator').each(function (i, e) {
+    const contextNavigation = new ContextNavigation(
+        e, $(this).data('arclight').originalParents, $(this).data('arclight').originalDocument
+      );
+    contextNavigation.getData();
+  });
+});