From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 23 Oct 2019 17:23:39 +0000 (+0200)
Subject: WIP #3053
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4b6096ce58f4c34f3e44fc4af9966bd8118ab68d;p=ccv-wordpress.git

WIP #3053
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index 4b66eea..be3f0db 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\TextBlock() );
         $elementor->widgets_manager->register_widget_type( new Widgets\HeaderSlideshow() );
         $elementor->widgets_manager->register_widget_type( new Widgets\NewsBanner() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\LinkCarousel() );
     }
 
     protected function _customise_sections() {
diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php
new file mode 100644
index 0000000..714b6ea
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php
@@ -0,0 +1,121 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+use function Roots\view;
+use function Roots\asset;
+
+
+class LinkCarousel extends Widget_Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-link-carousel';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Link Carousel', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-slider-device';
+    }
+
+    // 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() {
+
+        wp_register_script(
+            'cube-link-carousel',
+            asset('scripts/link-carousel.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        // Note: previously we used Elementor's copy of Slick but they replaced
+        // Slick with Swiper in recent versions so now we handle it all ourselves
+
+        return [ 'cube-link-carousel' ];
+    }
+    /**
+     * 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' => __( 'Link Carousel', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'links',
+            [
+                'label' => __( 'Links', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'title',
+                        'label' => __( 'Title', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                        'default' => '',
+                    ],
+                    [
+                        'name' => 'url',
+                        'label' => __( 'Link URL', 'cube' ),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                    ],
+                    [
+                        'name' => 'image',
+                        'label' => __('Image', 'cube'),
+                        'label_block' => true,
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                ],
+                '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() {
+        $links = $this->get_settings('links');
+        echo view('widgets/link-carousel', compact('links'));
+    }
+}
diff --git a/wp-content/themes/CCV/package.json b/wp-content/themes/CCV/package.json
index 8db1f7e..791c71b 100644
--- a/wp-content/themes/CCV/package.json
+++ b/wp-content/themes/CCV/package.json
@@ -23,6 +23,7 @@
     "cross-env": "^5.2",
     "eslint": "^5.11",
     "eslint-plugin-import": "^2.17",
+    "jquery": "^3.4.1",
     "laravel-mix": "^4.0",
     "laravel-mix-purgecss": "^4.1.0",
     "lost": "^8.3.1",
@@ -32,6 +33,7 @@
     "purgecss-with-wordpress": "knowler/purgecss-with-wordpress#more-wp-generated-classes",
     "rimraf": "^2.6",
     "rupture": "^0.7.1",
+    "slick-carousel": "^1.8.1",
     "stylelint": "^10.1",
     "stylelint-config-standard": "^18.2",
     "stylus": "^0.54.7",
diff --git a/wp-content/themes/CCV/resources/assets/scripts/link-carousel.js b/wp-content/themes/CCV/resources/assets/scripts/link-carousel.js
new file mode 100644
index 0000000..c482436
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/scripts/link-carousel.js
@@ -0,0 +1,10 @@
+import 'slick-carousel'
+import $ from 'jquery';
+window.$ = window.jQuery = $;
+
+// ELEMENTOR Trigger
+$(window).on( 'elementor/frontend/init', function() {
+  elementorFrontend.hooks.addAction('frontend/element_ready/cube-link-carousel.default', function ($scope) {
+    $scope.find('.link-carousel').slick(); // Note: settings come from data-attribute in HTML
+  });
+});
diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js
index ad9e74b..f614147 100644
--- a/wp-content/themes/CCV/resources/assets/scripts/menu.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js
@@ -41,6 +41,7 @@ document.addEventListener(
 
 function buildMobileMenu() {
   const menu = document.createElement('div');
+  const menuWrapper = document.createElement('div');
   const menuItems = document.querySelector('.main-menu').cloneNode(true);
   const ctaButtons = document.querySelectorAll('.header-cta');
   const locales = document.querySelectorAll('.nav-secondary .locales a');
@@ -75,5 +76,8 @@ function buildMobileMenu() {
   menu.setAttribute('id', menuID);
   menu.appendChild(menuItems);
 
-  document.body.appendChild(menu);
+  menuWrapper.className = 'hidden';
+  menuWrapper.appendChild(menu);
+
+  document.body.appendChild(menuWrapper);
 }
diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
new file mode 100644
index 0000000..0a69bf8
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
@@ -0,0 +1,63 @@
+.link-carousel
+
+  &-item
+    display: block
+    cursor: pointer
+    text-align: center
+    margin: 0 20px
+
+    &-image
+      display: block
+      width: 100%
+      position: relative
+
+    &-title
+      margin-top: 1.5em
+
+// Slick overrides
+.slick-slider
+  padding: 0 80px
+
+  +below(768px)
+    padding: 0 60px
+  +below(500px)
+    padding: 0 40px
+
+
+  .slick-slide
+    outline: none
+
+  .slick-arrow, .slick-arrow:focus
+    width: auto
+    background: #ccc
+    border-radius: 50%
+    font-size: 56px
+    line-height: 1.25
+    width: 1.25em
+    height: @width
+    text-align: center
+    transition: all 0.2s ease-out
+
+    +below(768px)
+      font-size: 45px
+    +below(500px)
+      font-size: 35px
+
+    &:before
+      display: inline-block
+      color: currentColor
+      font-size: 1em
+      opacity: 0.7
+      transition: inherit
+      position: relative
+      top: -0.02em
+
+    &:hover
+      &:before
+        opacity: 1
+
+
+  .slick-prev
+    left: 0
+  .slick-next
+    right: 0
diff --git a/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php b/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php
new file mode 100644
index 0000000..494fc54
--- /dev/null
+++ b/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php
@@ -0,0 +1,32 @@
+{{-- LINKS CAROUSEL --}}
+@php
+  $settings = [
+    'slidesToShow' => 4,
+    'slidesToScroll' => 1,
+    'infinite' => true,
+    'responsive' => [
+      [
+        'breakpoint' => 768,
+        'settings' => [
+          'slidesToShow' => 2
+        ]
+      ],
+    ]
+  ];
+
+  $slick = json_encode($settings);
+
+@endphp
+
+<div class="link-carousel" data-slick="{{ $slick }}">
+  @foreach ($links as $link)
+    <a class="link-carousel-item slick-slide" href="{{ $link['url'] }}">
+      <div class="slick-slide-inner">
+        <div class="link-carousel-item-image">
+          <img src="{{ $link['image']['url'] }}">
+        </div>
+        <h4 class="link-carousel-item-title">{{ $link['title'] }}</h4>
+      </div>
+    </a>
+  @endforeach
+</div>
diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js
index 42b98ba..2bb517a 100644
--- a/wp-content/themes/CCV/webpack.mix.js
+++ b/wp-content/themes/CCV/webpack.mix.js
@@ -44,6 +44,7 @@ mix.stylus(src`styles/app.styl`, 'styles', {
 
 // JavaScript
 mix.js(src`scripts/app.js`, 'scripts')
+   .js(src`scripts/link-carousel.js`, 'scripts')
    .js(src`scripts/customizer.js`, 'scripts')
    .extract();
 
diff --git a/wp-content/themes/CCV/yarn.lock b/wp-content/themes/CCV/yarn.lock
index df2ee50..ea4b029 100644
--- a/wp-content/themes/CCV/yarn.lock
+++ b/wp-content/themes/CCV/yarn.lock
@@ -4456,6 +4456,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+jquery@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+
 js-dom-router@^1.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/js-dom-router/-/js-dom-router-1.0.0.tgz#c4b05674f6f0734f5bf9b9f389f1b3d9c62e4103"
@@ -7311,6 +7316,11 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"