fix: album page header's total size text

also simplify various logics

src/js/album.js

@@ -13,21 +13,18 @@ const page = {
 }
 
 window.addEventListener('DOMContentLoaded', () => {
-  const files = document.querySelectorAll('.image-container')
+  // Prettify all .file-size elements
+  const sizeElements = document.querySelectorAll('.file-size')
+  for (let i = 0; i < sizeElements.length; i++) {
+    const string = sizeElements[i].dataset.value || sizeElements[i].innerHTML
+    sizeElements[i].innerHTML = page.getPrettyBytes(parseInt(string, 10))
+  }
 
-  // Prettify individual file's data rows
+  // Prettify all .file-date elements
-  for (let i = 0; i < files.length; i++) {
+  const dateElements = document.querySelectorAll('.file-date')
-    const sizeElem = files[i].querySelector('.details .file-size')
+  for (let i = 0; i < dateElements.length; i++) {
-    if (sizeElem) {
+    const string = dateElements[i].dataset.value
-      const str = sizeElem.dataset.value || sizeElem.innerHTML.replace(/\s*B$/i, '')
+    dateElements[i].innerHTML = page.getPrettyDate(new Date(parseInt(string, 10) * 1000))
-      sizeElem.innerHTML = page.getPrettyBytes(parseInt(str))
-    }
-
-    const dateElem = files[i].querySelector('.details .file-date')
-    if (dateElem) {
-      const str = dateElem.dataset.value
-      dateElem.innerHTML = page.getPrettyDate(new Date(parseInt(str) * 1000))
-    }
   }
 
   page.lazyLoad = new LazyLoad()
@@ -38,7 +35,6 @@ window.addEventListener('DOMContentLoaded', () => {
     return ext.substring(1) // removes starting dot
   }).join('|')}`, 'i')
 
-  console.log(imageExtsRegex)
   page.lightbox = new SimpleLightbox('#table a.image', {
     captions: true,
     captionSelector: 'img',

views/album.njk

@@ -131,7 +131,7 @@
           </a>
           <div class="details">
             <p class="name">{{ file.name }}</p>
-            <p class="file-size" data-value="{{ file.size }}">{{ file.size }} B</p>
+            <p class="file-size">{{ file.size }} B</p>
             <p class="file-date" data-value="{{ file.timestamp }}"></p>
           </div>
         </div>