From 9ef5375bdd16649e80831ed5cb90b49fb6ae7352 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 30 Oct 2019 22:35:09 +0100 Subject: [PATCH] WIP #3053 --- .../src/Elementor/Widgets/HeaderSlideshow.php | 58 +++++++++++++------ wp-content/themes/CCV/package.json | 1 + .../assets/scripts/header-slideshow.js | 36 ++++++++++++ .../styles/widgets/header-slideshow.styl | 44 +++++++++----- wp-content/themes/CCV/yarn.lock | 5 ++ 5 files changed, 113 insertions(+), 31 deletions(-) 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 77618b3..41a8f26 100644 --- 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' => '', + ] + ); + $this->end_controls_section(); } @@ -136,13 +153,18 @@ class HeaderSlideshow extends Widget_Base {
$image): ?> -
-
- +
+ + 0): ?> +
+ - + 0): ?> +
+ +
+
diff --git a/wp-content/themes/CCV/package.json b/wp-content/themes/CCV/package.json index 8db1f7e..000fb9f 100644 --- 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 a6e8379..ce5a668 100644 --- 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 e5f00b5..98fa370 100644 --- 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 df2ee50..9407d5c 100644 --- 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" -- 2.39.5