From 0462e73e91ebc7e58921edc9f5688ec9346f454b Mon Sep 17 00:00:00 2001
From: nael <nael@cubedesigners.com>
Date: Thu, 25 Apr 2019 18:24:28 +0200
Subject: [PATCH] WIP #2685 @3

---
 .../mu-plugins/cube/src/Elementor/Setup.php   |   1 +
 .../cube/src/Elementor/Widgets/Heading.php    |  24 ++
 .../cube/src/Elementor/Widgets/Timeline.php   | 212 ++++++++++++++++++
 .../assets/styles/widgets/heading.styl        |  12 +
 .../assets/styles/widgets/timeline.styl       |  10 +
 5 files changed, 259 insertions(+)
 create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
 create mode 100644 wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index a6298ad..50d160b 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
@@ -34,6 +34,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\HeroBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\Heading() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\Timeline() );
     }
 
     protected function _customise_sections() {
diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Heading.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Heading.php
index efa5c75..e8b5633 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Heading.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Heading.php
@@ -72,6 +72,18 @@ class Heading extends Widget_Base
             ]
         );
 
+        $this->add_control(
+            'title_color',
+            [
+                'label' => __( 'Title Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .heading-title' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
         $this->add_control(
             'subtitle',
             [
@@ -81,6 +93,17 @@ class Heading extends Widget_Base
             ]
         );
 
+        $this->add_control(
+            'subtitle_color',
+            [
+                'label' => __( 'Subtitle Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .heading-subtitle' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
         $this->end_controls_section();
 
     }
@@ -97,6 +120,7 @@ class Heading extends Widget_Base
         $subtitle = $this->get_settings('subtitle');
         $title = $this->get_settings('title');
 
+
         // Inline Editing settings
         $this->add_inline_editing_attributes('subtitle', 'none');
         $this->add_inline_editing_attributes('title', 'none');
diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
new file mode 100644
index 0000000..0ef8df9
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -0,0 +1,212 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+use Elementor\Scheme_Color;
+
+
+/**
+ * Class Subtitle
+ * @package Cube\Elementor\Widgets
+ */
+class Timeline extends Widget_Base
+{
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-timeline';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __('Timeline', 'cube');
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-date';
+    }
+
+    // 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() {
+        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'),
+            ]
+        );
+
+        // items with repeater
+//        $this->add_control(
+//                'items',
+//                [
+//                    'label' => __('Items', 'cube'),
+//                    'type' => Controls_Manager::REPEATER,
+//                    'fields' => [
+//                            [
+//                                'name' => 'title',
+//                                'label' => __('Title', 'elementor'),
+//                                'type' => Controls_Manager::TEXTAREA,
+//                                'placeholder' => __('Enter your title', 'elementor'),
+//                                'default' => '',
+//                            ],
+//                        [
+//                            'name' => 'subtitle',
+//                            'label' => __('Subtitle', 'cube'),
+//                            'type' => Controls_Manager::TEXT,
+//                            'default' => '',
+//                        ],
+//                        [
+//                            'name' => 'image',
+//                            'label' => __( 'Image', 'elementor' ),
+//                            'type' => Controls_Manager::MEDIA,
+//                            'default' => [
+//                                'url' => Utils::get_placeholder_image_src(),
+//                            ],
+//                        ],
+//                        [
+//                            'name' => 'body',
+//                            'label' => __('Body', 'cube'),
+//                            'type' => Controls_Manager::WYSIWYG,
+//                            'default' => '',
+//                        ],
+//                        'title_field' => '{{{ title }}}',
+//                    ],
+//
+//                ]
+//        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __( 'Items', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+
+                    [
+                        'name' => 'title',
+                        'label' => __( 'Title', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                        'default' => '',
+                    ],
+                    [
+                        'name' => 'subtitle',
+                        'label' => __( 'subtitle', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                        'default' => '',
+                    ],
+                    [
+                        'name' => 'image',
+                        'label' => __('Image', 'cube'),
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                    [
+                        'name' => 'body',
+                        'label' => __('Description', 'cube'),
+                        'type' => Controls_Manager::WYSIWYG,
+                        'default' => '',
+                    ],
+
+                ],
+                '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() {
+
+//    $subtitle = $this->get_settings('subtitle');
+//    $title = $this->get_settings('title');
+//
+//    $body = $this->parse_text_editor($this->get_settings('body'));
+//    // Inline Editing settings
+//    $this->add_inline_editing_attributes('subtitle', 'none');
+//    $this->add_inline_editing_attributes('title', 'none');
+//
+//    $this->add_inline_editing_attributes('body', 'advanced');
+//
+//    // CSS Classes for elements
+//    $this->add_render_attribute('subtitle', 'class', ['timeline-item-subtitle']);
+//    $this->add_render_attribute('title', 'class', ['timeline-item-title']);
+//    $this->add_render_attribute('body', 'class', ['timeline-item-body']);
+//
+//    $settings = $this->get_settings_for_display();
+
+    // Rendered content
+    $res = '<div class="timeline">';
+
+    $items = $this->get_settings('items');
+
+    foreach ($items as $item) {
+
+        $res .= '<div class="timeline-item">';
+        $res .= '<h2 class="timeline-item-title">'. $item['title'] .'</h2>';
+        $res .= '<h3 class="timeline-item-subtitle">'. $item['subtitle'] .'</h3>';
+        $res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']);
+        $res .= '<div class="timeline-item-body">'.$item['body'].'</div>';
+        $res .= '</div>'; // .timeline-item
+
+    }
+
+    $res .= '</div>'; // .timeline
+    echo $res;
+//    if (!empty($title)) {
+//        echo "<h2 {$this->get_render_attribute_string('title')}>$title</h2>";
+//    }
+//
+//    if (!empty($subtitle)) {
+//        echo "<h3 {$this->get_render_attribute_string('subtitle')}>$subtitle</h3>";
+//    }
+//
+//        // Get image by id
+//        echo wp_get_attachment_image( $settings['image']['id'], 'large' );
+//
+//    if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
+
+
+}
+
+
+}
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl b/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl
index 7dc164e..416503b 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl
@@ -8,6 +8,10 @@
     top: 0.93em // This moves the text down the height of ~1 character from the title
     left: 0
 
+    +below(1000px)
+      top: -0.2em
+      horizontal-spacing(7.5vw)
+
   &-subtitle
     writing-mode: vertical-lr
     transform: rotate(180deg)
@@ -20,6 +24,14 @@
     font-size: 12px fixed
     color: $colors.orange
 
+    +below(1000px)
+      writing-mode: unset
+      transform: none
+      text-orientation: unset
+      border-left: none
+      border-bottom: 2px solid
+
+
   &-title
     // Use the font size from the parent, which is also used to help with positioning
     font-size: inherit
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
new file mode 100644
index 0000000..7fd0c6d
--- /dev/null
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
@@ -0,0 +1,10 @@
+$fz-medium = 36px
+.timeline
+  &-img
+    width: 200px
+
+  &-subtitle
+    font-size: $fz-medium
+
+  &-body
+    h3
-- 
2.39.5