From ff1d89a7d2db1e4f2fab3f7cfeece5c43eb87ca9 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 20 Nov 2019 18:54:08 +0100 Subject: [PATCH] WIP #3053 --- .../mu-plugins/cube/src/Elementor/Setup.php | 1 + .../Elementor/Widgets/TestimonialCarousel.php | 110 ++++++++++++++++++ .../cube/src/Elementor/Widgets/TextBlock.php | 10 +- .../assets/images/logo-doctoralia.svg | 5 + .../CCV/resources/assets/images/star.svg | 3 + .../assets/scripts/testimonial-carousel.js | 10 ++ .../assets/styles/components/mmenu.styl | 6 +- .../styles/widgets/testimonial-carousel.styl | 29 +++++ .../assets/styles/widgets/text-block.styl | 15 +++ .../widgets/testimonial-carousel.blade.php | 43 +++++++ wp-content/themes/CCV/webpack.mix.js | 1 + 11 files changed, 225 insertions(+), 8 deletions(-) create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/TestimonialCarousel.php create mode 100644 wp-content/themes/CCV/resources/assets/images/logo-doctoralia.svg create mode 100644 wp-content/themes/CCV/resources/assets/images/star.svg create mode 100644 wp-content/themes/CCV/resources/assets/scripts/testimonial-carousel.js create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/testimonial-carousel.styl create mode 100644 wp-content/themes/CCV/resources/views/widgets/testimonial-carousel.blade.php diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php index 9a71741..9e6c992 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php @@ -35,6 +35,7 @@ class Setup { $elementor->widgets_manager->register_widget_type( new Widgets\HeaderSlideshow() ); $elementor->widgets_manager->register_widget_type( new Widgets\NewsBanner() ); $elementor->widgets_manager->register_widget_type( new Widgets\LinkCarousel() ); + $elementor->widgets_manager->register_widget_type( new Widgets\TestimonialCarousel() ); $elementor->widgets_manager->register_widget_type( new Widgets\PictoGrid() ); $elementor->widgets_manager->register_widget_type( new Widgets\PhotoGrid() ); $elementor->widgets_manager->register_widget_type( new Widgets\PeopleGrid() ); diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TestimonialCarousel.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TestimonialCarousel.php new file mode 100644 index 0000000..27a19aa --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TestimonialCarousel.php @@ -0,0 +1,110 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Testimonial Carousel', 'cube' ), + ] + ); + + $this->add_control( + 'testimonials', + [ + 'label' => __( 'Testimonials', 'cube' ), + 'type' => Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'name', + 'label' => __( 'Name', 'cube' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + 'default' => '', + ], + [ + 'name' => 'testimonial', + 'label' => __( 'Testimonial', 'cube' ), + 'type' => Controls_Manager::TEXTAREA, + 'label_block' => true, + ], + [ + 'name' => 'notes', + 'label' => __( 'Notes', 'cube' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + ], + ], + 'title_field' => '{{{ name }}}', + ] + ); + $this->end_controls_section(); + + $this->common_controls(); + } + /** + * Render the widget output on the frontend. + * Written in PHP and used to generate the final HTML. + * + * @since 1.0.0 + * @access protected + */ + protected function render() { + $testimonials = $this->get_settings('testimonials'); + echo view('widgets/testimonial-carousel', compact('testimonials')); + } +} diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php index 19b9a28..c2fb95a 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php @@ -153,6 +153,7 @@ class TextBlock extends _Base { 'title' => __( 'Center', 'elementor' ), 'icon' => 'fa fa-align-center', ], + /* 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', @@ -161,11 +162,10 @@ class TextBlock extends _Base { 'title' => __( 'Justified', 'elementor' ), 'icon' => 'fa fa-align-justify', ], + */ ], - 'default' => '', - 'selectors' => [ - '{{WRAPPER}}' => 'text-align: {{VALUE}}; margin: 0 auto;', - ], + 'default' => 'left', + 'prefix_class' => 'text-block-align-', ] ); @@ -189,7 +189,7 @@ class TextBlock extends _Base { ], ], 'selectors' => [ - '{{WRAPPER}} .text-block' => 'max-width: {{SIZE}}{{UNIT}};', + '{{WRAPPER}} .text-block' => 'max-width: {{SIZE}}{{UNIT}}; margin-left: auto; margin-right: auto;', ], ] ); diff --git a/wp-content/themes/CCV/resources/assets/images/logo-doctoralia.svg b/wp-content/themes/CCV/resources/assets/images/logo-doctoralia.svg new file mode 100644 index 0000000..0ac43de --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/logo-doctoralia.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/CCV/resources/assets/images/star.svg b/wp-content/themes/CCV/resources/assets/images/star.svg new file mode 100644 index 0000000..39d9723 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/CCV/resources/assets/scripts/testimonial-carousel.js b/wp-content/themes/CCV/resources/assets/scripts/testimonial-carousel.js new file mode 100644 index 0000000..97967f9 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/scripts/testimonial-carousel.js @@ -0,0 +1,10 @@ +// ELEMENTOR Trigger +(function($) { + $(window).on('elementor/frontend/init', function () { + elementorFrontend.hooks.addAction('frontend/element_ready/cube-testimonial-carousel.default', function ($scope) { + const elementSelector = `[data-id="${$scope.data('id')}"] .testimonial-carousel`; + const swiperSettings = $(elementSelector).data('swiper'); // Get parameters from data-swiper attribute in HTML + const swiper = new Swiper(elementSelector, swiperSettings); + }); + }); +})(jQuery); diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl index 88aa462..bb06096 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl @@ -60,11 +60,11 @@ $menu-header-height = 90px a @apply font-display font-medium subpixel-antialiased display: flex - padding-left: 1em + padding: 1em font-size: inherit - //img - // height: 20px + img + width: 24px // Sibling selector to add margin above first normal menu item + .menu-item diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/testimonial-carousel.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/testimonial-carousel.styl new file mode 100644 index 0000000..d8ccd6d --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/testimonial-carousel.styl @@ -0,0 +1,29 @@ +.testimonial-carousel + + &-item + @apply text-center + //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 + + &-name + font-style: italic + margin-bottom: 0 !important + + &-text + font-style: italic + margin-bottom: 2em + + &-pagination + @apply text-center + + &-dot + @apply bg-purple-dark rounded-full inline-block + width: r(18px) + height: @width + margin: 0 r(6.5px) + + &-dot-active + @apply bg-pink diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl index eb95eac..5e6894c 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl @@ -10,6 +10,9 @@ horizontal-spacing(5vw, margin) .text-block + .text-block-align-center & + text-align: center + > * + * // Automatic spacing between direct child elements margin-top: 1.5em @@ -17,6 +20,18 @@ @apply text-2xl antialiased white-space: pre-line + // When text is centred, dash on left should go under the text instead + .text-block-align-center & + padding-bottom: 0.75em + margin-bottom: @padding-bottom + + &:before + top: auto + bottom: 0 + left: 50% + transform: translateX(-50%) + + +below(1150px) white-space: normal // Avoid strange gaps caused by pre-line breaks wrapping font-size: 4.25vw // Using vw units so headings scale instead of wrapping further diff --git a/wp-content/themes/CCV/resources/views/widgets/testimonial-carousel.blade.php b/wp-content/themes/CCV/resources/views/widgets/testimonial-carousel.blade.php new file mode 100644 index 0000000..a25eacf --- /dev/null +++ b/wp-content/themes/CCV/resources/views/widgets/testimonial-carousel.blade.php @@ -0,0 +1,43 @@ +{{-- TESTIMONIALS CAROUSEL --}} +@php + $settings = [ + 'slidesPerView' => 1, + 'loop' => true, + 'autoplay' => [ + 'delay' => '5000', + ], + 'pagination' => [ + 'el' => '.testimonial-carousel-pagination', + 'type' => 'bullets', + 'bulletElement' => 'span', + 'bulletClass' => 'testimonial-carousel-pagination-dot', + 'bulletActiveClass' => 'testimonial-carousel-pagination-dot-active', + 'clickable' => true, + ], + ]; + + $swiper = json_encode($settings); + +@endphp + +
+
+ @foreach ($testimonials as $testimonial) +
+ +
+ @for($i = 1; $i <= 5; $i++) + star + @endfor +
+

"{{ trim($testimonial['testimonial']) }}"

+

{{ $testimonial['name'] }}

+

{{ $testimonial['notes'] }}

+
+ @endforeach +
+ + Doctoralia + +
+
diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js index b2de501..e11826b 100644 --- a/wp-content/themes/CCV/webpack.mix.js +++ b/wp-content/themes/CCV/webpack.mix.js @@ -46,6 +46,7 @@ mix.stylus(src`styles/app.styl`, 'styles', { mix.js(src`scripts/app.js`, 'scripts') .js(src`scripts/header-slideshow.js`, 'scripts') .js(src`scripts/link-carousel.js`, 'scripts') + .js(src`scripts/testimonial-carousel.js`, 'scripts') .js(src`scripts/customizer.js`, 'scripts') .extract(); -- 2.39.5