From c448abd99a470e1ec541027077dcdef0745270d8 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Sun, 23 Jun 2019 17:29:07 +0200 Subject: Show expandable thumbnails for images --- assets/main.js | 39 +++++++++++++++++++++++++++++++++++++++ assets/style.css | 2 +- 2 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 assets/main.js (limited to 'assets') diff --git a/assets/main.js b/assets/main.js new file mode 100644 index 0000000..46cb7ee --- /dev/null +++ b/assets/main.js @@ -0,0 +1,39 @@ +"use strict"; +var linkQryEls = document.getElementsByClassName('link--QRY'); +var i = linkQryEls.length; +while (i--) { + linkQryEls[i].addEventListener('click', function (e) { + e.preventDefault(); + var resp = prompt('Please enter required input: ', ''); + if ((resp !== null) && (resp !== "")) { + window.location.href = e.target.href + '?' + resp; + } + return false; + }); +} +var imgPreviewEls = document.getElementsByClassName('img-preview'); +i = imgPreviewEls.length; +var _loop_1 = function () { + var imgPreviewEl = imgPreviewEls[i]; + var child = imgPreviewEl.children[0]; + var thumbnailUrl = child.src; + child.addEventListener('load', function (e) { + child.classList.remove('faded'); + }); + imgPreviewEls[i].addEventListener('click', function (e) { + e.preventDefault(); + child.classList.add('faded'); + if (child.classList.contains('expanded')) { + child.classList.remove('expanded'); + child.src = thumbnailUrl; + } + else { + child.classList.add('expanded'); + child.src = imgPreviewEl.href; + } + return false; + }); +}; +while (i--) { + _loop_1(); +} diff --git a/assets/style.css b/assets/style.css index 5891d3b..46ad8cb 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1 +1 @@ -@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}.header{padding:.9em 1em;border-bottom:1px solid #353a3f;font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.3;color:#686f76}.header__uripart{color:#929ba3}.header__uripart--last{color:#fff}.wrap{text-align:center}.content{display:inline-block;min-width:50em;min-width:85ch;margin:0;padding:2em 1em;text-align:left;font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5}.link-type{color:#929ba3} +@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8}button{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;background:none;border:0;padding:0;color:#fff}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}.header{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;padding:.9em 1em;border-bottom:1px solid #353a3f;line-height:1.3;color:#686f76}.header__uripart{color:#929ba3}.header__uripart--last{color:#fff}.wrap{text-align:center}.content{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;display:inline-block;min-width:50em;min-width:85ch;margin:0;padding:2em 1em;text-align:left}.type-annotation{color:#929ba3} -- cgit v1.2.3-54-g00ecf