mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-11-26 09:03:01 +00:00
Implement keen-slider since the current one seemed to be a bit broken
...and also not scalable given what we want to do
This commit is contained in:
parent
71d95b5e83
commit
34ac48f085
GPG key ID:
1BE5172E637709C2
10 changed files with 131 additions and 156 deletions
|
|
@ -54,16 +54,15 @@ async function shortcode_image_urlpass(src) {
|
|||
return `/img/${filename}`;
|
||||
}
|
||||
|
||||
async function shortcode_gallerybox(content, src, id_this, id_prev, id_next) {
|
||||
return `<figure class="gallerybox-item" id="${id_this}">
|
||||
async function shortcode_gallerybox(content, src) {
|
||||
return `<div class="keen-slider__slide"><figure class="gallery-item">
|
||||
<!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
|
||||
${await shortcode_image(src, "", "", "1920w")}
|
||||
|
||||
<figcaption>${content}</figcaption>
|
||||
|
||||
<a class="gallerybox-prev" href="#${id_prev}">❰</a>
|
||||
<a class="gallerybox-next" href="#${id_next}">❱</a>
|
||||
</figure>`;
|
||||
</figure></div>`;
|
||||
// <a class="gallerybox-prev" href="#${id_prev}">❰</a>
|
||||
// <a class="gallerybox-next" href="#${id_next}">❱</a>
|
||||
}
|
||||
|
||||
async function fetch(url) {
|
||||
|
|
@ -137,4 +136,8 @@ module.exports = function(eleventyConfig) {
|
|||
eleventyConfig.addAsyncShortcode("image_urlpass", shortcode_image_urlpass);
|
||||
eleventyConfig.addNunjucksAsyncShortcode("image_urlpass", shortcode_image_urlpass);
|
||||
eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox);
|
||||
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"node_modules/keen-slider/keen-slider.es.js": "."
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ permalink: theme.css
|
|||
|
||||
{% include "css/patterns.css" %}
|
||||
{% include "css/theme.css" %}
|
||||
{% include "css/gallerybox.css" %}
|
||||
{% include "css/gallery.css" %}
|
||||
{% include "css/smallscreens.css" %}
|
||||
{% include "css/prism-custom.css" %}
|
||||
{% include "node_modules/keen-slider/keen-slider.css" %}
|
||||
|
||||
{# {% fetch "https://unpkg.com/prismjs/themes/prism-okaidia.css" %} #}
|
||||
{# {% fetch "https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-shades-of-purple.css" %} #}
|
||||
|
|
|
|||
45
.docs/css/gallery.css
Normal file
45
.docs/css/gallery.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
██████ █████ ██ ██ ███████ ██████ ██ ██ ██████ ██████ ██ ██
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
██ ███ ███████ ██ ██ █████ ██████ ████ ██████ ██ ██ ███
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
██████ ██ ██ ███████ ███████ ███████ ██ ██ ██ ██████ ██████ ██ ██
|
||||
|
||||
A pure css gallery, made with a bunch of wonderful hacks! Will be upgraded to
|
||||
be (slightly) less hacky once :target-within lands in browsers.
|
||||
|
||||
Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
|
||||
*/
|
||||
|
||||
:root {
|
||||
--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
position: relative; /* to make the figcaption snap to the right place */
|
||||
/*
|
||||
The <picture /> element causes a small amount of extra padding at the
|
||||
bottom of the element, so we use this to balance out the look at the top
|
||||
ideally we'd shift the <picture> out of the way, but we can't without also
|
||||
shifting the <img /> inside
|
||||
*/
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gallery-item > figcaption {
|
||||
background: var(--gallerybox-bg);
|
||||
position: absolute;
|
||||
bottom: 0.25em; left: 0; right: 0;
|
||||
padding: 0.75em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
/*
|
||||
██████ █████ ██ ██ ███████ ██████ ██ ██ ██████ ██████ ██ ██
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
██ ███ ███████ ██ ██ █████ ██████ ████ ██████ ██ ██ ███
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
██████ ██ ██ ███████ ███████ ███████ ██ ██ ██ ██████ ██████ ██ ██
|
||||
|
||||
A pure css gallery, made with a bunch of wonderful hacks! Will be upgraded to
|
||||
be (slightly) less hacky once :target-within lands in browsers.
|
||||
|
||||
Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
|
||||
*/
|
||||
|
||||
:root {
|
||||
--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.gallerybox-gallery {
|
||||
max-width: 95vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gallerybox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/*
|
||||
The <picture /> element causes a small amount of extra padding at the
|
||||
bottom of the element, so we use this to balance out the look at the top
|
||||
ideally we'd shift the <picture> out of the way, but we can't without also
|
||||
shifting the <img /> inside
|
||||
*/
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
|
||||
.gallerybox-gallery {
|
||||
--gallerybox-nextprev-padding: 5vw;
|
||||
--gallerybox-nextprev-move: 0.2em;
|
||||
--gallerybox-nextprev-hover: 0.1em;
|
||||
|
||||
max-width: 80vmax;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "main";
|
||||
}
|
||||
|
||||
/* .gallerybox picture {
|
||||
position: relative;
|
||||
top: -1em;
|
||||
}
|
||||
.gallerybox picture > img {
|
||||
position: relative;
|
||||
top: 1em;
|
||||
} */
|
||||
|
||||
.gallerybox-item {
|
||||
grid-area: main;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gallerybox-item > figcaption {
|
||||
background: var(--gallerybox-bg);
|
||||
position: absolute;
|
||||
bottom: 0.25em; left: 0; right: 0;
|
||||
padding: 0.75em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallerybox-gallery > .gallerybox-item:target {
|
||||
display: block;
|
||||
z-index: 100;
|
||||
}
|
||||
/* .gallerybox-gallery > .gallerybox-item:not(:target) {
|
||||
display: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.gallerybox-item:not(:target) ~ .gallerybox-item:last-child {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
} */
|
||||
|
||||
/*
|
||||
.gallerybox-gallery:target-within > .gallerybox-item:target {
|
||||
display: block;
|
||||
}
|
||||
.gallerybox-gallery:target-within > .gallerybox-item:not(:target) {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
|
||||
.gallerybox-item {
|
||||
position: relative;
|
||||
}
|
||||
.gallerybox-item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
:where(.gallerybox-prev, .gallerybox-next) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: absolute; top: 0;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
font-size: 4em;
|
||||
color: hsla(0, 0%, 100%, 0.8) !important;
|
||||
text-decoration: none;
|
||||
transform: none;
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
.gallerybox-item > .gallerybox-prev {
|
||||
padding-left: var(--gallerybox-nextprev-padding);
|
||||
left: 0;
|
||||
}
|
||||
.gallerybox-item > .gallerybox-next {
|
||||
padding-right: var(--gallerybox-nextprev-padding);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
:where(.gallerybox-prev, .gallerybox-next):hover {
|
||||
color: hsla(0, 0%, 100%, 1) !important;
|
||||
}
|
||||
:is(.gallerybox-prev, .gallerybox-next):active {
|
||||
color: hsla(0, 0%, 100%, 1) !important;
|
||||
}
|
||||
.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); }
|
||||
.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); }
|
||||
|
||||
.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); }
|
||||
.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); }
|
||||
|
|
@ -398,7 +398,7 @@ footer {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.gallerybox {
|
||||
.gallery {
|
||||
background: var(--pattern-hex), var(--bg-transcluscent);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,26 +60,42 @@ date: 2000-01-01
|
|||
</section>
|
||||
|
||||
<!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
|
||||
<section class="gallerybox shadow-vertical">
|
||||
<section class="gallerybox-gallery">
|
||||
{% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
|
||||
|
||||
<script type="module">
|
||||
import KeenSlider from './keen-slider.es.js';
|
||||
const slider_creations = new KeenSlider("#gallery-creations", {
|
||||
loop: true,
|
||||
mode: "free-snap",
|
||||
slides: {
|
||||
origin: "center",
|
||||
perView: 1.5,
|
||||
spacing: 15
|
||||
},
|
||||
created: () => {
|
||||
console.log(`[MAIN] Slider initialised`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<section id="gallery-creations" class="gallery shadow-vertical">
|
||||
<section class="keen-slider">
|
||||
{% gallerybox "images/gallery-a.jpeg" %}
|
||||
A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - all of which are provided by WorldEditAdditions.
|
||||
{% endgallerybox %}
|
||||
{% gallerybox "images/gallery-b.jpeg" "image-b" "image-first" "image-c" %}
|
||||
{% gallerybox "images/gallery-b.jpeg" %}
|
||||
The inside of a 3d maze made with <code>//maze3d</code>. Lighting was placed manually to improve screenshot quality.
|
||||
{% endgallerybox %}
|
||||
{% gallerybox "images/gallery-c.jpeg" "image-c" "image-b" "image-d" %}
|
||||
{% gallerybox "images/gallery-c.jpeg" %}
|
||||
A cliff made with <code>//layers</code> and <code>//erode</code>. A <code>//forest</code> has been applied on top with multiple sapling / tree types.
|
||||
{% endgallerybox %}
|
||||
{% gallerybox "images/gallery-d.jpeg" "image-d" "image-c" "image-e" %}
|
||||
{% gallerybox "images/gallery-d.jpeg" %}
|
||||
A small mountain made with <code>//layers</code> and <code>//erode</code>, using the new optional <code>//layers</code> slope constraints in WorldEditAdditions v1.13.
|
||||
{% endgallerybox %}
|
||||
{% gallerybox "images/gallery-e.jpeg" "image-e" "image-d" "image-f" %}
|
||||
{% gallerybox "images/gallery-e.jpeg" %}
|
||||
A small mesa canyons terrain scene made with <code>//erode</code>, the new optional <code>//layers</code> slope contraints, and <code>//noiseapply2d</code> - the latter 2 of which are new in WorldEditAdditions v1.13. Minimal manual tuning was required.
|
||||
{% endgallerybox %}
|
||||
{% gallerybox "images/gallery-f.jpeg" "image-last" "image-e" "image-first" %}
|
||||
<!-- {% gallerybox "images/gallery-f.jpeg" "image-last" "image-e" "image-first" %}
|
||||
A stack of slices of the terrain, made with <code>//many</code> (WorldEditAdditions v1.9+) and <code>//multi</code>. By <a href="https://github.com/VorTechnix">@VorTechnix</a>.
|
||||
{% endgallerybox %}
|
||||
{% endgallerybox %} -->
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
25
.docs/package-lock.json
generated
25
.docs/package-lock.json
generated
|
|
@ -17,11 +17,13 @@
|
|||
"html-entities": "^2.4.0",
|
||||
"html-minifier-terser": "^7.0.0-beta.0",
|
||||
"imagickal": "^5.0.1",
|
||||
"keen-slider": "^6.8.6",
|
||||
"markdown-it-github-alerts": "^0.1.2",
|
||||
"markdown-it-prism": "^2.3.0",
|
||||
"p-memoize": "^7.1.1",
|
||||
"p-queue": "^7.3.4",
|
||||
"phin": "^3.7.0",
|
||||
"photoswipe": "^5.4.3",
|
||||
"pretty-ms": "^7.0.1"
|
||||
}
|
||||
},
|
||||
|
|
@ -1413,6 +1415,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/keen-slider": {
|
||||
"version": "6.8.6",
|
||||
"resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
|
||||
"integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w=="
|
||||
},
|
||||
"node_modules/kind-of": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
|
|
@ -1892,6 +1899,14 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/photoswipe": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.3.tgz",
|
||||
"integrity": "sha512-9UC6oJBK4oXFZ5HcdlcvGkfEHsVrmE4csUdCQhEjHYb3PvPLO3PG7UhnPuOgjxwmhq5s17Un5NUdum01LgBDng==",
|
||||
"engines": {
|
||||
"node": ">= 0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
|
|
@ -3574,6 +3589,11 @@
|
|||
"resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
|
||||
"integrity": "sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI="
|
||||
},
|
||||
"keen-slider": {
|
||||
"version": "6.8.6",
|
||||
"resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
|
||||
"integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w=="
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
|
|
@ -3918,6 +3938,11 @@
|
|||
"centra": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"photoswipe": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.3.tgz",
|
||||
"integrity": "sha512-9UC6oJBK4oXFZ5HcdlcvGkfEHsVrmE4csUdCQhEjHYb3PvPLO3PG7UhnPuOgjxwmhq5s17Un5NUdum01LgBDng=="
|
||||
},
|
||||
"picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -28,11 +28,13 @@
|
|||
"html-entities": "^2.4.0",
|
||||
"html-minifier-terser": "^7.0.0-beta.0",
|
||||
"imagickal": "^5.0.1",
|
||||
"keen-slider": "^6.8.6",
|
||||
"markdown-it-github-alerts": "^0.1.2",
|
||||
"markdown-it-prism": "^2.3.0",
|
||||
"p-memoize": "^7.1.1",
|
||||
"p-queue": "^7.3.4",
|
||||
"phin": "^3.7.0",
|
||||
"photoswipe": "^5.4.3",
|
||||
"pretty-ms": "^7.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
17
package-lock.json
generated
Normal file
17
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "WorldEditAdditions",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"keen-slider": "^6.8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/keen-slider": {
|
||||
"version": "6.8.6",
|
||||
"resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
|
||||
"integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w=="
|
||||
}
|
||||
}
|
||||
}
|
||||
5
package.json
Normal file
5
package.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"keen-slider": "^6.8.6"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue