From fc006ca333d9792dd5a7929ccdf966cf567cf051 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 11 May 2018 18:19:06 +0000
Subject: [PATCH] WIP #1912 @7

---
 .../physioassist/src/Elementor/Setup.php      |  19 ++-
 .../src/Elementor/Widgets/ProfileGrid.php     | 132 ++++++++++++++++++
 wp-content/themes/physioassist/app/setup.php  |  27 ++++
 .../assets/styles/components/headings.styl    |  39 ++++--
 .../assets/styles/widgets/profile-grid.styl   |  56 ++++++++
 .../views/widgets/profile-grid.blade.php      |  37 +++++
 6 files changed, 294 insertions(+), 16 deletions(-)
 create mode 100644 wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl
 create mode 100644 wp-content/themes/physioassist/resources/views/widgets/profile-grid.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 05fc1de4..05b3f92c 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -23,7 +23,23 @@ class Setup {
 
     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
+        // Extend Elementor's heading widget to add a CSS class based on the alignment setting so we can also control the position of the underline
+        add_action( 'elementor/element/heading/section_title/before_section_end', function( $element, $args ) {
+            $elementor = Plugin::instance();
+
+            // Get the align control for updating
+            $control_data = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'align' );
+
+            if (is_wp_error($control_data)) {
+                return;
+            }
+
+            // Add a prefix class so heading will have correct class applied when alignment is changed
+            $control_data['prefix_class'] = 'heading-align-';
+            $element->update_control( 'align', $control_data );
+        }, 10, 2);
+
+        // Todo: consider add a control to the existing heading widget that allows the underline to be disabled (via prefix_class?)
 
     }
 
@@ -33,6 +49,7 @@ class Setup {
 
         $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\ProfileGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
     }
 
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
new file mode 100644
index 00000000..189339f1
--- /dev/null
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class ProfileGrid 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-profile-grid';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Profile Grid', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-archive-posts';
+    }
+
+    // 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' => __( 'Profile Grid', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __( 'Items', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'image',
+                        'label' => __('Image', 'cube'),
+                        'label_block' => true,
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                    [
+                        'name' => 'title',
+                        'label' => __( 'Title', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                    ],
+                    [
+                        '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();
+    }
+    /**
+     * 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');
+
+        $html = \App\template('widgets/profile-grid', compact('items'));
+
+        echo '<div class="profile-grid">'. $html .'</div>';
+    }
+
+}
diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php
index ce1b0067..a705bece 100644
--- a/wp-content/themes/physioassist/app/setup.php
+++ b/wp-content/themes/physioassist/app/setup.php
@@ -130,6 +130,33 @@ add_action('after_setup_theme', function () {
         return "<?= " . __NAMESPACE__ . "\\asset_path({$asset}); ?>";
     });
 
+    /**
+     * Create @image() Blade directive
+     */
+    sage('blade')->compiler()->directive('image', function ($expression) {
+
+        if (empty($expression)) return '';
+
+        // Set default extra parameters (size, attributes)
+        // Not all items will always be passed...
+        // Ref: http://php.net/manual/en/function.list.php#113189
+        // Note: This is extra weird because we're generating PHP code
+        // strings that will be executed later so we can't use variables normally...
+        $defaults = [
+            // 0 index is not included because it will always be set at this point
+            1 => "'full'", // size
+            2 => "[]", // attributes
+        ];
+
+        list($id, $size, $attributes) = array_replace($defaults, explode(', ', $expression));
+
+        return "<?php
+            if (isset($id) && !empty($id)) {
+                echo wp_get_attachment_image($id, $size, false, $attributes);
+            }
+        ?>";
+    });
+
 
     /**
      * Setup Blade SVG library
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl b/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl
index c0f28d36..a377bf71 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/headings.styl
@@ -7,20 +7,29 @@ h1, h2
   font-weight: 700
 
 
-.elementor-widget-heading
-  .elementor-heading-title
-    color: $colors.headings
-    font-family: $font
-    font-size: $font-size-large
-    white-space: pre-wrap
 
-    +below('large')
-      font-size: $font-size-medium
+.elementor-heading-title
+  color: $colors.headings
+  font-family: $font
+  font-size: $font-size-large
+  white-space: pre-wrap
+
+  +below('large')
+    font-size: $font-size-medium
+
+  &:after
+    content: ''
+    display: block
+    margin-top: 0.9em
+    width: 1.88em
+    height: 3px
+    background-color: currentColor
+
+    // Center underline
+    .heading-align-center &
+      margin-left: auto
+      margin-right: auto
 
-    &:after
-      content: ''
-      display: block
-      margin: 0.9em auto 0
-      width: 1.88em
-      height: 3px
-      background-color: currentColor
+    // Right-align underline
+    .heading-align-right &
+      margin-left: auto
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl
new file mode 100644
index 00000000..3bc95180
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl
@@ -0,0 +1,56 @@
+.profile-grid
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  constrain(margin-bottom, -5vw) // Counteract space between rows for the last row
+
+  &-item
+    display: flex
+    flex: 0 1 45%
+    constrain(margin-bottom, 5vw)
+
+  &-image
+    align-self: flex-start
+    width: 35%
+
+  &-text
+    constrain(padding-left, 3.5vw) // Gutter between image and text
+
+  &-title
+    color: $colors.headings
+    font-size: 20px
+    font-weight: 600
+    text-transform: uppercase
+    margin-bottom: 0.8em
+    line-height: 1.2
+
+  &-subtitle
+    color: $colors.sub-headings
+    font-size: 14px
+    font-weight: 600
+    text-transform: uppercase
+    margin-bottom: 1em
+
+  &-body
+    color: $colors.text
+    font-size: 16px
+
+  &-cta
+    display: block
+    color: $colors.headings
+    font-size: 14px
+    font-weight: 600
+    text-transform: uppercase
+    margin-top: 1.4em
+
+    &:hover
+      color: $colors.light-blue
+
+    svg
+      width: 6px
+      height: 10px
+      display: inline-block
+      margin-right: 4px
+
+    path
+      fill: currentColor
diff --git a/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php b/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php
new file mode 100644
index 00000000..0e344cf2
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php
@@ -0,0 +1,37 @@
+@foreach ($items as $item)
+
+  <div class="profile-grid-item">
+    @image($item['image']['id'], 'full', ['class' => 'profile-grid-image'])
+
+    <div class="profile-grid-text">
+
+      <h3 class="profile-grid-title">{{ $item['title'] }}</h3>
+
+      @if ($item['subtitle'])
+        <h4 class="profile-grid-subtitle">{{ $item['subtitle'] }}</h4>
+      @endif
+
+      <div class="profile-grid-body">
+        {!! $item['body'] !!}
+      </div>
+
+      @if (!empty($item['cta_text']) && !empty($item['cta_link']['url']))
+        <a href="{{ $item['cta_link']['url'] }}"
+           class="profile-grid-cta"
+           @if ($item['cta_link']['is_external'])
+            target="_blank" rel="noopener"
+           @endif
+        >
+          @svg('arrow')
+          {{ $item['cta_text'] }}
+        </a>
+      @endif
+
+    </div>
+  </div>
+
+@endforeach
+
+{{--<pre>--}}
+  {{--@php(print_r($items))--}}
+{{--</pre>--}}
-- 
2.39.5