🎁 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.

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/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/views/hyrax/admin/appearances/_banner_image_form.html.erb

@@ -1,19 +1,29 @@
 <%= 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? %>
   </div>
   <div class="panel-footer">
     <%= f.submit class: 'btn btn-primary pull-right' %>
   </div>
 <% end %>
-<% if @form.banner_image? %>
-  <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 %>
-    <% end %>
-  </div>
-<% end %>
+
+<% if @form.banner_images.any? %>
+  <% @form.banner_images.each_with_index do |banner_image, index| %>
+    <div class="panel-footer">
+      <%= simple_form_for @form.site, url: main_app.site_path(@form.site), method: :patch do |f| %>
+        <%= image_tag banner_image.url, class: "img-responsive" %> <br>
+        <%# TODO: fix remove %>
+        <%# <%= hidden_field_tag 'site[remove_banner_image_index]', index %>
+        <%# <%= f.submit 'Remove banner image', class: 'btn btn-danger' %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -2,8 +2,9 @@
 
 <% 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>
+    <% 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 +46,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/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

@@ -43,8 +43,10 @@
       # 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