From f51ba26b15697f6c9430f62c3a65141ab87ec092 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 12 Mar 2020 19:11:38 +0000
Subject: [PATCH] WIP #3470 @7

---
 .../src/Elementor/Widgets/ResourceGrid.php    | 45 ++++++++++++--
 .../physioassist/resources/assets/config.json |  5 +-
 .../assets/scripts/resource-carousel.js       | 14 +++++
 .../styles/widgets/resource-carousel.styl     | 39 ++++++++++++
 .../views/widgets/resource-carousel.blade.php | 62 +++++++++++++++++++
 .../views/widgets/resource-grid.blade.php     | 42 +++++++------
 6 files changed, 183 insertions(+), 24 deletions(-)
 create mode 100644 wp-content/themes/physioassist/resources/assets/scripts/resource-carousel.js
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl
 create mode 100644 wp-content/themes/physioassist/resources/views/widgets/resource-carousel.blade.php

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php
index 9c6c3817..8432bda1 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ResourceGrid.php
@@ -40,7 +40,18 @@ class ResourceGrid extends Widget_Base {
      * @return array Widget scripts dependencies.
      */
     public function get_script_depends() {
-        return [];
+
+        wp_register_script(
+            'cube-resource-carousel',
+            \App\asset_path('scripts/resource-carousel.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        // Use script already registered by Elementor so we don't have to include another copy of Slick
+        return [ 'jquery-slick', 'cube-resource-carousel' ];
+
     }
     /**
      * Register the widget controls.
@@ -58,6 +69,21 @@ class ResourceGrid extends Widget_Base {
             ]
         );
 
+        $this->add_control(
+            'type',
+            [
+                'label' => __('Display Type', 'cube'),
+                'type' => Controls_Manager::SELECT,
+                'options' => [
+                    'grid' => __( 'Grid', 'cube' ),
+                    'carousel' => __( 'Carousel', 'cube' ),
+                ],
+                'default' => 'grid',
+                'render_type' => 'template', // Make editor re-render when this changes
+                'prefix_class' => 'resource-grid-type-',
+            ]
+        );
+
         $this->add_control(
             'items',
             [
@@ -83,6 +109,9 @@ class ResourceGrid extends Widget_Base {
 
                     // Todo: revisit this to see if we can have a more user-friendly file control
                     // See: https://github.com/pojome/elementor/issues/4468
+                    // See also: https://github.com/elementor/elementor/issues/1573#issuecomment-561405541
+                    // A searchable URL field might be enough but the text control isn't compatible with the
+                    // data structure of the URL control so that would need to be handled or transitioned
                     [
                         'name' => 'interactive_version',
                         'label' => __( 'Interactive version link', 'cube' ),
@@ -110,11 +139,14 @@ class ResourceGrid extends Widget_Base {
      */
     protected function render() {
 
+        $display_type = $this->get_settings('type');
         $items = $this->get_settings('items');
 
-        $html = \App\template('widgets/resource-grid', compact('items'));
-
-        echo '<div class="resource-grid">'. $html .'</div>';
+        if ($display_type == 'carousel') {
+            echo \App\template('widgets/resource-carousel', compact('items'));
+        } else {
+            echo \App\template('widgets/resource-grid', compact('items'));
+        }
     }
 
     /**
@@ -125,6 +157,10 @@ class ResourceGrid extends Widget_Base {
      * @since 1.0.0
      * @access protected
      */
+
+    /* ### Disabled because now there are two different templates (grid + carousel)
+           and it would be too messy to have live JS templates too
+
     protected function _content_template() {
         ?>
         <div class="resource-grid">
@@ -164,5 +200,6 @@ class ResourceGrid extends Widget_Base {
         </div>
         <?php
     }
+    */
 
 }
diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json
index 9fe0d879..807859a3 100644
--- a/wp-content/themes/physioassist/resources/assets/config.json
+++ b/wp-content/themes/physioassist/resources/assets/config.json
@@ -16,13 +16,16 @@
     "video-carousel": [
       "./scripts/video-carousel.js"
     ],
+    "resource-carousel": [
+      "./scripts/resource-carousel.js"
+    ],
     "customizer": [
       "./scripts/customizer.js"
     ]
   },
   "publicPath": "/wp-content/themes/physioassist",
   "devUrl": "http://physioassist.test",
-  "proxyUrl": "http://localhost:3000",
+  "proxyUrl": "http://paris.cubedesigners.com:63000",
   "cacheBusting": "[name]_[hash:8]",
   "watch": [
     "app/**/*.php",
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/resource-carousel.js b/wp-content/themes/physioassist/resources/assets/scripts/resource-carousel.js
new file mode 100644
index 00000000..1af11f46
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/scripts/resource-carousel.js
@@ -0,0 +1,14 @@
+// ELEMENTOR Trigger
+(function($) {
+  // Trigger handler when element ready
+  $(window).on( 'elementor/frontend/init', function() {
+    // eslint-disable-next-line
+    elementorFrontend.hooks.addAction('frontend/element_ready/cube-resource-grid.default', function ($scope) {
+
+      // Only trigger if it is a carousel type gallery
+      if ($scope.hasClass('resource-grid-type-carousel')) {
+        $scope.find('.resource-carousel').slick(); // Note: settings come from data-attribute in HTML
+      }
+    });
+  });
+})(jQuery);
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl
new file mode 100644
index 00000000..82e5c257
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl
@@ -0,0 +1,39 @@
+.resource-carousel
+
+  &-item-content
+    display: flex
+
+  &-image
+    flex: 0 1 auto
+    display: block
+    align-self: flex-end
+    max-width: 35% !important
+    box-shadow: -4px 6px 10px -2px rgba(0,0,0,0.4) !important
+    margin-left: 30px !important
+
+    +below(680px)
+      margin-left: 0
+
+  &-text
+    flex: 1 1 auto
+    constrain(padding-left, 2.5vw) // Gutter between image and text
+    align-self: center
+
+  &-title
+    color: $colors.sub-headings
+    font-size: 18px
+    font-weight: 600
+    text-transform: uppercase
+    margin-bottom: 0.8em
+    line-height: 1.2
+
+  &-link
+    display: block
+    position: relative
+    margin-top: 1.4em
+    padding-left: 1em
+
+    svg
+      position: absolute
+      top: 0.425em
+      left: 0
diff --git a/wp-content/themes/physioassist/resources/views/widgets/resource-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/resource-carousel.blade.php
new file mode 100644
index 00000000..43d8908e
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/widgets/resource-carousel.blade.php
@@ -0,0 +1,62 @@
+{{--RESOURCE CAROUSEL--}}
+@php
+  $settings = [
+    'slidesToShow' => 3,
+    'slidesToScroll' => 1,
+    'dots' => count($items) > 3, // Only show dots when there are enough items
+    'infinite' => true,
+    'responsive' => [
+      [
+        'breakpoint' => 1300,
+        'settings' => [
+          'slidesToShow' => 2
+        ]
+      ],
+      [
+        'breakpoint' => 850,
+        'settings' => [
+          'slidesToShow' => 1
+        ]
+      ],
+    ]
+  ];
+
+  $slick = json_encode($settings);
+
+@endphp
+
+<div class="resource-carousel elementor-slick-slider" data-slick="{{ $slick }}">
+
+  @foreach ($items as $item)
+
+    <div class="resource-carousel-item slick-slide">
+      <div class="resource-carousel-item-content">
+
+        @image($item['image']['id'], 'full', ['class' => 'resource-carousel-image'])
+
+        <div class="resource-carousel-text">
+
+          <h3 class="resource-carousel-title">{{ $item['title'] }}</h3>
+
+          @if ($item['interactive_version'])
+            <a href="{{ $item['interactive_version'] }}" class="resource-carousel-link arrow-link" target="_blank" rel="noopener">
+              @svg('arrow')
+              <?php _ex('Read interactive version', 'Resource grid widget interactive version link text', 'cube') ?>
+            </a>
+          @endif
+
+          @if ($item['pdf'])
+            <a href="{{ $item['pdf'] }}" class="resource-carousel-link arrow-link" target="_blank" rel="noopener">
+              @svg('arrow')
+              <?php _ex('Download PDF', 'Resource grid widget PDF link text', 'cube') ?>
+            </a>
+          @endif
+
+        </div> {{-- .resource-carousel-text --}}
+
+      </div>  {{-- .resource-carousel-item-content --}}
+    </div> {{-- .resource-carousel-item --}}
+
+  @endforeach
+
+</div>
diff --git a/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php b/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php
index 7bd0eb12..40a41c15 100644
--- a/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php
+++ b/wp-content/themes/physioassist/resources/views/widgets/resource-grid.blade.php
@@ -1,27 +1,31 @@
-@foreach ($items as $item)
+<div class="resource-grid">
 
-  <div class="resource-grid-item">
-    @image($item['image']['id'], 'full', ['class' => 'resource-grid-image'])
+  @foreach ($items as $item)
 
-    <div class="resource-grid-text">
+    <div class="resource-grid-item">
+      @image($item['image']['id'], 'full', ['class' => 'resource-grid-image'])
 
-      <h3 class="resource-grid-title">{{ $item['title'] }}</h3>
+      <div class="resource-grid-text">
 
-      @if ($item['interactive_version'])
-        <a href="{{ $item['interactive_version'] }}" class="resource-grid-link arrow-link" target="_blank" rel="noopener">
-          @svg('arrow')
-          <?php _ex('Read interactive version', 'Resource grid widget interactive version link text', 'cube') ?>
-        </a>
-      @endif
+        <h3 class="resource-grid-title">{{ $item['title'] }}</h3>
 
-      @if ($item['pdf'])
-        <a href="{{ $item['pdf'] }}" class="resource-grid-link arrow-link" target="_blank" rel="noopener">
-          @svg('arrow')
-          <?php _ex('Download PDF', 'Resource grid widget PDF link text', 'cube') ?>
-        </a>
-      @endif
+        @if ($item['interactive_version'])
+          <a href="{{ $item['interactive_version'] }}" class="resource-grid-link arrow-link" target="_blank" rel="noopener">
+            @svg('arrow')
+            <?php _ex('Read interactive version', 'Resource grid widget interactive version link text', 'cube') ?>
+          </a>
+        @endif
 
+        @if ($item['pdf'])
+          <a href="{{ $item['pdf'] }}" class="resource-grid-link arrow-link" target="_blank" rel="noopener">
+            @svg('arrow')
+            <?php _ex('Download PDF', 'Resource grid widget PDF link text', 'cube') ?>
+          </a>
+        @endif
+
+      </div>
     </div>
-  </div>
 
-@endforeach
+  @endforeach
+
+</div>
-- 
2.39.5