From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 18 Mar 2020 17:54:55 +0000 (+0000)
Subject: WIP #3471 @3.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e613e78c3fe44e8edfa4ec40c4a8292fcb73ba1b;p=physioassist-wordpress.git

WIP #3471 @3.5
---

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index 6f87969a..8ab875b8 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -71,6 +71,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\ResourceGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\VideoGallery() );
         $elementor->widgets_manager->register_widget_type( new Widgets\TextCarousel() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\ModalList() );
         $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
     }
 
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php
new file mode 100644
index 00000000..2f98ac77
--- /dev/null
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php
@@ -0,0 +1,111 @@
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Scheme_Color;
+
+
+class ModalList 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-list';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Modal List', '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(
+            'cube-modal-list',
+            \App\asset_path('scripts/modal-list.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        return ['cube-modal-list'];
+    }
+    /**
+     * 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(
+            'items',
+            [
+                'label' => __( 'Items', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'title',
+                        'label' => __( 'Title', 'elementor' ),
+                        'type' => Controls_Manager::TEXT,
+                        'placeholder' => __( 'Enter your title', 'elementor' ),
+                        'default' => '',
+                    ],
+                    [
+                        'name' => 'body',
+                        'label' => __('Body', 'cube'),
+                        'type' => Controls_Manager::WYSIWYG,
+                        'default' => '',
+                    ],
+                ],
+                '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() {
+
+        $ID = $this->get_id();
+        $items = $this->get_settings('items');
+
+        echo \App\template('widgets/modal-list', compact('ID', 'items'));
+    }
+
+}
diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json
index 9f14bc13..cbf5195d 100644
--- a/wp-content/themes/physioassist/resources/assets/config.json
+++ b/wp-content/themes/physioassist/resources/assets/config.json
@@ -22,6 +22,9 @@
     "resource-carousel": [
       "./scripts/resource-carousel.js"
     ],
+    "modal-list": [
+      "./scripts/modal-list.js"
+    ],
     "customizer": [
       "./scripts/customizer.js"
     ]
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/modal-list.js b/wp-content/themes/physioassist/resources/assets/scripts/modal-list.js
new file mode 100644
index 00000000..0b8b2b86
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/scripts/modal-list.js
@@ -0,0 +1,15 @@
+import lity from 'lity'; // eslint-disable-line
+
+(function($) {
+
+  // ELEMENTOR Trigger
+  $(window).on( 'elementor/frontend/init', function() {
+    // eslint-disable-next-line
+    elementorFrontend.hooks.addAction('frontend/element_ready/cube-modal-list.default', function ($scope) {
+
+      // Nothing to trigger here but we need to include Lity so it can catch clicks on the lightbox links
+
+    });
+  });
+
+})(jQuery);
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 a500d6a1..e2ceb03d 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl
@@ -10,4 +10,7 @@
 .vertical-spacing
   vertical-spacing()
 
+.text-xs
+  font-size: 12px
+
 //.indent-content // See sections.styl
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl b/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl
new file mode 100644
index 00000000..3a1d217f
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl
@@ -0,0 +1,44 @@
+//=== Lity Lightbox customisations
+.lity
+  background-color: rgba($colors.dark-blue, 0.9)
+
+// Prevent scrolling in background when lightbox is open
+.lity-active body
+  overflow: hidden
+  height: 100vw
+
+:root .lity-close // :root needed because in dev mode, CSS from node_modules seems to be imported out of order, preventing overrides from working
+  position: absolute
+  top: 16px !important
+  right: 20px
+  width: 70px
+  height: @width
+  opacity: 1
+  transform: scale(1)
+  transform-origin: center
+  transition: all 0.3s ease
+  transition-delay: 0.15s // Slight delay to give content box time to grow enough
+
+  // Hide while loading and closing
+  .lity-loading &,
+  .lity-closed &
+    opacity: 0
+    transform: scale(0.8)
+
+  // When lightbox is closing there's no transition or delay
+  // because we want the button to disappear immediately so
+  // we don't get a weird overlap with shrinking content box
+  .lity-closed &
+    transition-duration: 0s
+    transition-delay: 0s
+
+  &:after
+    content: ''
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    background: url('../images/icons/close-rounded.svg') center no-repeat
+    background-size: contain
+    z-index: 10
diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl
index cb54c20a..3e85e4ae 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/main.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl
@@ -3,7 +3,6 @@
 
 /** Import everything from autoload */
 // @import "autoload/**/*"
