spotlight-frontend 4.7.1 → 5.0.0-alpha2

package/app/assets/stylesheets/spotlight/_accessibility.scss

@@ -6,12 +6,3 @@
     outline: $input-focus-border-color auto 5px;
   }
 }
-
-// CSS for accessibility dashboard
-.alt-text-status .bi-exclamation-triangle-fill {
-  fill: $warning;
-}
-
-.alt-text-status .bi-check-circle-fill {
-  fill: $success;
-}

package/app/assets/stylesheets/spotlight/_autocomplete.scss

@@ -0,0 +1,49 @@
+auto-complete {
+  width: 100%;
+  z-index: $zindex-dropdown !important; /* get typeahead to float on top of e.g. leaflet */
+  ul {
+    list-style-type: none;
+    z-index: $zindex-dropdown !important;
+    margin-top: 2px;
+    max-height: 360px;
+    overflow-y: auto;
+    padding: 8px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  }
+
+  [role="option"]{
+    font-size: 18px;
+    line-height: 24px;
+    padding: 3px 1rem 3px 1rem;
+    margin-bottom: 1em;
+  }
+}
+
+auto-complete [aria-selected="true"],
+auto-complete [role="option"]:hover {
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.autocomplete-item {
+  display: flex;
+
+  p {
+    margin: 0;
+  }
+  .document-thumbnail {
+    margin-right: 1rem;
+    min-width: 60px;
+    padding: 0;
+    width: 60px;
+
+    img {
+      max-width: 60px;
+      max-height: 60px;
+    }
+  }
+}

package/app/assets/stylesheets/spotlight/_blacklight_configuration.scss

@@ -15,7 +15,6 @@
       padding: 0.75rem 0.75rem 0.75rem 40px;
       margin: 0;
       margin-top: -1px;
-      height: 100%;
     }
 
     .dd3-handle:before {

package/app/assets/stylesheets/spotlight/_blacklight_overrides.scss

@@ -1,15 +1,10 @@
-.submit-search-text {
-  @extend .sr-only !optional;
-  @extend .visually-hidden !optional;
-}
-
 .search-query-form {
   z-index: 1;
 
   .input-group {
     width: 100%;
   }
-  
+
   .search-btn {
     max-height: 2.375rem;
   }

package/app/assets/stylesheets/spotlight/_browse.scss

@@ -54,8 +54,8 @@ $image-overlay-max-height: 300px;
   }
 
   .image-overlay {
-    border: 2px solid $gray-600;
-    border-radius: $border-radius-lg;
+    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+    border-radius: var(--bs-border-radius);
     max-height: 240px;
     min-height: 140px;
     overflow: hidden;

package/app/assets/stylesheets/spotlight/_catalog.scss

@@ -4,7 +4,6 @@
   .thumbnail-column {
     box-sizing: content-box;
     min-width: 60px;
-
   }
 
   .document-thumbnail {
@@ -20,7 +19,9 @@
     object-fit: cover;
   }
 
-  .document-counter {display: none;}
+  .document-counter {
+    display: none;
+  }
 
   .index_title {
     margin-top: 0;
@@ -43,8 +44,7 @@
     text-align: center;
     li {
       @extend .badge;
-      @extend .badge-secondary !optional;
-      @extend .bg-secondary !optional;
+      @extend .bg-secondary;
       a {
         color: #fff;
       }
@@ -52,14 +52,27 @@
   }
 }
 
-.document, tr.doc-row, li.dd-item, .autocomplete-item {
+.document,
+tr.doc-row,
+li.dd-item,
+.autocomplete-item {
   &.blacklight-private {
-    .index_title, h1, .card-title, .autocomplete-title {
+    .index_title,
+    h1,
+    .card-title,
+    .autocomplete-title {
       @include private-label;
     }
   }
 }
 
+// Don't show the private label until Blacklight reports success
+tr.doc-row:has(input.toggle-visibility:disabled:not(:checked)) {
+  .index_title::after {
+    display: none;
+  }
+}
+
 .blacklight-catalog-admin {
   .add-items-nav {
     margin-bottom: $spacer;
@@ -71,33 +84,20 @@
 }
 
 form.edit_solr_document {
-  .bootstrap-tagsinput {
-    @extend .clearfix;
-    cursor: text;
-  }
   .bg-warning.form-text {
     font-size: 0.9em;
     padding: 3px 6px;
   }
 }
 
-.bootstrap-tagsinput {
-  display: block;
-  .twitter-typeahead {
-    width: auto;
-  }
-
-  .tt-input {
-    vertical-align: baseline !important;
-  }
-}
-
-.blacklight-catalog-edit, .blacklight-catalog-show {
+.blacklight-catalog-edit,
+.blacklight-catalog-show {
   .img-thumbnail {
     @extend .col-md-6;
   }
 
-  .tags, .dl-horizontal {
+  .tags,
+  .dl-horizontal {
     @extend .col-md-6;
   }
 
@@ -120,7 +120,8 @@ form.edit_solr_document {
   width: 60%;
   margin-left: -1 * $spacer * 0.1;
 
-  .btn, .btn-group {
+  .btn,
+  .btn-group {
     margin-left: $spacer * 0.1;
     margin-top: $spacer * 0.25;
   }
@@ -141,28 +142,26 @@ form.edit_solr_document {
 .document {
   .blacklight-exhibit_tags a {
     @extend .badge;
-    @extend .badge-secondary !optional;
-    @extend .bg-secondary !optional;
+    @extend .bg-secondary;
 
     &:not(:last-child) {
-      @extend .mr-2 !optional;
-      @extend .me-2 !optional;
+      @extend .me-2;
     }
   }
 }
 
 .visibility-toggle {
-	.no-js & {
-		input[type="submit"] {
-			display: inline
-		}
-
-		div.toggle-visibility {
-			display: none
-		}
-	}
-
-	input[type="submit"] {
-		display: none;
-	}
+  .no-js & {
+    input[type="submit"] {
+      display: inline;
+    }
+
+    div.toggle-visibility {
+      display: none;
+    }
+  }
+
+  input[type="submit"] {
+    display: none;
+  }
 }

package/app/assets/stylesheets/spotlight/_curation.scss

@@ -21,7 +21,7 @@
     }
     input[type='submit'] {
       @extend .btn;
-      @extend .btn-secondary;
+      @extend .btn-primary;
       @extend .btn-sm;
     }
     display: none;

package/app/assets/stylesheets/spotlight/_exhibit_admin.scss

@@ -83,3 +83,10 @@
     margin-bottom: $spacer;
   }
 }
+
+// In various admin views we use leaflet maps and autocomplete. They both set
+// the same z-index value, so we need to override the leaflet z-index to make
+// sure the leaflet controls don't appear over the autocomplete dropdown.
+.leaflet-top, .leaflet-bottom {
+  z-index: 950;
+}

package/app/assets/stylesheets/spotlight/_exhibits_index.scss

@@ -1,9 +1,6 @@
 $exhibit-card-overlay-padding: $card-img-overlay-padding * 0.5 !default;
-$exhibit-card-overlay-opacity: 0.85 !default;
-$exhibit-card-bg: $card-bg !default;
 
 .exhibit-card {
-  background: $exhibit-card-bg;
   overflow-y: hidden;
   padding-bottom: 3rem;
 
@@ -36,7 +33,13 @@ $exhibit-card-bg: $card-bg !default;
   }
 
   .card-img-overlay {
-    background: rgba($exhibit-card-bg, $exhibit-card-overlay-opacity);
+    --exhibit-card-overlay-opacity: .7;
+    --exhibit-card-overlay-rgb: 255, 255, 255;
+    --exhibit-card-overlay-bg: rgba(
+      var(--exhibit-card-overlay-rgb),
+      var(--exhibit-card-overlay-opacity)
+    );
+    background: var(--exhibit-card-overlay-bg);
     border-bottom-left-radius: calc(0.25rem - 1px);
     border-bottom-right-radius: calc(0.25rem - 1px);
     display: flex;
@@ -82,7 +85,7 @@ $exhibit-card-bg: $card-bg !default;
     outline: $input-focus-border-color auto 5px;
 
     // Use WebKit focus styles if available
-    @supports (-webkit-appearance:none) {
+    @supports (-webkit-appearance: none) {
       outline-color: -webkit-focus-ring-color;
     }
 

package/app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss

@@ -56,8 +56,8 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  border: 2px solid $featured-browse-category-border-color;
-  border-radius: $border-radius-lg;
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+  border-radius: var(--bs-border-radius);
   position: relative;
 
   .category-caption {
@@ -69,7 +69,7 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
     width: 100%;
     padding: 5%;
     background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 45%, rgba(46, 45, 41, 0) 100%);
-    border-radius: $border-radius-lg;
+    border-radius: var(--bs-border-radius);
     display: flex;
     flex-direction: column; 
     justify-content: flex-end;

package/app/assets/stylesheets/spotlight/_header.scss

@@ -143,3 +143,16 @@
     width: 1px;
   }
 }
+
+.link-unstyled {
+  &,
+  &:visited,
+  &:hover,
+  &:active,
+  &:focus,
+  &:active:hover {
+    color: inherit;
+    text-decoration: none;
+    font-weight: inherit;
+  }
+}

package/app/assets/stylesheets/spotlight/_mixins.scss

@@ -1,5 +1,5 @@
 @mixin edit-in-place-highlighting() {
-  background: #F7F7D0;
+  background: #f7f7d0;
   cursor: text;
 }
 
@@ -10,9 +10,8 @@
 @mixin private-label() {
   &:after {
     @extend .badge;
-    @extend .badge-warning !optional;
-    @extend .bg-warning !optional;
-    content: 'Private';
+    @extend .bg-warning;
+    content: "Private";
     margin-left: 3px;
     color: black;
   }

package/app/assets/stylesheets/spotlight/_nestable.scss

@@ -26,8 +26,8 @@ tr.dd-item {
   position: relative;
 }
 
-.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
-.dd-list .dd-list { padding-left: 30px; }
+.dd-list { display: block; position: relative; margin: 0; padding: 0 0 5px 0; list-style: none; }
+.dd-list .dd-list { margin-left: 15px; padding-left: 15px; padding-bottom: 0; } // Having this mix of padding and margin improves the experience of dragging left to remove an item from a nested list.
 .dd-collapsed .dd-list { display: none; }
 
 .dd-item,
@@ -55,19 +55,10 @@ tr.dd-item {
     background-position: 0 0, 30px 30px;
 }
 
-.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
-.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
-.dd-dragel .dd-handle {
-            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
-}
-
 /**
  * Nestable Extras
  */
 
-.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
-
-
 .dd-hover > .dd-handle { background: #2ea8e5 !important; }
 
 /**
@@ -93,7 +84,6 @@ tr.dd-item {
 .dd3-content.page-admin {
   position: relative;
 }
-.dd-dragel > .dd3-item > .dd3-content { margin: 0; }
 
 .dd3-item > button { margin-left: 30px; }
 

package/app/assets/stylesheets/spotlight/_pages.scss

@@ -12,8 +12,7 @@
 }
 
 .primary-actions {
-  @extend .float-right !optional;
-  @extend .float-end !optional;
+  @extend .float-end;
 }
 
 #nested-pages {
@@ -71,7 +70,7 @@
 
     li {
       margin-bottom: 1rem;
-      margin-top: $spacer * .5;
+      margin-top: $spacer * 0.5;
       word-break: break-word;
       .name {
         font-weight: bold;
@@ -82,7 +81,7 @@
   ol.sidenav {
     li {
       color: $gray-900;
-      margin-top: $spacer * .5;
+      margin-top: $spacer * 0.5;
     }
 
     ol.subsection {
@@ -117,7 +116,9 @@
 }
 
 .item-grid-block {
-  h3 { margin-top: 0; }
+  h3 {
+    margin-top: 0;
+  }
 
   .text-col {
     float: none;
@@ -180,7 +181,8 @@
   }
 }
 
-.preview-btn, .preview-exit-btn {
+.preview-btn,
+.preview-exit-btn {
   float: left;
   width: 100px;
 }
@@ -200,7 +202,8 @@
   h2 {
     margin-top: 0;
   }
-  p, ol > li {
+  p,
+  ol > li {
     padding: $spacer * 0.5;
   }
   ol > li:last-child {
@@ -221,7 +224,6 @@
 }
 
 .items-block {
-
   .text-col {
     float: none;
     width: auto;
@@ -279,5 +281,5 @@
 
 .zpr-link {
   @extend .btn-sm;
-  margin-top: $spacer * .75;
+  margin-top: $spacer * 0.75;
 }

package/app/assets/stylesheets/spotlight/_report_a_problem.scss

@@ -1,10 +1,8 @@
 #report-problem-form {
-  display: none;
   border-bottom: 1px solid $gray-600;
 
   h2 {
-    @extend .sr-only !optional;
-    @extend .visually-hidden !optional;
+    @extend .visually-hidden;
   }
 }
 

package/app/assets/stylesheets/spotlight/_sir-trevor_overrides.scss

@@ -75,8 +75,8 @@
 
 .st-block-controls__button {
   @extend .btn;
-  @extend .btn-secondary;
-  @extend .btn-outline-secondary;
+  @extend .btn-primary;
+  @extend .btn-outline-primary;
 
   border: 1px solid $gray-700;
 

package/app/assets/stylesheets/spotlight/_spotlight.scss

@@ -30,11 +30,12 @@
 @import "report_a_problem";
 @import "exhibits_index";
 @import "collapse_toggle";
+@import "tag_selector";
 @import "translations";
 @import "utilities";
 @import "view_larger";
 @import "accessibility";
-
+@import "autocomplete";
 
 
 // Styles below keep footer at bottom of viewport

package/app/assets/stylesheets/spotlight/_tag_selector.scss

@@ -0,0 +1,34 @@
+.tag-selector {
+  .tag-selection-search-bar input {
+    border: none;
+    outline: none;
+  }
+
+  .tag-selector-input {
+    display: none;
+  }
+
+  .dropdown-content {
+    overflow-y: auto;
+    max-height: 180px;
+    label {
+      padding: 5px 10px;
+      cursor: pointer;
+
+      &:hover,
+      &.active {
+        background-color: $light;
+      }
+    }
+  }
+}
+
+.no-js .tag-selector {
+  .tag-selector-input {
+    display: block;
+  }
+
+  .tag-selection-wrapper {
+    display: none;
+  }
+}

package/app/assets/stylesheets/spotlight/_variables.scss

@@ -4,14 +4,6 @@ $footer-height: 7.5rem !default;
 $masthead-bg: $card-bg !default;
 $masthead-height: 11.25rem !default;
 $masthead-image-blur: 1px !default;
-
-$exhibit-card-height: 350px !default;
-$exhibit-card-bg: $card-bg !default;
-$exhibit-card-border: $card-border-color !default;
-$exhibit-card-gutter: 30px !default;
-$exhibit-card-image-size: 269px !default;
-$exhibit-card-shadow: inset 2px 2px 5px -2px $exhibit-card-border !default;
-
 $navbar-transparent-border: $gray-500 !default;
 $navbar-transparent-page-bg: rgba(0, 0, 0, 0.5) !default;
 

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "spotlight-frontend",
-  "version": "4.7.1",
+  "version": "5.0.0-alpha2",
   "description": "Exhibits plugin for blacklight",
   "main": "app/assets/javascripts/spotlight",
   "type": "module",
+  "module": "app/assets/javascripts/spotlight/spotlight.esm.js",
   "scripts": {
     "prepare": "rollup --config rollup.config.js --sourcemap && ESM=true rollup --config rollup.config.js --sourcemap"
   },
@@ -12,7 +13,8 @@
     "url": "git+https://github.com/projectblacklight/spotlight.git"
   },
   "files": [
-    "app/assets", "vendor/assets"
+    "app/assets",
+    "vendor/assets"
   ],
   "author": "",
   "license": "Apache-2.0",
@@ -21,6 +23,7 @@
   },
   "homepage": "https://github.com/projectblacklight/spotlight#readme",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
     "rollup": "^4.0.0",
     "rollup-plugin-includepaths": "^0.2.4"
   },
@@ -29,5 +32,15 @@
     "not IE 11"
   ],
   "dependencies": {
+    "blacklight-frontend": "^8.4.0",
+    "bootstrap": ">=4.3.1 <6.0.0",
+    "clipboard": "^2.0.11",
+    "jquery": "^3.7.1",
+    "jquery-serializejson": "^3.2.1",
+    "leaflet": "^1.9.4",
+    "leaflet-iiif": "^3.0.0",
+    "openseadragon-rails": "^1.0.1",
+    "sir-trevor": "^0.8.2",
+    "sortablejs": "^1.15.3"
   }
 }

package/vendor/assets/javascripts/tiny-slider.js

@@ -1,4 +1,5 @@
 // Includes an unreleased RTL support pull request: https://github.com/ganlanyuan/tiny-slider/pull/658
+// Includes "export default tns" at the end of the file for spotlight/user/browse_group_categories.js
 var tns = (function (){
 var win = window;
 
@@ -3216,3 +3217,5 @@ var tns = function(options) {
 
 return tns;
 })();
+
+export default tns;

package/app/assets/stylesheets/spotlight/#_accessibility.scss#

@@ -1,12 +0,0 @@
-// Global accessibility overrides
-
-// Increase visibility of Firefox focus indicator
-@-moz-document url-prefix() {
-  :focus {
-    outline: $input-focus-border-color auto 5px;
-  }
-}
-
-.btn:focus-visible {
-  outline: $input-focus-border-color auto 5px;
-}