refactor: Continue to extracting js and css

Signed-off-by: Vincent Boutour <[email protected]>

.env.example

@@ -0,0 +1,2 @@
+FIBR_THUMBNAIL_URL=http://localhost:4000
+FIBR_EXIF_URL=http://localhost:5000

Makefile

@@ -50,6 +50,7 @@ init:
 	@curl --disable --silent --show-error --location --max-time 30 "https://raw.githubusercontent.com/ViBiOh/scripts/main/bootstrap" | bash -s -- "-c" "git_hooks" "coverage" "release"
 	go install "github.com/golang/mock/[email protected]"
 	go install "github.com/golangci/golangci-lint/cmd/golangci-lint@latest"
+	go install "github.com/tdewolff/minify/v2/cmd/minify@latest"
 	go install "golang.org/x/tools/cmd/goimports@latest"
 	go install "golang.org/x/tools/go/analysis/passes/fieldalignment/cmd/fieldalignment@master"
 	go install "mvdan.cc/gofumpt@latest"
@@ -92,16 +93,18 @@ build:
 ## build: Build the application.
 .PHONY: build-web
 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"
+	rm -f "cmd/fibr/static/scripts/index.min.js" "cmd/fibr/static/styles/main.min.css"
+	minify --bundle --recursive --output "cmd/fibr/static/scripts/index.min.js" "cmd/fibr/static/scripts/"
+	minify --bundle --recursive --output "cmd/fibr/static/styles/main.min.css" "cmd/fibr/static/styles/"
 
 ## run: Locally run the application, e.g. node index.js, python -m myapp, go run myapp etc ...
 .PHONY: run
 run:
 	$(MAIN_RUNNER) \
 		-ignorePattern ".git|node_modules" \
 		-authUsers "1:`htpasswd -nBb admin admin`"
+
+## config: Create local configuration
+.PHONY: config
+config:
+	@cp .env.example .env

cmd/fibr/static/scripts/map.js

@@ -125,15 +125,17 @@ async function renderMap(geoURL) {
 }
 
 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);
-        }
-      });
-    }
+  if (event.target.readyState !== 'complete') {
+    return;
+  }
+
+  if (document.location.hash === '#map') {
+    await renderMap(geoURL);
+  } else {
+    window.addEventListener('popstate', async () => {
+      if (document.location.hash === '#map') {
+        await renderMap(geoURL);
+      }
+    });
   }
 });

cmd/fibr/static/scripts/throbber.js

@@ -0,0 +1,17 @@
+/**
+ * Generate a throbber.
+ * @return {Element}
+ */
+function generateThrobber(classNames = []) {
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('throbber');
+  classNames.forEach((className) => wrapper.classList.add(className));
+
+  for (let i = 1; i < 4; i++) {
+    const dot = document.createElement('div');
+    dot.classList.add('throbber-dot', `throbber-dot-${i}`);
+    wrapper.appendChild(dot);
+  }
+
+  return wrapper;
+}

cmd/fibr/static/scripts/upload.js

@@ -1,8 +1,3 @@
-/**
- * Drag'n drop.
- */
-const dropZone = document.getElementsByTagName('body')[0];
-
 let fileInput;
 let uploadList;
 let cancelButton;
@@ -16,16 +11,24 @@ function eventNoop(e) {
   e.stopPropagation();
 }
 
