From 750e9f1918b6ec88d3605f383894fa7cdc51081b Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 12 Jan 2021 22:55:12 +0100
Subject: [PATCH] WIP #4064 @11.5

---
 web/app/mu-plugins/cube/src/Common/Setup.php  |   4 +-
 .../mu-plugins/cube/src/Elementor/Setup.php   |   3 +
 .../cube/src/Elementor/Widgets/Circle.php     |  98 ++++++++++++
 .../cube/src/Elementor/Widgets/ImageMap.php   | 122 ++++++++++++++
 .../cube/src/Elementor/Widgets/TeamGrid.php   | 150 ++++++++++++++++++
 web/app/themes/Usines/app/setup.php           |  12 ++
 .../Usines/resources/assets/styles/admin.styl |  12 ++
 .../Usines/resources/assets/styles/app.styl   |   1 -
 .../resources/assets/styles/common/admin.styl |   6 -
 .../assets/styles/components/sections.styl    |   5 +
 .../views/widgets/team-grid.blade.php         |  28 ++++
 web/app/themes/Usines/webpack.mix.js          |   1 +
 12 files changed, 434 insertions(+), 8 deletions(-)
 create mode 100644 web/app/mu-plugins/cube/src/Elementor/Widgets/Circle.php
 create mode 100644 web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php
 create mode 100644 web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php
 create mode 100644 web/app/themes/Usines/resources/assets/styles/admin.styl
 delete mode 100644 web/app/themes/Usines/resources/assets/styles/common/admin.styl
 create mode 100644 web/app/themes/Usines/resources/views/widgets/team-grid.blade.php

diff --git a/web/app/mu-plugins/cube/src/Common/Setup.php b/web/app/mu-plugins/cube/src/Common/Setup.php
index 32cb313..7553d31 100644
--- a/web/app/mu-plugins/cube/src/Common/Setup.php
+++ b/web/app/mu-plugins/cube/src/Common/Setup.php
@@ -13,7 +13,9 @@ class Setup {
 
         // Register Carbon Fields
         add_action('after_setup_theme', function () {
-            Carbon_Fields::boot();
+            if (isset($_GET['action']) && $_GET['action'] !== 'elementor') {
+                Carbon_Fields::boot();
+            }
         });
 
     }
diff --git a/web/app/mu-plugins/cube/src/Elementor/Setup.php b/web/app/mu-plugins/cube/src/Elementor/Setup.php
index 13f6c0a..5a1dbc7 100644
--- a/web/app/mu-plugins/cube/src/Elementor/Setup.php
+++ b/web/app/mu-plugins/cube/src/Elementor/Setup.php
@@ -27,6 +27,9 @@ class Setup {
 
         $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\IntroCarousel() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\Circle() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\ImageMap() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\TeamGrid() );
     }
 
 
diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/Circle.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/Circle.php
new file mode 100644
index 0000000..6edf83d
--- /dev/null
+++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/Circle.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+
+
+class Circle extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-circle';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Cercle Coloré', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-circle';
+    }
+
+    /**
+     * 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() {
+        return [];
+    }
+
+    /**
+     * 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' => __( 'Cercle Coloré', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'fill_color',
+            [
+                'label' => __( 'Couleur', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffcf3b',
+                'selectors' => [
+                    '{{WRAPPER}} svg' => 'fill: {{VALUE}};',
+                ],
+            ]
+        );
+
+        $this->add_control(
+            'width',
+            [
+                'label' => __( 'Largeur', 'cube' ),
+                'type' => Controls_Manager::TEXT,
+                'default' => '100%',
+                'selectors' => [
+                    '{{WRAPPER}} .cube-circle-wrapper' => 'width: {{VALUE}};',
+                ],
+            ]
+        );
+
+
+
+        $this->end_controls_section();
+
+        $this->common_controls();
+    }
+    /**
+     * 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() {
+
+        $svg  = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">';
+        $svg .= '<circle cx="50" cy="50" r="50"/>';
+        $svg .= '</svg>';
+
+        echo '<div class="cube-circle-wrapper">'. $svg .'</div>';
+    }
+}
diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php
new file mode 100644
index 0000000..f82dfba
--- /dev/null
+++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php
@@ -0,0 +1,122 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class ImageMap extends _Base {
+
+    // Which versions should be handled?
+    protected $versions = [
+        'desktop',
+        //'mobile', // TODO: mobile version!
+    ];
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-image-map';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Image à zones cliquables', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-click';
+    }
+
+    /**
+     * 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() {
+        return [];
+    }
+
+    /**
+     * 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' => __( 'Image à zones cliquables', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'reminder',
+            [
+                'type' => Controls_Manager::RAW_HTML,
+                'raw' => 'Pour générer le HTML, <a href="https://www.zaneray.com/responsive-image-map/" target="_blank">utilisez cet outil</a>',
+                // TODO: consider modifying Weebly Image Map generator so it generates code like Zaneray. Or just use Weebly version with jQuery plugin?
+            ]
+        );
+
+        foreach($this->versions as $version) {
+
+            $this->add_control(
+                "image_$version",
+                [
+                    'label'   => "Image ($version)",
+                    'type'    => Controls_Manager::MEDIA,
+                    'default' => [
+                        'url' => Utils::get_placeholder_image_src(),
+                    ],
+                ]
+            );
+
+            $this->add_control(
+                "html_$version",
+                [
+                    'label'   => "HTML ($version)",
+                    'type'    => Controls_Manager::CODE,
+                    'default' => '',
+                ]
+            );
+
+        }
+
+        $this->end_controls_section();
+
+        $this->common_controls();
+    }
+    /**
+     * 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() {
+
+        $res = '';
+
+        foreach($this->versions as $version) {
+            $image = $this->get_settings("image_{$version}");
+            $image_meta = wp_get_attachment_metadata($image['id']);
+            $max_width = isset($image_meta['width']) ? $image_meta['width'] . 'px' : 'none'; // Container must not be wider than image
+            $html = $this->get_settings("html_{$version}");
+
+            $res .= '<div class="relative mx-auto cube-image-map-'. $version .'" style="max-width: '. $max_width .'">';
+            $res .= '<img src="'. $image['url'] .'" class="cube-image-map-image">';
+            $res .= $html;
+            $res .= '</div>';
+        }
+
+        echo '<div class="cube-image-map">'. $res .'</div>';
+    }
+}
diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php
new file mode 100644
index 0000000..4bbad70
--- /dev/null
+++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php
@@ -0,0 +1,150 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use Elementor\Utils;
+
+use function Roots\view;
+
+
+class TeamGrid extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-team-grid';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __("Grille d'équipe", 'cube');
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-posts-grid';
+    }
+
+    /**
+     * 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() {
+        return [];
+    }
+    /**
+     * 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' => __("Grille d'équipe", 'cube'),
+            ]
+        );
+
+        $repeater = new Repeater();
+
+
+        $repeater->add_control(
+            'first_name',
+            [
+                'label' => __('Prénom', 'cube'),
+                'title_block' => false,
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $repeater->add_control(
+            'last_name',
+            [
+                'label' => __('Nom', 'cube'),
+                'title_block' => false,
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $repeater->add_control(
+            'role',
+            [
+                'label' => __('Rôle', 'cube'),
+                'title_block' => false,
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $repeater->add_control(
+            'details',
+            [
+                'label' => __('Détails', 'cube'),
+                'title_block' => false,
+                'type' => Controls_Manager::TEXTAREA,
+                'default' => ''
+            ]
+        );
+
+        $repeater->add_control(
+            'photo',
+            [
+                'label' => __('Portait', 'cube'),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $repeater->add_control(
+            'photo_hover',
+            [
+                'label' => __('Portrait au survol de la souris', 'cube'),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $this->add_control(
+            'team',
+            [
+                'label' => __('Équipe', 'cube'),
+                'type' => Controls_Manager::REPEATER,
+                'prevent_empty' => false,
+                'fields' => $repeater->get_controls(),
+                'title_field' => '{{{ first_name }}} {{{ last_name }}}',
+            ]
+        );
+
+
+        $this->end_controls_section();
+
+        $this->common_controls();
+    }
+    /**
+     * 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() {
+
+        $team = $this->get_settings('team');
+
+        echo view('widgets/team-grid', compact('team'));
+    }
+}
diff --git a/web/app/themes/Usines/app/setup.php b/web/app/themes/Usines/app/setup.php
index 2d030fd..cbaca46 100755
--- a/web/app/themes/Usines/app/setup.php
+++ b/web/app/themes/Usines/app/setup.php
@@ -36,6 +36,18 @@ add_action('wp_enqueue_scripts', function () {
     wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
 }, 100);
 
+/**
+ * Add admin specific styles
+ */
+function add_admin_styles() {
+    if (is_admin()) {
+        wp_enqueue_style('cube/admin.css', asset('styles/admin.css')->uri(), false, null);
+    }
+}
+add_action('admin_enqueue_scripts', __NAMESPACE__ . '\add_admin_styles');
+add_action('elementor/common/after_register_scripts', __NAMESPACE__ . '\add_admin_styles');
+
+
 /**
  * Remove Gutenberg styles from frontend since we don't use them
  */
