From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 10 May 2018 17:00:48 +0000 (+0000)
Subject: WIP #1912 @7
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b94b686ac0c4a45a850301ebf099d672c78d8ff2;p=physioassist-wordpress.git

WIP #1912 @7
---

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index b60afb4d..05fc1de4 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -7,6 +7,10 @@ use Elementor\Plugin;
 class Setup {
 
     public function register() {
+
+        // Customise Elementor widgets
+        $this->register_customisations();
+
         // Register widgets with Elementor
         add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']);
 
@@ -14,7 +18,13 @@ class Setup {
         add_action('elementor/frontend/after_register_scripts', [$this, 'register_scripts']);
 
         // Add element category in editor panel
-        add_action('elementor/init', [$this, 'register_category']);
+        //add_action('elementor/init', [$this, 'register_category']);
+    }
+
+    public function register_customisations() {
+
+        // ToDo: customise heading widget to add prefix_class for the alignment in order to control position of underline when heading is centred vs left aligned
+
     }
 
     public function register_widgets() {
@@ -22,6 +32,7 @@ class Setup {
         $elementor = Plugin::$instance;
 
         $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\HeroBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
     }
 
@@ -30,16 +41,18 @@ class Setup {
         // Widgets\Carousel::register_scripts();
     }
 
-    public function register_category() {
-
-        Plugin::$instance->elements_manager->add_category(
-            'physioassist-elements',
-            [
-                'title' => __( 'PhysioAssist Custom Elements', 'physioassist' ),
-                'icon' => 'fa fa-plug', // default icon
-            ],
-            1 // position
-        );
-    }
+    // Ref: https://developers.elementor.com/widget-categories/
+    // Now using standard 'theme-elements' category in favour of this one
+//    public function register_category() {
+//
+//        Plugin::$instance->elements_manager->add_category(
+//            'physioassist-elements',
+//            [
+//                'title' => __( 'PhysioAssist Custom Elements', 'physioassist' ),
+//                'icon' => 'fa fa-plug', // default icon
+//            ],
+//            1 // position
+//        );
+//    }
 
 }
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 fa2b51b4..75f135ea 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php
@@ -28,7 +28,7 @@ class BackgroundImage extends Widget_Base {
 
     // Where to display the widget in the Elementor interface
     public function get_categories() {
-        return [ 'physioassist-elements' ];
+        return [ 'theme-elements' ];
     }
 
     /**
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
new file mode 100644
index 00000000..935fa5c2
--- /dev/null
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
@@ -0,0 +1,276 @@
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class HeroBlock extends Widget_Base {
+
+    protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-hero';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Hero Block', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-info-box';
+    }
+
+    // Where to display the widget in the Elementor interface
+    public function get_categories() {
+        return [ 'theme-elements' ];
+    }
+
+    /**
+     * List of scripts the widget depends on.
+     * Used to set scripts dependencies required to run the widget.
+     *
+     * @since 1.0.0
+     * @access public
+     * @return array Widget scripts dependencies.
+     */
+    public function get_script_depends() {
+        return [];
+    }
+    /**
+     * Register the widget controls.
+     * Adds different input fields to allow the user to change and customize the widget settings.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _register_controls() {
+
+        $this->start_controls_section(
+            'section_content',
+            [
+                'label' => __( 'Hero Block', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'subtitle',
+            [
+                'label' => __( 'Subtitle', 'cube' ),
+                'type' => Controls_Manager::TEXT,
+                'label_block' => true,
+            ]
+        );
+
+        $this->add_control(
+            'title',
+            [
+                'label' => __( 'Title', 'elementor' ),
+                'type' => Controls_Manager::TEXTAREA,
+                'placeholder' => __( 'Enter your title', 'elementor' ),
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'body',
+            [
+                'label' => __('Body', 'cube'),
+                'type' => Controls_Manager::WYSIWYG,
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'cta_text',
+            [
+                'label' => __('Call to Action text', 'cube'),
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $this->add_control(
+            'cta_link',
+            [
+                'label' => __('Call to Action link', 'cube'),
+                'type' => Controls_Manager::URL,
+                'default' => [
+                    'url' => '',
+                    'is_external' => false,
+                ],
+                'show_external' => true
+            ]
+        );
+        
+        $this->add_control(
+			'image',
+			[
+				'label' => __( 'Background Image', 'elementor' ),
+				'type' => Controls_Manager::MEDIA,
+				'default' => [
+					'url' => Utils::get_placeholder_image_src(),
+				],
+			]
+		);
+        
+        $this->end_controls_section();
+
+        $this->start_controls_section(
+            'section_text_sizes',
+            [
+                'label' => __( 'Text Sizing', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'max_width',
+            [
+                'label' => __( 'Maximum Width', 'cube' ),
+                'type' => Controls_Manager::SLIDER,
+                'range' => [
+                    'px' => [
+                        'min' => 400,
+                        'max' => 1600,
+                        'step' => 10,
+                    ],
+                    '%' => [
+                        'min' => 0,
+                        'max' => 100,
+                    ],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .hero-block-content' => 'max-width: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+
+
+        // Shared properties for text sizing fields
+        $text_sizing_settings = [
+            'type' => Controls_Manager::SLIDER,
+            'size_units' => [ 'px', 'em', 'rem' ],
+            'range' => [
+                'px' => [
+                    'min' => 1,
+                    'max' => 200,
+                ],
+            ],
+        ];
+
+
+        $this->add_responsive_control(
+            'subtitle_text_size',
+            [
+                'label' => __( 'Subtitle', 'cube' ),
+                'selectors' => [
+                    '{{WRAPPER}} .hero-block-subtitle' => 'font-size: {{SIZE}}{{UNIT}};',
+                ],
+            ] + $text_sizing_settings
+        );
+
+        $this->add_responsive_control(
+            'title_text_size',
+            [
+                'label' => __( 'Title', 'cube' ),
+                'selectors' => [
+                    '{{WRAPPER}} .hero-block-title' => 'font-size: {{SIZE}}{{UNIT}};',
+                ],
+            ] + $text_sizing_settings
+        );
+
+        $this->add_responsive_control(
+            'body_text_size',
+            [
+                'label' => __( 'Body', 'cube' ),
+                'selectors' => [
+                    '{{WRAPPER}} .hero-block-body' => 'font-size: {{SIZE}}{{UNIT}};',
+                ],
+            ] + $text_sizing_settings
+        );
+
+        $this->add_responsive_control(
+            'cta_text_size',
+            [
+                'label' => __( 'Call To Action', 'cube' ),
+                'selectors' => [
+                    '{{WRAPPER}} .hero-block-cta' => 'font-size: {{SIZE}}{{UNIT}};',
+                ],
+            ] + $text_sizing_settings
+        );
+
+        $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() {
+
+        $subtitle = $this->get_settings('subtitle');
+        $title = $this->get_settings('title');
+        $body = $this->parse_text_editor($this->get_settings('body'));
+        $cta_text = $this->get_settings('cta_text');
+        $cta_link = $this->get_settings('cta_link');
+        $image = $this->get_settings('image');
+
+        // When this element is present, add a class to the body so the header can be styled differently (inverted colours)
+        add_filter('body_class', function($classes) {
+            $classes[] = 'hero-header';
+            return $classes;
+        });
+
+        // CSS Classes for elements
+        $this->add_render_attribute('subtitle', 'class', ['hero-block-subtitle']);
+        $this->add_render_attribute('title', 'class', ['hero-block-title']);
+        $this->add_render_attribute('body', 'class', ['hero-block-body']);
+        $this->add_render_attribute('cta_text', 'class', ['hero-block-cta']);
+        $this->add_render_attribute('image', 'class', ['hero-block-image']);
+
+        // Add image src attribute
+        $this->add_render_attribute('image', 'src', [$image['url']]);
+
+        // Handle CTA link
+        if ( ! empty( $cta_link['url'] ) ) {
+            $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] );
+
+            if ( $cta_link['is_external'] ) {
+                $this->add_render_attribute( 'cta_text', 'target', '_blank' );
+            }
+
+            if ( $cta_link['nofollow'] ) {
+                $this->add_render_attribute( 'cta_text', 'rel', 'nofollow' );
+            }
+        }
+
+        // Bail out if image not present
+        if (empty($image['url'])) {
+            echo '<h3>Warning: Hero image must be set</h3>';
+            return false;
+        }
+
+        // Rendered content
+        echo '<div class="hero-block">';
+        echo '<div class="hero-block-inner">';
+        echo "<img {$this->get_render_attribute_string('image')}>";
+        echo '<div class="hero-block-content">';
+        if (!empty($subtitle)) echo "<h3 {$this->get_render_attribute_string('subtitle')}>$subtitle</h3>";
+        if (!empty($title)) echo "<h2 {$this->get_render_attribute_string('title')}>$title</h2>";
+        if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
+        if (!empty($cta_text)) {
+            echo "<a {$this->get_render_attribute_string('cta_text')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text</a>";
+        }
+        echo '</div>'; // .hero-block-content
+        echo '</div>'; // .hero-block-inner
+        echo '</div>'; // .hero-block
+    }
+}
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 a8937ca4..e83f9b63 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
@@ -28,7 +28,7 @@ class TextBlock extends Widget_Base {
 
     // Where to display the widget in the Elementor interface
     public function get_categories() {
-        return [ 'physioassist-elements' ];
+        return [ 'theme-elements' ];
     }
 
     /**
diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
index 97176a77..4edc1310 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700')
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700')
 
 html
   box-sizing: border-box
diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl
index daed449d..b97c1c34 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl
@@ -40,9 +40,9 @@ header.site
     horizontal-spacing()
     position: relative
 
-    // When on the home page, the header is absolutely positioned
-    // so it will sit on top of the hero image...
-    .home &
+    // When header is transparent, position absolutely
+    // so it will sit on top of the content below...
+    .template-transparent-header &
       position: absolute
       width: 100%
 
diff --git a/wp-content/themes/physioassist/resources/assets/styles/pages/home.styl b/wp-content/themes/physioassist/resources/assets/styles/pages/home.styl
index 7a5d4ab8..8b137891 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/pages/home.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/pages/home.styl
@@ -1,2 +1 @@
-.home-hero
-  background-image: linear-gradient(to right, #0b4a70 0%, #0b4a70 50%, #d3ebf6 50%, #d3ebf6 100%)
+
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
new file mode 100644
index 00000000..be711e16
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
@@ -0,0 +1,57 @@
+.hero-block
+  font-smoothing()
+  background-image: linear-gradient(to right, #0b4a70 0%, #0b4a70 50%, #d3ebf6 50%, #d3ebf6 100%)
+  color: #fff
+
+  &-inner
+    center()
+    position: relative
+
+  &-image
+    display: block
+    margin: 0 auto
+
+  &-content
+    position: absolute
+    top: 50%
+    transform: translateY(-50%)
+    constrain(left, 10vw)
+    max-width: 50%
+
+  &-subtitle
+    font-smoothing()
+    text-transform: uppercase
+    font-size: 18px
+    font-weight: 600
+    color: #fff
+    margin-bottom: 20px
+
+  &-title
+    color: currentColor
+    font-size: 44px
+    margin-bottom: 0.5em
+
+  &-body
+    font-size: 16px
+    font-weight: 500
+    line-height: 1.5
+
+  &-cta
+    display: block
+    text-transform: uppercase
+    font-size: 14px
+    font-weight: 600
+    color: #fff
+    margin-top: 30px
+
+    &:hover
+      color: $colors.light-blue
+
+    svg
+      width: 6px
+      height: 10px
+      display: inline-block
+      margin-right: 8px
+
+    path
+      fill: currentColor