-dropZone.addEventListener('dragover', eventNoop);
-dropZone.addEventListener('dragleave', eventNoop);
-dropZone.addEventListener('drop', (e) => {
-  eventNoop(e);
-
-  window.location.hash = '#upload-modal';
-  if (fileInput) {
-    fileInput.files = e.dataTransfer.files;
-    fileInput.dispatchEvent(new Event('change'));
+document.addEventListener('readystatechange', async (event) => {
+  if (event.target.readyState !== 'complete') {
+    return;
   }
+
+  const dropZone = document.getElementsByTagName('body')[0];
+
+  dropZone.addEventListener('dragover', eventNoop);
+  dropZone.addEventListener('dragleave', eventNoop);
+  dropZone.addEventListener('drop', (e) => {
+    eventNoop(e);
+
+    window.location.hash = '#upload-modal';
+    if (fileInput) {
+      fileInput.files = e.dataTransfer.files;
+      fileInput.dispatchEvent(new Event('change'));
+    }
+  });
 });
 
 /**
@@ -454,52 +457,54 @@ function abort(e) {
 }
 
 document.addEventListener('readystatechange', async (event) => {
-  if (event.target.readyState === 'complete') {
-    fileInput = document.getElementById('file');
-    uploadList = document.getElementById('upload-list');
-    cancelButton = document.getElementById('upload-cancel');
-
-    if (fileInput) {
-      fileInput.classList.add('opacity');
-      fileInput.multiple = true;
+  if (event.target.readyState !== 'complete') {
+    return;
+  }
 
-      fileInput.addEventListener('change', () => {
-        window.location.hash = '#upload-modal';
+  fileInput = document.getElementById('file');
+  uploadList = document.getElementById('upload-list');
+  cancelButton = document.getElementById('upload-cancel');
 
-        replaceContent(uploadList);
+  if (fileInput) {
+    fileInput.classList.add('opacity');
+    fileInput.multiple = true;
 
-        for (const file of fileInput.files) {
-          addUploadItem(uploadList, file);
-        }
-      });
+    fileInput.addEventListener('change', () => {
+      window.location.hash = '#upload-modal';
 
-      const uploadButtonLink = document.getElementById('upload-button-link');
-      if (uploadButtonLink) {
-        uploadButtonLink.addEventListener('click', (e) => {
-          eventNoop(e);
+      replaceContent(uploadList);
 
-          fileInput.click();
-        });
+      for (const file of fileInput.files) {
+        addUploadItem(uploadList, file);
       }
-    }
+    });
 
-    const fileInputLabel = document.getElementById('file-label');
-    if (fileInputLabel) {
-      fileInputLabel.classList.remove('hidden');
-      fileInputLabel.innerHTML = 'Choose files...';
-    }
+    const uploadButtonLink = document.getElementById('upload-button-link');
+    if (uploadButtonLink) {
+      uploadButtonLink.addEventListener('click', (e) => {
+        eventNoop(e);
 
-    if (uploadList) {
-      uploadList.classList.remove('hidden');
+        fileInput.click();
+      });
     }
+  }
 
-    if (cancelButton) {
-      cancelButton.addEventListener('click', abort);
-    }
+  const fileInputLabel = document.getElementById('file-label');
+  if (fileInputLabel) {
+    fileInputLabel.classList.remove('hidden');
+    fileInputLabel.innerHTML = 'Choose files...';
+  }
 
-    const form = document.getElementById('upload-form');
-    if (form) {
-      form.addEventListener('submit', upload);
-    }
+  if (uploadList) {
+    uploadList.classList.remove('hidden');
+  }
+
+  if (cancelButton) {
+    cancelButton.addEventListener('click', abort);
+  }
+
+  const form = document.getElementById('upload-form');
+  if (form) {
+    form.addEventListener('submit', upload);
   }
 });

cmd/fibr/static/styles/async-image.css

@@ -0,0 +1,5 @@
+.thumbnail {
+  max-height: 100%;
+  vertical-align: middle;
+  width: 100%;
+}

cmd/fibr/static/styles/exif.css

@@ -0,0 +1,14 @@
+.exif-button {
+  bottom: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+
+#exif-modal:target {
+  display: flex;
+  z-index: 5;
+}
+
+#exif-modal:target ~ .content {
+  pointer-events: none;
+}

cmd/fibr/static/styles/layout.css

@@ -0,0 +1,3 @@
+.breakable {
+  word-break: break-word;
+}