From 34ac48f0851f0d2756c85f57ddf5262e9d18fb77 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Tue, 26 Dec 2023 01:30:19 +0000 Subject: [PATCH] Implement keen-slider since the current one seemed to be a bit broken ...and also not scalable given what we want to do --- .docs/.eleventy.js | 15 +++-- .docs/css.njk | 3 +- .docs/css/gallery.css | 45 +++++++++++++ .docs/css/gallerybox.css | 139 --------------------------------------- .docs/css/theme.css | 2 +- .docs/index.html | 34 +++++++--- .docs/package-lock.json | 25 +++++++ .docs/package.json | 2 + package-lock.json | 17 +++++ package.json | 5 ++ 10 files changed, 131 insertions(+), 156 deletions(-) create mode 100644 .docs/css/gallery.css delete mode 100644 .docs/css/gallerybox.css create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.docs/.eleventy.js b/.docs/.eleventy.js index f481d9b..ed44c06 100644 --- a/.docs/.eleventy.js +++ b/.docs/.eleventy.js @@ -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 `
+async function shortcode_gallerybox(content, src) { + return `
${await shortcode_image(src, "", "", "1920w")}
${content}
- -❰ -❱ -
`; +
`; + // ❰ + // ❱ } 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": "." + }); } diff --git a/.docs/css.njk b/.docs/css.njk index f73cafd..d4dcfbd 100644 --- a/.docs/css.njk +++ b/.docs/css.njk @@ -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" %} #} diff --git a/.docs/css/gallery.css b/.docs/css/gallery.css new file mode 100644 index 0000000..25d4025 --- /dev/null +++ b/.docs/css/gallery.css @@ -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 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 out of the way, but we can't without also + shifting the 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; +} \ No newline at end of file diff --git a/.docs/css/gallerybox.css b/.docs/css/gallerybox.css deleted file mode 100644 index bd4d764..0000000 --- a/.docs/css/gallerybox.css +++ /dev/null @@ -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 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 out of the way, but we can't without also - shifting the 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)); } diff --git a/.docs/css/theme.css b/.docs/css/theme.css index 304912e..fae5705 100644 --- a/.docs/css/theme.css +++ b/.docs/css/theme.css @@ -398,7 +398,7 @@ footer { cursor: default; } -.gallerybox { +.gallery { background: var(--pattern-hex), var(--bg-transcluscent); } diff --git a/.docs/index.html b/.docs/index.html index 41441a2..0e1d3ad 100644 --- a/.docs/index.html +++ b/.docs/index.html @@ -60,26 +60,42 @@ date: 2000-01-01 -
-
- {% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %} + + + diff --git a/.docs/package-lock.json b/.docs/package-lock.json index d9e5743..cbbc6e4 100644 --- a/.docs/package-lock.json +++ b/.docs/package-lock.json @@ -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", diff --git a/.docs/package.json b/.docs/package.json index 386411c..b6f7aeb 100644 --- a/.docs/package.json +++ b/.docs/package.json @@ -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" } } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..cada969 --- /dev/null +++ b/package-lock.json @@ -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==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..85ed015 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "keen-slider": "^6.8.6" + } +}