blacklight-gallery 1.7.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88f1e7482c4ccd593780df7fe914534583e803b8cb7586a98db381f425ca3326
-  data.tar.gz: f91d53c9e4d750ab085d7ba97c1a67f7d26e2dde31541b273e7195098453fedb
+  metadata.gz: 167f895cb50e7732ca7512b278aeacca04067b617da016f2a3b144c49a0fab53
+  data.tar.gz: e15f31f491f90153c9f4f90f0b124030e12c3e678bbcc2c448160bb55f403700
 SHA512:
-  metadata.gz: 5ed81094a38b233941ad06c6b62e5555a407809151d87b902c9d5422fbe3953f9a58691510253c407f3f7e756b9d703ab4da4515558ecb9caf3cdbe6fdd986ce
-  data.tar.gz: 05cca47ed3750c5c3b8663b910a106d1d1b2437d36e46972c7a52a215659966c0b1798f16dabb35601674f9234b3cb87777afafd426e71566a03ade868d485dd
+  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/README.md

@@ -1,5 +1,5 @@
 # Blacklight::Gallery
-[![Gem Version](https://badge.fury.io/rb/blacklight-gallery.svg)](http://badge.fury.io/rb/blacklight-gallery)
+[![Gem Version](https://badge.fury.io/rb/blacklight-gallery.svg)](http://badge.fury.io/rb/blacklight-gallery)  [![Build Status](https://travis-ci.org/projectblacklight/blacklight-gallery.svg?branch=master)](https://travis-ci.org/projectblacklight/blacklight-gallery)
 
 Gallery views for Blacklight search results
 

data/app/assets/images/blacklight/pause_slideshow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path></svg

data/app/assets/images/blacklight/start_slideshow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path></svg>

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

@@ -72,16 +72,19 @@
       var $img = this.$element.find('.frame img'),
           _this = this;
 
-      // pause slideshow on image mouseenter event
-      $img.on('mouseenter', function() {  _this.pause(); });
+      $(document).on('click', '[data-behavior="pause-slideshow"]', function(e) {
+        e.preventDefault();
 
-      // play slideshow on image mouseleave event
-      $img.on('mouseleave', function() {
-        if (_this.options.autoPlay) _this.play();
+        _this.pause();
       });
 
-      $(document).on('click', '[data-slide], [data-slide-to]', function(e) {
+      $(document).on('click', '[data-behavior="start-slideshow"]', function(e) {
+        e.preventDefault();
 
+        _this.play();
+      });
+
+      $(document).on('click', '[data-slide], [data-slide-to]', function(e) {
         e.preventDefault();
 
         pos = parseInt($(this).attr('data-slide-to'), 10) || $(this).attr('data-slide');
@@ -99,7 +102,7 @@
 
 
   Slideshow.DEFAULTS = {
-    autoPlay: true,
+    autoPlay: false,
     interval: 5000 // in milliseconds
   }
 
@@ -118,5 +121,5 @@
 
 
 Blacklight.onLoad(function() {
-  $('#slideshow').slideshow();
+  $('.documents-slideshow').slideshow();
 });

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

@@ -1,21 +1,7 @@
-.gallery {
-
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-flow: row wrap;
-  -webkit-flex-wrap: wrap;
-
-
+.documents-gallery {
   .document {
     border-bottom: none;
-
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
+    display: flex;
 
     min-height: 250px;
     -webkit-flex: 1 0 250px;
@@ -39,12 +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, .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/_osd_viewer.scss

@@ -1,4 +1,4 @@
-#document {
+.openseadragon-container {
 
   .osd-toolbar {
     padding: 5px 0;
@@ -26,4 +26,4 @@
     height: 400px;
 
   }
-}
+}

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

@@ -93,9 +93,15 @@ $gray-dark: #343a40 !default;
     padding: 4px 10px;
     text-align: center;
   }
+
+  .controls {
+    svg {
+      fill: $gray-light;
+    }
+  }
 }
 
-.slideshow-documents {
+.documents-slideshow {
   margin: 0;
 
   .info {
@@ -114,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;
@@ -134,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