From 779eb5835e4365157dfff3f6be229f2424a035ae Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 18 Mar 2022 14:52:11 +0000
Subject: [PATCH] Wait #5098 @5

---
 .../physioassist/src/Elementor/Setup.php      |   1 +
 .../src/Elementor/Widgets/ModalContent.php    | 119 ++++++++++++++++++
 .../resources/assets/scripts/lity.js          |   8 +-
 .../assets/styles/widgets/modal-content.styl  |  19 +++
 4 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalContent.php
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/modal-content.styl

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index 32aef5a4..8b0d1ab4 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -73,6 +73,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\TextCarousel() );
         $elementor->widgets_manager->register_widget_type( new Widgets\MultimediaCarousel() );
         $elementor->widgets_manager->register_widget_type( new Widgets\ModalList() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\ModalContent() );
         $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
     }
 
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalContent.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalContent.php
new file mode 100644
index 00000000..45ad28dd
--- /dev/null
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalContent.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+
+use function App\asset_path;
+
+
+class ModalContent 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-modal-content';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Modal Popup', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-lightbox';
+    }
+
+    // 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() {
+
+        wp_register_script('lity', asset_path('scripts/lity.js'), ['jquery'], null, true);
+
+        return ['lity'];
+    }
+    /**
+     * 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' => __( 'Content', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'modal_id',
+            [
+                'label' => __('Modal ID', 'cube'),
+                'type' => Controls_Manager::TEXT,
+                'default' => '',
+                'title' => __('The unique ID for the modal (excluding "lightbox_" prefix)', 'cube'),
+                'description' => __('This modal can be opened on this page by linking to <code>#lightbox_XXXX</code> where XXXX is the ID specified above.', 'cube'),
+            ]
+        );
+
+        $this->add_control(
+            'title',
+            [
+                'label' => esc_html__( 'Title (optional)', 'cube' ),
+                'type' => Controls_Manager::TEXT,
+                'default' => '',
+                'description' => esc_html__( 'Title displayed at the top of the modal', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'modal_content',
+            [
+                'label' => __( 'Modal Content', 'cube' ),
+                'type' => Controls_Manager::WYSIWYG,
+                'default' => '',
+            ]
+        );
+       
+        $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() {
+
+        $ID = $this->get_settings('modal_id');
+        $title = $this->get_settings('title');
+        $content = $this->get_settings('modal_content');
+
+        echo '<div id="lightbox_'. $ID .'" class="lity-hide modal-content-lightbox">';
+        if (!empty($title)) {
+            echo '<h1 class="elementor-heading-title modal-content-lightbox-title">'. $title .'</h1>';
+        }
+        echo $content;
+        echo '</div>';
+
+    }
+
+}
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/lity.js b/wp-content/themes/physioassist/resources/assets/scripts/lity.js
index 95e8421f..d873fec9 100644
--- a/wp-content/themes/physioassist/resources/assets/scripts/lity.js
+++ b/wp-content/themes/physioassist/resources/assets/scripts/lity.js
@@ -1,2 +1,8 @@
 // Create a local copy of lity. Maybe this could be copied directly to /dist/scripts on build instead?
-import lity from 'lity'; // eslint-disable-line
+import lity from 'lity';
+
+window.lity = lity; // Make lity function globally available
+
+// Allow lity to open any inline links that start with #lightbox_XXXX
+// We must exclude links that have the data-lity attribute because this would cause the same popup to open twice
+jQuery(document).on('click', 'a[href^="#lightbox_"]:not([data-lity])', lity);
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-content.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-content.styl
new file mode 100644
index 00000000..5a1d5390
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-content.styl
@@ -0,0 +1,19 @@
+// Special case: don't hide modal content when Elementor editor is active
+.elementor-editor-active .modal-content-lightbox.lity-hide
+  display: block
+
+.modal-content-lightbox
+  vertical-spacing(3vw)
+  horizontal-spacing(3vw)
+  background-color: #fff
+  width: 100vw
+  max-width: 800px
+  max-height: 90vh !important // Gives 5% top and bottom gap
+  overflow-y: auto // Scroll internally if content is too tall for screen
+
+  &-title
+    color: $colors.headings
+    font-size: 26px
+    font-weight: 600
+    margin-bottom: 1em
+    padding-right: 90px // So title doesn't go under modal close icon
\ No newline at end of file
-- 
2.39.5