From 0d9e4f6d016e761b7521df4d50cc229472a87f66 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Thu, 24 Oct 2019 23:42:58 +0200 Subject: [PATCH] WIP #3053 --- .../src/Elementor/Widgets/LinkCarousel.php | 5 +- wp-content/themes/CCV/app/setup.php | 4 +- wp-content/themes/CCV/package.json | 2 - .../resources/assets/scripts/link-carousel.js | 16 ++-- .../assets/styles/widgets/link-carousel.styl | 77 ++++++------------- .../views/widgets/link-carousel.blade.php | 45 ++++++----- wp-content/themes/CCV/yarn.lock | 10 --- 7 files changed, 59 insertions(+), 100 deletions(-) diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php index 714b6ea..3a74851 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php @@ -45,13 +45,12 @@ class LinkCarousel extends Widget_Base { wp_register_script( 'cube-link-carousel', asset('scripts/link-carousel.js'), - ['jquery'], // Dependencies + ['jquery', 'swiper'], // 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 + // Using Swiper because it is already included and heavily used by Elementor return [ 'cube-link-carousel' ]; } diff --git a/wp-content/themes/CCV/app/setup.php b/wp-content/themes/CCV/app/setup.php index 7e49840..0d590eb 100755 --- a/wp-content/themes/CCV/app/setup.php +++ b/wp-content/themes/CCV/app/setup.php @@ -10,8 +10,8 @@ use function Roots\view; * Theme assets */ add_action('wp_enqueue_scripts', function () { - wp_enqueue_script('sage/vendor', asset('scripts/vendor.js')->uri(), ['jquery'], null, true); - wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor', 'jquery'], null, true); + wp_enqueue_script('sage/vendor', asset('scripts/vendor.js')->uri(), [], null, true); + wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor'], null, true); wp_add_inline_script('sage/vendor', asset('scripts/manifest.js')->contents(), 'before'); diff --git a/wp-content/themes/CCV/package.json b/wp-content/themes/CCV/package.json index 791c71b..8db1f7e 100644 --- a/wp-content/themes/CCV/package.json +++ b/wp-content/themes/CCV/package.json @@ -23,7 +23,6 @@ "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", @@ -33,7 +32,6 @@ "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 index c482436..8cd18c2 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/link-carousel.js +++ b/wp-content/themes/CCV/resources/assets/scripts/link-carousel.js @@ -1,10 +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 +(function($) { + $(window).on('elementor/frontend/init', function () { + elementorFrontend.hooks.addAction('frontend/element_ready/cube-link-carousel.default', function ($scope) { + const elementSelector = `[data-id="${$scope.data('id')}"] .link-carousel`; + const swiperSettings = $(elementSelector).data('swiper'); // Get parameters from data-swiper attribute in HTML + const swiper = new Swiper(elementSelector, swiperSettings); + }); }); -}); +})(jQuery); 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 index 0a69bf8..af79a43 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl @@ -1,63 +1,30 @@ .link-carousel &-item - display: block + display: flex + align-items: center + flex-direction: column cursor: pointer - text-align: center - margin: 0 20px + border-right: 1px solid rgba(#fff, 0.2) + height: auto !important // Needed to make equal heights, otherwise Swiper's 100% height breaks this + &-image - display: block - width: 100% - position: relative + flex-grow: 1 + padding: 2.5em 1em 1em &-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 + display: flex + flex-grow: 0 + flex-shrink: 0 + height: 4em // Fixed height regardless of label length + width: 100% + justify-content: center + align-items: center + text-align: center + padding: 1em + font-size: 26px + transition: background-color 0.2s ease-out + + .link-carousel-item:hover & + @apply bg-teal 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 index 494fc54..45de2f4 100644 --- a/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php +++ b/wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php @@ -1,32 +1,37 @@ {{-- LINKS CAROUSEL --}} @php $settings = [ - 'slidesToShow' => 4, - 'slidesToScroll' => 1, - 'infinite' => true, - 'responsive' => [ - [ - 'breakpoint' => 768, - 'settings' => [ - 'slidesToShow' => 2 - ] - ], - ] + 'slidesPerView' => 4, + 'loop' => true, + 'breakpoints' => [ + 1200 => [ + 'slidesPerView' => 3 + ], + 768 => [ + 'slidesPerView' => 2 + ], + ], + 'navigation' => [ + 'nextEl' => '.swiper-button-next', + 'prevEl' => '.swiper-button-prev', + ], ]; - $slick = json_encode($settings); + $swiper = json_encode($settings); @endphp -
- @foreach ($links as $link) - -
+
+
+ @foreach ($links as $link) +
- + {{ $link['title'] }}

{{ $link['title'] }}

-
- - @endforeach + + @endforeach +
+
+
diff --git a/wp-content/themes/CCV/yarn.lock b/wp-content/themes/CCV/yarn.lock index ea4b029..df2ee50 100644 --- a/wp-content/themes/CCV/yarn.lock +++ b/wp-content/themes/CCV/yarn.lock @@ -4456,11 +4456,6 @@ 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" @@ -7316,11 +7311,6 @@ 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" -- 2.39.5