From 731e4aed50da7e278376c6643ae219cf52d8bdf2 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Tue, 15 May 2018 16:01:57 +0000
Subject: [PATCH] WIP #1912 @3

---
 .../physioassist/src/Elementor/Setup.php      | 21 ++++++++
 .../src/Elementor/Widgets/ProfileGrid.php     | 50 ++++++++++++++++++-
 .../assets/styles/common/utilities.styl       |  3 ++
 .../assets/styles/widgets/toggle.styl         | 20 ++++++++
 4 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/toggle.styl

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index 05b3f92c..ffd075f3 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -23,6 +23,7 @@ class Setup {
 
     public function register_customisations() {
 
+        //--- Heading Widget
         // 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();
@@ -41,6 +42,26 @@ class Setup {
 
         // Todo: consider add a control to the existing heading widget that allows the underline to be disabled (via prefix_class?)
 
+
+        //--- Toggle Widget
+        // Override default icons
+        add_action( 'elementor/element/toggle/section_toggle/before_section_end', function( $element, $args ) {
+            $elementor = Plugin::instance();
+            $icon_control = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'icon' );
+            $icon_active_control = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'icon_active' );
+
+            if (is_wp_error($icon_control) || is_wp_error($icon_active_control)) {
+                return;
+            }
+
+            $icon_control['default'] = 'fa fa-chevron-right';
+            $element->update_control( 'icon', $icon_control );
+
+            $icon_active_control['default'] = 'fa fa-chevron-down';
+            $element->update_control( 'icon_active', $icon_active_control );
+        }, 10, 2);
+
+
     }
 
     public function register_widgets() {
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
index 189339f1..9da66a65 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php
@@ -9,7 +9,7 @@ use Elementor\Utils;
 
 class ProfileGrid extends Widget_Base {
 
-    protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
+    protected $_has_template_content = true;
 
     // Widget name / ID
     public function get_name() {
@@ -129,4 +129,52 @@ class ProfileGrid extends Widget_Base {
         echo '<div class="profile-grid">'. $html .'</div>';
     }
 
+    /**
+     * Render widget output in the editor.
+     *
+     * Written as a Backbone JavaScript template and used to generate the live preview.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _content_template() {
+        ?>
+        <div class="profile-grid">
+            <#
+                if ( settings.items ) {
+
+                _.each( settings.items, function( item, index ) {
+                #>
+                <div class="profile-grid-item">
+
+                    <img src="{{ item.image.url }}" 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>
+                        <# } #>
+
+                        <div class="profile-grid-body">
+                            {{{ item.body }}}
+                        </div>
+
+                        <# if ('' !== item.cta_text && '' !== item.cta_link.url) { #>
+                            <a href="{{ item.cta_link.url }}" class="profile-grid-cta">
+                                <?= \BladeSvgSage\svg_image('arrow')->toHtml() ?>
+                                {{ item.cta_text }}
+                            </a>
+                        <# } #>
+                    </div>
+
+                </div>
+                <#
+                    });
+                } #>
+        </div>
+        <?php
+    }
+
 }
diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
index c83d28d4..a5983e61 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
@@ -1,3 +1,6 @@
 .disable-vertical-spacing
   padding-top: 0 !important
   padding-bottom: 0 !important
+
+.indent-content
+  constrain(padding-left, 7.5vw)
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/toggle.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/toggle.styl
new file mode 100644
index 00000000..7efd09cd
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/toggle.styl
@@ -0,0 +1,20 @@
+.elementor-toggle
+
+  .elementor-toggle-item
+    margin-bottom: 1em
+
+  .elementor-toggle-icon
+    font-size: 0.8em
+    margin-top: 3px
+    margin-right: 0.9em
+
+  .elementor-tab-title
+    outline: none
+    color: $colors.headings
+    font-size: 26px
+    font-weight: 600
+    border-bottom: none
+
+  .elementor-tab-content
+    margin-left: 2.7em
+    border-bottom: none
-- 
2.39.5