spotlight-frontend 5.2.4 → 5.3.2

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

@@ -1,8 +1,4 @@
 .spotlight-flexbox {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
   flex-flow: row wrap;
 
@@ -13,7 +9,7 @@
 
     @media (max-width: breakpoint-max("sm")) {
       min-width: 200px;
-      -webkit-flex: 1 1 200px;
+      flex: 1 1 200px;
     }
 
     .caption {
@@ -23,11 +19,6 @@
     img {
       max-width: 100%;
     }
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     flex: 1;
-    -webkit-flex: 1 1 125px;
   }
 }

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

@@ -26,10 +26,27 @@ tr.dd-item {
   position: relative;
 }
 
+// SortableJS moves an item to the start of a list when the pointer is over the list more than
+// 10px left of its items.
+$dd-nested-list-padding-left: 5px;
+
 .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-list .dd-list { margin-left: 25px; padding-left: $dd-nested-list-padding-left; padding-bottom: 0; }
 .dd-collapsed .dd-list { display: none; }
 
+// While a drag is in progress, extend each child list with a drop zone that covers the
+// indented part of the next item. Dragging an item to the right then nests it.
+.dd-nesting .dd-item > .dd-list::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: $dd-nested-list-padding-left; // Offset from the child list's padding box, so the zone starts where its items start
+  right: 0;
+  height: var(--dd-nesting-zone-height);
+  z-index: 1;
+}
+.dd-nesting .sortable-chosen > .dd-list::after { display: none; }
+
 .dd-item,
 .dd-empty,
 .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

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

@@ -237,14 +237,14 @@
 
     .box {
       min-width: 150px;
-      -webkit-flex: 1 1 150px;
+      flex: 1 1 150px;
     }
 
     /* two items */
     .box:first-child:nth-last-child(2),
     .box:first-child:nth-last-child(2) ~ .box {
       min-width: 250px;
-      -webkit-flex: 1 1 250px;
+      flex: 1 1 250px;
     }
 
     /* only images, no text */
@@ -260,7 +260,7 @@
         }
 
         @media (max-width: breakpoint-max("md")) {
-          -webkit-flex: 1 1 175px;
+          flex: 1 1 175px;
         }
       }
     }

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

@@ -24,7 +24,6 @@
 @import "upload";
 @import "nestable";
 @import "blacklight_configuration";
-@import "typeahead";
 @import "bootstrap_overrides";
 @import "blacklight_overrides";
 @import "report_a_problem";
@@ -38,7 +37,6 @@
 @import "admin_users";
 @import "autocomplete";
 
-
 // Styles below keep footer at bottom of viewport
 html {
   position: relative;

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "spotlight-frontend",
-  "version": "5.2.4",
+  "version": "5.3.2",
   "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"
+    "prepare": "rollup --config rollup.config.js --sourcemap && ESM=true rollup --config rollup.config.js --sourcemap",
+    "format": "prettier --write \"app/javascript/**/*.js\"",
+    "format:check": "prettier --check \"app/javascript/**/*.js\"",
+    "lint": "eslint \"app/javascript/**/*.js\"",
+    "lint:fix": "eslint --fix \"app/javascript/**/*.js\""
   },
   "repository": {
     "type": "git",
@@ -23,7 +27,11 @@
   },
   "homepage": "https://github.com/projectblacklight/spotlight#readme",
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-commonjs": "^26.0.1",
+    "eslint": "^10.5.0",
+    "globals": "^17.7.0",
+    "prettier": "^3.8.4",
     "rollup": "^4.0.0",
     "rollup-plugin-includepaths": "^0.2.4"
   },
@@ -33,14 +41,15 @@
   ],
   "dependencies": {
     "blacklight-frontend": "^8.4.0",
-    "bootstrap": ">=4.3.1 <6.0.0",
-    "clipboard": "^2.0.11",
-    "jquery": "^3.7.1",
+    "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"
+  },
+  "peerDependencies": {
+    "bootstrap": ">=4.3.1 <6.0.0"
   }
 }

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

@@ -1,77 +0,0 @@
-.twitter-typeahead {
-  width: 100%;
-}
-
-.typeahead,
-.tt-query,
-.tt-hint {
-}
-
-.typeahead {
-  background-color: #fff;
-}
-
-.typeahead:focus {
-  border: 2px solid #0097cf;
-}
-
-.tt-hint {
-  color: #999
-}
-
-.tt-dropdown-menu {
-  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);
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-          box-shadow: 0 5px 10px rgba(0,0,0,.2);
-}
-
-.twitter-typeahead {
-  z-index: $zindex-dropdown !important; /* get typeahead to float on top of e.g. leaflet */
-  .tt-suggestion {
-    font-size: 18px;
-    line-height: 24px;
-    padding: 3px 1rem 3px 1rem;
-    margin-bottom: 1em;
-
-    &.tt-cursor {
-      color: #fff;
-      background-color: #0097cf;
-    }
-  }
-}
-
-.tt-dataset-tags {
-  p {
-    white-space: nowrap !important;
-  }
-}
-
-.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/vendor/assets/javascripts/jquery.waitforimages.min.js

@@ -1,2 +0,0 @@
-/*! waitForImages jQuery Plugin 2013-07-20 */
-!function(a){var b="waitForImages";a.waitForImages={hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage","cursor"]},a.expr[":"].uncached=function(b){if(!a(b).is('img[src!=""]'))return!1;var c=new Image;return c.src=b.src,!c.complete},a.fn.waitForImages=function(c,d,e){var f=0,g=0;if(a.isPlainObject(arguments[0])&&(e=arguments[0].waitForAll,d=arguments[0].each,c=arguments[0].finished),c=c||a.noop,d=d||a.noop,e=!!e,!a.isFunction(c)||!a.isFunction(d))throw new TypeError("An invalid callback was supplied.");return this.each(function(){var h=a(this),i=[],j=a.waitForImages.hasImageProperties||[],k=/url\(\s*(['"]?)(.*?)\1\s*\)/g;e?h.find("*").addBack().each(function(){var b=a(this);b.is("img:uncached")&&i.push({src:b.attr("src"),element:b[0]}),a.each(j,function(a,c){var d,e=b.css(c);if(!e)return!0;for(;d=k.exec(e);)i.push({src:d[2],element:b[0]})})}):h.find("img:uncached").each(function(){i.push({src:this.src,element:this})}),f=i.length,g=0,0===f&&c.call(h[0]),a.each(i,function(e,i){var j=new Image;a(j).on("load."+b+" error."+b,function(a){return g++,d.call(i.element,g,f,"load"==a.type),g==f?(c.call(h[0]),!1):void 0}),j.src=i.src})})}}(jQuery);