From 1af794dbb4e5b66d8c4eb61c2398b48e97054177 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 23 Jun 2023 09:25:32 +0200 Subject: [PATCH] slick-carrousel --- composer.json | 1 + composer.lock | 129 +- web/themes/custom/eql/css-compiled/styles.css | 206 ++ web/themes/custom/eql/eql.libraries.yml | 2 + web/themes/custom/eql/scripts/main.js | 80 +- web/themes/custom/eql/scripts/slick.js | 3011 +++++++++++++++++ .../custom/eql/scss/global/_slick-slider.scss | 101 + web/themes/custom/eql/scss/styles.scss | 7 + ...iew--actus-blocks-pages--block-1.html.twig | 3 - .../custom/eql/templates/views-view.html.twig | 8 +- 10 files changed, 3522 insertions(+), 26 deletions(-) create mode 100644 web/themes/custom/eql/scripts/slick.js create mode 100644 web/themes/custom/eql/scss/global/_slick-slider.scss diff --git a/composer.json b/composer.json index 6a56ce7..aa3f51e 100644 --- a/composer.json +++ b/composer.json @@ -37,6 +37,7 @@ "drupal/panels": "^4.6", "drupal/paragraphs": "1.x-dev@dev", "drupal/role_delegation": "^1.1", + "drupal/slick": "^2.9", "drupal/structure_sync": "^2.0", "drupal/views_conditional": "^1.5", "drupal/webform": "^6.1", diff --git a/composer.lock b/composer.lock index eac0643..cb72f57 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "2d02333ad4ccdbef0bb58f0885e81016", + "content-hash": "1a878f74aaba185433cefea4134018db", "packages": [ { "name": "alchemy/zippy", @@ -2869,6 +2869,73 @@ "source": "https://git.drupalcode.org/project/betterlogin" } }, + { + "name": "drupal/blazy", + "version": "2.16.0", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/blazy.git", + "reference": "8.x-2.16" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/blazy-8.x-2.16.zip", + "reference": "8.x-2.16", + "shasum": "ae84ac6083f734968eb9c7cc008b32aaa04c5b9c" + }, + "require": { + "drupal/core": "^8.8 || ^9 || ^10" + }, + "conflict": { + "drupal/csp": "<1.12" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "8.x-2.16", + "datestamp": "1685788557", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Gaus Surahman", + "homepage": "https://www.drupal.org/u/gausarts", + "role": "Maintainer" + }, + { + "name": "Contributors", + "homepage": "https://www.drupal.org/node/2663268/committers", + "role": "Contributor" + }, + { + "name": "geek-merlin", + "homepage": "https://www.drupal.org/user/229048" + }, + { + "name": "sun", + "homepage": "https://www.drupal.org/user/54136" + } + ], + "description": "Provides basic bLazy integration for lazy loading and multi-serving images.", + "homepage": "https://drupal.org/project/blazy", + "keywords": [ + "Drupal", + "bLazy", + "lazyload" + ], + "support": { + "source": "https://git.drupalcode.org/project/blazy", + "issues": "https://drupal.org/project/issues/blazy" + } + }, { "name": "drupal/block_class", "version": "1.3.0", @@ -8344,6 +8411,66 @@ "source": "https://git.drupalcode.org/project/search_api" } }, + { + "name": "drupal/slick", + "version": "2.9.0", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/slick.git", + "reference": "8.x-2.9" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/slick-8.x-2.9.zip", + "reference": "8.x-2.9", + "shasum": "1c2cec19148a096f875390e2fd6a9e56caf5bacd" + }, + "require": { + "drupal/blazy": ">=2.14", + "drupal/core": "^8.8 || ^9 || ^10" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "8.x-2.9", + "datestamp": "1685789618", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Contributors", + "homepage": "https://www.drupal.org/node/2232779/committers", + "role": "Contributors" + }, + { + "name": "shadcn", + "homepage": "https://www.drupal.org/user/571032" + }, + { + "name": "thalles", + "homepage": "https://www.drupal.org/user/3589086" + } + ], + "description": "Slick carousel, the last carousel you'll ever need.", + "homepage": "https://drupal.org/project/slick", + "keywords": [ + "Drupal", + "carousel", + "slideshow" + ], + "support": { + "source": "https://git.drupalcode.org/project/slick", + "issues": "https://drupal.org/project/issues/slick" + } + }, { "name": "drupal/smart_trim", "version": "1.3.0", diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index a9664fe..8e15ef4 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -1,5 +1,211 @@ @charset "UTF-8"; /*eql*/ +/*setup*/ +/* Slider */ +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; } + +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; } + .slick-list:focus { + outline: none; } + .slick-list.dragging { + cursor: pointer; + cursor: hand; } + +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; } + .slick-track:before, .slick-track:after { + content: ""; + display: table; } + .slick-track:after { + clear: both; } + .slick-loading .slick-track { + visibility: hidden; } + +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + display: none; } + [dir="rtl"] .slick-slide { + float: right; } + .slick-slide img { + display: block; } + .slick-slide.slick-loading img { + display: none; } + .slick-slide.dragging img { + pointer-events: none; } + .slick-initialized .slick-slide { + display: block; } + .slick-loading .slick-slide { + visibility: hidden; } + .slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; } + +.slick-arrow.slick-hidden { + display: none; } + +/* Slider */ +.slick-loading .slick-list { + background: #fff url("./ajax-loader.gif") center center no-repeat; } + +/* Icons */ +@font-face { + font-family: "slick"; + src: url("./fonts/slick.eot"); + src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); + font-weight: normal; + font-style: normal; } + +/* Arrows */ +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 20px; + width: 20px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; } + .slick-prev:hover, .slick-prev:focus, + .slick-next:hover, + .slick-next:focus { + outline: none; + background: transparent; + color: transparent; } + .slick-prev:hover:before, .slick-prev:focus:before, + .slick-next:hover:before, + .slick-next:focus:before { + opacity: 1; } + .slick-prev.slick-disabled:before, + .slick-next.slick-disabled:before { + opacity: 0.25; } + .slick-prev:before, + .slick-next:before { + font-family: "slick"; + font-size: 20px; + line-height: 1; + color: white; + opacity: 0.75; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.slick-prev { + left: -25px; } + [dir="rtl"] .slick-prev { + left: auto; + right: -25px; } + .slick-prev:before { + content: "←"; } + [dir="rtl"] .slick-prev:before { + content: "→"; } + +.slick-next { + right: -25px; } + [dir="rtl"] .slick-next { + left: -25px; + right: auto; } + .slick-next:before { + content: "→"; } + [dir="rtl"] .slick-next:before { + content: "←"; } + +/* Dots */ +.slick-dotted.slick-slider { + margin-bottom: 30px; } + +.slick-dots { + position: absolute; + bottom: -25px; + list-style: none; + display: block; + text-align: center; + padding: 0; + margin: 0; + width: 100%; } + .slick-dots li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; } + .slick-dots li button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; } + .slick-dots li button:hover, .slick-dots li button:focus { + outline: none; } + .slick-dots li button:hover:before, .slick-dots li button:focus:before { + opacity: 1; } + .slick-dots li button:before { + position: absolute; + top: 0; + left: 0; + content: "•"; + width: 20px; + height: 20px; + font-family: "slick"; + font-size: 6px; + line-height: 20px; + text-align: center; + color: black; + opacity: 0.25; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .slick-dots li.slick-active button:before { + color: black; + opacity: 0.75; } + /*global*/ @font-face { font-family: 'Font Awesome'; diff --git a/web/themes/custom/eql/eql.libraries.yml b/web/themes/custom/eql/eql.libraries.yml index 76a6a3f..a478b27 100644 --- a/web/themes/custom/eql/eql.libraries.yml +++ b/web/themes/custom/eql/eql.libraries.yml @@ -6,6 +6,8 @@ global-css: global-js: js: scripts/main.js: {} + scripts/slick.js: {} + dependencies: - core/jquery diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 23f1136..5ffc1d0 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -1,3 +1,4 @@ + console.log('salut'); // menu burger open @@ -159,22 +160,71 @@ jQuery(function($) { // slideshow home // work but does the same for all node-type-actualite, faut limiter à ceux dans la path-frontpage -var slideIndex = 1; -showDivs(slideIndex); +// var slideIndex = 1; +// showDivs(slideIndex); -function plusDivs(n) { - showDivs(slideIndex += n); -} +// function plusDivs(n) { +// showDivs(slideIndex += n); +// } -function showDivs(n) { - var i; - var x = document.getElementsByPath("node-type-actualite"); - if (n > x.length) {slideIndex = 1} - if (n < 1) {slideIndex = x.length} ; - for (i = 0; i < x.length; i++) { - x[i].style.display = "none"; - } - x[slideIndex-1].style.display = "block"; -} +// function showDivs(n) { +// var i; +// var x = document.getElementsByPath("node-type-actualite"); +// if (n > x.length) {slideIndex = 1} +// if (n < 1) {slideIndex = x.length} ; +// for (i = 0; i < x.length; i++) { +// x[i].style.display = "none"; +// } +// x[slideIndex-1].style.display = "block"; +// } ///////////////////////////////////////////////// + +//////////////////////////////////////////////// + + +(function($, window) { + + // 'slick-carousel'; + var mobile = false; + + $(function(){ + console.log("$ ready !!"); + + + // if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)){ + // mobile = true; + // } + + if($(".path-frontpage").length > 0){ + console.log(".path-frontpage"); + // $("#"+).fadeIn(); + + $(".node-type-actualite").slick({ + slidesToShow: 1, + slidesToScroll: 4, + centerMode: true, + centerPadding: '300px', + // appendDots: $(element), + dots: true, + // appendArrows: $(element), + arrows: true, + // prevArrow: '', + // nextArrow: '', + responsive: [ + { + breakpoint: 800, + settings: { + centerPadding: '0', + } + }] + + }); + console.log(".node-type-actualite"); + + + } + + }); + })(jQuery, window); + \ No newline at end of file diff --git a/web/themes/custom/eql/scripts/slick.js b/web/themes/custom/eql/scripts/slick.js new file mode 100644 index 0000000..7aca613 --- /dev/null +++ b/web/themes/custom/eql/scripts/slick.js @@ -0,0 +1,3011 @@ +/* + _ _ _ _ + ___| (_) ___| | __ (_)___ +/ __| | |/ __| |/ / | / __| +\__ \ | | (__| < _ | \__ \ +|___/_|_|\___|_|\_(_)/ |___/ + |__/ + + Version: 1.8.1 + Author: Ken Wheeler + Website: http://kenwheeler.github.io + Docs: http://kenwheeler.github.io/slick + Repo: http://github.com/kenwheeler/slick + Issues: http://github.com/kenwheeler/slick/issues + + */ +/* global window, document, define, jQuery, setInterval, clearInterval */ +;(function(factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else if (typeof exports !== 'undefined') { + module.exports = factory(require('jquery')); + } else { + factory(jQuery); + } + +}(function($) { + 'use strict'; + var Slick = window.Slick || {}; + + Slick = (function() { + + var instanceUid = 0; + + function Slick(element, settings) { + + var _ = this, dataSettings; + + _.defaults = { + accessibility: true, + adaptiveHeight: false, + appendArrows: $(element), + appendDots: $(element), + arrows: true, + asNavFor: null, + prevArrow: '', + nextArrow: '', + autoplay: false, + autoplaySpeed: 3000, + centerMode: false, + centerPadding: '50px', + cssEase: 'ease', + customPaging: function(slider, i) { + return $(' #} {{ title_prefix }} - {% if label and not page %} {{ label }} @@ -106,4 +104,3 @@ - {# #} diff --git a/web/themes/custom/eql/templates/views-view.html.twig b/web/themes/custom/eql/templates/views-view.html.twig index 9c8e6d2..5dd00eb 100644 --- a/web/themes/custom/eql/templates/views-view.html.twig +++ b/web/themes/custom/eql/templates/views-view.html.twig @@ -62,15 +62,9 @@ {% endif %} {% if rows %} +
- {# {% if class="path-frontpage"%} #} - {# #} {{ rows }} - {# #} - - {# {% else %} #} - {# {{ rows }} #} - {# {% endif %} #}
{% elseif empty %}