« get me outta code hell

very wip list-style album view - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/upd8.js
diff options
context:
space:
mode:
author(quasar) nebula <towerofnix@gmail.com>2020-11-03 07:47:39 -0400
committer(quasar) nebula <towerofnix@gmail.com>2020-11-03 07:47:39 -0400
commit65208264d49e863d63e30d6d193fe28a6ec52601 (patch)
tree1b946cb8f30fab68782bea2a601abf8ea69187b1 /upd8.js
parent7b3d3631924d202eb9d7a54548b327bb22195a68 (diff)
very wip list-style album view
Diffstat (limited to 'upd8.js')
-rw-r--r--upd8.js48
1 files changed, 48 insertions, 0 deletions
diff --git a/upd8.js b/upd8.js
index d86cc022..d6a60a10 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1072,6 +1072,41 @@ function getFlashGridHTML(props) {
     });
 }
 
+function getTableHTML({
+    entries,
+    srcFn,
+    hrefFn,
+    altFn,
+    infoFn = () => [],
+    columnsFn = () => [],
+    lazy = true
+}) {
+    return entries.map(({ item }, i) => fixWS`
+        <a ${classes('table-row', 'box')} href="${hrefFn(item)}" style="${getThemeString(item)}">
+            ${img({
+                src: srcFn(item),
+                alt: altFn(item),
+                lazy: (typeof lazy === 'number' ? i >= lazy : lazy),
+            })}
+            <div class="table-row-summary">
+                <span class="table-row-name">${item.name}</span><br>
+                ${infoFn(item).map(val => `<span class="table-row-info">${val}</span>`).join('\n')}
+            </div>
+            ${columnsFn(item).map(val => `<span class="table-row-column">${val}</span>`).join('\n')}
+        </a>
+    `).join('\n');
+}
+
+function getAlbumTableHTML(props) {
+    return getTableHTML({
+        srcFn: getAlbumCover,
+        hrefFn: album => `${C.ALBUM_DIRECTORY}/${album.directory}/`,
+        altFn: () => 'album cover',
+        infoFn: album => [getDateString(album), s(album.tracks.length, 'track'), getDurationString(getTotalDuration(album.tracks))],
+        ...props
+    });
+}
+
 function getNewReleases(numReleases) {
     const latestFirst = albumData.slice().reverse();
 
@@ -1193,6 +1228,9 @@ function writeMiscellaneousPages() {
                 classes: ['top-index'],
                 content: fixWS`
                     <h1>Albums - Fandom</h1>
+                    <p class="quick-links">View as: <a href="#grid">Grid</a>, <a href="#list">List</a></p>
+                    <p class="quick-links"><a href="list/">More listings!</a></p>
+                    <h2 id="grid">Grid</h2>
                     <div class="grid-listing">
                         ${getAlbumGridHTML({
                             entries: (albumData
@@ -1202,6 +1240,16 @@ function writeMiscellaneousPages() {
                             lazy: 4
                         })}
                     </div>
+                    <h2 id="list">List</h2>
+                    <div class="table-listing">
+                        ${getAlbumTableHTML({
+                            entries: (albumData
+                                .filter(album => album.isFanon)
+                                .reverse()
+                                .map(album => ({item: album}))),
+                            lazy: true
+                        })}
+                    </div>
                 `
             },
             nav: {simple: true}