From 1c7e4771c18fb7ec71641068adaa406ce7826ee9 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 28 Oct 2019 17:39:37 +0100 Subject: [PATCH] WIP #3053 --- .../src/Elementor/Widgets/HeaderSlideshow.php | 21 ++++++++++++--- .../resources/assets/images/carousel-next.svg | 1 + .../resources/assets/images/carousel-prev.svg | 1 + .../assets/scripts/header-slideshow.js | 26 +++++++++++++++++++ .../styles/widgets/header-slideshow.styl | 18 +++++++++++++ .../assets/styles/widgets/link-carousel.styl | 22 ++++++++++++++-- .../resources/views/partials/header.blade.php | 5 +++- .../views/widgets/link-carousel.blade.php | 11 +++++--- wp-content/themes/CCV/webpack.mix.js | 1 + 9 files changed, 95 insertions(+), 11 deletions(-) create mode 100644 wp-content/themes/CCV/resources/assets/images/carousel-next.svg create mode 100644 wp-content/themes/CCV/resources/assets/images/carousel-prev.svg create mode 100644 wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js 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 a357e37..6a3e08f 100644 --- 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 {
+ +
+ + - - -
+

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 index 0000000..b08bfe1 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/carousel-next.svg @@ -0,0 +1 @@ + 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 index 0000000..b0ca70a --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/carousel-prev.svg @@ -0,0 +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 new file mode 100644 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 19abb41..7792127 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 @@ -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 af79a43..df0fab8 100644 --- 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 18e2f36..5eeb662 100644 --- 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 @@
- "> + "> 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 45de2f4..a12f2af 100644 --- 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 @@ @endforeach
-
-
+
@svg('carousel-prev', 'stroke-current')
+
@svg('carousel-next', 'stroke-current')

diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js index 2bb517a..c7f649c 100644 --- 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(); -- 2.39.5