diff --git a/web/app/themes/Usines/resources/assets/styles/admin.styl b/web/app/themes/Usines/resources/assets/styles/admin.styl
new file mode 100644
index 0000000..813e292
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/admin.styl
@@ -0,0 +1,12 @@
+// Admin specific styles
+
+// Position Cubedesigners custom widgets above all others in the Elementor sidebar
+#elementor-panel-categories
+  display: flex
+  flex-direction: column
+
+#elementor-panel-category-cube
+  order: -1
+
+#elementor-panel-category-pro-elements
+  order: 99 // Put these at the bottom (or could hide them completely?)
diff --git a/web/app/themes/Usines/resources/assets/styles/app.styl b/web/app/themes/Usines/resources/assets/styles/app.styl
index 7d656dc..cfd6695 100644
--- a/web/app/themes/Usines/resources/assets/styles/app.styl
+++ b/web/app/themes/Usines/resources/assets/styles/app.styl
@@ -9,7 +9,6 @@
 
 // Extracted components or custom styles that can't be done with utilities
 @import 'common/global'
-@import 'common/admin'
 @import 'common/layout'
 @import 'components/*'
 @import 'widgets/*'
diff --git a/web/app/themes/Usines/resources/assets/styles/common/admin.styl b/web/app/themes/Usines/resources/assets/styles/common/admin.styl
deleted file mode 100644
index ee38caa..0000000
--- a/web/app/themes/Usines/resources/assets/styles/common/admin.styl
+++ /dev/null
@@ -1,6 +0,0 @@
-.elementor-editor-active
-
-  // Make background layer outlines visible when in Elementor editor mode
-  .layered-backgrounds
-    > *
-      outline: 2px dashed rgba(76, 175, 80, 0.5)
diff --git a/web/app/themes/Usines/resources/assets/styles/components/sections.styl b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
index 9e28c96..229f8f7 100644
--- a/web/app/themes/Usines/resources/assets/styles/components/sections.styl
+++ b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
@@ -38,3 +38,8 @@
     bottom: 0 !important
     margin: 0 !important
     transform: none !important
+
+// Make background layer outlines visible when in Elementor editor mode
+.elementor-editor-active .layered-backgrounds
+  > *
+    outline: 2px dashed rgba(76, 175, 80, 0.5)
diff --git a/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php b/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php
new file mode 100644
index 0000000..e2ecf26
--- /dev/null
+++ b/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php
@@ -0,0 +1,28 @@
+{{-- TEAM GRID --}}
+<div class="team-grid">
+
+  <div class="team-grid-items">
+    @foreach ($team as $person)
+      <div class="team-grid-person">
+        <div class="team-grid-photos relative rounded-lg" style="max-width: 385px">
+          <div style="width: 100%; padding-bottom: 100%;">{{-- Proportional sizer to make a responsive square --}}</div>
+
+          @php($photo_classes = 'absolute top-0 left-0 w-full h-full')
+
+          {{-- Main photo --}}
+          <div class="z-20 group-hover:opacity-0 {{ $photo_classes }}" style="background-image:url({{ $person['photo']['url'] }})"></div>
+          {{-- Hover photo --}}
+          <div class="z-10 {{ $photo_classes }}" style="background-image:url({{ $person['photo_hover']['url'] }})"></div>
+        </div>
+        <div class="text-center">
+          <strong class="text-lg">{{ $person['first_name'] }} {{ strtoupper($person['last_name']) }}</strong>
+          <br>
+          <em>{{ $person['role'] }}</em>
+          <br>
+          {{ $person['details'] }}
+        </div>
+      </div>
+    @endforeach
+  </div>
+
+</div>
diff --git a/web/app/themes/Usines/webpack.mix.js b/web/app/themes/Usines/webpack.mix.js
index 8510310..e98b42d 100644
--- a/web/app/themes/Usines/webpack.mix.js
+++ b/web/app/themes/Usines/webpack.mix.js
@@ -32,6 +32,7 @@ mix
   .tailwind();
 
 mix.stylus('resources/assets/styles/editor.styl', 'styles');
+mix.stylus('resources/assets/styles/admin.styl', 'styles');
 
 // Javascript
 mix
-- 
2.39.5