Show expandable thumbnails for images

1 files changed, 42 insertions, 0 deletions

diff --git a/js/main.ts b/js/main.ts
new file mode 100644
index 0000000..21e589d
--- /dev/null
+++ b/js/main.ts
@@ -0,0 +1,42 @@
+let linkQryEls = document.getElementsByClassName('link--QRY');
+let i   = linkQryEls.length;
+while (i--) {
+    linkQryEls[i].addEventListener('click', e => {
+        e.preventDefault();
+
+        const resp = prompt('Please enter required input: ', '');
+        if ((resp !== null) && (resp !== "")) {
+            window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp;
+        }
+
+        return false;
+    });
+}
+
+let imgPreviewEls = document.getElementsByClassName('img-preview');
+i                 = imgPreviewEls.length;
+while (i--) {
+    const imgPreviewEl = imgPreviewEls[i] as HTMLAnchorElement;
+    const child        = imgPreviewEl.children[0] as HTMLImageElement;
+    const thumbnailUrl = child.src;
+
+    child.addEventListener('load', e => {
+        child.classList.remove('faded');
+    });
+
+    imgPreviewEls[i].addEventListener('click', 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;
+    });
+}