geoblacklight 2.4.0 → 3.0.0

data/Rakefile

@@ -1,4 +1,5 @@
 # encoding: UTF-8
+# frozen_string_literal: true
 require 'rails'
 begin
   require 'bundler/setup'

data/app/assets/javascripts/geoblacklight/downloaders/downloader.js

@@ -3,7 +3,7 @@
 
   var Downloader = L.Class.extend({
     options: {
-      spinner: $('<i class="fa fa-spinner fa-spin fa-2x fa-align-center"></i>')
+      spinner: $('<div class="spinner-border spinner-border-sm float-right" role="status"><span class="sr-only">Downloading</span></div>')
     },
 
     initialize: function(el, options) {

data/app/assets/javascripts/geoblacklight/modules/svg_tooltips.js

@@ -0,0 +1,31 @@
+/* global Blacklight */
+
+Blacklight.onLoad(function() {
+  'use strict';
+
+  $('body').on('mouseenter', '.blacklight-icons.svg_tooltip svg', function() {
+    var svgTitle = $(this).find('title');
+    var titleText = svgTitle && svgTitle.text();
+
+    if (titleText !== undefined && titleText !== '') {
+      $(this).tooltip({ placement: 'bottom', title: titleText });
+      $(this).tooltip('show');
+
+      // Store the original title in the data-original-title attribute
+      // and remove the title element on mouseenter.
+      // This prevents the title from interfering w/ Bootstrap's tooltip.
+      $(this).attr('data-original-title', titleText);
+      svgTitle.remove();
+    }
+  });
+
+  $('body').on('mouseleave', '.blacklight-icons.svg_tooltip svg', function() {
+    var originalTitle = $(this).attr('data-original-title');
+
+    if (originalTitle !== undefined && originalTitle !== '') {
+      // Restore the SVG title element from data-original-title on mouseleave
+      $(this).prepend($('<title>' + originalTitle + '</title>'));
+      $(this).attr('data-original-title', '');
+    }
+  });
+});

data/app/assets/javascripts/geoblacklight/viewers/esri.js

@@ -50,8 +50,8 @@ GeoBlacklight.Viewer.Esri = GeoBlacklight.Viewer.Map.extend({
   appendLoadingMessage: function() {
     var spinner = '<tbody class="attribute-table-body"><tr><td colspan="2">' +
       '<span id="attribute-table">' +
-      '<i class="fa fa-spinner fa-spin fa-align-center">' +
-      '</i></span>' +
+      '<div class="spinner-border" role="status"><span class="sr-only">Inspecting</span></div>' +
+      '</span>' +
       '</td></tr></tbody>';
 
     $('.attribute-table-body').html(spinner);

data/app/assets/javascripts/geoblacklight/viewers/esri/tiled_map_layer.js

@@ -30,7 +30,7 @@ GeoBlacklight.Viewer.TiledMapLayer = GeoBlacklight.Viewer.Esri.extend({
       _this.appendLoadingMessage();
 
       // query layer at click location
-      L.esri.Tasks.identifyFeatures({
+      L.esri.identifyFeatures({
         url: layer.options.url,
         useCors: true
       })

data/app/assets/javascripts/geoblacklight/viewers/wms.js

@@ -23,7 +23,7 @@ GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Map.extend({
       format: 'image/png',
       transparent: true,
       tiled: true,
-      CRS: 'EPSG:900913',
+      CRS: 'EPSG:3857',
       opacity: this.options.opacity,
       detectRetina: _this.detectRetina()
     });
@@ -34,7 +34,7 @@ GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Map.extend({
   setupInspection: function() {
     var _this = this;
     this.map.on('click', function(e) {
-      spinner = '<tbody class="attribute-table-body"><tr><td colspan="2"><span id="attribute-table"><i class="fa fa-spinner fa-spin fa-align-center"></i></span></td></tr></tbody>';
+      spinner = '<tbody class="attribute-table-body"><tr><td colspan="2"><span id="attribute-table"><div class="spinner-border" role="status"><span class="sr-only">Inspecting</span></div></span></td></tr></tbody>';
       $('.attribute-table-body').replaceWith(spinner);
       var wmsoptions = {
         URL: _this.data.url,

data/app/assets/stylesheets/geoblacklight/geoblacklight.scss

@@ -0,0 +1,2 @@
+@import 'leaflet';
+@import 'modules/base';

data/app/assets/stylesheets/geoblacklight/modules/_base.scss

@@ -0,0 +1,33 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ */
+
+@import 'styles';
+@import 'facets';
+@import 'mixins';
+@import 'icon-customization';
+@import 'home';
+@import 'index_maps';
+@import 'item';
+@import 'layer_opacity';
+@import 'metadata';
+@import 'metadata_content';
+@import 'metadata_missing';
+@import 'metadata_markup';
+@import 'modal';
+@import 'results';
+@import 'geosearch';
+@import 'search_widgets';
+@import 'sidebar';
+@import 'toolbar';
+@import 'web_services';
+@import 'blacklight_overrides';
+@import 'downloads';

data/app/assets/stylesheets/geoblacklight/{_styles.scss → modules/_styles.scss}

@@ -1,4 +1,5 @@
 #table-container{
   overflow:scroll;
+  margin-top: 20px;
   max-height: 450px;
 }

data/app/assets/stylesheets/geoblacklight/modules/downloads.scss

@@ -1,91 +1,74 @@
-%downloads-exports {
-  .list-group-item {
-    display: inline-block;
-    width: 100%;
-  }
-}
-
-%download-export-links {
-  a {
-    width: 100%;
-    font-weight: 600;
-    background-color: $link-color;
-    color: #ffffff;
-    border-color: darken($link-color, 6.5%);
-    white-space: inherit;
-  }
-}
+// Common styling for the Downloads, Export, and Authentication cards
+.downloads,
+.card.exports,
+.authentication {
+  @include sidebar-children;
 
-@mixin download-export {
-  &-link {
-    &-container {
-      text-align: center;
-      @extend %download-export-links;
+  .list-group {
+    &.list-group-nested .list-group-item:last-child {
+      padding-bottom: 0;
     }
-  }
-}
 
-.downloads {
-  @include sidebar-children;
-  @extend %downloads-exports;
+    .list-group-item {
+      padding: 8px 20px;
 
-  .download {
-    @include download-export;
+      a {
+        @extend .btn-primary;
+      }
+    }
   }
 }
 
+// This section could be eliminated if we update the Authentication card
+// to follow the pattern of Dowloads and Exports (put the button in a
+// list-group rather than the card header).
 .authentication {
-  @include sidebar-children;
   .card-header {
     background-color: inherit;
     border-bottom: inherit;
 
-    @extend %download-export-links;
+    a {
+      @extend .btn-primary;
+    }
   }
 }
 
-.exports {
-  @include sidebar-children;
-  @extend %downloads-exports;
-
+// Specific to the Export card (mostly because of the current external
+// label + button approach, which could be mostly eliminated by reworking
+// as suggested in https://github.com/sul-dlss/earthworks/issues/646)
+.card.exports {
   .card-header {
-    .fa-spinner {
-      float: right;
+    .spinner-border { // if this is used, it probably should go in the card body rather than the card header
+      position: absolute;
+      right: 1rem;
+      top: 1rem;
     }
   }
 
   .export {
-    @include download-export;
-
-    padding-left: 0px;
-    padding-right: 0px;
     text-align: center;
-    width: 100%;
 
     @include media-breakpoint-up(xl) {
       text-align: left;
     }
 
-    &-label {
-      padding: 6px 12px;
+    .export-label {
+      padding: 6px 6px 6px 0;
 
       @include media-breakpoint-up(xl) {
         display: inline-block;
       }
     }
 
-    &-link {
-      &-container {
+    .export-link-container {
+      @include media-breakpoint-up(xl) {
+        display: inline-block;
+        float: right;
+      }
 
+      a {
         @include media-breakpoint-up(xl) {
-          display: inline-block;
-          float: right;
-        }
-
-        a {
-          @include media-breakpoint-up(xl) {
-            width: inherit;
-          }
+          width: inherit;
         }
       }
     }

data/app/assets/stylesheets/geoblacklight/modules/item.scss

@@ -7,6 +7,7 @@
 
   #viewer-container {
     [data-map="item"] {
+      border: 1px solid $gray-400;
       height: 27.5rem;
     }
 

data/app/assets/stylesheets/geoblacklight/modules/results.scss

@@ -5,52 +5,40 @@
 .more-info-area {
   max-height: 100px;
   overflow:hidden;
+  padding-left: 2ch;
 }
 
-.index_title {
-  @extend h5;
-  display: flex;
-  justify-content: space-between;
-  font-size:1rem;
-  width:80%;
+.documents-list {
+  @extend .mb-4;
+}
 
-  .title-wrapper {
-    @extend .d-flex;
-    @extend .justify-content-start;
-    flex: 1;
-    min-width: 0;
+.index-split {
+  .index_title {
+    display: flex;
+    font-size: 1rem;
+    padding-right: 0;
   }
 
   .document-counter {
     @extend .pr-1;
   }
 
-  a {
-    white-space: nowrap;
-    overflow-x: hidden;
-    min-width: 0;
-    text-overflow: ellipsis;
-    position: relative;
-    z-index: 2; // get the link above the toggle
-  }
-
   .caret-toggle {
-    @extend .fa, .fa-caret-right;
-    flex-grow: 0;
-    width: 10px;
+    @include caret('right');
+    padding-left: 0;
+    width: 28px;
 
     &[aria-expanded="true"] {
-      @extend .fa, .fa-caret-down;
+      @include caret('down');
     }
   }
 
-  .document-counter {
-    flex-grow: 0;
-  }
-
   .status-icons {
+    cursor: pointer;
     margin-left: 0.5rem;
+    margin-top: -3px;
     white-space: nowrap;
+    z-index: 2; // get the icons above the toggle
   }
 }
 

data/app/assets/stylesheets/geoblacklight/modules/sidebar.scss

@@ -1,59 +1,29 @@
 // Mixins and shared properties for sidebar elements
-
 @mixin sidebar-children {
-  %list-group-item-children {
-    padding: 10px 15px;
-  }
-
-  %list-group-item-anchors {
-    text-align: center;
-    width: 1.4em;
-  }
-
-  margin-top: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
+  margin-top: 20px;
 
-  .card-header {
-    h2 {
-      display: inline-block;
-      padding-top: 8px;
-      padding-bottom: 8px;
-      margin-bottom: 0px;
-      font-size: 1rem;
-    }
+  .card-header h2 {
+    @extend .h6;
+    margin-bottom: 0px;
   }
 
   .card-subtitle {
-    margin: 1rem 0 .2rem;
-    font-size: .9rem;
+    margin: 1rem 0 0;
+    font-size: 1rem;
     font-weight: normal;
-    color: $gray-600;
   }
 
   .list-group {
-    padding-top: 24px;
-    padding-bottom: 24px;
-    padding-left: 4px;
-    padding-right: 4px;
+     border: 0;
+     margin: 8px 0;
 
     .list-group-item {
-      border-color: $white;
-      padding: 8px 16px;
+      border: 0;
+      padding: 0 0 0 20px;
 
       a {
-        @extend %list-group-item-children;
-
-        .geoblacklight {
-          color: $gray-600;
-        }
-      }
-    }
-
-    &-nested {
-      padding: 0;
-
-      .list-group-item {
-        padding: 8px 0;
+        display: block;
       }
     }
   }

data/app/assets/stylesheets/geoblacklight/modules/toolbar.scss

@@ -1,70 +1,28 @@
 .show-tools {
   @include sidebar-children;
 
-  .list-group {
-
-    .list-group-item.exports {
-      margin-top:0px;
-    }
-
-    .list-group-item {
-
-      form {
-        @extend %list-group-item-children;
-
-        .checkbox {
-          margin-left: 4px;
-          margin-right: 4px;
-
-          label {
-            margin-bottom: inherit;
-          }
-        }
+  .list-group .list-group-item {
+    // Adjustments to give Bookmark same spacing as other Tools links
+    .checkbox {
+      label {
+        margin-bottom: 0;
       }
 
-      a {
-
-        .geoblacklight {
-
-          &-citation {
-            @extend %list-group-item-anchors;
-          }
-
-          &-data-dictionary {
-            @extend %list-group-item-anchors;
-          }
-
-          &-sms {
-            @extend %list-group-item-anchors;
-          }
-
-          &-email {
-            @extend %list-group-item-anchors;
-          }
-
-          &-web_services {
-            @extend %list-group-item-anchors;
-          }
-
-          &-metadata {
-            @extend %list-group-item-anchors;
-          }
-
-          &-carto {
-            @extend %list-group-item-anchors;
-          }
-
-          // DEPRECATED: Will be removed in GeoBlacklight v2.0
-          &-cartodb {
-            @extend %list-group-item-anchors;
-          }
-        }
+      .toggle-bookmark {
+        margin-right: 4px;
+        padding-bottom: 8px;
+        padding-top: 8px;
       }
     }
 
-    .downloads {
-      margin-left: 4px;
-      margin-right: 4px;
+    // Spacing for Tools links other than Bookmark
+    a {
+      padding: 8px 1rem 8px 0;
     }
   }
+
+  // Spacing between Tools icons and their labels
+  .blacklight-icons {
+    padding-right: 2px;
+  }
 }