From f7177521971e63acc2699477d34a23c5bc474d54 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 9 Jan 2024 14:19:04 +0100
Subject: [PATCH] wait #6564 @2:00

---
 .../physioassist/src/Elementor/Setup.php      |   1 +
 .../Elementor/Widgets/FluxPostCarousel.php    | 249 ++++++++++++++++++
 wp-content/themes/physioassist/app/setup.php  |   4 +
 .../resources/assets/build/webpack.config.js  |   2 +-
 .../physioassist/resources/assets/config.json |   3 +
 .../assets/scripts/flux-post-carousel.js      |  36 +++
 .../styles/widgets/flux-post-carousel.styl    |  63 +++++
 .../physioassist/resources/functions.php      |  40 +++
 .../resources/views/partials/post.blade.php   |   8 +
 .../widgets/flux-post-carousel.blade.php      |  70 +++++
 .../views/widgets/text-carousel.blade.php     |  43 ++-
 11 files changed, 496 insertions(+), 23 deletions(-)
 create mode 100644 wp-content/mu-plugins/physioassist/src/Elementor/Widgets/FluxPostCarousel.php
 create mode 100644 wp-content/themes/physioassist/resources/assets/scripts/flux-post-carousel.js
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/flux-post-carousel.styl
 create mode 100644 wp-content/themes/physioassist/resources/views/partials/post.blade.php
 create mode 100644 wp-content/themes/physioassist/resources/views/widgets/flux-post-carousel.blade.php

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index 8b0d1ab4..dd050e5d 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -75,6 +75,7 @@ class Setup {
         $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() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\FluxPostCarousel() );
     }
 
     // Override the main Elementor section element to allow custom controls to be added to the editor
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/FluxPostCarousel.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/FluxPostCarousel.php
new file mode 100644
index 00000000..c9605dac
--- /dev/null
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/FluxPostCarousel.php
@@ -0,0 +1,249 @@
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Scheme_Color;
+
+use function App\asset_path;
+use function App\template;
+
+class FluxPostCarousel 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-flux-post-carousel';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Flux Post Carousel', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-posts-carousel';
+    }
+
+    // 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('slick', asset_path('scripts/slick.js'), ['jquery'], null, true);
+
+        wp_register_script(
+            'cube-flux-post-carousel',
+            asset_path('scripts/flux-post-carousel.js'),
+            ['jquery', 'slick'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        // Use script already registered by Elementor so we don't have to include another copy of Slick
+        return ['cube-flux-post-carousel'];
+    }
+    /**
+     * 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(
+            'title',
+            [
+                'label' => __( 'Title', 'elementor' ),
+                'type' => Controls_Manager::TEXT,
+                'placeholder' => __( 'Enter your title', 'elementor' ),
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'cta_text',
+            [
+                'label' => __('Call to Action text', 'cube'),
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $this->add_control(
+            'cta_link',
+            [
+                'label' => __('Call to Action link', 'cube'),
+                'type' => Controls_Manager::MEDIA,
+            ]
+        );
+
+        $this->end_controls_section();
+
+
+        $this->start_controls_section(
+            'section_formatting',
+            [
+                'label' => __( 'Colours & Formatting', 'cube' ),
+            ]
+        );
+
+
+        $this->add_control(
+            'title_color',
+            [
+                'label' => __( 'Title Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .text-block-title' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+
+        $this->add_control(
+            'subtitle_color',
+            [
+                'label' => __( 'Subtitle Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .text-block-subtitle' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+
+        $this->add_control(
+            'body_color',
+            [
+                'label' => __( 'Body Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .text-block-body' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+
+        $this->add_control(
+            'cta_color',
+            [
+                'label' => __( 'Call to Action Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .text-block-cta' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+
+        $this->add_responsive_control(
+            'align',
+            [
+                'label' => __( 'Alignment', 'elementor' ),
+                'type' => Controls_Manager::CHOOSE,
+                'options' => [
+                    'left' => [
+                        'title' => __( 'Left', 'elementor' ),
+                        'icon' => 'fa fa-align-left',
+                    ],
+                    'center' => [
+                        'title' => __( 'Center', 'elementor' ),
+                        'icon' => 'fa fa-align-center',
+                    ],
+                    'right' => [
+                        'title' => __( 'Right', 'elementor' ),
+                        'icon' => 'fa fa-align-right',
+                    ],
+                    'justify' => [
+                        'title' => __( 'Justified', 'elementor' ),
+                        'icon' => 'fa fa-align-justify',
+                    ],
+                ],
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}}' => 'text-align: {{VALUE}}; margin: 0 auto;',
+                ],
+            ]
+        );
+
+        $this->add_control(
+            'max-width',
+            [
+                'label' => __( 'Maximum Width', 'cube' ),
+                'type' => Controls_Manager::SLIDER,
+                // 'default' => [
+                // 	'size' => 400,
+                // ],
+                'range' => [
+                    'px' => [
+                        'min' => 400,
+                        'max' => 1600,
+                        'step' => 10,
+                    ],
+                    '%' => [
+                        'min' => 0,
+                        'max' => 100,
+                    ],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .text-block' => 'max-width: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+
+        $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() {
+        $newsCat = get_category_by_slug('news');
+        $categories = get_terms([
+            'taxonomy' => 'category',
+            'hide_empty' => false,
+            'exclude' => [$newsCat->term_id]
+        ]);
+
+        $categoriesId = array_map(function($n){ return $n->term_id; },$categories);
+        $items = get_posts(['category__in'=>$categoriesId]);
+        $title = $this->get_settings('title');
+
+        $cta = [
+          'cta_text' => $this->get_settings('cta_text'),
+          'cta_link' => $this->get_settings('cta_link'),
+        ];
+
+        echo template('widgets/flux-post-carousel', compact('items','categories', 'title', 'cta'));
+    }
+
+}
\ No newline at end of file
diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php
index e3f21926..6e91fc6e 100644
--- a/wp-content/themes/physioassist/app/setup.php
+++ b/wp-content/themes/physioassist/app/setup.php
@@ -280,3 +280,7 @@ add_action('template_redirect', function () {
     }
 
 });
+
+
+add_action('wp_ajax_flux_posts', 'flux_posts');
+add_action('wp_ajax_nopriv_flux_posts', 'flux_posts');
diff --git a/wp-content/themes/physioassist/resources/assets/build/webpack.config.js b/wp-content/themes/physioassist/resources/assets/build/webpack.config.js
index 25cc3b69..99874784 100644
--- a/wp-content/themes/physioassist/resources/assets/build/webpack.config.js
+++ b/wp-content/themes/physioassist/resources/assets/build/webpack.config.js
@@ -97,7 +97,7 @@ let webpackConfig = {
               options: {
                 sourceMap: config.enabled.sourceMaps,
                 use: [rupture()],
-              }
+              },
             },
           ],
         }),
diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json
index 2f2c60b3..7cc4f709 100644
--- a/wp-content/themes/physioassist/resources/assets/config.json
+++ b/wp-content/themes/physioassist/resources/assets/config.json
@@ -16,6 +16,9 @@
     "text-carousel": [
       "./scripts/text-carousel.js"
     ],
+    "flux-post-carousel": [
+      "./scripts/flux-post-carousel.js"
+    ],
     "video-carousel": [
       "./scripts/video-carousel.js"
     ],
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/flux-post-carousel.js b/wp-content/themes/physioassist/resources/assets/scripts/flux-post-carousel.js
new file mode 100644
index 00000000..80f8a460
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/scripts/flux-post-carousel.js
@@ -0,0 +1,36 @@
+// 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-flux-post-carousel.default', function ($scope) {
+
+      // Only trigger if it is a carousel type gallery
+      if ($scope.hasClass('elementor-widget-cube-flux-post-carousel')) {
+        $scope.find('.flux-post-carousel').slick(); // Note: settings come from data-attribute in HTML
+      }
+
+      $(document).on("click", ".flux-post-carousel-filter-item", function() {
+        let cat = $(this).data("cat")
+        $(".flux-post-carousel-filter-item").addClass("inactive")
+        $(this).removeClass("inactive")
+        $scope.find('.slick-track').addClass("onload")
+        $.ajax({
+          url: '/wp-admin/admin-ajax.php',
+          type: 'POST',
+          data: {
+            action: 'flux_posts',
+            cat: cat,
+          },
+          success: function (res) {
+            $scope.find('.flux-post-carousel').html(res).removeClass('slick-initialized');
+          },
+          complete: function() {
+            $scope.find('.slick-track').removeClass("onload")
+            $scope.find('.flux-post-carousel').slick(); // Note: settings come from data-attribute in HTML
+          },
+        })
+      })
+    });
+  });
+})(jQuery);
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/flux-post-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/flux-post-carousel.styl
new file mode 100644
index 00000000..00c5b62e
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/flux-post-carousel.styl
@@ -0,0 +1,63 @@
+.flux-post-carousel
+
+  .slick-track
+    margin: 0
+    & > .slick-slide
+      margin: 0 50px
+    &.onload
+      opacity: .5 !important
+
+  &-header-title
+    white-space: normal
+    text-align: center
+    &:after
+      margin-right: auto
+      margin-left: auto
+
+  &-filter
+    margin-bottom: 4vw
+
+  &-filter-list
+    display: flex
+    justify-content: center
+    text-align: left !important
+
+  &-filter-item
+    list-style-type: none
+    cursor: pointer
+    min-width: 125px
+    font-size: 14px !important
+    &:not(:last-child)
+      margin-right: 20px
+
+    &.inactive
+      background-color: #b3b9c6
+
+  &-date
+    margin-bottom: 0 !important
+    font-weight: 700
+    font-size: 14px !important
+
+  &-title
+    font-weight: 500
+    color: #20548c
+
+  &-item
+    margin-bottom: 30px
+
+  .slick-slide
+    text-align: left
+
+  .arrow-link
+    margin-top: 10px
+    font-size: 14px !important
+
+  &-download
+    text-align: center
+    margin-top: 40px
+    a,a:hover
+      color: #ffffff
+    svg
+      position: static
+    path
+      fill: #ffffff
diff --git a/wp-content/themes/physioassist/resources/functions.php b/wp-content/themes/physioassist/resources/functions.php
index de55853e..33df8487 100644
--- a/wp-content/themes/physioassist/resources/functions.php
+++ b/wp-content/themes/physioassist/resources/functions.php
@@ -6,6 +6,7 @@
 
 use Roots\Sage\Config;
 use Roots\Sage\Container;
+use function App\template;
 
 /**
  * Helper function for prettying up errors
@@ -90,3 +91,42 @@ Container::getInstance()
             'view' => require dirname(__DIR__).'/config/view.php',
         ]);
     }, true);
+
+add_filter('theme_file_path', function($path, $file) {
+    if($file === 'theme.json') {
+        return false;
+    }
+    return $path;
+}, 0, 2);
+
+function flux_posts()
+{
+    $catId = $_POST['cat'];
+
+    $newsCat = get_category_by_slug('news');
+    $categories = get_terms([
+        'taxonomy' => 'category',
+        'hide_empty' => false,
+        'exclude' => [$newsCat->term_id]
+    ]);
+
+    $categoriesId = array_map(function($n){ return $n->term_id; },$categories);
+
+    $posts = get_posts([
+        'posts_per_page' => -1,
+        'category__in' => !empty($catId) ? [$catId] : $categoriesId,
+        'order' => 'desc',
+    ]);
+
+    var_dump([
+        'posts_per_page' => -1,
+        'category__in' => !empty($catId) ? [$catId] : $categoriesId,
+        'order' => 'desc',
+    ]);
+
+    foreach ($posts as $item) {
+        echo template('partials/post', compact('item'));
+    }
+
+    die();
+}
diff --git a/wp-content/themes/physioassist/resources/views/partials/post.blade.php b/wp-content/themes/physioassist/resources/views/partials/post.blade.php
new file mode 100644
index 00000000..af6c7d53
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/partials/post.blade.php
@@ -0,0 +1,8 @@
+<div class="text-carousel-item flux-post-carousel-item slick-slide">
+  <div class="flux-post-carousel-item-content">
+    <p class="flux-post-carousel-date">{!! date('Y/m', strtotime($item->post_date)) !!}</p>
+    <h3 class="flux-post-carousel-title">{{ $item->post_title }}</h3>
+    <p class="flux-post-carousel-subtitle">{{ $item->subtitle }}</p>
+    <a href="{{ get_the_permalink($item->id) }}" class="arrow-link">@svg('arrow') {{ __('Read more') }}</a>
+  </div>  {{-- .flux-post-carousel-item-content --}}
+</div> {{-- .flux-post-carousel-item --}}
diff --git a/wp-content/themes/physioassist/resources/views/widgets/flux-post-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/flux-post-carousel.blade.php
new file mode 100644
index 00000000..6a640d41
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/widgets/flux-post-carousel.blade.php
@@ -0,0 +1,70 @@
+{{--TEXT CAROUSEL--}}
+@php
+  $settings = [
+    'slidesToShow' => 2,
+    'slidesToScroll' => 2,
+    'dots' => count($items) > 2, // Only show dots when there are enough items
+    'rows' => 2,
+    'infinite' => true,
+    'responsive' => [
+      [
+        'breakpoint' => 1400,
+        'settings' => [
+          'slidesToShow' => 3,
+          'slidesToScroll' => 3,
+          'dots' => count($items) > 3,
+        ]
+      ],
+      [
+        'breakpoint' => 1100,
+        'settings' => [
+          'slidesToShow' => 2,
+          'slidesToScroll' => 2,
+          'dots' => count($items) > 2,
+        ]
+      ],
+      [
+        'breakpoint' => 850,
+        'settings' => [
+          'slidesToShow' => 1,
+          'slidesToScroll' => 1,
+          'dots' => count($items) > 1,
+        ]
+      ],
+    ]
+  ];
+
+  $slick = json_encode($settings);
+
+  use function App\template;
+@endphp
+
+<div class="section-flux-post-carousel">
+  <div class="flux-post-carousel-header elementor-widget">
+    <h2 class="elementor-heading-title elementor-size-default flux-post-carousel-header-title">
+      {{__($title)}}
+    </h2>
+  </div>
+  <div class="flux-post-carousel-filter">
+    <ul class="flux-post-carousel-filter-list">
+      <li class="flux-post-carousel-filter-item elementor-button" data-cat="">{{ __('Tout') }}</li>
+      @foreach($categories as $category)
+        <li class="flux-post-carousel-filter-item elementor-button inactive" data-cat="{{ $category->term_id }}">{{ $category->name }}</li>
+      @endforeach
+    </ul>
+  </div>
+  <div class="flux-post-carousel elementor-slick-slider" data-slick="{{ $slick }}">
+
+    @foreach ($items as $item)
+      @include('partials.post')
+    @endforeach
+
+  </div>
+  <div class="flux-post-carousel-download">
+    @if (!empty($cta['cta_text']))
+      <a href="{{ $cta['cta_link']['url'] }}" class="arrow-link elementor-button" target="_blank" rel="noopener">
+        @svg('arrow') {{ $cta['cta_text'] }}
+      </a>
+    @endif
+  </div>
+</div>
diff --git a/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php
index d1b96a3f..ae37c48b 100644
--- a/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php
+++ b/wp-content/themes/physioassist/resources/views/widgets/text-carousel.blade.php
@@ -34,36 +34,35 @@
   ];
 
   $slick = json_encode($settings);
-
 @endphp
 
-<div class="text-carousel elementor-slick-slider" data-slick="{{ $slick }}">
+ <div class="text-carousel elementor-slick-slider" data-slick="{{ $slick }}">
 
-  @foreach ($items as $item)
+    @foreach ($items as $item)
 
-    <div class="text-carousel-item slick-slide">
-      <div class="text-carousel-item-content">
+      <div class="text-carousel-item slick-slide">
+        <div class="text-carousel-item-content">
 
-          <h3 class="text-carousel-title">{{ $item['title'] }}</h3>
+            <h3 class="text-carousel-title">{{ $item['title'] }}</h3>
 
-          <p class="text-carousel-subtitle">{{ $item['subtitle'] }}</p>
+            <p class="text-carousel-subtitle">{{ $item['subtitle'] }}</p>
 
-          <div class="text-carousel-body">
-            {!! $item['body'] !!}
-          </div>
+            <div class="text-carousel-body">
+              {!! $item['body'] !!}
+            </div>
 
-          @if (!empty($item['cta_text']))
-            <a href="{{ $item['cta_link']['url'] }}" class="text-carousel-link arrow-link"
-            @if ($item['cta_link']['is_external']) target="_blank" @endif
-            @if ($item['cta_link']['nofollow']) rel="noopener" @endif
-            >
-              @svg('arrow') {{ $item['cta_text'] }}
-            </a>
-          @endif
+            @if (!empty($item['cta_text']))
+              <a href="{{ $item['cta_link']['url'] }}" class="text-carousel-link arrow-link"
+              @if ($item['cta_link']['is_external']) target="_blank" @endif
+              @if ($item['cta_link']['nofollow']) rel="noopener" @endif
+              >
+                @svg('arrow') {{ $item['cta_text'] }}
+              </a>
+            @endif
 
-      </div>  {{-- .text-carousel-item-content --}}
-    </div> {{-- .text-carousel-item --}}
+        </div>  {{-- .text-carousel-item-content --}}
+      </div> {{-- .text-carousel-item --}}
 
-  @endforeach
+    @endforeach
 
-</div>
+  </div>
-- 
2.39.5