From 8221798603833bbb8c7bc3664dae4aec0cb8ce10 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Sat, 14 Oct 2023 13:35:18 -0300
Subject: content, client, css: tag gallery: showing all / direct / indirect

---
 .../dependencies/generateArtTagGalleryPage.js      | 58 ++++++++++++++++------
 1 file changed, 44 insertions(+), 14 deletions(-)

(limited to 'src/content/dependencies')

diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js
index 72badb73..595fbb1c 100644
--- a/src/content/dependencies/generateArtTagGalleryPage.js
+++ b/src/content/dependencies/generateArtTagGalleryPage.js
@@ -90,7 +90,9 @@ export default {
     data.name = artTag.name;
     data.color = artTag.color;
 
-    data.numArtworks = query.allThings.length;
+    data.numArtworksIndirectly = query.indirectThings.length;
+    data.numArtworksDirectly = query.directThings.length;
+    data.numArtworksTotal = query.allThings.length;
 
     data.names =
       query.allThings.map(thing => thing.name);
@@ -110,10 +112,30 @@ export default {
       query.allThings.map(thing =>
         !query.directThings.includes(thing));
 
+    data.hasMixedDirectIndirect =
+      data.onlyFeaturedIndirectly.includes(true) &&
+      data.onlyFeaturedIndirectly.includes(false);
+
     return data;
   },
 
   generate(data, relations, {html, language}) {
+    const wrapFeaturedLine = (showing, count) =>
+      html.tag('p', {class: 'quick-info', id: `featured-${showing}-line`},
+        language.$('artTagGalleryPage.featuredLine', showing, {
+          coverArts: language.countArtworks(count, {
+            unit: true,
+          }),
+        }));
+
+    const wrapShowingLine = showing =>
+      html.tag('p', {class: 'quick-info', id: `showing-${showing}-line`},
+        language.$('artTagGalleryPage.showingLine', {
+          showing:
+            html.tag('a', {href: '#'},
+              language.$('artTagGalleryPage.showingLine', showing)),
+        }));
+
     return relations.layout
       .slots({
         title:
@@ -131,18 +153,20 @@ export default {
             extraReadingLinks: relations.extraReadingLinks ?? null,
           }),
 
-          html.tag('p', {class: 'quick-info'},
-            (data.numArtworks === 0
-              ? [
-                  language.$('artTagGalleryPage.infoLine.notFeatured'),
-                  html.tag('br'),
-                  language.$('artTagGalleryPage.infoLine.callToAction'),
-                ]
-              : language.$('artTagGalleryPage.infoLine', {
-                  coverArts: language.countArtworks(data.numArtworks, {
-                    unit: true,
-                  }),
-                }))),
+          data.numArtworksTotal === 0 &&
+            html.tag('p', {class: 'quick-info'}, [
+              language.$('artTagGalleryPage.featuredLine.notFeatured'),
+              html.tag('br'),
+              language.$('artTagGalleryPage.featuredLine.notFeatured.callToAction'),
+            ]),
+
+          data.numArtworksTotal > 0 &&
+            wrapFeaturedLine('all', data.numArtworksTotal),
+
+          data.hasMixedDirectIndirect && [
+            wrapFeaturedLine('direct', data.numArtworksDirectly),
+            wrapFeaturedLine('indirect', data.numArtworksIndirectly),
+          ],
 
           relations.ancestorLinks &&
             html.tag('p', {class: 'quick-info'},
@@ -151,11 +175,17 @@ export default {
               })),
 
           relations.descendantLinks &&
-            html.tag('p', {clasS: 'quick-info'},
+            html.tag('p', {class: 'quick-info'},
               language.$('artTagGalleryPage.desendants', {
                 tags: language.formatUnitList(relations.descendantLinks),
               })),
 
+          data.hasMixedDirectIndirect && [
+            wrapShowingLine('all'),
+            wrapShowingLine('direct'),
+            wrapShowingLine('indirect'),
+          ],
+
           relations.coverGrid
             .slots({
               links: relations.links,
-- 
cgit 1.3.0-6-gf8a5