blacklight-spotlight 4.7.0 → 5.0.0.pre.alpha1

data/app/javascript/spotlight/admin/search_typeahead.js

@@ -1,66 +1,73 @@
 import { addImageSelector } from 'spotlight/admin/add_image_selector'
 
-(function($){
-  $.fn.spotlightSearchTypeAhead = function( options ) {
-    $.each(this, function(){
-      addAutocompleteBehavior($(this));
-    });
+const docStore = new Map();
 
-    function addAutocompleteBehavior( typeAheadInput, _ ) {
-      var settings = $.extend({
-        displayKey: 'title',
-        minLength: 0,
-        highlight: (typeAheadInput.data('autocomplete-highlight') || true),
-        hint: (typeAheadInput.data('autocomplete-hint') || false),
-        autoselect: (typeAheadInput.data('autocomplete-autoselect') || true)
-      }, options);
-      typeAheadInput.typeahead(settings, {
-        displayKey: settings.displayKey,
-        source: settings.bloodhound.ttAdapter(),
-        templates: {
-          suggestion: settings.template
-        }
-      })
-    }
-    return this;
-  }
-})( jQuery );
+function highlight(value, query) {
+  if (query.trim() === '') return value;
+  const queryValue = query.trim();
+  return queryValue ? value.replace(new RegExp(queryValue, 'gi'), '<strong>$&</strong>') : value;
+}
 
-function itemsBloodhound() {
-  var results = new Bloodhound({
-    datumTokenizer: function(d) {
-      return Bloodhound.tokenizers.whitespace(d.title);
-    },
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    limit: 100,
-    remote: {
-      url: $('form[data-autocomplete-exhibit-catalog-path]').data('autocomplete-exhibit-catalog-path').replace("%25QUERY", "%QUERY"),
-      filter: function(response) {
-        return $.map(response['docs'], function(doc) {
-          return doc;
-        })
-      }
-    }
-  });
-  results.initialize();
-  return results;
-};
+function templateFunc(obj, query) {
+  const thumbnail = obj.thumbnail ? `<div class="document-thumbnail"><img class="img-thumbnail" src="${obj.thumbnail}" /></div>` : '';
+  const privateClass = obj.private ? ' blacklight-private' : '';
+  const title = highlight(obj.title, query);
+  const description = obj.description ? `<small>&nbsp;&nbsp;${highlight(obj.description, query)}</small>` : '';
+  return `<div class="autocomplete-item${privateClass}">${thumbnail}
+            <span class="autocomplete-title">${title}</span><br/>${description}
+          </div>`;
+}
+
+function autoCompleteElementTemplate(obj, query) {
+  return `<li role="option" data-autocomplete-value="${obj.id}">${templateFunc(obj, query)}</li>`;
+}
+
+function getAutoCompleteElementDataMap(autoCompleteElement) {
+  if (!docStore.has(autoCompleteElement.id)) {
+    docStore.set(autoCompleteElement.id, new Map());
+  }
+  return docStore.get(autoCompleteElement.id);
+}
 
