« get me outta code hell

content: generateArtistGroupContributionsInfo: table layout 👻 - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/static
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2023-06-30 20:45:00 -0300
committer(quasar) nebula <qznebula@protonmail.com>2023-06-30 20:45:00 -0300
commitda5ba89f4171c395f5e7fa2c764272e7d2de93f3 (patch)
tree51252bb8e85fc6e2867c40393798ef8b9304734e /src/static
parent84e1f947c9ac17ab075348ea386d43c17af66435 (diff)
content: generateArtistGroupContributionsInfo: table layout 👻
Diffstat (limited to 'src/static')
-rw-r--r--src/static/client.js34
-rw-r--r--src/static/site4.css19
2 files changed, 53 insertions, 0 deletions
diff --git a/src/static/client.js b/src/static/client.js
index e75fbd99..2f0b6aee 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -870,3 +870,37 @@ function loadImage(imageUrl, onprogress) {
     xhr.send();
   });
 }
+
+// Group contributions table ------------------------------
+
+const groupContributionsTableInfo =
+  Array.from(document.querySelectorAll('#content dl'))
+    .filter(dl => dl.querySelector('a.group-contributions-sort-button'))
+    .map(dl => ({
+      sortingByCountLink: dl.querySelector('dt.group-contributions-sorted-by-count a.group-contributions-sort-button'),
+      sortingByDurationLink: dl.querySelector('dt.group-contributions-sorted-by-duration a.group-contributions-sort-button'),
+      sortingByCountElements: dl.querySelectorAll('.group-contributions-sorted-by-count'),
+      sortingByDurationElements: dl.querySelectorAll('.group-contributions-sorted-by-duration'),
+    }));
+
+function sortGroupContributionsTableBy(info, sort) {
+  const [showThese, hideThese] =
+    (sort === 'count'
+      ? [info.sortingByCountElements, info.sortingByDurationElements]
+      : [info.sortingByDurationElements, info.sortingByCountElements]);
+
+  for (const element of showThese) element.classList.add('visible');
+  for (const element of hideThese) element.classList.remove('visible');
+}
+
+for (const info of groupContributionsTableInfo) {
+  info.sortingByCountLink.addEventListener('click', evt => {
+    evt.preventDefault();
+    sortGroupContributionsTableBy(info, 'duration');
+  });
+
+  info.sortingByDurationLink.addEventListener('click', evt => {
+    evt.preventDefault();
+    sortGroupContributionsTableBy(info, 'count');
+  });
+}
diff --git a/src/static/site4.css b/src/static/site4.css
index d7801f20..c7ecc393 100644
--- a/src/static/site4.css
+++ b/src/static/site4.css
@@ -722,6 +722,25 @@ li > ul {
   margin-top: 5px;
 }
 
+.group-contributions-table {
+  display: inline-block;
+}
+
+.group-contributions-table .group-contributions-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.group-contributions-table .group-contributions-metrics {
+  margin-left: 1.5ch;
+  white-space: nowrap;
+}
+
+.group-contributions-sorted-by-count:not(.visible),
+.group-contributions-sorted-by-duration:not(.visible) {
+  display: none;
+}
+
 /* Images */
 
 .image-container {