Wait #5098 @5

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index 32aef5a4045929adee93a54f6d6d63731373243e..8b0d1ab483eb78e3f6a58aa27d107c0db427e40e 100644 (file)
--- 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 (file)
index 0000000..45ad28d
--- /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 95e8421f8a7ae7dabd6ff95833bf77377354435a..d873fec9cccb17a6a1ff5503553875ae9e094386 100644 (file)
--- 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 (file)
index 0000000..5a1d539
--- /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