aboutsummaryrefslogtreecommitdiffstats
path: root/js/main.ts
diff options
context:
space:
mode:
Diffstat (limited to 'js/main.ts')
-rw-r--r--js/main.ts191
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 @@
1let linkQryEls = document.getElementsByClassName('link--QRY'); 1/// <reference path="./KeyValueStore.ts" />
2let i = linkQryEls.length; 2
3while (i--) { 3//
4 linkQryEls[i].addEventListener('click', e => { 4
5function ensureSetting(key: string, defaultValue: string): string {
6 let strValue = localStorage.getItem(key);
7 if (strValue === null) {
8 strValue = defaultValue;
9 localStorage.setItem(key, strValue);
10 }
11 return strValue;
12}
13
14const settings = new KeyValueStore({
15 imagePreviews: {
16 value: ensureSetting('image-previews', '1') === '1',
17 valueRange: [false, true]
18 }
19});
20
21//
22
23(() => {
24 const linkQryEls = document.getElementsByClassName('link--QRY');
25 let i = linkQryEls.length;
26 while (i--) {
27 linkQryEls[i].addEventListener('click', e => {
28 e.preventDefault();
29
30 const resp = prompt('Please enter required input: ', '');
31 if ((resp !== null) && (resp !== "")) {
32 window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp;
33 }
34
35 return false;
36 });
37 }
38})();
39
40(() => {
41 const locationPrefixEl = document.getElementsByClassName('location__prefix')[0];
42 locationPrefixEl.addEventListener('click', e => {
5 e.preventDefault(); 43 e.preventDefault();
6 44
7 const resp = prompt('Please enter required input: ', ''); 45 const resp = prompt('Please enter new location: ', '');
8 if ((resp !== null) && (resp !== "")) { 46 if ((resp !== null) && (resp !== "")) {
9 window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp; 47 window.location.href = window.location.origin + '/' + resp;
10 } 48 }
11 49
12 return false; 50 return false;
13 }); 51 });
14} 52})();
15 53
16let imgPreviewEls = document.getElementsByClassName('img-preview'); 54(() => {
17i = imgPreviewEls.length; 55 const settingImagePreviewEl = document.getElementsByClassName('setting--image-previews')[0];
18while (i--) { 56 const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0];
19 const imgPreviewEl = imgPreviewEls[i] as HTMLAnchorElement; 57 const settingImagePreviewCallback = (value: boolean, init = false) => {
20 const child = imgPreviewEl.children[0] as HTMLImageElement; 58 if (value) {
21 const thumbnailUrl = child.src; 59 generateImageThumbnails();
60 } else if (!init) {
61 removeImageThumbnails();
62 }
22 63
23 child.addEventListener('load', e => { 64 localStorage.setItem('image-previews', value ? '1' : '0');
24 child.classList.remove('faded'); 65 settingImagePreviewValueEl.textContent = value ? '[yes]' : '[no]';
25 }); 66 }
26 67
27 imgPreviewEls[i].addEventListener('click', e => { 68 settingImagePreviewValueEl.addEventListener('click', e => {
28 e.preventDefault(); 69 e.preventDefault();
70 settings.cycleValue('imagePreviews');
71 return false;
72 });
29 73
30 child.classList.add('faded'); 74 settingImagePreviewCallback(settings.getValue('imagePreviews'), true);
75 settings.addCallback('imagePreviews', settingImagePreviewCallback);
76})();
31 77
32 if (child.classList.contains('expanded')) { 78(() => {
33 child.classList.remove('expanded'); 79 const modalEls = document.getElementsByClassName('modal');
34 child.src = thumbnailUrl; 80 let i = modalEls.length;
35 } else { 81 while (i--) {
36 child.classList.add('expanded'); 82 const modalEl = modalEls[i];
37 child.src = imgPreviewEl.href; 83 const modalContentEl = modalEl.getElementsByClassName('modal__content')[0];
38 } 84 const modalCloseBtnEl = modalEl.getElementsByClassName('modal__close-btn')[0];
39 85
86 document.addEventListener('click', e => {
87 if (!modalEl.classList.contains('modal--visible')) {
88 return;
89 }
90 if (e.target !== modalContentEl && !modalContentEl.contains(e.target as Element)) {
91 modalEl.classList.remove('modal--visible');
92 e.preventDefault();
93 e.stopPropagation();
94 }
95 }, true);
96
97 document.addEventListener('keydown', e => {
98 if (!modalEl.classList.contains('modal--visible')) {
99 return;
100 }
101 if (e.keyCode === 27) {
102 modalEl.classList.remove('modal--visible');
103 }
104 });
105
106 modalCloseBtnEl.addEventListener('click', e => {
107 e.preventDefault();
108 modalEl.classList.remove('modal--visible');
109 return false;
110 });
111 }
112
113 //
114
115 const settingsBtnEl = document.getElementsByClassName('settings-btn')[0];
116 const settingsModalEl = document.getElementsByClassName('modal--settings')[0];
117
118 settingsBtnEl.addEventListener('click', e => {
119 e.preventDefault();
120 settingsModalEl.classList.add('modal--visible');
40 return false; 121 return false;
41 }); 122 });
123})();
124
125function generateImageThumbnails() {
126 const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
127 let i = linkImgEls.length;
128 while (i--) {
129 const linkImgEl = linkImgEls[i] as HTMLAnchorElement;
130 const thumbnailUrl = linkImgEl.href.replace(/^(.*?)\/I/, '$1/T');
131
132 const lineBreakEl = document.createTextNode('\n');
133
134 const typeAnnotEl = document.createElement('span');
135 typeAnnotEl.classList.add('type-annotation');
136 typeAnnotEl.textContent = ' -> ';
137
138 const thumbnailEl = document.createElement('img');
139 thumbnailEl.src = thumbnailUrl;
140 thumbnailEl.addEventListener('load', e => {
141 thumbnailEl.classList.remove('faded');
142 });
143
144 const thumbnailAnchorEl = document.createElement('a');
145 thumbnailAnchorEl.classList.add('img-preview');
146 thumbnailAnchorEl.href = linkImgEl.href;
147 thumbnailAnchorEl.addEventListener('click', e => {
148 e.preventDefault();
149
150 thumbnailEl.classList.add('faded');
151
152 if (thumbnailEl.classList.contains('expanded')) {
153 thumbnailEl.classList.remove('expanded');
154 thumbnailEl.src = thumbnailUrl;
155 } else {
156 thumbnailEl.classList.add('expanded');
157 thumbnailEl.src = thumbnailAnchorEl.href;
158 }
159
160 return false;
161 });
162
163 thumbnailAnchorEl.append(thumbnailEl);
164 linkImgEl.parentNode!.insertBefore(thumbnailAnchorEl, linkImgEl.nextSibling);
165 linkImgEl.parentNode!.insertBefore(typeAnnotEl, thumbnailAnchorEl);
166 linkImgEl.parentNode!.insertBefore(lineBreakEl, typeAnnotEl);
167 }
168}
169
170function removeImageThumbnails() {
171 const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
172 let i = linkImgEls.length;
173 while (i--) {
174 const linkImgEl = linkImgEls[i];
175 let j = 3;
176
177 while (j-- && linkImgEl.nextSibling) {
178 linkImgEl.nextSibling.remove();
179 }
180 }
42} 181}