-@import '~lity/dist/lity.css'
 
 @import 'common/reset'
 @import 'common/utilities'
@@ -12,6 +11,8 @@
 // @import 'common/animations'
 // @import 'common/admin-bar'
 
+@import '~lity/dist/lity.css'
+@import 'components/lity-lightbox'
 // @import 'components/svg'
 @import 'components/headings'
 @import 'components/buttons'
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl
new file mode 100644
index 00000000..21225514
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl
@@ -0,0 +1,43 @@
+.modal-list
+  list-style-type: none
+
+  &-item
+    position: relative
+
+    &:not(:last-child)
+      margin-bottom: 1.75em
+
+    a
+      color: $colors.headings
+
+      &:hover
+        color: $colors.blue
+
+    svg
+      position: absolute
+      top: 0.4em
+      left: -1.3em
+      height: 0.625em
+      width: auto
+
+    path
+      fill: currentColor
+
+  &-lightbox
+    padding-top: 110px
+    constrain(padding-bottom, 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
+
+  &-body
+    color: $colors.text
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-carousel.styl
index 25bb98d2..291bcce4 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-carousel.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-carousel.styl
@@ -48,44 +48,3 @@
     max-height: 90vh !important // Gives 5% top and bottom gap
     overflow-y: auto // Scroll internally if content is too tall for screen
     text-align: center
-
-
-//=== Lity Lightbox customisations
-.lity
-  background-color: rgba($colors.dark-blue, 0.9)
-
-.lity-close
-  position: absolute
-  top: 16px !important
-  right: 20px
-  width: 70px
-  height: @width
-  opacity: 1
-  transform: scale(1)
-  transform-origin: center
-  transition: all 0.3s ease
-  transition-delay: 0.15s // Slight delay to give content box time to grow enough
-
-  // Hide while loading and closing
-  .lity-loading &,
-  .lity-closed &
-    opacity: 0
-    transform: scale(0.8)
-
-  // When lightbox is closing there's no transition or delay
-  // because we want the button to disappear immediately so
-  // we don't get a weird overlap with shrinking content box
-  .lity-closed &
-    transition-duration: 0s
-    transition-delay: 0s
-
-  &:after
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background: url('../images/icons/close-rounded.svg') center no-repeat
-    background-size: contain
-    z-index: 10
diff --git a/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php b/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php
new file mode 100644
index 00000000..20af9a96
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php
@@ -0,0 +1,35 @@
+{{-- TEXT MODAL LIST --}}
+<ul class="modal-list">
+
+  {{--TODO: split into 2 cols? --}}
+
+  @foreach ($items as $index => $item)
+
+    @php
+      $lightbox_ID = 'lightbox_'. $ID .'_'. $index; // Unique ID for lightbox content
+    @endphp
+
+    <li class="modal-list-item">
+
+      <a href="#{{ $lightbox_ID }}" data-lity>
+
+        @svg('arrow') {{ $item['title'] }}
+
+        {{-- Lightbox Content --}}
+        <div id="{{ $lightbox_ID }}" class="lity-hide modal-list-lightbox">
+
+          <h3 class="modal-list-title">{{ $item['title'] }}</h3>
+
+          <div class="modal-list-body">
+            {!! $item['body'] !!}
+          </div>
+
+        </div>
+
+      </a>  {{-- .modal-list-item --}}
+
+    </li>
+
+  @endforeach
+
+</ul>