From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 19 Sep 2024 17:02:45 +0000 (+0200)
Subject: wip #7067 @7:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3b7c22147c4e8bfc8dd1af2e62cb3676e4242734;p=spinepro.git

wip #7067 @7:00
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index 806e8f69..d645f80d 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
@@ -56,6 +56,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\FancyList() );
         $elementor->widgets_manager->register_widget_type( new Widgets\JustifiedList() );
         $elementor->widgets_manager->register_widget_type( new Widgets\Form() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\PatientTour() );
     }
 
     protected function _customise_sections() {
diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PatientTour.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PatientTour.php
new file mode 100644
index 00000000..fd030b48
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PatientTour.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+use Elementor\Repeater;
+
+use function Roots\asset;
+use function Roots\view;
+
+
+class PatientTour extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-patient-tour';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __('Parcours patient', 'cube');
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-date';
+    }
+
+    /**
+     * 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-patient-tour',
+            asset('scripts/patient-tour.js'),
+            ['jquery', 'swiper'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        // Using Swiper because it is already included and heavily used by Elementor
+
+        return [ 'cube-patient-tour' ];
+    }
+
+    /**
+     * 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'),
+            ]
+        );
+
+        $repeater = new Repeater();
+
+        $repeater->add_control(
+            'image',
+            [
+                'label' => __('Image', 'cube'),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $repeater->add_control(
+            'title',
+            [
+                'label' => __('Title', 'cube'),
+                'type' => Controls_Manager::TEXT,
+                'label_block' => true,
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __('Items', 'cube'),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => $repeater->get_controls(),
+                '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() {
+        $items = $this->get_settings('items');
+
+        echo view('widgets/patient-tour', compact('items'));
+    }
+
+}
diff --git a/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js b/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
new file mode 100644
index 00000000..5ad50f0b
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
@@ -0,0 +1,15 @@
+// ELEMENTOR Trigger
+(function($) {
+    $(window).on('elementor/frontend/init', function () {
+        elementorFrontend.hooks.addAction('frontend/element_ready/cube-patient-tour.default', function ($scope) {
+            const elementSelector = `[data-id="${$scope.data('id')}"] .patient-tour`;
+            const swiperSettings = $(elementSelector).data('swiper'); // Get parameters from data-swiper attribute in HTML
+
+            const swiper = new Swiper(elementSelector, swiperSettings);
+
+            //const lastBullet = $(elementSelector).find(".patient-tour-item").last().get(0).getBoundingClientRect()
+
+            //console.log(lastBullet)
+        });
+    });
+})(jQuery);
\ No newline at end of file
diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
new file mode 100644
index 00000000..79a265ff
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
@@ -0,0 +1,261 @@
+$breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
+
+.patient-tour
+  width: calc(100% - calc(192px * 2)) !important
+  margin: 0 auto
+  overflow-x: visible
+
+  &-item
+    @apply bg-white flex-col items-center
+    //horizontal-spacing(12.5vw)
+    width: 240px !important
+    constrain(margin-right, 5vw)
+    //height: auto // Needed for fade effect so all slides are same height (height: 100% actually breaks it)
+
+    &:before,
+    &:after
+      @apply bg-blue
+      content: ""
+      position: absolute
+      height: 5px
+      bottom: 27px
+      right: 0
+
+    &:not(:last-child):after
+      constrain(width, 5vw)
+      transform: translateX(100%)
+
+    &:before
+      width: 100%
+
+    &:first-child,&:last-child
+      &:before
+        width: 50%
+
+    &:last-child:before
+      left: 0
+
+
+    +below(950px)
+      padding-left: 10vw
+      padding-right: @padding-left
+
+    +below($breakpoint-timeline-horizontal)
+      flex-direction: column
+      padding-left: 15vw
+      padding-right: @padding-left
+
+    &-image-wrapper
+      display: flex
+      flex: 1 1 40%
+      align-items: center
+      justify-content: center
+      //constrain(margin-right, 5vw)
+
+      +below($breakpoint-timeline-horizontal)
+        margin: 0 0 2em 0
+        flex-grow: 0
+        flex-basis: auto
+        width: 75%
+        max-width: 220px
+
+    &-content
+      flex: 1 1 60%
+
+      > *
+        max-width: 750px
+
+      a
+        @apply text-blue
+
+        &:hover
+          @apply text-yellow
+
+      // Special override for large text so it fits better on smallest screens
+      .text-lg
+        +below(500px)
+          font-size: 1.125rem
+
+    &-position
+      width: 64px
+      height: 64px
+      border-radius: 100px
+
+  // Timeline Pagination
+  &-pagination
+    position: relative
+    display: flex
+    justify-content: space-between
+    align-items: flex-start
+    width: 60% !important
+    //left: 10% !important
+    padding: 0
+    margin: 0 auto
+    z-index: 1
+
+    +below(950px)
+      width: 90% !important
+      left: 5% !important
+
+    +below($breakpoint-timeline-horizontal)
+      display: none
+
+    // Timeline horizontal line
+    &:before
+      content: ''
+      position: absolute
+      top: r(32px)
+      left: 0
+      right: 0
+      height: r(10px)
+      background: #EDEDF4
+      z-index: -1
+
+
+    &-bullet
+      @apply font-display font-normal
+      font-size: 24px
+      display: flex
+      flex-direction: column
+      justify-content: center
+      align-items: center
+      width: auto
+      height: auto
+      border-radius: 0
+      background: transparent
+      opacity: 1
+      text-transform: uppercase
+      outline: none
+      position: relative
+      transition: color 0.3s
+
+      &.active
+        .bullet:before
+          border-color: #FFBF29
+          background: #FFBF29
+
+      &:first-child:before
+        content: ''
+        background: #fff
+        position: absolute
+        width: 50%
+        height: 100%
+        left: 0
+        top: 0
+        z-index: 0
+
+      &:last-child:before
+        content: ''
+        background: #fff
+        position: absolute
+        width: 50%
+        height: 100%
+        right: 0
+        top: 0
+        z-index: 0
+
+      .bullet
+        height: r(68px)
+        width: @height
+        line-height: @height
+        font-size: 52px
+        display: inline-block
+        border-radius: 50%
+        margin-right: 0.5em
+        //margin-bottom: 0.5em
+        text-align: center
+        color: transparent
+        background: transparent
+        position: relative
+        transition: all 0.15s
+        z-index: 1
+
+        // Non-active timeline node
+        &:before
+          content: ''
+          position: absolute
+          top: 50%
+          left: 50%
+          transform: translate(-50%, -50%)
+          width: r(32px)
+          height: @width
+          background: #fff
+          border-radius: 50%
+          border: r(10px) solid #EDEDF4
+          z-index: 0
+          transition: opacity 0.15s
+
+
+      &-title
+        display: block
+        text-align: center
+        .active &
+          color: #FFBF29
+
+      &-active
+        @apply font-bold text-teal bg-transparent
+
+        .bullet
+          @apply text-white bg-teal
+
+          &:before
+            opacity: 0
+
+  // Step number (mobile only)
+  &-step
+    @apply text-center
+
+    //+above($breakpoint-timeline-horizontal)
+      //display: none
+
+    &-title
+      @apply font-body mt-2 mb-6 text-sm font-light
+      min-height: 52px
+      //max-width: 8em
+
+    .bullet
+      @apply font-display bg-blue text-white
+      height: r(64px)
+      width: @height
+      line-height: @height
+      font-size: 40px
+      display: inline-block
+      border-radius: 50%
+      position: relative
+
+    &-line
+      @apply bg-blue
+      width: 1000px
+      height: 5px
+      position: absolute
+      bottom: 0
+
+
+  // Navigation Arrows
+  &-prev, &-next
+    position: absolute
+    top: 50%
+    transform: translateY(-50%)
+    z-index: 10
+    stroke: currentColor
+    transition: color 0.25s
+    outline: none
+
+    &:hover
+      @apply text-blue
+
+    +below(900px)
+      svg
+        width: 20px
+
+  &-prev
+    constrain(left, 5vw)
+
+    +below(950px)
+      left: 2.5vw
+
+  &-next
+    constrain(right, 5vw)
+
+    +below(950px)
+      right: 2.5vw
\ No newline at end of file
diff --git a/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php b/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
new file mode 100644
index 00000000..6419cf3d
--- /dev/null
+++ b/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
@@ -0,0 +1,56 @@
+{{-- TIMELINE --}}
+@php
+  $settings = [
+    'slidesPerView' => 'auto',
+    'loop' => false,
+    'effect' => 'slide',
+    'touchEventsTarget' => 'wrapper', // Fix pagination links sometimes going to wrong place
+    'navigation' => [
+      'nextEl' => '.patient-tour-next',
+      'prevEl' => '.patient-tour-prev',
+    ],
+  ];
+
+  $swiper = json_encode($settings);
+
+@endphp
+
+<div class="patient-tour swiper-container" data-swiper="{{ $swiper }}">
+  <div class="swiper-wrapper">
+    @foreach ($items as $key => $item)
+      <div class="patient-tour-item swiper-slide" data-title="{{ $item['title'] }}">
+
+        <div class="patient-tour-item-image-wrapper">
+          @image($item['image']['id'], 'full', ['class' => 'patient-tour-item-image'])
+        </div>
+
+          <div class="patient-tour-step">
+              <h3 class="patient-tour-step-title">{{ $item['title'] }}</h3>
+              <div class="bullet">{{ $loop->iteration }}</div>
+          </div>
+      </div>
+    @endforeach
+  </div>
+  {{--<div class="patient-tour-prev">@svg('carousel-prev', 'stroke-current')</div>
+  <div class="patient-tour-next">@svg('carousel-next', 'stroke-current')</div>--}}
+</div>
+<div class="patient-tour-pagination mb-2v mt-10">
+    <div class="patient-tour-pagination-bullet active">
+        <span class="bullet"></span>
+        <span class="patient-tour-pagination-bullet-title">
+            pre-operative phase - UK
+        </span>
+    </div>
+    <div class="patient-tour-pagination-bullet">
+        <span class="bullet"></span>
+        <span class="patient-tour-pagination-bullet-title">
+            Surgery phase - France
+        </span>
+    </div>
+    <div class="patient-tour-pagination-bullet">
+        <span class="bullet"></span>
+        <span class="patient-tour-pagination-bullet-title">
+            recovery phase - UK
+        </span>
+    </div>
+</div>