TW29378047 Explo Eclipse Hero (#45)

* Hero Paragraph Initial Setup

* Set up vertical alignment

* Styles for mobile

* Adjust min-height on mobile

* Switch to Video media

* Adjust position for hero content if no overlay is set

* Update template to include remote video

* Fix field name in hero template

* Add patch-package and patch youtube-background to use aria-checked

* Remove underscore from hero.js file name and fix extra js folder in libraries file

* Fix hero content positioning on mobile

* Update patch to add aria-label to Play and Mute buttons

assets/js/hero.js

@@ -0,0 +1,2 @@
+import 'youtube-background';
+new VideoBackgrounds('[data-vbg]');

assets/scss/_hero.scss

@@ -0,0 +1,125 @@
+.paragraph--type--sa-hero {
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+
+  @include media-breakpoint-up(lg) {
+    min-height: 55vh;
+  }
+
+
+
+  #hero-video-control {
+      background-color: unset;
+      border: 0;
+
+      &.play {
+          .bi-pause {
+              display: none;
+          }
+      }
+
+      &.pause {
+          .bi-play {
+              display: none;
+          }
+      }
+
+      .bi {
+          font-size: 1.5rem;
+      }
+  }    
+
+  .hero-image {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      aspect-ratio: 16 / 9;
+
+      @include media-breakpoint-down(lg) {
+          position: relative !important;
+          iframe {
+            height: 100% !important;
+            width: 100% !important;
+          }
+      }
+  }
+
+  &.video {
+      @include media-breakpoint-up(lg) {
+          aspect-ratio: 16 / 9;
+      }
+
+      video {
+          height: 100%;
+          width: 100%;
+      }
+  }
+
+  @include media-breakpoint-down(lg) {
+      .hero-content {
+          color: white;
+
+          .bi {
+              color: white;
+          }
+      }
+  }
+
+  @include media-breakpoint-up(lg) {
+      .hero-content {
+        position: relative;
+      }
+
+      /* Overlay. */
+      &[data-overlay] {
+      .hero-content {
+        padding: 20px;
+        color: white;
+
+        .bi {
+          color: white;
+        }
+
+        // Set all inner content to be higher z-index than before.
+        .text-wrapper, #hero-video-control {
+          position: relative;
+          z-index: 2;
+        }
+
+        &:before {
+          background: #252525 none repeat scroll 0 0;
+          content: "";
+          display: block;
+          height: 100%;
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          z-index: 0;
+        }
+
+        &--overlay-invert {
+          &:before {
+            background: #fff none repeat scroll 0 0;
+          }
+        }
+      }
+      // Loops 1 - 9 and adds opacity $i x 0.1
+      @for $i from 1 through 9 {
+        &[data-overlay="#{$i}"] {
+          .hero-content {
+            &:before {
+              opacity: calc($i * 0.1);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -33,12 +33,14 @@
         "gulp": "gulp",
         "watch": "gulp watch",
         "build": "gulp build",
-        "criticalcss": "node critical-css/clean.js && node critical-css/criticalcss.mjs"
+        "criticalcss": "node critical-css/clean.js && node critical-css/criticalcss.mjs",
+        "postinstall": "patch-package"
     },
     "dependencies": {
         "cssnano": "^6.0.1",
         "dotenv": "^16.0.3",
         "patch-package": "^8.0.0",
-        "postcss-inline-svg": "^5.0.0"
+        "postcss-inline-svg": "^5.0.0",
+        "youtube-background": "^1.1.8"
     }
 }

saplings_child.libraries.yml

@@ -12,6 +12,13 @@ bs5-lightbox:
   js:
     https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js: { type: external, minified: true }
 
+hero-video:
+  js:
+    dist/js/hero.js: { minified: true }
+
+fontawesome: 
+  js: 
+    https://kit.fontawesome.com/0a9b1aaff7.js: { type: external, minified: false }
 tabs:
   js:
     dist/js/tabs.js: { minified: false }

templates/overrides/fields/field--paragraph--sa-hero-background.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+    {{ item.content }}
+{% endfor %}

templates/overrides/fields/field--paragraph--sa-hero-content.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+    {{ item.content }}
+{% endfor %}

templates/overrides/paragaphs/paragraph--sa-hero.html.twig

@@ -0,0 +1,137 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{{ attach_library('saplings_child/hero-video') }}
+{{ attach_library('saplings_child/hero-video-youtube') }}
+{{ attach_library('saplings_child/fontawesome') }}
+
+{% if paragraph.sa_justify_content_vertically.value is not empty %}
+  {% set align = paragraph.sa_justify_content_vertically.value %}
+{% endif %}
+
+{% set hero_media = content.sa_hero_background[0]['#media'].bundle.value[0].target_id %}
+
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished',
+    align,
+    hero_media,
+    'bg-primary',
+    'bg-lg-none'
+  ]
+%}
+
+{% set container_class_string = 'container' %}
+{% if paragraph.sa_container.value is not empty %}
+  {% set container_class_string = ' ' ~ paragraph.sa_container.value %}
+{% endif %}
+
+{% set width_class_string = '' %}
+{% if paragraph.sa_width.value is not empty %}
+  {% set width_class_string = ' ' ~ paragraph.sa_width.value %}
+{% endif %}
+
+{% set margin_class_string = '' %}
+{% if paragraph.sa_margin.value is not empty %}
+  {% set margin_class_string = ' ' ~ paragraph.sa_margin.value %}
+{% endif %}
+
+{% set padding_class_string = '' %}
+{% if paragraph.sa_padding.value is not empty %}
+  {% set padding_class_string = ' ' ~ paragraph.sa_padding.value %}
+{% endif %}
+
+{% set justify = '' %}
+{% if paragraph.sa_justify_content_horizontal.value is not empty %}
+  {% set justify = ' ' ~ paragraph.sa_justify_content_horizontal.value %}
+{% endif %}
+
+{% set align = '' %}
+{% if paragraph.sa_align_items_vertically.value is not empty %}
+  {% set align = ' ' ~ paragraph.sa_align_items_vertically.value %}
+{% endif %}
+
+{# Renders Overlay field. #}
+{# Sets data attibute value from values in database. #}
+{% if paragraph.sa_overlay.value is not empty %}
+  {% set overlay_level = paragraph.sa_overlay.value %}
+{% endif %}
+
+{% block paragraph %}  
+
+<div{{ attributes.addClass(classes) }}
+    {% if overlay_level %}
+        data-overlay="{{ overlay_level }}"
+    {% endif %}
+    >
+    {% if paragraph.sa_hero_background.value is not empty %}
+      {% if content.sa_hero_background[0]['#media'].bundle.value.0.target_id == 'image' %}
+        <div class="hero-image">
+            {{ content.sa_hero_background }}
+        </div>
+      {% elseif content.sa_hero_background[0]['#media'].bundle.value.0.target_id == 'remote_video' %}
+        <div class="hero-image" {% if content.sa_include_pause_button[0]['#markup'] == '1' %}data-vbg-play-button="true"{% endif %} {% if content.sa_include_mute_button[0]['#markup'] == '1' %}data-vbg-mute-button="true"{% endif %} data-vbg="{{ content.sa_hero_background[0]['#media'].field_media_oembed_video.0.value }}"></div>
+      {% else %}
+        <div class="hero-image" {% if content.sa_include_pause_button[0]['#markup'] == '1' %}data-vbg-play-button="true"{% endif %} {% if content.sa_include_mute_button[0]['#markup'] == '1' %}data-vbg-mute-button="true"{% endif %} data-vbg="{{ file_url(content.sa_hero_background[0]['#media'].field_media_video_file.entity.uri.value) }}"></div>
+      {% endif %}
+    {% endif %}
+    <div class="{{ container_class_string }}{{ margin_class_string }}{{ padding_class_string }} ">
+        {% if paragraph.sa_width.value is not empty %}
+        <div class="row {{ justify }}">
+            <div class="{{ width_class_string }}">
+        {% endif %}
+        {% block content %}
+          <div class="hero-content">
+            <div class="text-wrapper">
+              {{ content.sa_hero_content }}
+            </div>
+          </div>
+        {% endblock %}
+        {% if paragraph.sa_width.value is not empty %}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock paragraph %}