host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Splide slider

Browse source
This commit is contained in:
Paul Nicoué 2022-08-02 18:50:27 +02:00
parent f0f2633919
commit 0d52c5dd04
9 changed files with 4161 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

65
package-lock.json generated
View file

@ -5,12 +5,15 @@
"packages": {
"": {
"devDependencies": {
"@splidejs/splide": "^4.0.7",
"@symfony/webpack-encore": "^3.0.0",
"autoprefixer": "^10.4.7",
"core-js": "^3.23.4",
"postcss-loader": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack-notifier": "^1.15.0"
}
},
@ -1887,6 +1890,12 @@
"node": ">=4"
}
},
"node_modules/@splidejs/splide": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.0.7.tgz",
"integrity": "sha512-aJAOGJN2lwjwou3mxQofc3uhe+RXpw9in0WfysFX7AMT/mj7wSqoetfm41s7J8jU6FJ3ZWaLYgSJIpBAQ5wyqw==",
"dev": true
},
"node_modules/@symfony/webpack-encore": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-3.0.0.tgz",
@ -7219,6 +7228,25 @@
"node": ">=0.6"
}
},
"node_modules/ts-loader": {
"version": "9.3.1",
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.1.tgz",
"integrity": "sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==",
"dev": true,
"dependencies": {
"chalk": "^4.1.0",
"enhanced-resolve": "^5.0.0",
"micromatch": "^4.0.0",
"semver": "^7.3.4"
},
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"typescript": "*",
"webpack": "^5.0.0"
}
},
"node_modules/type-is": {
"version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@ -7232,6 +7260,19 @@
"node": ">= 0.6"
}
},
"node_modules/typescript": {
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/unicode-canonical-property-names-ecmascript": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@ -9163,6 +9204,12 @@
}
}
},
"@splidejs/splide": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.0.7.tgz",
"integrity": "sha512-aJAOGJN2lwjwou3mxQofc3uhe+RXpw9in0WfysFX7AMT/mj7wSqoetfm41s7J8jU6FJ3ZWaLYgSJIpBAQ5wyqw==",
"dev": true
},
"@symfony/webpack-encore": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-3.0.0.tgz",
@ -13132,6 +13179,18 @@
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
"dev": true
},
"ts-loader": {
"version": "9.3.1",
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.1.tgz",
"integrity": "sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==",
"dev": true,
"requires": {
"chalk": "^4.1.0",
"enhanced-resolve": "^5.0.0",
"micromatch": "^4.0.0",
"semver": "^7.3.4"
}
},
"type-is": {
"version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@ -13142,6 +13201,12 @@
"mime-types": "~2.1.24"
}
},
"typescript": {
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
"dev": true
},
"unicode-canonical-property-names-ecmascript": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",

3
package.json
View file

@ -6,12 +6,15 @@
"not dead"
],
"devDependencies": {
"@splidejs/splide": "^4.0.7",
"@symfony/webpack-encore": "^3.0.0",
"autoprefixer": "^10.4.7",
"core-js": "^3.23.4",
"postcss-loader": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack-notifier": "^1.15.0"
},
"scripts": {

3840
public/assets/build/app.js
View file

File diff suppressed because one or more lines are too long

176
public/assets/build/main.css
View file

File diff suppressed because one or more lines are too long

29
public/assets/css/main.scss
View file

@ -1,4 +1,5 @@
@use 'utils/minireset';
@use '@splidejs/splide/dist/css/splide-core.min';
@use 'partials/fonts';
@use 'partials/variables' as *;
@use 'partials/animations';
@ -106,19 +107,28 @@ body {
path:nth-child(1) {
stroke: var(--black);
transition: stroke 400ms ease-in-out;
}
path:nth-child(2) {
stroke: var(--white);
}
&--rotate-vertical-left {
animation: rotate-vertical-left 800ms ease-in-out infinite;
transition: stroke 400ms ease-in-out;
}
&--rotate-horizontal-bottom {
animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
}
&--white {
path:nth-child(1) {
stroke: var(--white);
}
path:nth-child(2) {
stroke: var(--black);
}
}
}
}
@ -226,6 +236,17 @@ body {
// MAIN
// ----------------------------------------------------------------------------
// Slider section
.splide {
&__image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Exhibition section
.exhibition-section {

46
public/assets/js/app.js
View file

@ -1,10 +1,19 @@
import Splide from '@splidejs/splide';
// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------
// UTILS
const body = document.body;
// SLIDER
let splide = document.querySelector('.splide');
// IFRAME LOADING ANIMATIONS
const body = document.querySelector('body');
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
const logoIcon = document.querySelector('.logo__icon');
@ -23,10 +32,38 @@ function enableActivePseudoClass() {
// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
return rem * fontSize;
}
// SLIDER
function setUpSlider() {
if (splide) {
splide = new Splide('.splide', {
type: 'fade',
rewind: true,
rewindByDrag: true,
speed: 400,
fixedWidth: '100vw',
fixedHeight: '100vh',
arrows: false,
pagination: false,
easing: 'ease-in-out',
drag: true,
wheel: true
}).mount();
}
}
function goToNextSlideOnClick() {
if (splide) {
splide.on('click', function(e) {
splide.go('>');
});
}
}
// IFRAME LOADING ANIMATIONS
function enableLogoIconRotation() {
@ -97,6 +134,11 @@ function loadExhibitionIframe() {
enableActivePseudoClass();
// SLIDER
setUpSlider();
goToNextSlideOnClick();
// IFRAME LOADING ANIMATIONS
loadExhibitionIframe();

6
site/controllers/gallery.php
View file

@ -5,11 +5,11 @@ return function ($pages, $page) {
// Get exhibition page object
$exhibitionsPage = $pages->template('exhibitions')->first();
// Get artworks files section content
$artworks = $page->files()->template("artwork")->sortBy('sort');
// Get image files section content
$images = $page->files()->template("image")->sortBy('sort');
return [
'exhibitionsPage' => $exhibitionsPage,
'artworks' => $artworks
'images' => $images
];
};

15
site/templates/gallery.twig
View file

@ -18,4 +18,19 @@
{% endblock %}
{% block main %}
<section class="splide" aria-label="{{ site.title }}'s artwork gallery">
<div class="splide__track">
<ul class="splide__list">
{% for image in images %}
<li class="splide__slide">
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
</li>
{% endfor %}
</ul>
</div>
</section>
{% endblock %}

1
webpack.config.js
View file

@ -36,6 +36,7 @@ Encore
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableTypeScriptLoader()
.enableSassLoader()
.enablePostCssLoader()
;