-function templateFunc(obj) {
-  const thumbnail = obj.thumbnail ? `<div class="document-thumbnail"><img class="img-thumbnail" src="${obj.thumbnail}" /></div>` : ''
-  return $(`<div class="autocomplete-item${obj.private ? ' blacklight-private' : ''}">${thumbnail}
-  <span class="autocomplete-title">${obj.title}</span><br/><small>&nbsp;&nbsp;${obj.description}</small></div>`)
+async function fetchResult(url) {
+  const result = await fetchAutocompleteJSON(url);
+  const docs = result.docs || [];
+  const query = this.querySelector('input').value || '';
+  const autoCompleteElementDataMap = getAutoCompleteElementDataMap(this);
+  return docs.map(doc => {
+    autoCompleteElementDataMap.set(doc.id, doc);
+    return autoCompleteElementTemplate(doc, query);
+  }).join('');
 }
 
 export function addAutocompletetoFeaturedImage(){
-  if($('[data-featured-image-typeahead]').length > 0) {
-    $('[data-featured-image-typeahead]').spotlightSearchTypeAhead({bloodhound: itemsBloodhound(), template: templateFunc}).on('click', function() {
-      $(this).select();
-    }).on('typeahead:selected typeahead:autocompleted', function(e, data) {
-      var panel = $($(this).data('target-panel'));
-      addImageSelector($(this), panel, data.iiif_manifest, true);
-      $($(this).data('id-field')).val(data['global_id']);
-      $(this).attr('type', 'text');
+  const autocompletePath = $('form[data-autocomplete-exhibit-catalog-path]').data('autocomplete-exhibit-catalog-path');
+  const featuredImageTypeaheads = $('[data-featured-image-typeahead]');
+  if (featuredImageTypeaheads.length === 0) return;
+
+  $.each(featuredImageTypeaheads, function(index, autoCompleteInput) {
+    const autoCompleteElement = autoCompleteInput.closest('auto-complete');
+
+    autoCompleteElement.setAttribute('src', autocompletePath);
+    autoCompleteElement.fetchResult = fetchResult;
+    autoCompleteElement.addEventListener('auto-complete-change', e => {
+      const data = getAutoCompleteElementDataMap(autoCompleteElement).get(e.relatedTarget.value);
+      if (!data) return;
+
+      const inputElement = $(e.relatedTarget);
+      const panel = document.querySelector(e.relatedTarget.dataset.targetPanel);
+      e.relatedTarget.value = data.title;
+      addImageSelector(inputElement, $(panel), data.iiif_manifest, true);
+      $(inputElement.data('id-field')).val(data['global_id']);
+      inputElement.attr('type', 'text');
     });
+  });
+}
+
+export async function fetchAutocompleteJSON(url) {
+  const res = await(fetch(url.toString()));
+  if (!res.ok) {
+    throw new Error(await res.text());
   }
+  return await res.json();
 }

data/app/javascript/spotlight/admin/spotlight_nestable.js

@@ -1,68 +1,191 @@
+import Sortable from 'sortablejs';
+
 const Module = (function() {
-    var nestableSelector = '[data-behavior="nestable"]';
-    return {
-      init: function(selector){
-
-        $(selector || nestableSelector).each(function(){
-          // Because the Rails helper will not maintain the case that Nestable
-          // expects, we just need to do this manual conversion. :(
-          var data = $(this).data();
-          data.expandBtnHTML = data.expandBtnHtml;
-          data.collapseBtnHTML = data.collapseBtnHtml;
-          $(this).nestable(data);
-          updateWeightsAndRelationships($(this));
-        });
+  const nestableContainerSelector = '[data-behavior="nestable"]';
+  const sortableOptions = {
+    animation: 150,
+    draggable: '.dd-item',
+    handle: '.dd-handle',
+    fallbackOnBody: true,
+    swapThreshold: 0.65,
+    emptyInsertThreshold: 15,
+    onStart: onStartHandler,
+    onEnd: onEndHandler,
+    onMove: onMoveHandler,
+  }
+  const draggableClass = 'dd-item';
+  const nestedSortableClass = 'dd-list';
+  const nestedSortableSelector = '.dd-list';
+  const nestedSortableNodeName = 'ol';
+  const findNode = (id, container) => container.querySelector(`[data-id="${id}"]`);
+  const setWeight = (node, weight) => weightField(node).value = weight;
+  const setParent = (node, parentId) => parentPageField(node).value = parentId;
+  const weightField = node => findProperty(node, "weight");
+  const parentPageField = node => findProperty(node, "parent_page");
+  const findProperty = (node, property) => node.querySelector(`input[data-property="${property}"]`);
+  let nestedId = 0;
+
+  return {
+    init: function(nestedContainers) {
+      if (nestedContainers === undefined) {
+        nestedContainers = document.querySelectorAll(nestableContainerSelector);
       }
-    };
-    function updateWeightsAndRelationships(nestedList){
-      nestedList.on('change', function(event){
-        var container = $(event.currentTarget);
-        var data = $(this).nestable('serialize');
-        var weight = 0;
-        for(var i in data){
-          var parent_id = data[i]['id'];
-          const parent_node = findNode(parent_id, container);
-          setWeight(parent_node, weight++);
-          if(data[i]['children']){
-            var children = data[i]['children'];
-            for(var child in children){
-              var id = children[child]['id']
-              var child_node = findNode(id, container);
-              setWeight(child_node, weight++);
-              setParent(child_node, parent_id);
-            }
-          } else {
-            setParent(parent_node, "");
-          }
-        }
-      });
 
+      // nestedContainers could be a jQuery selector result, normalize to an array.
+      const containersToInit = Array.from(nestedContainers);
+      containersToInit.forEach((container) => {
+        // Sir Trevor listens for drag and drop events and will error on Sortable events.
+        // Don't let them bubble past the Sortable wrapper.
+        container.addEventListener('drop', stopPropagationHandler);
+      
+        const nestedSortables = [
+          ...(container.matches(nestedSortableSelector) ? [container] : []),
+          ...Array.from(container.querySelectorAll(nestedSortableSelector))
+        ];
+        const group = `nested-${nestedId++}`;
+        
+        nestedSortables.forEach(sortable => {
+          new Sortable(sortable, { ...sortableOptions, group: group });
+        });
+      });
     }
-    function findNode(id, container) {
-      return container.find("[data-id="+id+"]");
+  };
+
+  function stopPropagationHandler(evt) {
+    evt.stopPropagation();
+  }
+
+  function onStartHandler(evt) {
+    makeEmptyChildSortablesForEligibleParents(getNestableContainer(evt.item), getMaxNestingLevelSetting(evt.item));
+  }
+
+  function onEndHandler(evt) {
+    const nestableContainer = getNestableContainer(evt.item);
+    removeEmptySortables(nestableContainer);
+    updateWeightsAndRelationships(nestableContainer);
+  }
+
+  function onMoveHandler(evt) {
+    // The usage of data-max-depth is one off of the standard notion of depth (# edges to root)
+    // E.g., data-max-depth=2 allows for one level of nesting.
+    // evt.dragged is a draggable in a Sortable (e.g., a dd-item)
+    // evt.to is the Sortable to insert into (e.g., a dd-list)
+    const maxAllowedDepth = getMaxNestingLevelSetting(evt.to) - 1;
+    const newDepth = getSortableDepth(evt.to) + getHeight(evt.dragged);
+
+    // Be careful here. Returning true is different than returning nothing in SortableJS.
+    if (newDepth > maxAllowedDepth) {
+      return false;
     }
+  }
+
+  // Get the depth of the sortable element from the root container
+  function getSortableDepth(sortableElement) {
+    const originatingGroup = Sortable.get(sortableElement).options.group.name;
+    let depth = 0;
+    let parentSortableElement = sortableElement;
 
-    function setWeight(node, weight) {
-      weight_field(node).val(weight);
+    while ((parentSortableElement = parentSortableElement.parentElement.closest(nestedSortableSelector))) {
+      const parentSortable = Sortable.get(parentSortableElement);
+      if (parentSortable?.options.group.name === originatingGroup) {
+        depth++;
+      }
     }
 
-    function setParent(node, parent_id) {
-      parent_page_field(node).val(parent_id);
+    return depth;
+  }
+
+  // Find the max child depth in the tree, starting from the draggableElement
+  function findMaxDepth(draggableElement) {
+    const childSortableElement = draggableElement.querySelector(nestedSortableSelector);
+    if (!childSortableElement) {
+      return 1;
     }
 
-    /* find the input element with data-property="weight" that is nested under the given node */
-    function weight_field(node) {
-      return find_property(node, "weight");
+    const children = childSortableElement.querySelectorAll(`.${draggableClass}`);
+    const childDepths = Array.from(children).map(findMaxDepth);
+    return 1 + Math.max(0, ...childDepths);
+  }
+
+  function getHeight(draggableElement) {
+    return findMaxDepth(draggableElement) - 1;
+  }
+
+  function getNestableContainer(element) {
+    return element.closest(nestableContainerSelector);
+  }
+
+  function getMaxNestingLevelSetting(element) {
+    return getNestableContainer(element).getAttribute('data-max-depth') || 1;
+  }
+
+  // Create empty child sortables for all potential parents as appropriate for the given nesting level
+  function makeEmptyChildSortablesForEligibleParents(container, nestingLevel) {
+    if (nestingLevel <= 1) {
+      return;
     }
 
-    /* find the input element with data-property="parent_page" that is nested under the given node */
-    function parent_page_field(node){
-      return find_property(node, "parent_page");
+    const sortableElement = container.querySelector(nestedSortableSelector);
+    const sortable = Sortable.get(sortableElement);
+    if (!sortable) {
+      return;
     }
 
-    function find_property(node, property) {
-      return node.find("input[data-property=" + property + "]");
+    const group = sortable.options.group.name;
+    const draggableElements = Array.from(sortableElement.children)
+      .filter(child => child.classList.contains(draggableClass));
+
+    draggableElements.forEach(draggableElement => {
+      if (!draggableElement.querySelector(nestedSortableSelector)) {
+        const emptySortableElement = document.createElement(nestedSortableNodeName);
+        emptySortableElement.className = nestedSortableClass;
+        draggableElement.appendChild(emptySortableElement);
+        new Sortable(emptySortableElement, { ...sortableOptions, group: group });
+      }
+      makeEmptyChildSortablesForEligibleParents(draggableElement, nestingLevel - 1);
+    });
+  }
+
+  // Remove any empty sortables within the container. They could be empty lists, which are invalid for accessibility.
+  function removeEmptySortables(container) {
+    const sortableElements = container.querySelectorAll(nestedSortableSelector);
+    sortableElements.forEach(sortableElement => {
+      if (sortableElement.innerHTML.trim() === '') {
+        const sortable = Sortable.get(sortableElement);
+        if (sortable) {
+          sortable.destroy();
+          sortableElement.remove();
+        }
+      }
+    });
+  }
+
+  // Traverse all sortables within a container and update the weight and parent_page inputs
+  function updateWeightsAndRelationships(container) {
+    const sortableElement = container.matches(nestedSortableSelector) ? container : container.querySelector(nestedSortableSelector);
+    const nestingLevelSetting = getMaxNestingLevelSetting(sortableElement);
+    const sortable = Sortable.get(sortableElement);
+    const stack = [{nodes: sortable.toArray(), parentId: ''}];
+    let weight = 0;
+
+    while (stack.length > 0) {
+      const {nodes, parentId} = stack.pop();
+
+      nodes.forEach((nodeId) => {
+        const node = findNode(nodeId, container);
+        setWeight(node, weight++);
+
+        if (nestingLevelSetting > 1) {
+          setParent(node, parentId);
+          const children = node.querySelector(nestedSortableSelector);
+          if (children) {
+            const sortableElement = Sortable.get(children);
+            stack.push({nodes: sortableElement.toArray(), parentId: nodeId});
+          }
+        }
+      });
     }
+  }
 })();
 
 export default Module

data/app/javascript/spotlight/admin/visibility_toggle.js

@@ -1,23 +1,13 @@
-// Visibility toggle for items in an exhibit, based on Blacklight's bookmark toggle
-// See: https://github.com/projectblacklight/blacklight/blob/main/app/javascript/blacklight/bookmark_toggle.js
-
-import CheckboxSubmit from 'spotlight/admin/checkbox_submit'
-
+// Blacklight's BookmarkToggle is doing the real work, this only adds/removes the "blacklight-private" class.
 const VisibilityToggle = (e) => {
   if (e.target.matches('[data-checkboxsubmit-target="checkbox"]')) {
     const form = e.target.closest('form')
     if (form) {
-      if (!Blacklight.BookmarkToggle) new CheckboxSubmit(form).clicked(e)
-
       // Add/remove the "private" label to the document row when visibility is toggled
       const docRow = form.closest('tr')
       if (docRow) docRow.classList.toggle('blacklight-private')
     }
   }
 }
-
-VisibilityToggle.selector = 'form.visibility-toggle'
-
 document.addEventListener('click', VisibilityToggle)
-
 export default VisibilityToggle

data/app/javascript/spotlight/controllers/index.js

@@ -0,0 +1,8 @@
+import TagSelectorController from 'spotlight/controllers/tag_selector_controller'
+
+export default class {
+  connect() {
+    if (typeof Stimulus === "undefined") return
+    Stimulus.register('tag-selector', TagSelectorController)
+  }
+}

data/app/javascript/spotlight/controllers/tag_selector_controller.js

@@ -0,0 +1,203 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+  static targets = [
+    'addNewTagWrapper',
+    'dropdownContent',
+    'initialTags',
+    'newTag',
+    'searchResultTags',
+    'selectedTags',
+    'tagControlWrapper',
+    'tagSearch',
+    'tagsField',
+    'tagSearchDropdown',
+    'tagSearchInputWrapper'
+  ]
+
+  static values = {
+    tags: Array,
+    translations: Object
+  }
+
+  tagDropdown (event) {
+    this.dropdownContentTarget.classList.toggle('d-none')
+  }
+
+  clickOutside (event) {
+    const isShown = !this.dropdownContentTarget.classList.contains('d-none')
+    const inSelected = event.target.classList.contains('pill-close')
+    const inContainer = this.tagControlWrapperTarget.contains(event.target)
+    if (!inContainer && !inSelected && isShown) {
+      this.tagDropdown(event)
+    }
+  }
+
+  handleKeydown (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      const hidden = this.dropdownContentTarget.classList.contains('d-none')
+      if (hidden) return;
+
+      const tagElementToAdd = this.dropdownContentTarget.querySelector('.active')?.firstElementChild
+      if (tagElementToAdd) tagElementToAdd.click()
+    }
+
+    if (event.key === ',') {
+      event.preventDefault()
+      if (this.tagSearchTarget.value.length === 0) return
+
+      if (!this.addNewTagWrapperTarget.classList.contains('d-none')) {
+        this.addNewTagWrapperTarget.click()
+        this.tagSearchTarget.focus()
+        return
+      }
+
+      const exactMatch = this.dropdownContentTarget.querySelector('.active')?.firstElementChild
+      if (exactMatch?.checked === false) {
+        exactMatch.click()
+        this.resetSearch()
+      }
+      this.tagSearchTarget.focus()
+    }
+  }
+
+  addNewTag (event) {
+    if (this.addNewTagWrapperTarget.classList.contains('d-none') || this.newTagTarget.dataset.tag.length === 0) {
+      return
+    }
+
+    this.tagsValue = this.tagsValue.concat([this.newTagTarget.dataset.tag])
+    this.resetSearch()
+  }
+
+  resetSearch() {
+    this.tagSearchTarget.value = ''
+    this.newTagTarget.innerHTML = ''
+    this.newTagTarget.dataset.tag = ''
+    this.newTagTarget.disabled = true
+    this.addNewTagWrapperTarget.classList.add('d-none')
+    this.searchResultTagsTargets.forEach(target => this.showElement(target.parentElement))
+  }
+
+  tagUpdate (event) {
+    const target = event.target ? event.target : event
+    if (target.checked) {
+      this.tagsValue = this.tagsValue.concat([target.dataset.tag])
+    } else {
+      this.tagsValue = this.tagsValue.filter(tag => tag !== target.dataset.tag)
+    }
+  }
+
+  updateSearchResultsPlaceholder(event) {
+    const placeholderElement = this.dropdownContentTarget.querySelector('.no-results')
+    if (!placeholderElement) return
+
+    const hasVisibleTags = this.dropdownContentTarget.querySelector('label:not(.d-none):not(.no-results)')
+    placeholderElement.classList.toggle('d-none', hasVisibleTags)
+  }
+
+  tagCreate(event) {
+    event.preventDefault()
+    const newTagCheckbox = document.createElement('label')
+    newTagCheckbox.innerHTML = `<input type="checkbox" checked data-action="click->${this.identifier}#tagUpdate" data-tag-selector-target="searchResultTags" data-tag="${this.newTagTarget.dataset.tag}"> ${this.newTagTarget.dataset.tag}`
+    const existingTags = Array.from(this.dropdownContentTarget.querySelectorAll('label:not(#add-new-tag-wrapper)'))
+    const insertPosition = existingTags.findIndex(tag => tag.textContent.trim().localeCompare(this.newTagTarget.dataset.tag) > 0)
+    if (insertPosition === -1) {
+      this.addNewTagWrapperTarget.insertAdjacentElement('beforebegin', newTagCheckbox)
+    } else {
+      existingTags[insertPosition].insertAdjacentElement('beforebegin', newTagCheckbox)
+    }
+
+    this.tagsValue = this.tagsValue.concat([this.newTagTarget.dataset.tag])
+    this.tagSearchTarget.value = ''
+    this.tagSearchTarget.dispatchEvent(new Event('input'))
+  }
+
+
+  tagsValueChanged() {
+    const isEmpty = this.tagsValue.length === 0
+
+    this.selectedTagsTarget.classList.toggle('d-none', isEmpty)
+    this.tagSearchInputWrapperTarget.classList.toggle('rounded', isEmpty)
+    this.tagSearchInputWrapperTarget.classList.toggle('rounded-bottom', !isEmpty)
+
+    if (!isEmpty) {
+      this.selectedTagsTarget.innerHTML = `<ul class="list-unstyled border rounded-top mb-0 p-1 px-2">${this.renderTagPills()}</ul>`
+    }
+
+    const newValue = this.tagsValue.join(', ')
+    if (this.tagsFieldTarget.value !== newValue) {
+      this.tagsFieldTarget.value = newValue
+    }
+  }
+
+  normalizeTag (tag) {
+    const normalizeRegex = /[^\w\s]/gi
+    return tag.replace(normalizeRegex, '').toLowerCase().trim()
+  }
+
+  showElement (element) {
+    element.classList.add('d-block')
+    element.classList.remove('d-none')
+  }
+
+  hideElement (element) {
+    element.classList.remove('d-block')
+    element.classList.add('d-none')
+  }
+
+  search(event) {
+    const searchTerm = this.normalizeTag(event.target.value)
+    this.dropdownContentTarget.classList.remove('d-none')
+
+    const exactMatch = this.searchResultTagsTargets.some(target => {
+      const compareTerm = this.normalizeTag(target.dataset.tag)
+      const isMatch = compareTerm.includes(searchTerm)
+      target.parentElement.classList.remove('active')
+      this[isMatch ? 'showElement' : 'hideElement'](target.parentElement)
+      return compareTerm === searchTerm
+    })
+
+    this[searchTerm.length > 0 && !exactMatch ? 'showElement' : 'hideElement'](this.addNewTagWrapperTarget)
+    this.addNewTagWrapperTarget.classList.remove('active')
+    this.dropdownContentTarget.querySelector('label:not(.d-none)')?.classList.add('active')
+  }
+
+  updateTagToAdd (event) {
+    const tagAlreadyAdded = this.tagsValue.some(tag =>
+      this.normalizeTag(tag) === this.normalizeTag(event.target.value)
+    )
+    this.newTagTarget.dataset.tag = event.target.value.trim()
+    this.newTagTarget.nextSibling.textContent = ` ${this.translationsValue.add_new_tag}: ${event.target.value}`
+    this.newTagTarget.disabled = !this.newTagTarget.dataset.tag.length || tagAlreadyAdded
+  }
+
+  deselect (event) {
+    event.preventDefault()
+
+    const clickedTag = event.target.closest('button').dataset.tag
+    const target = this.searchResultTagsTargets.find((tag) => tag.dataset.tag === clickedTag)
+    target ? target.click() : this.tagsValue = this.tagsValue.filter(tag => tag !== clickedTag)
+  }
+
+  renderTagPills () {
+    return this.tagsValue.map((tag) => {
+      return `
+        <li class="d-inline-flex gap-2 align-items-center my-2">
+          <span class="bg-light badge rounded-pill border selected-item d-inline-flex align-items-center text-dark">
+            <span class="selected-item-label d-inline-flex">${tag}</span>
+            <button
+              type="button"
+              data-action="${this.identifier}#deselect"
+              data-tag="${tag}"
+              class="btn-close close ms-1 ml-1"
+              aria-label="${this.translationsValue.remove} ${tag}"
+            ><span aria-hidden="true" class="visually-hidden">&times;</span></button>
+          </span>
+        </li>
+      `
+    }).join('')
+  }
+}

data/app/javascript/spotlight/core.js

@@ -1,3 +1,5 @@
+import SirTrevor from "sir-trevor"
+
 const Spotlight = function() {
   var buffer = [];
   return {
@@ -6,6 +8,7 @@ const Spotlight = function() {
     },
 
     activate: function() {
+      this.sirTrevorIcon = window.sirTrevorIcon;
       for(var i = 0; i < buffer.length; i++) {
         buffer[i].call();
       }
@@ -23,10 +26,5 @@ const Spotlight = function() {
 
 // This allows us to configure Spotlight in app/views/layouts/base.html.erb
 window.Spotlight = Spotlight
-
+window.SirTrevor = SirTrevor
 export default Spotlight
-
-Blacklight.onLoad(function() {
-  Spotlight.activate();
-});
-

data/app/javascript/spotlight/index.js

@@ -1,8 +1,10 @@
 import UserIndex from 'spotlight/user'
 import AdminIndex from 'spotlight/admin'
 import Core from 'spotlight/core'
+import SpotlightControllers from 'spotlight/controllers'
 
 Core.onLoad(() => {
+  new SpotlightControllers().connect()
   new UserIndex().connect()
   new AdminIndex().connect()
 })

data/app/javascript/spotlight/user/browse_group_categories.js

@@ -1,3 +1,5 @@
+import tns from 'tiny-slider'
+
 export default class {
   connect() {
     var $container, slider;

data/app/javascript/spotlight/user/carousel.js

@@ -1,5 +1,7 @@
 export default class {
   connect() {
-    $('.carousel').carousel();
+    if ($.fn.carousel) {
+      $('.carousel').carousel();
+    }
   }
 }