sponsor banner ad stimulus controller (#276)

* sponsor banner ad stimulus controller

For refrence this feature is being inmplemented using the same method as the sponsor footer component
Enables a website creator/editor to add a dynamic sponsor banner ad to any stataic page.

The command that will be required will be
```
<div data-controller="banner-ads" data-banner-ads-event-slug-value="railsconf-2022" data-banner-ads-index-value="0"></div>
```

For now I coded in an inital index, will probably change this be a random index in the ads array.

* random starting index, and some css

* final CSS tweaks

Author: codyjamesbrooks

app/assets/stylesheets/themes/default/application.scss

@@ -39,8 +39,7 @@ body {
 
 header + #content {
   background-color: var(--main_content_background);
-  padding: 0 20px 0 20px;
-  margin-top: 100px;
+  margin-top: 50px;
 }
 
 p {

app/assets/stylesheets/themes/default/nav.scss

@@ -9,6 +9,7 @@
   width: 100%;
   background: var(--nav_background_color);
   color: var(--nav_text_color);
+  z-index: 11;
 
   #header-logo-container {
     display: flex;

app/assets/stylesheets/themes/default/sponsors.scss

@@ -162,6 +162,26 @@
   }
 }
 
+.banner-ad-wrapper {
+  position: relative;
+  height: 170px;
+  padding-bottom: 30px;
+  max-height: 170px;
+
+  .banner-ad-item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    transition: all 200ms ease-in-out;
+
+    img {
+      margin: auto;
+      max-height: 130px;
+    }
+  }
+}
+
 @media screen and (max-width: 1200px) and (orientation: portrait),
   (max-width: 1123px) and (orientation: landscape) {
     .sponsors-wrapper {

app/controllers/sponsors_controller.rb

@@ -10,4 +10,9 @@ def sponsors_footer
     @sponsors_in_footer = Sponsor.published.with_footer_image.order_by_tier
     render layout: false
   end
+
+  def banner_ads
+    @sponsors_in_banner = Sponsor.published.with_banner_ad
+    render layout: false
+  end
 end

app/javascript/controllers/banner_ads_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = [ 'ad' ]
+  static values = {
+    eventSlug: String,
+  }
+
+  connect() {
+    const path = `/${this.eventSlugValue}/banner_ads`
+    fetch(path)
+      .then((res) => res.text())
+      .then((html) => {
+        const fragment = document
+          .createRange()
+          .createContextualFragment(html);
+        this.element.appendChild(fragment);
+
+        this.config()
+      })
+  }
+
+  config() {
+    this.setAdInterval()
+    this.setIndex()
+
+    this.showCurrentIndex()
+    this.startAdRotation()
+  }
+
+  showCurrentIndex() {
+    this.adTargets.forEach((ad, index) => {
+      ad.hidden = index != this.index;
+    })
+  }
+
+  setAdInterval() {
+    this.adInterval = 7500; // 7.5 second ad interval
+  }
+
+  setIndex() {
+    this.index = Math.floor(Math.random() * this.adTargets.length);
+  }
+
+  startAdRotation() {
+    setInterval(() => {
+
+      this.index += 1
+      if (this.index >= this.adTargets.length) {
+        this.index = 0
+      }
+
+      this.showCurrentIndex()
+    }, this.adInterval)
+  }
+}

app/models/sponsor.rb

@@ -11,6 +11,7 @@ class Sponsor < ApplicationRecord
 
   scope :published, -> { where(published: true) }
   scope :with_footer_image, -> { joins(:footer_logo_attachment) }
+  scope :with_banner_ad, -> { joins(:banner_ad_attachment) }
   scope :order_by_tier, -> {
     order_case = "CASE tier"
     TIERS.each_with_index do |tier, index|

app/views/sponsors/banner_ads.html.haml

@@ -0,0 +1,3 @@
+.banner-ad-wrapper
+  - @sponsors_in_banner.each do |sponsor|
+    = link_to image_tag( sponsor.banner_ad, alt: sponsor.name), sponsor.url, target: "_blank", class: "banner-ad-item", data: { 'banner-ads-target': 'ad' }

app/views/sponsors/show.html.haml

@@ -9,3 +9,5 @@
           = tier
         .sponsors-wrapper
           = render sponsors
+
+  %div{ data: { 'controller': 'banner-ads', 'banner-ads-event-slug-value': 'railsconf-2022', 'banner-ads-index-value': '0' } }

config/routes.rb

@@ -166,6 +166,7 @@
   get '/(:slug)/program', to: 'programs#show', as: :program
   get '/(:slug)/schedule', to: 'schedule#show', as: :schedule
   get '/(:slug)/sponsors_footer', to: 'sponsors#sponsors_footer'
+  get '/(:slug)/banner_ads', to: 'sponsors#banner_ads'
   get '/(:slug)/sponsors', to: 'sponsors#show', as: :sponsors
   get '/(:slug)/:page', to: 'pages#show', as: :page