Merge pull request #10 from SimonDEvans/6881-hero-carousel

[6881] Offensive/Untrue/Bizarre section
MozillaFoundation · Jul 6, 2021 · a87bd29 · a87bd29
2 parents ea96e93 + 8fb8abd
commit a87bd29
Show file tree

Hide file tree

Showing 11 changed files with 419 additions and 0 deletions.
diff --git a/...gtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero_carousel.html b/...gtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero_carousel.html
@@ -0,0 +1,94 @@
+{% load static i18n %}
+
+<div class="container dark-theme full-width-container full-width-container--pushed">
+  <div class="full-width-container__inner">
+    <div class="carousel-hero" data-carousel-hero data-slidetotal="3" id="yt-hero-carousel">
+      <svg class="mb-3" aria-hidden="true" width="47" height="38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.273.014h46.492V29.07h-26.99l-11.48 8.88 1.472-8.88H.273V.014z" fill="#fff"/><path d="M25.984 9.07h2.898v2.94h-2.898V9.07zm-7.37 0h2.918v2.94h-2.919V9.07zm-4.096 9.072c1.54-1.035 3.108-1.777 4.704-2.226a18.247 18.247 0 014.914-.671c1.68 0 3.318.224 4.914.671 1.596.448 3.164 1.19 4.704 2.226l-.714 1.785c-1.61-.657-3.115-1.133-4.515-1.427a21.112 21.112 0 00-4.389-.442c-1.526 0-2.989.148-4.389.442-1.4.294-2.905.77-4.515 1.427l-.714-1.785z" fill="#000"/></svg>
+      <div class="carousel-hero__controls mb-4">
+        <p class="heading-4 text-white">{% trans "Sometimes YouTube Regrets are" %}</p>
+        <div class="carousel-hero__controls-inner">
+          <div class="d-flex align-items-center justify-content-between justify-content-sm-end" data-glide-el="controls">
+            <div class="carousel-hero__count">
+              <div class="carousel-hero__count-inner d-flex align-items-baseline justify-content-end" data-liveregion>
+                <span class="carousel-hero__count-first">1 </span><span class="carousel-hero__count-second"> / 3</span>
+              </div>
+            </div>
+            <button class="carousel-hero__button carousel-hero__button--prev button mr-3" aria-label="Previous slide" data-glide-dir="<">
+              <svg aria-hidden="true" width="41" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="circle" d="M20.48 39.736c10.586 0 19.167-8.581 19.167-19.167 0-10.585-8.58-19.166-19.166-19.166S1.314 9.983 1.314 20.569s8.581 19.167 19.167 19.167z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path class="arrow" d="M20.48 12.903l-7.666 7.666 7.667 7.667M28.147 20.57H12.814" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <button class="carousel-hero__button carousel-hero__button--next button" aria-label="Next slide" data-glide-dir=">">
+              <svg aria-hidden="true" width="41" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="circle" d="M20.48 39.736c10.586 0 19.167-8.581 19.167-19.167 0-10.585-8.58-19.166-19.166-19.166S1.314 9.983 1.314 20.569s8.581 19.167 19.167 19.167z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path class="arrow" d="M20.48 28.236l7.667-7.667-7.666-7.666M12.814 20.57h15.333" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div data-glide-el="track" class="carousel-hero__container glide__track">
+        <ul class="carousel-hero__slides glide__slides" aria-live="polite">
+
+          {# Slide 1 #}
+          <li class="carousel-hero__item glide__slide">
+            <div class="carousel-hero__video">
+              <video playsinline autoplay muted loop>
+                <source src="{% static "_images/youtube-regrets/hero-carousel/misleading.mp4" %}" type="video/mp4">
+                Your browser does not support the video tag.
+              </video>
+              <p class="heading-5 text-white mt-2">{% trans "Global Warming: Fact or Fiction? Featuring Physicists Willie Soon and Elliott D. Bloom" %}</p>
+            </div>
+            <div class="carousel-hero__item-content">
+              <p class="heading-1 text-white">{% trans "Misleading" %}</p>
+              <p class="carousel-hero__item-text">
+                {% blocktrans trimmed %}
+                A volunteer reported that they were surprised to see a video denying climate change suggested after they watched a Mozilla video!
+                {% endblocktrans %}
+              </p>
+            </div>
+          </li>
+
+          {# Slide 2 #}
+          <li class="carousel-hero__item glide__slide">
+            <div class="carousel-hero__video">
+              <video playsinline autoplay muted loop>
+                <source src="{% static "_images/youtube-regrets/hero-carousel/untrue.mp4" %}" type="video/mp4">
+                Your browser does not support the video tag.
+              </video>
+              <p class="heading-5 text-white mt-2">
+                {% blocktrans trimmed %}
+                Omar Connected Harvester SEEN Exchanging $200 for General Election Ballot. “We don’t care illegal.”
+                {% endblocktrans %}
+              </p>
+            </div>
+            <div class="carousel-hero__item-content">
+              <p class="heading-1 text-white">{% trans "Untrue" %}</p>
+              <p class="carousel-hero__item-text">
+                {% blocktrans trimmed %}
+                A volunteer reported that despite mainly watching wilderness survival videos and no right-wing politics, they were recommended a video spreading an unfounded claim about U.S. Representative Ilhan Omar and voter fraud in the 2020 U.S. elections.
+                {% endblocktrans %}
+              </p>
+            </div>
+          </li>
+
+          {# Slide 3 #}
+          <li class="carousel-hero__item glide__slide">
+            <div class="carousel-hero__video">
+              <video playsinline autoplay muted loop>
+                <source src="{% static "_images/youtube-regrets/hero-carousel/offensive.mp4" %}" type="video/mp4">
+                Your browser does not support the video tag.
+              </video>
+              <p class="heading-5 text-white mt-2">
+                {% trans "Man hum1liates f3m1n1st in v1ral video" %}
+              </p>
+            </div>
+            <div class="carousel-hero__item-content">
+              <p class="heading-1 text-white">{% trans "Offensive" %}</p>
+              <p class="carousel-hero__item-text">
+                {% blocktrans trimmed %}
+                A volunteer reported a video where the narrator claims to “completely shut down and embarass three women that have opinions about how society should be in first world feminist countries” that was recommended after watching videos about the U.S. military.
+                {% endblocktrans %}
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/.../wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html b/.../wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html
@@ -31,6 +31,7 @@
         {% include "./fragments/what-is.html" %}
 
         {# Sometimes YouTube regrets are #}
+        {% include "./fragments/hero_carousel.html" %}
 
         {# Quote #}
         {% include "./fragments/quote.html" %}

diff --git a/source/images/youtube-regrets/hero-carousel/misleading.mp4 b/source/images/youtube-regrets/hero-carousel/misleading.mp4
diff --git a/source/images/youtube-regrets/hero-carousel/offensive.mp4 b/source/images/youtube-regrets/hero-carousel/offensive.mp4
diff --git a/source/images/youtube-regrets/hero-carousel/untrue.mp4 b/source/images/youtube-regrets/hero-carousel/untrue.mp4
diff --git a/source/js/foundation/pages/youtube-regrets/hero-carousel.js b/source/js/foundation/pages/youtube-regrets/hero-carousel.js
@@ -0,0 +1,88 @@
+import Glide from '@glidejs/glide';
+import ArrowDisabler from './carousel-arrow-disabler';
+
+class HeroCarousel {
+    static selector() {
+      return '[data-hero-carousel]';
+    }
+
+    constructor(node) {
+      this.node = node;
+      this.createSlideshow();
+      this.slideTotal = this.node.dataset.slidetotal;
+      this.slideshow.mount({ ArrowDisabler });
+      this.bindEvents();
+      this.setLiveRegion();
+    }
+
+    bindEvents() {
+      this.updateAriaRoles();
+
+      // Rerun after each slide move
+      this.slideshow.on('run.after', () => {
+          this.updateAriaRoles();
+          this.updateLiveRegion();
+      });
+    }
+
+    createSlideshow() {
+      this.slideshow = new Glide(this.node, {
+        type: 'slider',
+        startAt: 0,
+        gap: 0,
+        keyboard: true,
+        perTouch: 1,
+        touchRatio: 0.5,
+        perView: 1,
+        rewind: true,
+        autoplay: false,
+
+        // Swipe animation on mobile but
+        // fade animation on desktop.
+        // They require different animation durations
+        animationDuration: window.innerWidth > 992 ? 0 : 300
+      });
+    }
+
+    updateAriaRoles() {
+      for (const slide of this.node.querySelectorAll(
+        '.glide__slide:not(.glide__slide--active)',
+      )) {
+        const inactiveSlideAnchors = slide.querySelectorAll('a');
+        slide.setAttribute('aria-hidden', 'true');
+        inactiveSlideAnchors.forEach(function inactiveAnchor(el) {
+          el.setAttribute('tabindex', -1);
+        });
+      }
+      const activeSlide = this.node.querySelector('.glide__slide--active');
+      const activeSlideAnchors = activeSlide.querySelectorAll('a');
+      activeSlide.removeAttribute('aria-hidden');
+      activeSlideAnchors.forEach(function activeAnchor(el) {
+        el.removeAttribute('tabindex');
+      });
+    }
+
+    // Sets a live region. This will announce which slide is showing to screen readers when previous / next buttons clicked
+    setLiveRegion() {
+      const liveRegion = this.node.querySelector('[data-liveregion]');
+      const inner = document.createElement('div');
+      inner.setAttribute('aria-live', 'polite');
+      inner.setAttribute('aria-atomic', 'true');
+      inner.setAttribute('data-liveregion', true);
+      liveRegion.appendChild(inner);
+    }
+
+    // Update the live region that announces the next slide.
+    updateLiveRegion() {
+      this.node.querySelector(
+        '[data-liveregion]',
+      ).innerHTML = `<span class="carousel-hero__count-first">${this.slideshow.index + 1} </span><span class="carousel-hero__count-second">/ ${this.slideTotal}</span>`;
+    }
+}
+
+export const initYoutubeRegretsHeroCarousel = () => {
+  const carousels = [...document.querySelectorAll("#yt-hero-carousel")];
+  carousels.map((carousel) => new HeroCarousel(carousel));
+};
+
+export default HeroCarousel;
diff --git a/source/js/main.js b/source/js/main.js
@@ -28,6 +28,7 @@ import { initYoutubeRegretsResearchCountUp } from "./foundation/pages/youtube-re
 import { initYoutubeRegretsAccordions } from "./foundation/pages/youtube-regrets/accordion";
 import { initYouTubeRegretsRecommendationsPieChart } from "./foundation/pages/youtube-regrets/recommendations-pie-chart";
 import { initYoutubeRegretsCarousel } from "./foundation/pages/youtube-regrets/carousel";
+import { initYoutubeRegretsHeroCarousel } from "./foundation/pages/youtube-regrets/hero-carousel";
 
 // Initializing component a11y browser console logging
 if (
@@ -125,6 +126,7 @@ let main = {
       initYoutubeRegretsAccordions();
       initYouTubeRegretsRecommendationsPieChart();
       initYoutubeRegretsCarousel();
+      initYoutubeRegretsHeroCarousel();
     }
 
     // YouTube Regrets Reporter page

diff --git a/source/sass/views/youtube-regrets-2021-carousel-hero.scss b/source/sass/views/youtube-regrets-2021-carousel-hero.scss
@@ -0,0 +1,175 @@
+@import '../../../node_modules/@glidejs/glide/src/assets/sass/glide.core';
+
+.carousel-hero {
+  $root: &;
+  position: relative;
+
+  // Slides wrapper
+  &__slides {
+    list-style: none;
+  }
+
+  // Slide
+  &__item {
+    display: grid;
+    grid-row-gap: 20px;
+
+    @media (min-width: $bp-lg) {
+      grid-template-columns: 1fr 1fr;
+      grid-row-gap: 0;
+      grid-column-gap: 30px;
+    }
+  }
+
+  &__item-content {
+    @media (min-width: $bp-sm) {
+      padding-right: 40px;
+    }
+
+    @media (min-width: $bp-lg) {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    @media (min-width: $bp-xl) {
+      padding-right: 0;
+    }
+  }
+
+  &__item-text {
+    @include set-text-size(28px, 30px);
+    font-family: $font-zilla;
+    font-weight: 400;
+    color: $white;
+  }
+
+  &__video {
+    video {
+      width: 100%;
+
+      @media (min-width: $bp-lg) {
+        grid-column: 2;
+        max-height: 300px;
+        object-fit: cover;
+      }
+    }
+  }
+
+  // Next/prev
+  &__controls {
+    @media (min-width: $bp-lg) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      position: relative;
+      z-index: 1;
+      padding: 0 41px;
+    }
+
+    @media (min-width: $bp-lg) {
+      padding: 0;
+    }
+  }
+
+  &__controls-inner {
+    display: grid;
+    grid-column: 2;
+
+    @media (min-width: $bp-lg) {
+      padding-right: 41px;
+    }
+
+    @media (min-width: $bp-xl) {
+      padding-right: 0;
+    }
+  }
+
+  &__button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+
+    svg {
+      transition: fill 0.3s;
+      stroke: $white;
+
+      .arrow,
+      .circle {
+        stroke: $white;
+        transition: stroke 0.3s;
+      }
+    }
+
+    &:hover {
+      .circle {
+        fill: $white;
+      }
+
+      .arrow {
+        stroke: $black;
+      }
+    }
+  }
+
+  // Slide counter
+  &__count {
+    display: none;
+
+    @media (min-width: $bp-sm) {
+      grid-template-columns: 450px 1fr;
+      color: $white;
+      display: grid;
+      grid-column-gap: 30px;
+      margin-top: 10px;
+    }
+  }
+
+  &__count-first,
+  &__count-second {
+    @include set-text-size(20px, 19px);
+    font-weight: 300;
+  }
+
+  &__count-first {
+    margin-right: 6px;
+  }
+
+  // Sadface icons
+  &__speech-bubble-mobile {
+    width: 58px;
+    height: 49px;
+
+    @media (min-width: $bp-lg) {
+      display: none;
+    }
+  }
+
+  &__speech-bubble-desktop {
+    display: none;
+
+    @media (min-width: $bp-lg) {
+      display: block;
+    }
+  }
+}
+
+// Override to force fade transition on desktop
+// Added this way for now while we test/decide
+// https://github.com/glidejs/glide/issues/279#issuecomment-556933381
+@media (min-width: $bp-lg) {
+  .glide__slides {
+    transform:none !important;
+    width:auto !important;
+    display: grid;
+    grid-template-areas: 'slide';  //create a 1x1 grid where the single cell is called slide
+  }
+  .glide__slide {
+    position: relative;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    grid-area: slide;  //assign all child slides to the cell
+  }
+  .glide__slide--active {
+    z-index:1;
+    opacity:1;
+  }
+}