blacklight-gallery 2.1.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4078c05e9420ccca75758be7fac8ccb01a4a512d8931f629c683bce2572b739
-  data.tar.gz: a68b999ad88d7f80760a70acfd86f897cebe7d1c48744b893cb78fe85f567458
+  metadata.gz: 167f895cb50e7732ca7512b278aeacca04067b617da016f2a3b144c49a0fab53
+  data.tar.gz: e15f31f491f90153c9f4f90f0b124030e12c3e678bbcc2c448160bb55f403700
 SHA512:
-  metadata.gz: '08669e46871077bba5222f7531675089ad2ad947a1a8ca366c041f220d01a960c5932475e250bcb43b5b9c04c83d8ffd08bb5a82a8db888533c6b13f21b31d73'
-  data.tar.gz: 2dab16fdf85d599cf8a5cd05ff6c8b81e77436c59123d3b392bbc4dc01a04195d35c21f22728ba82a0ec5841f16b6e991b31b726e01239441ddb62493c6e8de0
+  metadata.gz: 4d7a2c5179ad2a1d18aa23fd8207aa6198d7385d1f17860edfae67d6bd1afcc897482013f271e6a4cb3ce0e519923a85b9bbdbb99ae922f348047bfef627a3db
+  data.tar.gz: 34ab421a4cf0bd262eae19e95bfe014de1e7eaa39c1661e5a6a2afc612996e357a1fd1d7be2b0f0ac68e85700adca1974e46aecde4fda4ac5e72c1e83e2e43df

data/.github/workflows/ruby.yml

@@ -0,0 +1,45 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        rails_version: [6.1.1]
+        ruby: [2.7, 3.0]
+    env:
+      RAILS_VERSION: ${{ matrix.rails_version }}
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Ruby ${{ matrix.ruby }}
+      uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: ${{ matrix.ruby }}
+    - name: Install dependencies with Rails ${{ matrix.rails_version }}
+      run: bundle install
+    - name: Run tests
+      run: bundle exec rake
+  test_rails52:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        rails_version: [5.2.4.4, 6.0.3.4]
+        ruby: [2.7]
+    env:
+      RAILS_VERSION: ${{ matrix.rails_version }}
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Ruby ${{ matrix.ruby }}
+      uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: ${{ matrix.ruby }}
+    - name: Install dependencies with Rails ${{ matrix.rails_version }}
+      run: bundle install
+    - name: Run tests
+      run: bundle exec rake

data/app/assets/javascripts/blacklight_gallery/default.js

@@ -1,5 +1,4 @@
 //= require imagesloaded.min.js
 //= require masonry.min.js
 //= require blacklight_gallery/slideshow
-//= require blacklight_gallery/osd_viewer
 //= require blacklight_gallery/masonry

data/app/assets/javascripts/blacklight_gallery/masonry.js

@@ -10,5 +10,5 @@
 })(jQuery);
 
 Blacklight.onLoad(function() {
-  $('[data-behavior="masonry-gallery"]').BlacklightMasonry();
+  $('.documents-masonry').BlacklightMasonry();
 });

data/app/assets/javascripts/blacklight_gallery/osd_viewer.js

@@ -1 +1 @@
-//= require openseadragon/rails
+//= require openseadragon/rails

data/app/assets/javascripts/blacklight_gallery/slideshow.js

