From 605df023242928f41db1c654f24e382ae48370bb Mon Sep 17 00:00:00 2001 From: nael Date: Fri, 26 Apr 2019 17:26:44 +0200 Subject: [PATCH] WIP #2685 @7 --- .../cube/src/Elementor/Widgets/Timeline.php | 120 +++++------------- wp-content/themes/c6/app/setup.php | 1 + .../themes/c6/resources/assets/config.json | 3 + .../c6/resources/assets/scripts/script.js | 30 +++++ .../assets/styles/common/variables.styl | 10 +- .../assets/styles/widgets/timeline.styl | 70 ++++++++-- 6 files changed, 133 insertions(+), 101 deletions(-) create mode 100644 wp-content/themes/c6/resources/assets/scripts/script.js 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 0ef8df9..2ab95ff 100644 --- 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 = '
'; - - $items = $this->get_settings('items'); - - foreach ($items as $item) { - - $res .= '
'; - $res .= '

'. $item['title'] .'

'; - $res .= '

'. $item['subtitle'] .'

'; - $res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']); - $res .= '
'.$item['body'].'
'; - $res .= '
'; // .timeline-item + // Rendered content + $res = '
'; + $res .= '
'; + $items = $this->get_settings('items'); + $res .= '
    '; + foreach ($items as $index => $item) { - } + $arr = explode(' ', trim($item['title'])); // select the first word + $res .= '
  • ' . $arr[0] . '
    • '; - $res .= '
'; // .timeline - echo $res; -// if (!empty($title)) { -// echo "

get_render_attribute_string('title')}>$title

"; -// } -// -// if (!empty($subtitle)) { -// echo "

get_render_attribute_string('subtitle')}>$subtitle

"; -// } -// -// // Get image by id -// echo wp_get_attachment_image( $settings['image']['id'], 'large' ); -// -// if (!empty($body)) echo "
get_render_attribute_string('body')}>$body
"; + } + $res .= ''; // .year-item + $res .= '
'; // .year + $res .= '
'; + foreach ($items as $index => $item) { -} + $res .= '
'; + $res .= '

' . $item['title'] . '

'; + $res .= '

' . $item['subtitle'] . '

'; + $res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']); + $res .= '
' . $item['body'] . '
'; + $res .= '
'; // .timeline-item + + } + + $res .= '
'; // .timeline + $res .= '
'; // .timeline-wrapper + echo $res; + + } } diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php index e28f182..e4f8b9c 100644 --- 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 adac50c..0e82b77 100644 --- 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 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 45e6352..db7d899 100644 --- 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 7fd0c6d..633ae0b 100644 --- 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 -- 2.39.5