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 77618b3b6c552746b6ae51f48d3ea4b236914cdb..41a8f26e9559d0a637cc8aba25e582281091e716 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -2,6 +2,7 @@
 
 namespace Cube\Elementor\Widgets;
 
+use Elementor\Utils;
 use Elementor\Widget_Base;
 use Elementor\Controls_Manager;
 
@@ -68,19 +69,6 @@ class HeaderSlideshow extends Widget_Base {
             ]
         );
 
-        $this->add_control(
-            'images',
-            [
-                'label' => __( 'Add Images', 'elementor' ),
-                'type' => Controls_Manager::GALLERY,
-                'default' => [],
-                'show_label' => false,
-                'dynamic' => [
-                    'active' => true,
-                ],
-            ]
-        );
-
         $this->add_control(
             'title',
             [
@@ -101,6 +89,35 @@ class HeaderSlideshow extends Widget_Base {
             ]
         );
 
+        $this->add_control(
+            'images',
+            [
+                'label' => __( 'Slideshow Images', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'desktop',
+                        'label' => __('Desktop image (1920px × 912px)', 'cube'),
+                        'label_block' => true,
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                    [
+                        'name' => 'mobile',
+                        'label' => __('Mobile image (portrait orientation)', 'cube'),
+                        'label_block' => true,
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                ],
+                'title_field' => '<img src="{{{ desktop.url }}}">',
+            ]
+        );
+
         
         $this->end_controls_section();
     }
@@ -136,13 +153,18 @@ class HeaderSlideshow extends Widget_Base {
         <div class="header-slideshow elementor" id="<?= $id ?>">
 
             <?php foreach($images as $index => $image): ?>
-                <div class="header-slideshow-image<?= $index === 0 ? ' showing' : '' ?>"
-                     style="background-image:url(<?= wp_get_attachment_image_url($image['id'], 'full') ?>);">
-                </div>
-            <?php endforeach; ?>
+                <div class="header-slideshow-image<?= $index === 0 ? ' showing' : '' ?>">
+
+                    <?php if ($image['mobile']['id'] > 0): ?>
+                        <div class="header-slideshow-image-mobile" style="background-image:url(<?= wp_get_attachment_image_url($image['mobile']['id'], 'full') ?>);"></div>
+                     <?php endif; ?>
 
-            <?php // TODO: Have separate mobile images in portrait crop? Simplest might be to use an inline CSS block with media queries like on SolaireBox? ?>
+                    <?php if ($image['desktop']['id'] > 0): ?>
+                        <div class="header-slideshow-image-desktop" style="background-image:url(<?= wp_get_attachment_image_url($image['desktop']['id'], 'full') ?>);"></div>
+                     <?php endif; ?>
 
+                </div>
+            <?php endforeach; ?>
 
             <div class="header-slideshow-sizer" style="padding-bottom: <?= $image_ratio ?>;">
 

diff --git a/wp-content/themes/CCV/package.json b/wp-content/themes/CCV/package.json
index 8db1f7e852fdc535977b8b6a322b919d41763c74..000fb9f93042e54e946a5ba472c28dc0549c78f4 100644 (file)
--- a/wp-content/themes/CCV/package.json
+++ b/wp-content/themes/CCV/package.json
@@ -25,6 +25,7 @@
     "eslint-plugin-import": "^2.17",
     "laravel-mix": "^4.0",
     "laravel-mix-purgecss": "^4.1.0",
+    "lodash.debounce": "^4.0.8",
     "lost": "^8.3.1",
     "mix-tailwindcss": "^1.0.2",
     "mmenu-light": "^2.3.1",

diff --git a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
index a6e83791d15ee8113b916966cbbedef6b1086ab2..ce5a6689d340cc61eb16ac44ded80f9f4a415d54 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
@@ -1,3 +1,5 @@
+import debounce from 'lodash.debounce';
+
 // ELEMENTOR Trigger
 (function($) {
   $(window).on('elementor/frontend/init', function () {
@@ -34,8 +36,40 @@
           clearInterval(slideInterval); // Stop autoplay
           showSlide($(this).data('slide'));
         });
+
+        // Handle resizing when window resizes
+        $(window).on('resize', debounce(resizeSlideshow, 100));
+        resizeSlideshow();
       }
 
+      function resizeSlideshow() {
+        const content = $scope.find('.header-slideshow-content');
+        const title = $scope.find('.header-slideshow-title');
+        const resizeBreakpoint = 1000; // When to start resizing
+        const targetWidth = 650; // The max width of the title block + spacing
+        let windowWidth = $(window).width();
+
+
+        if (windowWidth > resizeBreakpoint) {
+          content.attr('style', '');
+          title.attr('style', '');
+        } else {
+          let scale = Math.min(1, windowWidth / targetWidth);
+
+          content.css({
+            transform: `scale(${scale})`,
+            transformOrigin: 'bottom left',
+            width: '100%',
+            margin: '0'
+          });
+          title.css({
+            display: 'inline-block'
+          })
+        }
+
+      }
+
+
       function showSlide(index) {
         $(slides[currentSlide]).removeClass('showing');
         $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active');
@@ -51,6 +85,8 @@
         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 e5f00b58ee00141e9176019d09a23ad6152e7554..98fa37084f1f4a11738a7b570d7c5f7b573cb1a8 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
@@ -1,3 +1,4 @@
+$breakpoint-slideshow-images = 600px
 $title_bg = rgba(#fff, 0.88)
 
 .header-slideshow
@@ -16,14 +17,11 @@ $title_bg = rgba(#fff, 0.88)
         background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
         z-index: 5
 
-    // Todo: this might be replaced by inline styles and separate mobile specific images
-    +below(600px)
+    // Change to portrait oriented images for small screens
+    +below($breakpoint-slideshow-images)
       padding-bottom: 148% !important // Based off mockup: 555px / 375px
 
   &-image
-    background-repeat: no-repeat
-    background-size: cover
-    background-position: center
     position: absolute
     top: 0
     left: 0
@@ -37,6 +35,21 @@ $title_bg = rgba(#fff, 0.88)
       opacity: 1
       z-index: 2
 
+    // The actual images for desktop and mobile
+    > div
+      background-repeat: no-repeat
+      background-size: cover
+      background-position: center
+      width: 100%
+      height: 100%
+
+    &-mobile
+      +above($breakpoint-slideshow-images)
+        display: none
+    &-desktop
+      +below($breakpoint-slideshow-images)
+        display: none
+
   &-dots
     position: absolute
     left: 0
@@ -75,6 +88,7 @@ $title_bg = rgba(#fff, 0.88)
     +below($breakpoint-slideshow)
       bottom: 4em
 
+  // ToDo: see how this will work for translations - maybe it's more practical to use an SVG here instead of all this?
   // Note: for the title to have a semi-transparent background,
   // we're limited by the font properties because the inline
   // backgrounds can't overlap so we need to get the line-height
@@ -85,21 +99,23 @@ $title_bg = rgba(#fff, 0.88)
     .header-slideshow & // Extra specificity needed to override generic headings
       position: relative
       line-height: 1.27
-      padding-right: 1rem // To match inline text below
+      padding-right: 1.5rem // To match inline text below
       margin-left: 0
 
       &:before
-        top: 0.6em
-        left: -0.5em
-        width: 0.7em
+        top: 40px
+        left: -36px
+        width: 48px
+        height: 5px
 
       // For multi-line padded text effect
       // Ref: https://css-tricks.com/multi-line-padded-text/
       &-text
-        @apply text-3xl
+        font-size: 68px fixed // Don't use REMs because we will scale this later with JS
         box-decoration-break: clone
+        white-space: nowrap
         display: inline
-        padding: 0 1rem
+        padding: 0 1.5rem
         background-color: $title_bg
 
 
@@ -112,5 +128,7 @@ $title_bg = rgba(#fff, 0.88)
     top: 100%
     left: 0
     width: 100%
-    font-size: 23px
-    padding: 0 1rem 0.5em
+    font-size: 23px fixed
+    letter-spacing: 0.15px
+    white-space: nowrap
+    padding: 0 1.5rem 0.5em

diff --git a/wp-content/themes/CCV/yarn.lock b/wp-content/themes/CCV/yarn.lock
index df2ee50f363e2bf7617e9603f16e815a145273b0..9407d5cd0177c000afbc43a38da59ea7e8dca6fe 100644 (file)
--- a/wp-content/themes/CCV/yarn.lock
+++ b/wp-content/themes/CCV/yarn.lock
@@ -4748,6 +4748,11 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.isfinite@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"