WIP #3053

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
index a357e377a0e9d171979a10e129b0b7fe2f8dcea8..6a3e08f61264cc9d3055ddb56711c0c352731245 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -5,6 +5,8 @@ namespace Cube\Elementor\Widgets;
 use Elementor\Widget_Base;
 use Elementor\Controls_Manager;
 
+use function Roots\asset;
+
 
 class HeaderSlideshow extends Widget_Base {
 
@@ -39,7 +41,16 @@ class HeaderSlideshow extends Widget_Base {
      * @return array Widget scripts dependencies.
      */
     public function get_script_depends() {
-        return [];
+
+        wp_register_script(
+            'cube-header-slideshow',
+            asset('scripts/header-slideshow.js'),
+            [], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        return ['cube-header-slideshow'];
     }
     /**
      * Register the widget controls.
@@ -124,6 +135,10 @@ class HeaderSlideshow extends Widget_Base {
 
         <div class="header-slideshow elementor" id="<?= $id ?>">
 
+            <?php foreach($images as $image): ?>
+                <div class="header-slideshow-image" style="background-image:url(<?= wp_get_attachment_image_url($image['id'], 'full') ?>);"></div>
+            <?php endforeach; ?>
+
             <?php
             /*
             Here we're hijacking Elementor's built in entrance animations for the title text.
@@ -133,9 +148,7 @@ class HeaderSlideshow extends Widget_Base {
             */
             ?>
 
-            <?php // Todo: add simple image slideshow with crossfade + nav (no need for a library) ?>
-
-            <div class="header-slideshow-sizer" style="padding-bottom: <?= $image_ratio ?>; background-image:url(/wp-content/uploads/<?= $image_meta['file'] ?>);">
+            <div class="header-slideshow-sizer" style="padding-bottom: <?= $image_ratio ?>;">
 
                 <div class="header-slideshow-content mx-2v elementor-element elementor-invisible" data-settings='{"animation":"fadeInRight","animation_delay":0}' data-element_type="section">
                     <h1 class="header-slideshow-title">

diff --git a/wp-content/themes/CCV/resources/assets/images/carousel-next.svg b/wp-content/themes/CCV/resources/assets/images/carousel-next.svg
new file mode 100644 (file)
index 0000000..b08bfe1
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/carousel-next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="44" viewBox="0 0 26 44"><path stroke-width="5" fill="none" d="M2 42l20-20L2 2"/></svg>

diff --git a/wp-content/themes/CCV/resources/assets/images/carousel-prev.svg b/wp-content/themes/CCV/resources/assets/images/carousel-prev.svg
new file mode 100644 (file)
index 0000000..b0ca70a
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/carousel-prev.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="44" viewBox="0 0 26 44"><path stroke-width="5" fill="none" d="M24 2L4 22l20 20"/></svg>

diff --git a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
new file mode 100644 (file)
index 0000000..886de4f
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
@@ -0,0 +1,26 @@
+// ELEMENTOR Trigger
+(function($) {
+  $(window).on('elementor/frontend/init', function () {
+    elementorFrontend.hooks.addAction('frontend/element_ready/cube-header-slideshow.default', function ($scope) {
+
+      // Inspired by: https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/
+      const slides = $scope.find('.header-slideshow-image');
+      const slideInterval = setInterval(nextSlide, 3000);
+      let currentSlide = 0;
+
+      function showSlide(index) {
+        $(slides[currentSlide]).removeClass('showing');
+        currentSlide = (index + slides.length) % slides.length;
+        $(slides[currentSlide]).addClass('showing');
+      }
+
+      function nextSlide() {
+        showSlide(currentSlide + 1);
+      }
+      function prevSlide() {
+        showSlide(currentSlide - 1);
+      }
+
+    });
+  });
+})(jQuery);

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
index 19abb4187541306e0fba8079fd3b875f78ac5820..7792127f449d9c167ed7ba56d6adc4cb15a896e4 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
@@ -14,8 +14,26 @@ $title_bg = rgba(#fff, 0.88)
       width: 100%
       height: 100%
       background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
+      z-index: 5
+
+  &-image
+    background-repeat: no-repeat
+    background-size: cover
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    z-index: 1
+    opacity: 0
+    transition: opacity 0.75s
+
+    &.showing
+      opacity: 1
+      z-index: 2
 
   &-content
+    z-index: 10
     position: absolute
     constrain(left, 5vw)
     constrain(bottom, 10vw)

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
index af79a43fae22db2b682a9f3717e00f63e12cb26b..df0fab899bd414b6eca41e0b2911e5d17b6b4085 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
@@ -1,13 +1,14 @@
 .link-carousel
 
   &-item
+    height: auto !important // Needed to make equal heights, otherwise Swiper's 100% height breaks this
     display: flex
     align-items: center
     flex-direction: column
     cursor: pointer
-    border-right: 1px solid rgba(#fff, 0.2)
-    height: auto !important // Needed to make equal heights, otherwise Swiper's 100% height breaks this
 
+    +above(500px)
+      border-right: 1px solid rgba(#fff, 0.2)
 
     &-image
       flex-grow: 1
@@ -28,3 +29,20 @@
 
       .link-carousel-item:hover &
         @apply bg-teal
+
+
+  &-prev, &-next
+    position: absolute
+    top: 50%
+    transform: translateY(-50%)
+    z-index: 10
+    stroke: currentColor
+    transition: color 0.25s
+
+    &:hover
+      @apply text-pink
+
+  &-prev
+    left: 0.5rem
+  &-next
+    right: 0.5rem

diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php
index 18e2f368e873f1757fd41a4a25f38a8b1e8bd967..5eeb662e7420ba4716094f4cf93f3782e2e4ca81 100644 (file)
--- a/wp-content/themes/CCV/resources/views/partials/header.blade.php
+++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php
@@ -1,6 +1,9 @@
 <header class="site bg-white font-display font-medium uppercase text-sm">
   <div class="container relative pl-2v pr-1v pt-8 pb-12 flex items-center justify-between">
-    <a class="flex-shrink-0 mr-4" href="{{ home_url('/') }}" aria-label="<?= _("Go to the home page") ?>">
+    <a class="flex-shrink-0 mr-4"
+       style="max-width: 45%; min-width: 180px"
+       href="{{ home_url('/') }}"
+       aria-label="<?= _("Go to the home page") ?>">
       <img class="header-logo" src="@asset('images/logo.svg')" alt="{{ get_bloginfo('name', 'display') }}">
     </a>
 

diff --git a/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php b/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php
index 45de2f4124cfed2f1621571c490d84bc7e32e4f8..a12f2afc81bbeb81f9404995feb9d4607e785529 100644 (file)
--- a/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php
@@ -10,10 +10,13 @@
         768 => [
           'slidesPerView' => 2
         ],
+        499 => [
+          'slidesPerView' => 1
+        ],
     ],
     'navigation' => [
-      'nextEl' => '.swiper-button-next',
-      'prevEl' => '.swiper-button-prev',
+      'nextEl' => '.link-carousel-next',
+      'prevEl' => '.link-carousel-prev',
     ],
   ];
 
@@ -32,6 +35,6 @@
       </a>
     @endforeach
   </div>
-  <div class="swiper-button-prev"></div>
-  <div class="swiper-button-next"></div>
+  <div class="link-carousel-prev">@svg('carousel-prev', 'stroke-current')</div>
+  <div class="link-carousel-next">@svg('carousel-next', 'stroke-current')</div>
 </div>

diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js
index 2bb517a87c1b0c4f03670e6b257d968234368a2d..c7f649ce6530812219d2ec1506587a75399fb6bf 100644 (file)
--- a/wp-content/themes/CCV/webpack.mix.js
+++ b/wp-content/themes/CCV/webpack.mix.js
@@ -44,6 +44,7 @@ mix.stylus(src`styles/app.styl`, 'styles', {
 
 // JavaScript
 mix.js(src`scripts/app.js`, 'scripts')
+   .js(src`scripts/header-slideshow.js`, 'scripts')
    .js(src`scripts/link-carousel.js`, 'scripts')
    .js(src`scripts/customizer.js`, 'scripts')
    .extract();