From ad04febb48e04e87eaad0aaf8552cdde488ee0fb Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 29 Sep 2020 20:11:31 +0200 Subject: [PATCH] WIP #3882 @9.5 --- .../Elementor/Widgets/TimelineHorizontal.php | 69 +++--- .../assets/scripts/timeline-horizontal.js | 18 ++ .../styles/widgets/header-slideshow.styl | 2 +- .../styles/widgets/timeline-horizontal.styl | 213 ++++++++++++------ .../widgets/timeline-horizontal.blade.php | 63 ++++-- wp-content/themes/CCV/webpack.mix.js | 1 + 6 files changed, 238 insertions(+), 128 deletions(-) create mode 100644 wp-content/themes/CCV/resources/assets/scripts/timeline-horizontal.js diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php index 78a9627..3925fc9 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php @@ -5,6 +5,7 @@ namespace Cube\Elementor\Widgets; use Elementor\Controls_Manager; use Elementor\Utils; +use function Roots\asset; use function Roots\view; @@ -34,7 +35,18 @@ class TimelineHorizontal extends _Base { * @return array Widget scripts dependencies. */ public function get_script_depends() { - return []; + + wp_register_script( + 'cube-timeline-horizontal', + asset('scripts/timeline-horizontal.js'), + ['jquery', 'swiper'], // Dependencies + null, // Version + true // In footer? + ); + + // Using Swiper because it is already included and heavily used by Elementor + + return [ 'cube-timeline-horizontal' ]; } /** @@ -53,34 +65,20 @@ class TimelineHorizontal extends _Base { ] ); - $this->add_control( - 'image_desktop', - [ - 'label' => __( 'Image pour grands écrans', 'cube' ), - 'type' => Controls_Manager::MEDIA, - 'default' => [ - 'url' => Utils::get_placeholder_image_src(), - ], - ] - ); - - $this->add_control( - 'image_mobile', - [ - 'label' => __( 'Image pour petits écrans', 'cube' ), - 'type' => Controls_Manager::MEDIA, - 'default' => [ - 'url' => Utils::get_placeholder_image_src(), - ], - ] - ); - $this->add_control( 'items', [ 'label' => __('Items', 'cube'), 'type' => Controls_Manager::REPEATER, 'fields' => [ + [ + 'name' => 'image', + 'label' => __('Image', 'cube'), + 'type' => Controls_Manager::MEDIA, + 'default' => [ + 'url' => Utils::get_placeholder_image_src(), + ], + ], [ 'name' => 'title', 'label' => __('Title', 'cube'), @@ -89,22 +87,12 @@ class TimelineHorizontal extends _Base { 'default' => '', ], [ - 'name' => 'cta_text', - 'label' => __('Call to Action text', 'cube'), - 'type' => Controls_Manager::TEXT, + 'name' => 'content', + 'label' => __('Contenu', 'cube'), + 'type' => Controls_Manager::WYSIWYG, 'label_block' => true, 'default' => '' ], - [ - 'name' => 'cta_link', - 'label' => __('Call to Action link', 'cube'), - 'type' => Controls_Manager::URL, - 'default' => [ - 'url' => '', - 'is_external' => false, - ], - 'show_external' => true - ] ], 'title_field' => '{{{ title }}}', ] @@ -122,10 +110,13 @@ class TimelineHorizontal extends _Base { * @access protected */ protected function render() { - $image_desktop = $this->get_settings('image_desktop'); - $image_mobile = $this->get_settings('image_mobile'); $items = $this->get_settings('items'); - echo view('widgets/timeline-horizontal', compact('image_desktop', 'image_mobile', 'items')); + + foreach ($items as $item) { + $item['content'] = $this->parse_text_editor($item['content']); + } + + echo view('widgets/timeline-horizontal', compact('items')); } } diff --git a/wp-content/themes/CCV/resources/assets/scripts/timeline-horizontal.js b/wp-content/themes/CCV/resources/assets/scripts/timeline-horizontal.js new file mode 100644 index 0000000..e15d0b1 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/scripts/timeline-horizontal.js @@ -0,0 +1,18 @@ +// ELEMENTOR Trigger +(function($) { + $(window).on('elementor/frontend/init', function () { + elementorFrontend.hooks.addAction('frontend/element_ready/cube-timeline-horizontal.default', function ($scope) { + const elementSelector = `[data-id="${$scope.data('id')}"] .timeline-horizontal`; + const swiperSettings = $(elementSelector).data('swiper'); // Get parameters from data-swiper attribute in HTML + + // Custom paging bullets + swiperSettings.pagination.renderBullet = function (index, className) { + // In loop mode, Swiper duplicates slides so the collection really starts from 1 instead of 0 + const title = this.slides[index + 1 ].dataset.title; + return '
' + (index + 1) +''+ title +'
'; + }; + + const swiper = new Swiper(elementSelector, swiperSettings); + }); + }); +})(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 da06e27..6bab9d4 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 @@ -80,7 +80,7 @@ $title_bg = rgba(#fff, 0.88) &-content .header-slideshow & // Need some extra specificity to override H1 CSS @apply text-purple-dark px-5 py-3 - background: rgba(#fff, 0.8) + background: $title_bg width: 50% // Size ratio for intermediate screens max-width: 870px z-index: 10 diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl index bdba007..401e59d 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl @@ -1,72 +1,153 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view .timeline-horizontal - +below($breakpoint-timeline-horizontal) - @apply flex flex-row - // Scale all em children - font-size: 22px fixed - - +below(550px) - font-size: 18px fixed - +below(450px) - font-size: 14px fixed - +below(380px) - font-size: 12px fixed - - &-items - @apply flex justify-between items-start - @apply mb-6 - - +below($breakpoint-timeline-horizontal) - @apply flex-col items-center - flex: 1 1 75% - margin-bottom: 3em - - > * + * - margin-top: 1.5em + .swiper-wrapper + @apply items-center &-item - @apply flex flex-col justify-center items-center - @apply text-center - flex-basis: 22% // ~1/5 columns to match horizontal image - max-width: 345px - - +below(1100px) - flex-basis: 25% - - &-number - @apply flex items-center justify-center - @apply bg-purple-dark rounded-full mb-2 - @apply text-white - font-size: (54/22)em // Relative units so size can be controlled from parent - width: 1.5em - height: @width - - +below(1280px) - font-size: (36/22)em - - &-title - @apply font-normal - font-size: (30/22)em - - +below(1280px) - font-size: 1em - - &-btn - font-size: (18/22)em - padding: 0.5em 1em !important - - &-image - - &-desktop - +below($breakpoint-timeline-horizontal) - display: none - - &-mobile - width: 100% - max-width: 250px !important; - padding-left: 2em; - - +above($breakpoint-timeline-horizontal) - display: none + @apply bg-white flex items-center + horizontal-spacing(12.5vw) + + &-image-wrapper + display: flex + flex: 1 1 40% + align-items: center + justify-content: center + constrain(margin-right, 5vw) + + &-content + flex: 1 1 60% + + a + @apply text-pink + + // Timeline Pagination + &-pagination + position: relative + display: flex + justify-content: space-between + align-items: flex-start + width: 80% !important + left: 10% !important + padding: 0 + margin: 0 + z-index: 1 + + // Timeline horizontal line + &:before + content: '' + position: absolute + top: r(32px) + left: 0 + right: 0 + height: r(10px) + background: #EDEDF4 + z-index: -1 + + + &-bullet + @apply font-display font-normal + font-size: 24px + display: flex + flex-direction: column + justify-content: center + align-items: center + width: auto + height: auto + border-radius: 0 + background: transparent + opacity: 1 + text-transform: uppercase + outline: none + position: relative + transition: color 0.3s + + &:first-child:before + content: '' + background: #fff + position: absolute + width: 50% + height: 100% + left: 0 + top: 0 + z-index: 0 + + &:last-child:before + content: '' + background: #fff + position: absolute + width: 50% + height: 100% + right: 0 + top: 0 + z-index: 0 + + .bullet + height: r(68px) + width: @height + line-height: @height + font-size: 52px + display: inline-block + border-radius: 50% + margin-right: 0.5em + margin-bottom: 0.5em + text-align: center + color: transparent + background: transparent + position: relative + transition: all 0.15s + z-index: 1 + + // Non-active timeline node + &:before + content: '' + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + width: r(32px) + height: @width + background: #fff + border-radius: 50% + border: r(10px) solid #EDEDF4 + z-index: 0 + transition: opacity 0.15s + + &-title + display: block + text-align: center + max-width: 8em + z-index: 1 + + &-active + @apply font-bold text-teal bg-transparent + + .bullet + @apply text-white bg-teal + + &:before + opacity: 0 + + + // Navigation Arrows + &-prev, &-next + position: absolute + top: 50% + transform: translateY(-50%) + z-index: 10 + stroke: currentColor + transition: color 0.25s + outline: none + + &:hover + @apply text-pink + + +below(900px) + svg + width: 20px + + &-prev + constrain(left, 5vw) + &-next + constrain(right, 5vw) diff --git a/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php b/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php index 7d68166..b588ab2 100644 --- a/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php +++ b/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php @@ -1,32 +1,51 @@ {{-- TIMELINE --}} -
-
+@php + $settings = [ + 'slidesPerView' => 1, + 'loop' => true, + //'effect' => 'fade', // TODO: try to make this work properly so slides are all the same height + 'touchEventsTarget' => 'wrapper', // Fix pagination links sometimes going to wrong place + 'pagination' => [ + 'el' => '.timeline-horizontal-pagination', + 'modifierClass' => 'timeline-horizontal-pagination-', + 'bulletClass' => 'timeline-horizontal-pagination-bullet', + 'bulletActiveClass' => 'timeline-horizontal-pagination-bullet-active', + 'clickable' => true, + // renderBullet => NOTE: this is handled in timeline-horizontal.js since we can't easily encode a JS function in JSON. + ], + 'navigation' => [ + 'nextEl' => '.timeline-horizontal-next', + 'prevEl' => '.timeline-horizontal-prev', + ], + ]; + + $swiper = json_encode($settings); + +@endphp + +
+
+
@foreach ($items as $item) -
+
-
- {{ $loop->iteration }} -
+ {{-- TODO: mobile title +
+ {{ $loop->iteration }} +
+ --}} -
- {{ $item['title'] }} +
+ @image($item['image']['id'], 'full', ['class' => 'timeline-horizontal-item-image'])
- @if ($item['cta_text']) - @php - $target = $item['cta_link']['is_external'] ? ' target="_blank"' : ''; - $rel = $item['cta_link']['nofollow'] ? ' rel="nofollow"' : ''; - @endphp - - {{ $item['cta_text'] }} - - @endif - +
+

{{ $item['title'] }}

+ {!! $item['content'] !!} +
@endforeach
-
- @image($image_desktop['id'], 'full', ['class' => 'timeline-horizontal-image-desktop']) - @image($image_mobile['id'], 'full', ['class' => 'timeline-horizontal-image-mobile']) -
+
@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 b9c990a..35a9dda 100644 --- a/wp-content/themes/CCV/webpack.mix.js +++ b/wp-content/themes/CCV/webpack.mix.js @@ -72,6 +72,7 @@ mix.stylus(src`styles/components/lity-lightbox.styl`, 'styles/lity.css', stylusC mix.js(src`scripts/app.js`, 'scripts') .js(src`scripts/consultation.js`, 'scripts') .js(src`scripts/header-slideshow.js`, 'scripts') + .js(src`scripts/timeline-horizontal.js`, 'scripts') .js(src`scripts/link-carousel.js`, 'scripts') .js(src`scripts/testimonial-carousel.js`, 'scripts') .js(src`scripts/customizer.js`, 'scripts') -- 2.39.5