From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 30 Nov 2020 18:05:45 +0000 (+0100)
Subject: WIP #4064 @6.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=fb8f309bbd5291b70ffe2bc102bb69f75d995400;p=usines-reunies.git

WIP #4064 @6.5
---

diff --git a/web/app/mu-plugins/cube/src/Elementor/Setup.php b/web/app/mu-plugins/cube/src/Elementor/Setup.php
index 37793dd..2fc5697 100644
--- a/web/app/mu-plugins/cube/src/Elementor/Setup.php
+++ b/web/app/mu-plugins/cube/src/Elementor/Setup.php
@@ -21,7 +21,7 @@ class Setup {
 
         $elementor = Plugin::$instance;
 
-        //$elementor->widgets_manager->register_widget_type( new Widgets\SolutionGrid() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
     }
 
 
diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
new file mode 100644
index 0000000..462f732
--- /dev/null
+++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
@@ -0,0 +1,328 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+
+class TextBlock extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-text';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Formatted Text', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-post-title';
+    }
+
+    /**
+     * 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' => __( 'Content', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'title',
+            [
+                'label' => __( 'Title', 'elementor' ),
+                'type' => Controls_Manager::TEXTAREA,
+                'placeholder' => __( 'Enter your title', 'elementor' ),
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'title_tag',
+            [
+                'label' => __( 'Balise de titre (SEO)', 'cube' ),
+                'type' => Controls_Manager::SELECT,
+                'options' => [
+                    'h1' => __( 'H1', 'cube' ),
+                    'h2' => __( 'H2 (Défaut)', 'cube' ),
+                    'h3' => __( 'H3', 'cube' ),
+                ],
+                'default' => 'h2',
+            ]
+        );
+
+        $this->add_control(
+            'body',
+            [
+                'label' => __('Body', 'cube'),
+                'type' => Controls_Manager::WYSIWYG,
+                '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::URL,
+                'default' => [
+                    'url' => '',
+                    'is_external' => false,
+                ],
+                'show_external' => true
+            ]
+        );
+
+        $this->end_controls_section();
+
+        $this->start_controls_section(
+            'section_formatting',
+            [
+                'label' => __( 'Colours & Formatting', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+			'title_size',
+			[
+				'label' => __( 'Title Size', 'cube' ),
+                'type' => Controls_Manager::SELECT,
+                'options' => [
+                    'text-lg' => __( 'Plus petite', 'cube' ),
+                    '' => __( 'Défaut', 'cube' ),
+                    'text-2xl' => __( 'Plus grande', 'cube' ),
+                ],
+                'default' => '',
+			]
+        );
+
+        $this->add_control(
+            'title_color',
+            [
+                'label' => __( 'Title Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .text-block-title' => '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_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' => 'left',
+                'prefix_class' => 'text-block-align-',
+            ]
+        );
+
+        $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->add_control(
+            'block_position',
+            [
+                'label' => __('Positionnement de bloc', 'cube'),
+                'type' => Controls_Manager::SELECT,
+                'options' => [
+                    '' => __( 'Défaut', 'cube' ),
+                    'margin-left: auto; margin-right: auto;' => __( 'Centré', 'cube' ),
+                    'margin-right: auto;' => __( 'Gauche', 'cube' ),
+                    'margin-left: auto;' => __( 'Droite', 'cube' ),
+                ],
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .text-block' => '{{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() {
+
+        $title = $this->get_settings('title');
+        $title_tag = $this->get_settings('title_tag');
+        $title_size = $this->get_settings('title_size');
+        $body = $this->parse_text_editor($this->get_settings('body'));
+        $cta_text = $this->get_settings('cta_text');
+        $cta_link = $this->get_settings('cta_link');
+
+        if (empty($title_size)) {
+            $title_size = 'text-xl';
+        }
+
+        if ( ! empty( $cta_link['url'] ) ) {
+            $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] );
+
+            if ( $cta_link['is_external'] ) {
+                $this->add_render_attribute( 'cta_text', 'target', '_blank' );
+            }
+
+            if ( $cta_link['nofollow'] ) {
+                $this->add_render_attribute( 'cta_text', 'rel', 'nofollow' );
+            }
+        }
+
+        // Inline Editing settings
+        $this->add_inline_editing_attributes('title', 'none');
+        $this->add_inline_editing_attributes('body', 'advanced');
+        $this->add_inline_editing_attributes('cta_text', 'none');
+
+        // CSS Classes for elements
+        $this->add_render_attribute('title', 'class', ["text-block-title $title_size"]);
+        $this->add_render_attribute('body', 'class', ['text-block-body']);
+        $this->add_render_attribute('cta_text', 'class', ['text-block-cta btn']);
+
+        // Rendered content
+        echo '<div class="text-block">';
+        if (!empty($title)) echo "<{$title_tag} {$this->get_render_attribute_string('title')}>$title</{$title_tag}>";
+        if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
+        if (!empty($cta_text)) {
+            echo '<a '. $this->get_render_attribute_string('cta_text') .'>';
+            echo $cta_text;
+            echo '</a>';
+        }
+        echo '</div>';
+    }
+
+    /**
+     * Render text editor widget output in the editor.
+     *
+     * Written as a Backbone JavaScript template and used to generate the live preview.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _content_template() {
+        ?>
+        <#
+
+        var title_size = (settings.title_size == '') ? 'text-xl' : settings.title_size;
+
+        view.addRenderAttribute( 'title', 'class', ['text-block-title '+ title_size]);
+        view.addRenderAttribute( 'body', 'class', ['text-block-body']);
+        view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta btn']);
+
+        view.addInlineEditingAttributes( 'title', 'none' );
+        view.addInlineEditingAttributes( 'body', 'advanced' );
+        view.addInlineEditingAttributes( 'cta_text', 'none' );
+        #>
+        <div class="text-block">
+
+            <# if ('' !== settings.title) { #>
+            <{{{ settings.title_tag }}} {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</{{{ settings.title_tag }}}>
+        <# } #>
+
+        <# if ('' !== settings.body) { #>
+        <div {{{ view.getRenderAttributeString( 'body' ) }}}>{{{ settings.body }}}</div>
+        <# } #>
+
+        <# if ('' !== settings.cta_text) { #>
+        <a {{{ view.getRenderAttributeString( 'cta_text' ) }}}>
+        {{{ settings.cta_text }}}
+        </a>
+        <# } #>
+
+        </div>
+        <?php
+    }
+
+}
diff --git a/web/app/themes/Usines/resources/assets/styles/app.styl b/web/app/themes/Usines/resources/assets/styles/app.styl
index 083b7b7..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,9 @@
 
 // Extracted components or custom styles that can't be done with utilities
 @import 'common/global'
+@import 'common/layout'
 @import 'components/*'
+@import 'widgets/*'
 //@import 'pages/*'
 
 // Allow spacing classes to override others defined here
diff --git a/web/app/themes/Usines/resources/assets/styles/common/layout.styl b/web/app/themes/Usines/resources/assets/styles/common/layout.styl
new file mode 100644
index 0000000..89191a4
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/common/layout.styl
@@ -0,0 +1,44 @@
+// Make sure widget has height when column flex align-items is set
+// This is for widgets that don't take up height on their own, like
+// the flexible background image. Ideally the parent column shouldn't
+// have an alignment set (so it stretches) but this doesn't seem to do any
+// harm and it's more intuitive behaviour...
+.elementor-widget-wrap
+  height: 100%
+  align-content: center
+
+.container,
+.elementor-section-boxed > .elementor-container
+  center($content-max-width)
+
+  // Nested containers should have no padding
+  .elementor-container, &.elementor-column-gap-no
+    padding-left: 0
+    padding-right: 0
+
+// Override default spacing between widgets
+.elementor-widget-wrap .elementor-widget:not(:last-child)
+  constrain(margin-bottom, $vertical-gutter) // Set margin bottom to standard gutter
+
+// Get rid of default 10px padding around elements
+.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated
+  padding: 0
+
+.elementor-section-boxed > .elementor-column-gap-extended
+  horizontal-spacing(-1.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below
+  > .elementor-row > .elementor-column > .elementor-element-populated
+    horizontal-spacing(1.5vw)
+    padding-top: 0
+    padding-bottom: 0
+
+.elementor-section-boxed > .elementor-column-gap-wide
+  horizontal-spacing(-2.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below
+  > .elementor-row > .elementor-column > .elementor-element-populated
+    horizontal-spacing(2.5vw)
+    padding-top: 0
+    padding-bottom: 0
+
+// Once columns have wrapped, remove padding for all
++below($breakpoint-columns)
+  .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated
+    padding: 0 !important
diff --git a/web/app/themes/Usines/resources/assets/styles/components/headings.styl b/web/app/themes/Usines/resources/assets/styles/components/headings.styl
new file mode 100644
index 0000000..d419ee7
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/components/headings.styl
@@ -0,0 +1,17 @@
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4
+  @apply font-medium
+
+h1, .h1
+  @apply text-2xl
+
+h2, .h2
+  @apply text-xl
+
+h3, .h3
+  @apply text-lg
+
+h4, .h4
+  @apply text-base
diff --git a/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl b/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl
new file mode 100644
index 0000000..c5bc21e
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl
@@ -0,0 +1,43 @@
+// Text block widget (Elementor defaults)
+.elementor-widget-cube-text //.elementor-widget-container
+  vertical-spacing(2.5vw, margin)
+  horizontal-spacing(2.5vw, margin)
+  width: 100%
+  box-sizing: content-box // So padding doesn't influence max-width
+
+.text-block
+  .text-block-align-center &
+    text-align: center
+    margin-left: auto
+    margin-right: auto
+
+  > * + * // Automatic spacing between direct child elements
+    margin-top: 1.5em
+
+  &-title
+    white-space: pre-line
+
+  &-cta
+    @apply antialiased
+    margin-top: r(30px)
+
+    // If the CTA is the first child, it means it is the only element
+    // in the text block so we don't want the top margin...
+    &:first-child
+      margin-top: 0
+
+// Not nested so that we can share these styles with TinyMCE
+.text-block-body, #tinymce
+  font-weight: 300
+
+  > * + * // Automatic spacing between direct child elements
+    margin-top: 1.5em
+
+  h3 + p, h4 + p
+    margin-top: 0.5em
+
+  h3
+    @apply font-medium text-lg
+
+  a
+    @apply text-red
diff --git a/web/app/themes/Usines/tailwind.config.js b/web/app/themes/Usines/tailwind.config.js
index 8c328c2..456bb72 100644
--- a/web/app/themes/Usines/tailwind.config.js
+++ b/web/app/themes/Usines/tailwind.config.js
@@ -36,10 +36,10 @@ module.exports = {
     },
 
     fontSize: {
-      'sm': ['0.875rem', { lineHeight: '1.25rem' }], // 14px
-      'base': ['1rem', { lineHeight: '1.5rem' }], // 16px
-      'lg': ['1.25rem', { lineHeight: '1.75rem' }], // 20px
-      'xl': ['2.25rem', { lineHeight: '1.75rem' }], // 36px
+      'sm': ['0.875rem', { lineHeight: '1.25' }], // 14px
+      'base': ['1rem', { lineHeight: '1.5' }], // 16px
+      'lg': ['1.25rem', { lineHeight: '1.75' }], // 20px
+      'xl': ['2.25rem', { lineHeight: '1.25' }], // 36px
       '2xl': ['3.375rem', { lineHeight: '1' }], // 54px
     },