From a2fe9117899ee3308cf43e1917bdd40216392a47 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 29 Oct 2019 18:01:34 +0100 Subject: [PATCH] WIP #3053 --- .../src/Elementor/Widgets/HeaderSlideshow.php | 25 ++++--- .../assets/scripts/header-slideshow.js | 32 ++++++++- .../assets/styles/components/header.styl | 6 +- .../styles/widgets/header-slideshow.styl | 65 ++++++++++++++----- 4 files changed, 99 insertions(+), 29 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 6a3e08f..77618b3 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php @@ -135,21 +135,26 @@ class HeaderSlideshow extends Widget_Base {
- -
+ $image): ?> +
+
- + +
+ +

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 886de4f..a6e8379 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js +++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js @@ -5,13 +5,43 @@ // 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); + const slideInterval = setInterval(nextSlide, 4000); let currentSlide = 0; + initSlideshow(); + + // Todo: handle resizing here for small screens - scale content (origin: bottom left) so it always fits... + // Todo: when scaling, set content div to 100% and title element to display inline-block to keep correct appearance. + + + function initSlideshow() { + let slideshowDots = document.createElement('ul'); + slideshowDots.className = 'header-slideshow-dots'; + + // Build dots navigation + slides.each(function (index) { + let item = document.createElement('li'); + item.setAttribute('data-slide', index); + if (index === 0) { + item.className = 'active'; + } + slideshowDots.appendChild(item); + }); + + $scope.append(slideshowDots); + + $(document).on('click', '.header-slideshow-dots li', function() { + clearInterval(slideInterval); // Stop autoplay + showSlide($(this).data('slide')); + }); + } + function showSlide(index) { $(slides[currentSlide]).removeClass('showing'); + $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active'); currentSlide = (index + slides.length) % slides.length; $(slides[currentSlide]).addClass('showing'); + $scope.find(`[data-slide="${currentSlide}"]`).addClass('active'); } function nextSlide() { diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl index 4705269..ef10428 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/header.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl @@ -1,7 +1,9 @@ +$breakpoint-slideshow = 1000px + header.site - .header-slideshow-present & + .header-slideshow-present &, .home & // Special case for home page and other pages containing this widget //+above($breakpoint-menu) - +above(1000px) + +above($breakpoint-slideshow) position: absolute top: 0 left: 0 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 7792127..e5f00b5 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 @@ -4,21 +4,26 @@ $title_bg = rgba(#fff, 0.88) position: relative &-sizer - @apply bg-cover bg-center - - &:before - content: '' - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - background-image: linear-gradient(to bottom, #fff 10%, transparent 50%) - z-index: 5 + // White fade for better readability of menu when slideshow is under it + +above($breakpoint-slideshow) + &:before + content: '' + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + 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) + 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 @@ -26,22 +31,49 @@ $title_bg = rgba(#fff, 0.88) height: 100% z-index: 1 opacity: 0 - transition: opacity 0.75s + transition: opacity 1s &.showing opacity: 1 z-index: 2 + &-dots + position: absolute + left: 0 + bottom: 2em + width: 100% + display: flex + align-items: center + justify-content: center + z-index: 15 + + +below($breakpoint-slideshow) + bottom: 1em + + li + @apply bg-purple-dark + display: block + width: 0.8rem + height: @width + border-radius: 50% + margin: 0 0.25em + cursor: pointer + + &.active + @apply bg-pink + + &-content z-index: 10 position: absolute constrain(left, 5vw) constrain(bottom, 10vw) - +below(600px) - position: static - left: 0 - bottom: 0 + .elementor-editor-active &, .elementor-editor-preview & + visibility: visible // Animation doesn't trigger in the editor for some reason so just show it + + +below($breakpoint-slideshow) + bottom: 4em // Note: for the title to have a semi-transparent background, // we're limited by the font properties because the inline @@ -54,6 +86,7 @@ $title_bg = rgba(#fff, 0.88) position: relative line-height: 1.27 padding-right: 1rem // To match inline text below + margin-left: 0 &:before top: 0.6em -- 2.39.5