From 1402f5236384ded5d815a0253249780600ea1780 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Mon, 16 Mar 2020 18:59:11 +0000 Subject: [PATCH] WIP #3470 @6.75 --- .../physioassist/src/Elementor/Setup.php | 1 + .../src/Elementor/Widgets/BackgroundImage.php | 2 +- .../src/Elementor/Widgets/TextBlock.php | 2 +- .../src/Elementor/Widgets/TextCarousel.php | 250 ++++++++++++++++++ .../physioassist/resources/assets/config.json | 5 +- .../resources/assets/scripts/text-carousel.js | 14 + .../assets/styles/widgets/text-carousel.styl | 27 ++ .../views/widgets/text-carousel.blade.php | 63 +++++ 8 files changed, 361 insertions(+), 3 deletions(-) create mode 100644 wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextCarousel.php create mode 100644 wp-content/themes/physioassist/resources/assets/scripts/text-carousel.js create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/text-carousel.styl create mode 100644 wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php index aee22274..6f87969a 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php @@ -70,6 +70,7 @@ class Setup { $elementor->widgets_manager->register_widget_type( new Widgets\ProfileGrid() ); $elementor->widgets_manager->register_widget_type( new Widgets\ResourceGrid() ); $elementor->widgets_manager->register_widget_type( new Widgets\VideoGallery() ); + $elementor->widgets_manager->register_widget_type( new Widgets\TextCarousel() ); $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() ); } diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php index ef111118..e0d18e54 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php @@ -23,7 +23,7 @@ class BackgroundImage extends Widget_Base { // Elementor interface icon public function get_icon() { - return 'eicon-insert-image'; + return 'eicon-image'; } // Where to display the widget in the Elementor interface diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php index 9c50084f..f904c05b 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php @@ -23,7 +23,7 @@ class TextBlock extends Widget_Base { // Elementor interface icon public function get_icon() { - return 'eicon-align-left'; + return 'eicon-columns'; } // Where to display the widget in the Elementor interface diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextCarousel.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextCarousel.php new file mode 100644 index 00000000..4f25c397 --- /dev/null +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextCarousel.php @@ -0,0 +1,250 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Content', 'cube' ), + ] + ); + + $this->add_control( + 'items', + [ + 'label' => __( 'Items', 'cube' ), + 'type' => Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'title', + 'label' => __( 'Title', 'elementor' ), + 'type' => Controls_Manager::TEXTAREA, + 'placeholder' => __( 'Enter your title', 'elementor' ), + 'default' => '', + ], + [ + 'name' => 'subtitle', + 'label' => __( 'Subtitle', 'cube' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + ], + [ + 'name' => 'body', + 'label' => __('Body', 'cube'), + 'type' => Controls_Manager::WYSIWYG, + 'default' => '', + ], + [ + 'name' => 'cta_text', + 'label' => __('Call to Action text', 'cube'), + 'type' => Controls_Manager::TEXT, + '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 }}}', + ] + ); + + $this->end_controls_section(); + + + $this->start_controls_section( + 'section_formatting', + [ + 'label' => __( 'Colours & Formatting', 'cube' ), + ] + ); + + + $this->add_control( + 'title_color', + [ + 'label' => __( 'Title Colour', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .text-block-title' => 'color: {{VALUE}};', + ], + ] + ); + + + $this->add_control( + 'subtitle_color', + [ + 'label' => __( 'Subtitle Colour', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .text-block-subtitle' => 'color: {{VALUE}};', + ], + ] + ); + + + $this->add_control( + 'body_color', + [ + 'label' => __( 'Body Colour', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .text-block-body' => 'color: {{VALUE}};', + ], + ] + ); + + + $this->add_control( + 'cta_color', + [ + 'label' => __( 'Call to Action Colour', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .text-block-cta' => 'color: {{VALUE}};', + ], + ] + ); + + + $this->add_responsive_control( + 'align', + [ + 'label' => __( 'Alignment', 'elementor' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ + 'title' => __( 'Left', 'elementor' ), + 'icon' => 'fa fa-align-left', + ], + 'center' => [ + 'title' => __( 'Center', 'elementor' ), + 'icon' => 'fa fa-align-center', + ], + 'right' => [ + 'title' => __( 'Right', 'elementor' ), + 'icon' => 'fa fa-align-right', + ], + 'justify' => [ + 'title' => __( 'Justified', 'elementor' ), + 'icon' => 'fa fa-align-justify', + ], + ], + 'default' => '', + 'selectors' => [ + '{{WRAPPER}}' => 'text-align: {{VALUE}}; margin: 0 auto;', + ], + ] + ); + + $this->add_control( + 'max-width', + [ + 'label' => __( 'Maximum Width', 'cube' ), + 'type' => Controls_Manager::SLIDER, + // 'default' => [ + // 'size' => 400, + // ], + 'range' => [ + 'px' => [ + 'min' => 400, + 'max' => 1600, + 'step' => 10, + ], + '%' => [ + 'min' => 0, + 'max' => 100, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .text-block' => 'max-width: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_section(); + } + /** + * 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() { + + $items = $this->get_settings('items'); + + echo \App\template('widgets/text-carousel', compact('items')); + } + +} diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json index 807859a3..9f14bc13 100644 --- a/wp-content/themes/physioassist/resources/assets/config.json +++ b/wp-content/themes/physioassist/resources/assets/config.json @@ -13,6 +13,9 @@ "text-block": [ "./scripts/text-block.js" ], + "text-carousel": [ + "./scripts/text-carousel.js" + ], "video-carousel": [ "./scripts/video-carousel.js" ], @@ -25,7 +28,7 @@ }, "publicPath": "/wp-content/themes/physioassist", "devUrl": "http://physioassist.test", - "proxyUrl": "http://paris.cubedesigners.com:63000", + "proxyUrl": "http://stephen.local:63000", "cacheBusting": "[name]_[hash:8]", "watch": [ "app/**/*.php", diff --git a/wp-content/themes/physioassist/resources/assets/scripts/text-carousel.js b/wp-content/themes/physioassist/resources/assets/scripts/text-carousel.js new file mode 100644 index 00000000..7b6a5d08 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/scripts/text-carousel.js @@ -0,0 +1,14 @@ +// ELEMENTOR Trigger +(function($) { + // Trigger handler when element ready + $(window).on( 'elementor/frontend/init', function() { + // eslint-disable-next-line + elementorFrontend.hooks.addAction('frontend/element_ready/cube-text-carousel.default', function ($scope) { + + // Only trigger if it is a carousel type gallery + if ($scope.hasClass('elementor-widget-cube-text-carousel')) { + $scope.find('.text-carousel').slick(); // Note: settings come from data-attribute in HTML + } + }); + }); +})(jQuery); diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-carousel.styl new file mode 100644 index 00000000..73cc669a --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-carousel.styl @@ -0,0 +1,27 @@ +.text-carousel + + &-item-content + padding: 0 1.75em + text-align: center + + &-title + color: $colors.headings + font-size: 18px + font-weight: 600 + text-transform: uppercase + margin-bottom: 0.8em + line-height: 1.2 + + &-subtitle + font-weight: 600 + margin-bottom: 1.5em + + &-link + position: relative + margin-top: 1.4em + padding-left: 1em + + svg + position: absolute + top: 0.425em + left: 0 diff --git a/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php new file mode 100644 index 00000000..2b0fa4f8 --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php @@ -0,0 +1,63 @@ +{{--TEXT CAROUSEL--}} +@php + $settings = [ + 'slidesToShow' => 4, + 'slidesToScroll' => 1, + 'dots' => count($items) > 4, // Only show dots when there are enough items + 'infinite' => true, + 'responsive' => [ + [ + 'breakpoint' => 1400, + 'settings' => [ + 'slidesToShow' => 3 + ] + ], + [ + 'breakpoint' => 1100, + 'settings' => [ + 'slidesToShow' => 2 + ] + ], + [ + 'breakpoint' => 850, + 'settings' => [ + 'slidesToShow' => 1 + ] + ], + ] + ]; + + $slick = json_encode($settings); + +@endphp + +
+ + @foreach ($items as $item) + +
+
+ +

{{ $item['title'] }}

+ +

{{ $item['subtitle'] }}

+ +
+ {!! $item['body'] !!} +
+ + @if (!empty($item['cta_text'])) + + @svg('arrow') {{ $item['cta_text'] }} + + @endif + +
{{-- .text-carousel-item-content --}} +
{{-- .text-carousel-item --}} + + @endforeach + +
-- 2.39.5