From 0999f5208720ae503fcc8824e0288bdc6c6b6765 Mon Sep 17 00:00:00 2001 From: Lanius Trolling Date: Wed, 8 Mar 2023 07:39:08 -0500 Subject: [PATCH] Improve image full-size viewing --- .../kotlin/info/mechyrdia/lore/parser_tags.kt | 2 +- .../kotlin/info/mechyrdia/lore/view_tpl.kt | 8 ++ src/main/resources/static/images/icon.svg | 101 ++++-------------- src/main/resources/static/init.js | 22 ++++ src/main/resources/static/style.css | 36 +++++++ 5 files changed, 88 insertions(+), 81 deletions(-) diff --git a/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt b/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt index cdd6f15..a266ff6 100644 --- a/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt +++ b/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt @@ -154,7 +154,7 @@ enum class TextParserFormattingTag(val type: TextParserTagType) { imageSvg } else - "" + "" } ), MODEL( diff --git a/src/main/kotlin/info/mechyrdia/lore/view_tpl.kt b/src/main/kotlin/info/mechyrdia/lore/view_tpl.kt index 6ea34ea..5848eb5 100644 --- a/src/main/kotlin/info/mechyrdia/lore/view_tpl.kt +++ b/src/main/kotlin/info/mechyrdia/lore/view_tpl.kt @@ -77,6 +77,14 @@ fun ApplicationCall.page(pageTitle: String, navBar: List? = null, sideb } } + div { + id = "thumb-view" + div(classes = "bg") + img(alt = "Click to close full size") { + title = "Click to close full size" + } + } + request.queryParameters["error"]?.let { errorMessage -> div { id = "error-popup" diff --git a/src/main/resources/static/images/icon.svg b/src/main/resources/static/images/icon.svg index cd2dbdd..e4187ac 100644 --- a/src/main/resources/static/images/icon.svg +++ b/src/main/resources/static/images/icon.svg @@ -1,87 +1,28 @@ - - - - + width="256px" + xmlns="http://www.w3.org/2000/svg"> + + + + + - - - - - - - - - - - - - - - - + diff --git a/src/main/resources/static/init.js b/src/main/resources/static/init.js index e59c1cf..a96343e 100644 --- a/src/main/resources/static/init.js +++ b/src/main/resources/static/init.js @@ -66,6 +66,28 @@ } }); + window.addEventListener("load", function () { + // Image previewing + const thumbView = document.getElementById("thumb-view"); + const thumbViewImg = thumbView.getElementsByTagName("img")[0]; + thumbView.addEventListener("click", e => { + e.preventDefault(); + + thumbView.classList.remove("visible"); + thumbViewImg.src = ""; + }); + + const thumbs = document.querySelectorAll("a.thumb"); + for (const thumb of thumbs) { + thumb.onclick = e => { + e.preventDefault(); + + thumbViewImg.src = e.currentTarget.getAttribute("href"); + thumbView.classList.add("visible"); + }; + } + }); + window.addEventListener("load", function () { // Mesh viewing async function loadObj(modelName) { diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css index a57e786..8170470 100644 --- a/src/main/resources/static/style.css +++ b/src/main/resources/static/style.css @@ -878,6 +878,42 @@ textarea.lang-tylan { font-family: 'Noto Sans Gothic', sans-serif; } +#thumb-view { + display: none; +} + +#thumb-view.visible { + z-index: 998; + + display: unset; + + position: fixed; + width: 100vw; + height: 100vh; + left: 0; + top: 0; +} + +#thumb-view > .bg { + position: fixed; + width: 100vw; + height: 100vh; + left: 0; + top: 0; + + background-color: rgba(0, 0, 0, 40%); +} + +#thumb-view > img { + position: fixed; + top: 2vh; + left: 2vw; + width: 96vw; + height: 96vh; + + object-fit: scale-down; +} + .flag-icon { object-fit: cover; aspect-ratio: 1; -- 2.25.1