1 files changed, 165 insertions, 26 deletions

diff --git a/js/main.ts b/js/main.ts
index 21e589d..7ef7020 100644
--- a/js/main.ts
+++ b/js/main.ts
@@ -1,42 +1,181 @@
-let linkQryEls = document.getElementsByClassName('link--QRY');
-let i   = linkQryEls.length;
-while (i--) {
-    linkQryEls[i].addEventListener('click', e => {
+/// <reference path="./KeyValueStore.ts" />
+
+//
+
+function ensureSetting(key: string, defaultValue: string): string {
+    let strValue = localStorage.getItem(key);
+    if (strValue === null) {
+        strValue = defaultValue;
+        localStorage.setItem(key, strValue);
+    }
+    return strValue;
+}
+
+const settings = new KeyValueStore({
+    imagePreviews: {
+        value: ensureSetting('image-previews', '1') === '1',
+        valueRange: [false, true]
+    }
+});
+
+//
+
+(() => {
+    const 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;
+        });
+    }
+})();
+
+(() => {
+    const locationPrefixEl = document.getElementsByClassName('location__prefix')[0];
+    locationPrefixEl.addEventListener('click', e => {
         e.preventDefault();
 
-        const resp = prompt('Please enter required input: ', '');
+        const resp = prompt('Please enter new location: ', '');
         if ((resp !== null) && (resp !== "")) {
-            window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp;
+            window.location.href = window.location.origin + '/' + 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;
+(() => {
+    const settingImagePreviewEl      = document.getElementsByClassName('setting--image-previews')[0];
+    const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0];
+    const settingImagePreviewCallback = (value: boolean, init = false) => {
+        if (value) {
+            generateImageThumbnails();
+        } else if (!init) {
+            removeImageThumbnails();
+        }
 
-    child.addEventListener('load', e => {
-        child.classList.remove('faded');
-    });
+        localStorage.setItem('image-previews', value ? '1' : '0');
+        settingImagePreviewValueEl.textContent = value ? '[yes]' : '[no]';
+    }
 
-    imgPreviewEls[i].addEventListener('click', e => {
+    settingImagePreviewValueEl.addEventListener('click', e => {
         e.preventDefault();
+        settings.cycleValue('imagePreviews');
+        return false;
+    });
 
-        child.classList.add('faded');
+    settingImagePreviewCallback(settings.getValue('imagePreviews'), true);
+    settings.addCallback('imagePreviews', settingImagePreviewCallback);
+})();
 
-        if (child.classList.contains('expanded')) {
-            child.classList.remove('expanded');
-            child.src = thumbnailUrl;
-        } else {
-            child.classList.add('expanded');
-            child.src = imgPreviewEl.href;
-        }
-        
+(() => {
+    const modalEls = document.getElementsByClassName('modal');
+    let   i        = modalEls.length;
+    while (i--) {
+        const modalEl         = modalEls[i];
+        const modalContentEl  = modalEl.getElementsByClassName('modal__content')[0];
+        const modalCloseBtnEl = modalEl.getElementsByClassName('modal__close-btn')[0];
+
+        document.addEventListener('click', e => {
+            if (!modalEl.classList.contains('modal--visible')) {
+                return;
+            }
+            if (e.target !== modalContentEl && !modalContentEl.contains(e.target as Element)) {
+                modalEl.classList.remove('modal--visible');
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, true);
+
+        document.addEventListener('keydown', e => {
+            if (!modalEl.classList.contains('modal--visible')) {
+                return;
+            }
+            if (e.keyCode === 27) {
+                modalEl.classList.remove('modal--visible');
+            }
+        });
+
+        modalCloseBtnEl.addEventListener('click', e => {
+            e.preventDefault();
+            modalEl.classList.remove('modal--visible');
+            return false;
+        });
+    }
+
+    //
+
+    const settingsBtnEl   = document.getElementsByClassName('settings-btn')[0];
+    const settingsModalEl = document.getElementsByClassName('modal--settings')[0];
+
+    settingsBtnEl.addEventListener('click', e => {
+        e.preventDefault();
+        settingsModalEl.classList.add('modal--visible');
         return false;
     });
+})();
+
+function generateImageThumbnails() {
+    const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
+    let   i          = linkImgEls.length;
+    while (i--) {
+        const linkImgEl    = linkImgEls[i] as HTMLAnchorElement;
+        const thumbnailUrl = linkImgEl.href.replace(/^(.*?)\/I/, '$1/T');
+
+        const lineBreakEl = document.createTextNode('\n');
+
+        const typeAnnotEl = document.createElement('span');
+        typeAnnotEl.classList.add('type-annotation');
+        typeAnnotEl.textContent = ' ->  ';
+
+        const thumbnailEl = document.createElement('img');
+        thumbnailEl.src = thumbnailUrl;
+        thumbnailEl.addEventListener('load', e => {
+            thumbnailEl.classList.remove('faded');
+        });    
+
+        const thumbnailAnchorEl = document.createElement('a');
+        thumbnailAnchorEl.classList.add('img-preview');
+        thumbnailAnchorEl.href = linkImgEl.href;
+        thumbnailAnchorEl.addEventListener('click', e => {
+            e.preventDefault();
+    
+            thumbnailEl.classList.add('faded');
+    
+            if (thumbnailEl.classList.contains('expanded')) {
+                thumbnailEl.classList.remove('expanded');
+                thumbnailEl.src = thumbnailUrl;
+            } else {
+                thumbnailEl.classList.add('expanded');
+                thumbnailEl.src = thumbnailAnchorEl.href;
+            }
+            
+            return false;
+        });
+
+        thumbnailAnchorEl.append(thumbnailEl);
+        linkImgEl.parentNode!.insertBefore(thumbnailAnchorEl, linkImgEl.nextSibling);
+        linkImgEl.parentNode!.insertBefore(typeAnnotEl, thumbnailAnchorEl);
+        linkImgEl.parentNode!.insertBefore(lineBreakEl, typeAnnotEl);
+    }
+}
+
+function removeImageThumbnails() {
+    const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
+    let   i          = linkImgEls.length;
+    while (i--) {
+        const linkImgEl = linkImgEls[i];
+        let   j = 3;
+        
+        while (j-- && linkImgEl.nextSibling) {
+            linkImgEl.nextSibling.remove();
+        }
+    }
 }