@@ -85,7 +85,6 @@
       });
 
       $(document).on('click', '[data-slide], [data-slide-to]', function(e) {
-
         e.preventDefault();
 
         pos = parseInt($(this).attr('data-slide-to'), 10) || $(this).attr('data-slide');
@@ -122,5 +121,5 @@
 
 
 Blacklight.onLoad(function() {
-  $('#slideshow').slideshow();
+  $('.documents-slideshow').slideshow();
 });

data/app/assets/stylesheets/blacklight_gallery/_gallery.scss

@@ -1,6 +1,7 @@
-.gallery {
+.documents-gallery {
   .document {
     border-bottom: none;
+    display: flex;
 
     min-height: 250px;
     -webkit-flex: 1 0 250px;
@@ -24,16 +25,20 @@
 
   .document-metadata {
     dt, dd {
+      flex: 0 0 100%;
+      max-width: 100%;
+      padding-left: 0;
+      padding-right: 0;
       float: none;
       width: auto;
       clear: none;
       text-align: left;
       margin: 0;
     }
-
   }
 }
 
-#documents .gallery, .masonry-gallery, .slideshow-documents {
+.documents-gallery, .documents-masonry, .documents-slideshow {
+  padding-bottom: $spacer;
   border-bottom: $pagination-border-width solid $pagination-border-color
 }

data/app/assets/stylesheets/blacklight_gallery/_masonry.scss

@@ -1,35 +1,66 @@
-.masonry {
-  &.document {
-    padding: 0;
-    margin: 0 $spacer $spacer 0;
-    border-bottom: 0;
-    background-color: $gray-300;
-    min-height: 70px;
+.documents-masonry {
+  .document {
+    &:hover, &:focus {
+      .caption-area {
+        display: block;
+      }
+    }
 
-    .img-thumbnail {
-      border-radius: 0;
-      padding: 0;
+    margin-bottom: $spacer;
+    position: relative;
+    width: auto;
+
+    .thumbnail-container {
+      position: relative;
+      min-height: 200px;
+      min-width: 200px;
     }
 
-    .caption {
-      &:first-child { display: block; } // To display captions when there is no image
-      a {
-        color: $gray-300;
+    .caption-area {
+      // styling for documents without thumbnails
+      &:first-child {
+        display: block;
+        max-height: 100%;
+        background-color: rgba(0,0,0,0.7) !important;
       }
-      line-height: 17px;
-      background-color: rgba(0,0,0,0.3);
-      text-align: center;
+      @extend .bg-dark;
+      @extend .text-white;
+      display: none;
+      padding: 5px 7px;
+      background-color: rgba(0,0,0,0.5) !important;
       position: absolute;
       bottom: 0;
-      right: 0;
-      left: 0;
-      width: 100%;
-      padding: 5px 7px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      max-height: 75%;
+    }
+
+    .document-counter {
       display: none;
     }
-    &:hover {
-      .caption {
-        display: block;
+
+    .index_title {
+      @extend .h6;
+      a, a:hover, a:visited, a:active {
+        @extend .stretched-link;
+        color: $gray-300
+      }
+    }
+
+    .document-metadata {
+      dt {
+        color: $gray-300;
+      }
+      dt, dd {
+        flex: 0 0 100%;
+        max-width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+        float: none;
+        width: auto;
+        clear: none;
+        text-align: left;
+        margin: 0;
       }
     }
   }

data/app/assets/stylesheets/blacklight_gallery/_slideshow.scss

@@ -101,7 +101,7 @@ $gray-dark: #343a40 !default;
   }
 }
 
-.slideshow-documents {
+.documents-slideshow {
   margin: 0;
 
   .info {
@@ -120,10 +120,12 @@ $gray-dark: #343a40 !default;
   }
 
   .grid {
+    display: flex;
+    flex-wrap: wrap;
     $square-thumb-size: 100px;
 
     .document {
-      float: left;
+      display: flex;
       margin-right: 20px;
       margin-top: 0;
       padding-top: 0;
@@ -140,7 +142,7 @@ $gray-dark: #343a40 !default;
         position: relative;
         width: $square-thumb-size;
 
-        a > img {
+        img {
           height: $square-thumb-size;
           max-height: none;
           max-width: none;

data/app/components/blacklight/gallery/document_component.html.erb

@@ -0,0 +1,20 @@
+<%= render(Blacklight::DocumentComponent.new(classes: 'col', component: :div, document: @document, counter: @counter)) do |component| %>
+  <% component.with(:body) do %>
+    <div class="thumbnail-container">
+      <%= thumbnail %>
+
+      <div class="caption-area">
+        <div class="caption container">
+          <header class="documentHeader row">
+            <%= content_tag @title_component, class: 'index_title document-title-heading' do %>
+              <%= before_title %><%= title %><%= after_title %>
+            <% end %>
+            <%= actions %>
+          </header>
+          <%= content %>
+          <%= metadata %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/components/blacklight/gallery/document_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Gallery
+    class DocumentComponent < Blacklight::DocumentComponent
+      def render_document_class(*args)
+        @view_context.render_document_class(*args)
+      end
+    end
+  end
+end

data/app/components/blacklight/gallery/slideshow_component.html.erb

@@ -0,0 +1,12 @@
+<div class="item<%= ' active' if @counter == 1 %>">
+  <div class="frame">
+      <%= slideshow_tag %>
+      <div class="caption">
+        <%= presenter.heading %>
+      </div>
+
+      <span class="counter">
+        <%= t :'blacklight_gallery.catalog.modal_slideshow.counter', counter: @counter, count: count %>
+      </span>
+  </div>
+</div>

data/app/components/blacklight/gallery/slideshow_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Gallery
+    class SlideshowComponent < Blacklight::DocumentComponent
+      def count
+        @document.response&.total
+      end
+
+      def render_document_class(*args)
+        @view_context.render_document_class(*args)
+      end
+
+      def presenter
+        @presenter ||= @view_context.document_presenter(@document)
+      end
+
+      def slideshow_tag(image_options = { alt: '' })
+        if view_config.slideshow_method
+          method_name = view_config.slideshow_method
+          @view_context.send(method_name, @document, image_options)
+        elsif view_config.slideshow_field
+          url = slideshow_image_url
+
+          image_tag url, image_options if url.present?
+        elsif presenter.thumbnail.exists?
+          presenter.thumbnail.thumbnail_tag(image_options, url_options.reverse_merge(suppress_link: true))
+        end
+      end
+
+      def slideshow_image_url
+        @document.first(view_config.slideshow_field) if @document.has? view_config.slideshow_field
+      end
+
+      def view_config
+        presenter.thumbnail.view_config
+      end
+    end
+  end
+end

data/app/components/blacklight/gallery/slideshow_preview_component.html.erb

@@ -0,0 +1,5 @@
+<%= render(Blacklight::DocumentComponent.new(classes: 'slideshow-preview-thumbnail', component: :div, document: @document, counter: @counter)) do |component| %>
+  <% component.with(:body) do %>
+    <%= @view_context.link_to_document(@document, thumbnail, class: 'thumbnail', data: { 'context-href': nil, 'slide-to': @document_counter - 1, toggle: "modal", target: "#slideshow-modal" }) %>
+  <% end %>
+<% end %>

data/app/components/blacklight/gallery/slideshow_preview_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Gallery
+    class SlideshowPreviewComponent < Blacklight::DocumentComponent
+      with_collection_parameter :document
+
+      def initialize(document:, document_counter: nil, **args)
+        super(document: document, document_counter: document_counter, **args)
+        @document_counter = document_counter || @counter
+      end
+
+      def thumbnail
+        @thumbnail ||
+          (presenter.thumbnail.exists? && presenter.thumbnail.render({ alt: presenter.heading })) ||
+          content_tag(:div, t('.missing_image', scope: [:blacklight_gallery]), class: 'thumbnail thumbnail-placeholder')
+      end
+
+      def presenter
+        @presenter ||= @view_context.document_presenter(@document)
+      end
+
+      def render_document_class(*args)
+        @view_context.render_document_class(*args)
+      end
+    end
+  end
+end

data/app/helpers/blacklight/gallery_helper.rb

@@ -1,42 +1,4 @@
 module Blacklight
   module GalleryHelper
-    def render_gallery_collection documents
-      index = -1
-      documents.map do |object|
-        index += 1
-        template = gallery_wrapper_template(object)
-        template.render(self, {document: object, document_counter: index}) if template
-
-      end.join().html_safe
-    end
-
-    def render_slideshow_tag(document, image_options = {}, url_options = {})
-      if blacklight_config.view_config(document_index_view_type).slideshow_method
-        method_name = blacklight_config.view_config(document_index_view_type).slideshow_method
-        send(method_name, document, image_options)
-      elsif blacklight_config.view_config(document_index_view_type).slideshow_field
-        url = slideshow_image_url(document)
-
-        image_tag url, image_options if url.present?
-      elsif has_thumbnail?(document)
-        render_thumbnail_tag(document, image_options, url_options.reverse_merge(suppress_link: true))
-      end
-    end
-
-    def slideshow_image_url(document)
-      if document.has? blacklight_config.view_config(document_index_view_type).slideshow_field
-        document.first(blacklight_config.view_config(document_index_view_type).slideshow_field)
-      end
-    end
-
-    def gallery_wrapper_template(object)
-      format = document_partial_name(object, nil)
-      ['index_gallery_%{format}_wrapper', 'index_gallery'].each do |str|
-        partial = str % { format: format }
-        logger.debug "Looking for gallery document wrapper #{partial}"
-        template = lookup_context.find_all(partial, lookup_context.prefixes, true, [:document, :document_counter], {}).first
-        return template if template
-      end
-    end
   end
 end

data/app/models/concerns/blacklight/gallery/openseadragon_solr_document.rb

@@ -1,6 +1,6 @@
 module Blacklight::Gallery::OpenseadragonSolrDocument
   def to_openseadragon(view_config = nil)
-    return unless view_config.try(:tile_source_field) &&
+    return unless view_config&.tile_source_field &&
                   fetch(view_config.tile_source_field, nil)
     Array(fetch(view_config.tile_source_field))
   end

data/app/views/catalog/_document_gallery.html.erb

@@ -1,4 +1,5 @@
-<% # container for all documents in index view -%>
-<div id="documents" class="gallery row <%= blacklight_config.view_config(:gallery).classes || 'row-cols-2 row-cols-md-3' %>">
-  <%= render_gallery_collection documents %>
+<div class="container">
+  <div id="documents" class="<%= (Array(blacklight_config.view_config(document_index_view_type).classes || 'row-cols-2 row-cols-md-3') + ["row documents-#{document_index_view_type}"]).join(' ') %>">
+    <%= render documents, as: :document %>
+  </div>
 </div>

data/app/views/catalog/_document_masonry.html.erb

@@ -1,4 +1,3 @@
-<% # container for all documents in index view -%>
-<div id="documents" class="row masonry-gallery" data-behavior="masonry-gallery">
-  <%= render collection: documents, as: :document, partial: 'index_masonry', locals: {count: documents.count} %>
+<div id="documents" class="<%= (Array(blacklight_config.view_config(document_index_view_type).classes) + ["documents-#{document_index_view_type}"]).join(' ') %>">
+  <%= render documents, as: :document %>
 </div>

data/app/views/catalog/_document_slideshow.html.erb

@@ -1,10 +1,31 @@
-<% # container for all documents in slideshow view -%>
-<div id="documents" class="row slideshow-documents">
+<div id="documents" class="<%= (Array(blacklight_config.view_config(document_index_view_type).classes) + ["documents-#{document_index_view_type}"]).join(' ') %>">
   <div class="grid">
-    <%= render collection: documents, as: :document, partial: 'grid_slideshow' %>
+    <%= render((blacklight_config.view_config(document_index_view_type).preview_component || Blacklight::Gallery::SlideshowPreviewComponent).with_collection(documents)) %>
   </div>
 
-  <%= render layout: 'slideshow_modal', locals: {documents: documents} do %>
-    <%= render partial: 'slideshow', locals: {documents: documents} %>
+  <%= render layout: 'slideshow_modal' do %>
+    <div id="slideshow" class="slideshow-presenter">
+      <!-- Wrapper for slides -->
+      <div class="slideshow-inner">
+        <%= render documents, as: :document %>
+      </div>
+
+      <!-- Controls -->
+      <a class="left carousel-control prev" href="#slideshow" data-slide="prev">
+        <%= blacklight_icon 'chevron_left', { additional_options: { label_context: 'previous_image' }} %>
+      </a>
+      <a class="right carousel-control next" href="#slideshow" data-slide="next">
+        <%= blacklight_icon 'chevron_right', { additional_options: { label_context: 'next_image' }} %>
+      </a>
+
+      <div class="controls text-center">
+        <button class="btn btn-sm btn-link" data-behavior="pause-slideshow" aria-label="<%= t('blacklight_gallery.catalog.slideshow.pause') %>">
+          <%= blacklight_icon 'pause_slideshow' %>
+        </button>
+        <button class="btn btn-sm btn-link" data-behavior="start-slideshow" aria-label="<%= t('blacklight_gallery.catalog.slideshow.start') %>">
+          <%= blacklight_icon 'start_slideshow' %>
+        </button>
+      </div>
+    </div>
   <% end %>
 </div>