🎁 Allow admins to upload multiple banners

This commit allows the admin to upload multiple banners to the homepage
through the dashboard.  The homepage will randomly select a banner and
then cycle through the uploaded banners.  We introduce a new uploader,
`Hyku::UploadedFileUploader`, to handle the multiple file uploads and
change the concept of banner_image to banner_images.

Ref:
  - #657

app/assets/stylesheets/themes/dc_repository.scss

@@ -234,9 +234,17 @@ body.dc_repository {
     }
 
     .background-container {
-      height: 90%;
+      height: 100%;
       z-index: 0;
       align-self: flex-end;
+      background-size: cover;
+      background-position: center;
+      opacity: 0;
+      transition: opacity 2s ease-in-out;
+    }
+
+    .background-container.active {
+      opacity: 1;
     }
 
     .circle-container {

app/controllers/hyrax/admin/appearances_controller.rb

@@ -39,6 +39,12 @@ def update
           ReindexWorksJob.perform_later
         end
 
+        if update_params['banner_images']
+          site = Site.instance
+          site.banner_images = update_params['banner_images']
+          site.save
+        end
+
         redirect_to({ action: :show }, notice: t('.flash.success'))
       end
 

app/controllers/sites_controller.rb

@@ -24,7 +24,7 @@ def set_site
     end
 
     def update_params
-      params.permit(:remove_banner_image,
+      params.permit(:remove_banner_images,
                     :remove_logo_image,
                     :remove_directory_image,
                     :remove_default_collection_image,
@@ -37,7 +37,7 @@ def site_theme_params
 
     REMOVE_TEXT_MAPS = {
       "remove_logo_image"               => "logo_image_text",
-      "remove_banner_image"             => "banner_image_text",
+      "remove_banner_images"            => "banner_image_text",
       "remove_directory_image"          => "directory_image_text",
       "remove_default_collection_image" => "default_collection_image_text",
       "remove_default_work_image"       => "default_work_image_text"

app/forms/hyrax/forms/admin/appearance.rb

@@ -10,7 +10,7 @@ module Admin
       # customization menu
       class Appearance
         extend ActiveModel::Naming
-        delegate :banner_image, :banner_image?, to: :site
+        delegate :banner_images, to: :site
         delegate :logo_image, :logo_image?, to: :site
         delegate :directory_image, :directory_image?, to: :site
         delegate :default_collection_image, :default_collection_image?, to: :site
@@ -62,7 +62,7 @@ def self.permitted_params
         end
 
         def self.image_params
-          %i[banner_image logo_image directory_image default_collection_image default_work_image]
+          [{ banner_images: [] }, :logo_image, :directory_image, :default_collection_image, :default_work_image]
         end
 
         def site

app/helpers/hyrax_helper.rb

@@ -23,8 +23,8 @@ def institution_name_full
     Site.institution_name_full || super
   end
 
-  def banner_image
-    Site.instance.banner_image? ? Site.instance.banner_image.url : super
+  def banner_images
+    Site.instance.banner_images.any? ? Site.instance.banner_images.map(&:url) : [banner_image]
   end
 
   def logo_image

app/models/site.rb

@@ -6,7 +6,7 @@ class Site < ApplicationRecord
   validates :application_name, presence: true, allow_nil: true
 
   # Allow for uploading of site's banner image
-  mount_uploader :banner_image, Hyrax::UploadedFileUploader
+  mount_uploaders :banner_images, Hyku::UploadedFileUploader
   # Allow for uploading of site's logo image
   mount_uploader :logo_image, Hyrax::AvatarUploader
   # Allow for uploading of site's directory image

app/uploaders/hyku/uploaded_file_uploader.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Hyku
+  class UploadedFileUploader < Hyrax::UploadedFileUploader
+  end
+end

app/views/hyrax/admin/appearances/_banner_image_form.html.erb

@@ -1,19 +1,31 @@
 <%= simple_form_for @form, url: admin_appearance_path do |f| %>
   <div class="panel-body">
-    <% require_image = @form.banner_image? ? false : true %>
-    <%# Upload Banner Image %>
-    <%= f.input :banner_image, as: :file, wrapper: :vertical_file_input, required: require_image, hint: t('hyrax.admin.appearances.show.forms.banner_image.hint') %>
+    <% require_image = @form.banner_images.any? ? false : true %>
+    <%# Upload Banner Images %>
+    <%= f.input :banner_images,
+                as: :file,
+                wrapper: :vertical_file_input,
+                required: require_image,
+                hint: t('hyrax.admin.appearances.show.forms.banner_image.hint'),
+                input_html: { multiple: true, accept: 'image/*' } %>
     <%= f.input :banner_image_text, required: true, as: :text, label: 'Banner image alt text' %>
-    <%= image_tag @form.banner_image.url, class: "img-responsive" if @form.banner_image? %>
+    <% if @form.banner_images.any? %>
+      <% @form.banner_images.each do |banner_image| %>
+        <div class="panel-footer">
+          <%= image_tag banner_image.url, class: "img-responsive" %> <br>
+        </div>
+      <% end %>
+    <% end %>
   </div>
   <div class="panel-footer">
     <%= f.submit class: 'btn btn-primary pull-right' %>
   </div>
 <% end %>
-<% if @form.banner_image? %>
+
+<% if @form.banner_images.any? %>
   <div class="panel-footer">
     <%= simple_form_for @form.site, url: main_app.site_path(@form.site) do |f| %>
-      <%= f.submit 'Remove banner image', class: 'btn btn-danger', name: :remove_banner_image %>
+      <%= f.submit 'Remove all banner images', class: 'btn btn-danger', name: :remove_banner_images %>
     <% end %>
   </div>
-<% end %>
+<% end %>

app/views/themes/dc_repository/layouts/homepage.html.erb

@@ -2,8 +2,10 @@
 
 <% content_for(:navbar) do %>
   <div class="image-masthead d-flex">
-<!-- dc-repository homepage -->
-    <div class="background-container"  title="<%= block_for(name: 'banner_image_text') %>" style="background-image: url('<%= banner_image %>')"></div>
+    <!-- dc-repository homepage -->
+    <% banner_images.shuffle.each_with_index do |image, index| %>
+      <div id="background-container-<%= index %>" class="background-container <%= index == 0 ? 'active' : '' %>" style="background-image: url('<%= image %>');" title="<%= block_for(name: 'banner_image_text') %>"></div>
+    <% end %>
     <% # OVERRIDE: Hyrax v3.4.1 - remove background-container-gradient %>
     <% # OVERRIDE: Hyrax v3.4.1 - remove site-title-container %>
     <% # OVERRIDE: Hyrax v3.4.1 - add divs and classes for custom styles %>
@@ -45,3 +47,21 @@
 <% end %>
 
 <%= render template: 'layouts/hyrax' %>
+
+<% if banner_images.size > 1 %>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      var containers = document.querySelectorAll('.background-container');
+      var currentIndex = 0;
+      var changeInterval = 7500;
+
+      function changeBackgroundImage() {
+        containers[currentIndex].classList.remove('active');
+        currentIndex = (currentIndex + 1) % containers.length;
+        containers[currentIndex].classList.add('active');
+      }
+
+      setInterval(changeBackgroundImage, changeInterval);
+    });
+  </script>
+<% end %>

spec/controllers/hyrax/admin/appearances_controller_spec.rb

@@ -42,12 +42,12 @@
         end
 
         it "sets a banner image" do
-          expect(Site.instance.banner_image?).to be false
+          expect(Site.instance.banner_images.any?).to be false
           f = fixture_file_upload('/images/nypl-hydra-of-lerna.jpg', 'image/jpg')
-          post :update, params: { admin_appearance: { banner_image: f } }
+          post :update, params: { admin_appearance: { banner_images: [f] } }
           expect(response).to redirect_to(hyrax.admin_appearance_path(locale: 'en'))
           expect(flash[:notice]).to include("The appearance was successfully updated")
-          expect(Site.instance.banner_image?).to be true
+          expect(Site.instance.banner_images.any?).to be true
         end
 
         it "sets a directory image" do

spec/controllers/sites_controller_spec.rb

@@ -37,17 +37,17 @@
           .and_return(CarrierWave::Storage::File)
           .at_least(3).times
         f = fixture_file_upload('/images/nypl-hydra-of-lerna.jpg', 'image/jpg')
-        Site.instance.update(banner_image: f)
+        Site.instance.update(banner_images: [f])
         ContentBlock.find_or_create_by(name: 'banner_image_text').update!(value: 'Sample text')
       end
 
-      it "#update with remove_banner_image deletes a banner image" do
-        expect(Site.instance.banner_image?).to be true
+      it "#update with remove_banner_images deletes a banner image" do
+        expect(Site.instance.banner_images.any?).to be true
         expect(ContentBlock.find_by(name: 'banner_image_text')).not_to be nil
-        post :update, params: { id: Site.instance.id, remove_banner_image: 'Remove banner image' }
+        post :update, params: { id: Site.instance.id, remove_banner_images: 'Remove all banner images' }
         expect(response).to redirect_to('/admin/appearance?locale=en')
         expect(flash[:notice]).to include("The appearance was successfully updated")
-        expect(Site.instance.banner_image?).to be false
+        expect(Site.instance.banner_images.any?).to be false
         expect(ContentBlock.find_by(name: 'banner_image_text')).to be nil
       end
     end

spec/helpers/hyrax_helper_spec.rb

@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
 RSpec.describe HyraxHelper, type: :helper do
-  describe "#banner_image" do
+  describe "#banner_images" do
     context "with uploaded banner image" do
       before do
         f = fixture_file_upload('/images/nypl-hydra-of-lerna.jpg', 'image/jpg')
-        Site.instance.update(banner_image: f)
+        Site.instance.update(banner_images: [f])
       end
 
       it "returns the uploaded banner image" do
-        expect(helper.banner_image).to eq(Site.instance.banner_image.url)
+        expect(helper.banner_images.first).to eq(Site.instance.banner_images.first.url)
       end
     end
 

spec/views/hyrax/admin/appearances/show.html.erb_spec.rb

@@ -38,13 +38,16 @@
     end
   end
 
+  # rubocop:disable RSpec/ExampleLength
   it "renders the edit site form" do
     assert_select "form[action='/path'][method=?]", "post" do
       # logo tab
       assert_select "input#admin_appearance_logo_image[name=?]", "admin_appearance[logo_image]"
       # banner image tab
-      assert_select "input#admin_appearance_banner_image[name=?]", "admin_appearance[banner_image]"
-      assert_select "input#admin_appearance_banner_image[type=?]", "file"
+      assert_select "input#admin_appearance_banner_images[name=?]", "admin_appearance[banner_images][]"
+      assert_select "input#admin_appearance_banner_images[type=?]", "file"
+      assert_select "input#admin_appearance_banner_images[multiple=?]", "multiple"
+      assert_select "input#admin_appearance_banner_images[accept=?]", "image/*"
       # directory image
       assert_select "input#admin_appearance_directory_image[name=?]", "admin_appearance[directory_image]"
       # default collection image
@@ -64,4 +67,5 @@
     # themes
     assert_select "select#site_home_theme[name=?]", "site[home_theme]"
   end
+  # rubocop:enable RSpec/ExampleLength
 end