refactor: Extracting more scripts into dedicated file

Signed-off-by: Vincent Boutour <[email protected]>
ViBiOh · Nov 4, 2022 · c23ec76 · c23ec76
1 parent edfc474
commit c23ec76
Show file tree

Hide file tree

Showing 8 changed files with 609 additions and 604 deletions.
diff --git a/Makefile b/Makefile
@@ -95,7 +95,9 @@ build-web:
 	minify "cmd/fibr/static/scripts/async-image.js" > "cmd/fibr/static/scripts/async-image.min.js" && mv "cmd/fibr/static/scripts/async-image.min.js" "cmd/fibr/static/scripts/async-image.js"
 	minify "cmd/fibr/static/scripts/map.js" > "cmd/fibr/static/scripts/map.min.js" && mv "cmd/fibr/static/scripts/map.min.js" "cmd/fibr/static/scripts/map.js"
 	minify "cmd/fibr/static/scripts/navigation.js" > "cmd/fibr/static/scripts/navigation.min.js" && mv "cmd/fibr/static/scripts/navigation.min.js" "cmd/fibr/static/scripts/navigation.js"
+	minify "cmd/fibr/static/scripts/upload.js" > "cmd/fibr/static/scripts/upload.min.js" && mv "cmd/fibr/static/scripts/upload.min.js" "cmd/fibr/static/scripts/upload.js"
 	minify "cmd/fibr/static/styles/main.css" > "cmd/fibr/static/styles/main.min.css" && mv "cmd/fibr/static/styles/main.min.css" "cmd/fibr/static/styles/main.css"
+	minify "cmd/fibr/static/styles/upload.css" > "cmd/fibr/static/styles/upload.min.css" && mv "cmd/fibr/static/styles/upload.min.css" "cmd/fibr/static/styles/upload.css"
 
 ## run: Locally run the application, e.g. node index.js, python -m myapp, go run myapp etc ...
 .PHONY: run

diff --git a/cmd/fibr/static/scripts/async-image.js b/cmd/fibr/static/scripts/async-image.js
@@ -94,9 +94,22 @@ async function fetchThumbnail() {
   }
 }
 
-window.addEventListener(
-  'load',
-  async () => {
+document.addEventListener(
+  'readystatechange',
+  async (event) => {
+    if (event.target.readyState !== 'complete') {
+      return;
+    }
+
+    let dateTimeFormatter = new Intl.DateTimeFormat(navigator.language, {
+      dateStyle: 'full',
+      timeStyle: 'long',
+    });
+
+    document.querySelectorAll('.date').forEach((item) => {
+      item.innerHTML = dateTimeFormatter.format(new Date(item.innerHTML));
+    });
+
     const thumbnailsElem = document.querySelectorAll('[data-thumbnail]');
     if (!thumbnailsElem) {
       return;
@@ -130,3 +143,35 @@ window.addEventListener(
   },
   false,
 );
+
+window.addEventListener('thumbnail-done', () => {
+  const lazyImageObserver = new IntersectionObserver(
+    async (entries, observer) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) {
+          continue;
+        }
+
+        const lazyImage = entry.target;
+        if (window.webpHero) {
+          const response = await fetch(lazyImage.dataset.src, {
+            credentials: 'same-origin',
+          });
+          const content = await response.arrayBuffer();
+
+          const webpMachine = new webpHero.WebpMachine();
+          lazyImage.src = await webpMachine.decode(new Uint8Array(content));
+          webpMachine.clearCache();
+        } else {
+          lazyImage.src = lazyImage.dataset.src;
+        }
+
+        lazyImageObserver.unobserve(lazyImage);
+      }
+    },
+  );
+
+  document
+    .querySelectorAll('img.thumbnail')
+    .forEach((lazyImage) => lazyImageObserver.observe(lazyImage));
+});
diff --git a/cmd/fibr/static/scripts/map.js b/cmd/fibr/static/scripts/map.js
@@ -123,3 +123,17 @@ async function renderMap(geoURL) {
 
   map.addLayer(markers);
 }
+
+document.addEventListener('readystatechange', async (event) => {
+  if (event.target.readyState === 'complete') {
+    if (document.location.hash === '#map') {
+      await renderMap(geoURL);
+    } else {
+      window.addEventListener('popstate', async () => {
+        if (document.location.hash === '#map') {
+          await renderMap(geoURL);
+        }
+      });
+    }
+  }
+});