WIP #2685 @7

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
index 0ef8df95e31e27262e6cadc21a2628c37e854a46..2ab95ffbf4693fca71696394be132693fa0b0d4f 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -63,63 +63,24 @@ class Timeline extends Widget_Base
             ]
         );
 
-        // 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 }}}',
-//                    ],
-//
-//                ]
-//        );
-
+        // all the items with REPEATER
         $this->add_control(
             'items',
             [
-                'label' => __( 'Items', 'cube' ),
+                'label' => __('Items', 'cube'),
                 'type' => Controls_Manager::REPEATER,
                 'fields' => [
 
                     [
                         'name' => 'title',
-                        'label' => __( 'Title', 'cube' ),
+                        'label' => __('Title', 'cube'),
                         'type' => Controls_Manager::TEXT,
                         'label_block' => true,
                         'default' => '',
                     ],
                     [
                         'name' => 'subtitle',
-                        'label' => __( 'subtitle', 'cube' ),
+                        'label' => __('subtitle', 'cube'),
                         'type' => Controls_Manager::TEXT,
                         'label_block' => true,
                         'default' => '',
@@ -157,56 +118,37 @@ class Timeline extends Widget_Base
      */
     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
+        // Rendered content
+        $res = '<div class="timeline-wrapper">';
+        $res .= '<div class="year">';
+        $items = $this->get_settings('items');
+        $res .= '<ul>';
+        foreach ($items as $index => $item) {
 
-    }
+            $arr = explode(' ', trim($item['title'])); // select the first word
+            $res .= '<li class="year-item" data-year="' . $index . '"><a>' . $arr[0] . '</a></li>';
 
-    $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>";
+        }
+        $res .= '</ul>'; // .year-item
+        $res .= '</div>'; // .year
+        $res .= '<div class="timeline">';
 
+        foreach ($items as $index => $item) {
 
-}
+            $res .= '<div class="timeline-item" data-timeline="' . $index . '">';
+            $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
+        $res .= '</div>'; // .timeline-wrapper
+        echo $res;
+
+    }
 
 
 }

diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php
index e28f182121393989ddfb01c197c78d8ffaebbc0c..e4f8b9cbc0fcccf0051203d85370b8ea2785c036 100644 (file)
--- a/wp-content/themes/c6/app/setup.php
+++ b/wp-content/themes/c6/app/setup.php
@@ -15,6 +15,7 @@ add_action('wp_enqueue_scripts', function () {
     // is always loaded afterwards, allowing us to override the default styles. On 404 pages, this wasn't happening.
     wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['elementor-frontend'], null);
     wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
+    wp_enqueue_script('sage/script.js', asset_path('scripts/script.js'), ['jquery'], null, true);
 
     if (is_single() && comments_open() && get_option('thread_comments')) {
         wp_enqueue_script('comment-reply');

diff --git a/wp-content/themes/c6/resources/assets/config.json b/wp-content/themes/c6/resources/assets/config.json
index adac50c1722967246c78bb12618b5ab91bddc2b7..0e82b779613d7d092c27822e134e444b04f00b7d 100644 (file)
--- a/wp-content/themes/c6/resources/assets/config.json
+++ b/wp-content/themes/c6/resources/assets/config.json
@@ -6,6 +6,9 @@
     ],
     "customizer": [
       "./scripts/customizer.js"
+    ],
+    "script": [
+      "./scripts/script.js"
     ]
   },
   "publicPath": "/wp-content/themes/c6",

diff --git a/wp-content/themes/c6/resources/assets/scripts/script.js b/wp-content/themes/c6/resources/assets/scripts/script.js
new file mode 100644 (file)
index 0000000..4fdd9db
--- /dev/null
+++ b/wp-content/themes/c6/resources/assets/scripts/script.js
@@ -0,0 +1,30 @@
+// import $ from 'jquery';
+
+// console.log('wesh');
+
+let link = $('.year-item');
+
+link.on('click', function() {
+    let target = $(this).data('year');
+
+    alert(target);
+});
+
+$(window).on('scroll', function () {
+    var sections = $('.timeline-item')
+        , nav = $('.year-item')
+        , nav_height = nav.outerHeight()
+        , cur_pos = $(this).scrollTop();
+    sections.each(function() {
+        var top = $(this).offset().top - nav_height,
+            bottom = top + $(this).outerHeight();
+
+        if (cur_pos >= top && cur_pos <= bottom) {
+            nav.find('a').removeClass('active');
+            sections.removeClass('active');
+
+            $(this).addClass('active');
+            // nav.data('year').addClass('active');
+        }
+    });
+});
\ No newline at end of file

diff --git a/wp-content/themes/c6/resources/assets/styles/common/variables.styl b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
index 45e6352635f64ed36ff8a8c46a1474dccf188daa..db7d899716d6dad74cc007646ab1114b4b36accc 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/common/variables.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
@@ -11,10 +11,12 @@ $font = 'Muli', sans-serif
 
 // Font sizing
 $font-size-base         = 16px // Size of 1rem
-$font-size-extra-large  = 81px
-$font-size-large        = 54px
-$font-size-medium       = 45px
-$font-size-small        = 12px
+
+$font-size-extra-large  = 81px // h1
+$font-size-large        = 54px // h2
+$font-size-medium       = 36px // h3
+$font-size-small        = 24px // h4
+$font-size-extra-small  = 12px //
 
 // Breakpoints in Rupture (https://github.com/jescalan/rupture)
 rupture.scale        = 0 400px   768px   1024px

diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
index 7fd0c6de82ea337cf6970dbb85024026ab6c5222..633ae0b23c2ae8c93eceb5619f1b2b3147680037 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
@@ -1,10 +1,64 @@
-$fz-medium = 36px
-.timeline
-  &-img
-    width: 200px
 
-  &-subtitle
-    font-size: $fz-medium
 
-  &-body
-    h3
+.timeline-wrapper
+  display: flex
+  justify-content: center
+
+.year
+  position: sticky
+  height: 0%
+  padding: 1rem 5.375rem
+  top: 0
+  ul
+    list-style: none
+    li
+      margin-bottom: 24px
+      cursor: pointer
+      text-align: right
+      &:first-of-type
+        font-size: $font-size-small
+        color: $colors.orange
+
+.timeline
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  &-item
+    margin-bottom: 4em
+    &-title
+      margin: 0
+    &-subtitle
+      font-size: $font-size-medium
+      margin: 48px 0
+    &-img
+      margin-bottom: 48px
+    &-body
+      p
+        max-width: 960px
+        margin-bottom: 48px
+      h4
+        font-size: $font-size-small
+        font-weight: lighter
+        margin-bottom: 24px
+        max-width: 960px
+      ul
+        list-style none
+        margin-left: 0.35em
+        li
+          margin-bottom: 1em
+          max-width: 960px
+          position: relative
+          &::before
+            content: ""
+            display: block
+            width: 12px
+            height: 1px
+            background: black
+            position: absolute
+            left: -1.6em
+            top: 12px
+          &:first-of-type
+            margin-top: 1em
+          &:last-of-type
+            margin-bottom: 0
\ No newline at end of file