content, client, css: tag gallery: showing all / direct / indirect networked-tags

4 files changed, 235 insertions, 33 deletions

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,
diff --git a/src/static/client2.js b/src/static/client2.js
index 164b3bac..b80cfc88 100644
--- a/src/static/client2.js
+++ b/src/static/client2.js
@@ -1486,6 +1486,159 @@ if (document.documentElement.dataset.urlKey === 'localized.albumCommentary') {
   clientSteps.addInternalListeners.push(addAlbumCommentaryInternalListeners);
 }
 
+// Art tag gallery filter ---------------------------------
+
+const artTagGalleryFilterInfo = clientInfo.artTagGalleryFilterInfo = {
+  featuredAllLine: null,
+  showingAllLine: null,
+  showingAllLink: null,
+
+  featuredDirectLine: null,
+  showingDirectLine: null,
+  showingDirectLink: null,
+
+  featuredIndirectLine: null,
+  showingIndirectLine: null,
+  showingIndirectLink: null,
+};
+
+function getArtTagGalleryFilterReferences() {
+  const info = artTagGalleryFilterInfo;
+
+  info.featuredAllLine =
+    document.getElementById('featured-all-line');
+
+  info.featuredDirectLine =
+    document.getElementById('featured-direct-line');
+
+  info.featuredIndirectLine =
+    document.getElementById('featured-indirect-line');
+
+  info.showingAllLine =
+    document.getElementById('showing-all-line');
+
+  info.showingDirectLine =
+    document.getElementById('showing-direct-line');
+
+  info.showingIndirectLine =
+    document.getElementById('showing-indirect-line');
+
+  info.showingAllLink =
+    info.showingAllLine?.querySelector('a') ?? null;
+
+  info.showingDirectLink =
+    info.showingDirectLine?.querySelector('a') ?? null;
+
+  info.showingIndirectLink =
+    info.showingIndirectLine?.querySelector('a') ?? null;
+
+  info.gridItems =
+    Array.from(
+      document.querySelectorAll('#content .grid-listing .grid-item'));
+
+  info.gridItemsOnlyFeaturedIndirectly =
+    info.gridItems
+      .filter(gridItem => gridItem.classList.contains('featured-indirectly'));
+
+  info.gridItemsFeaturedDirectly =
+    info.gridItems
+      .filter(gridItem => !gridItem.classList.contains('featured-indirectly'));
+}
+
+function filterArtTagGallery(showing) {
+  const info = artTagGalleryFilterInfo;
+
+  let gridItemsToShow;
+
+  switch (showing) {
+    case 'all':
+      gridItemsToShow = info.gridItems;
+      break;
+
+    case 'direct':
+      gridItemsToShow = info.gridItemsFeaturedDirectly;
+      break;
+
+    case 'indirect':
+      gridItemsToShow = info.gridItemsOnlyFeaturedIndirectly;
+      break;
+  }
+
+  for (const gridItem of info.gridItems) {
+    if (gridItemsToShow.includes(gridItem)) {
+      gridItem.style.removeProperty('display');
+    } else {
+      gridItem.style.display = 'none';
+    }
+  }
+}
+
+function addArtTagGalleryFilterListeners() {
+  const info = artTagGalleryFilterInfo;
+
+  const orderShowing = [
+    'all',
+    'direct',
+    'indirect',
+  ];
+
+  const orderFeaturedLines = [
+    info.featuredAllLine,
+    info.featuredDirectLine,
+    info.featuredIndirectLine,
+  ];
+
+  const orderShowingLines = [
+    info.showingAllLine,
+    info.showingDirectLine,
+    info.showingIndirectLine,
+  ];
+
+  const orderShowingLinks = [
+    info.showingAllLink,
+    info.showingDirectLink,
+    info.showingIndirectLink,
+  ];
+
+  for (let index = 0; index < orderShowing.length; index++) {
+    if (!orderShowingLines[index]) continue;
+
+    let nextIndex = index;
+    do {
+      if (nextIndex === orderShowing.length) {
+        nextIndex = 0;
+      } else {
+        nextIndex++;
+      }
+    } while (!orderShowingLinks[nextIndex]);
+
+    const currentFeaturedLine = orderFeaturedLines[index];
+    const currentShowingLine = orderShowingLines[index];
+    const currentShowingLink = orderShowingLinks[index];
+
+    const nextFeaturedLine = orderFeaturedLines[nextIndex];
+    const nextShowingLine = orderShowingLines[nextIndex];
+    const nextShowing = orderShowing[nextIndex];
+
+    currentShowingLink.addEventListener('click', event => {
+      event.preventDefault();
+
+      currentFeaturedLine.style.display = 'none';
+      currentShowingLine.style.display = 'none';
+
+      nextFeaturedLine.style.display = 'block';
+      nextShowingLine.style.display = 'block';
+
+      filterArtTagGallery(nextShowing);
+    });
+  }
+}
+
+if (document.documentElement.dataset.urlKey === 'localized.artTagGallery') {
+  clientSteps.getPageReferences.push(getArtTagGalleryFilterReferences);
+  clientSteps.addPageListeners.push(addArtTagGalleryFilterListeners);
+}
+
 // Run setup steps ----------------------------------------
 
 for (const [key, steps] of Object.entries(clientSteps)) {
diff --git a/src/static/site5.css b/src/static/site5.css
index dd5f3d20..167c398f 100644
--- a/src/static/site5.css
+++ b/src/static/site5.css
@@ -477,7 +477,10 @@ a.current {
 
 .group-contributions-sort-button,
 .quick-description .quick-description-actions .expand-link,
-.quick-description .quick-description-actions .collapse-link {
+.quick-description .quick-description-actions .collapse-link,
+html[data-url-key="localized.artTagGallery"] #showing-all-line a,
+html[data-url-key="localized.artTagGallery"] #showing-direct-line a,
+html[data-url-key="localized.artTagGallery"] #showing-indirect-line a {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
@@ -633,11 +636,6 @@ h1 {
   font-size: 2em;
 }
 
-html[data-url-key="localized.home"] #content h1 {
-  text-align: center;
-  font-size: 2.5em;
-}
-
 #content.flash-index h2 {
   text-align: center;
   font-size: 2.5em;
@@ -873,6 +871,31 @@ li > ul {
   display: none;
 }
 
+/* Specific pages - Homepage */
+
+html[data-url-key="localized.home"] #content h1 {
+  text-align: center;
+  font-size: 2.5em;
+}
+
+html[data-language-code="preview-en"][data-url-key="localized.home"] #content h1::after {
+  font-family: cursive;
+  display: block;
+  content: "(Preview Build)";
+  font-size: 0.8em;
+}
+
+/* Specific pages - Art Tag gallery */
+
+html[data-url-key="localized.artTagGallery"] #featured-direct-line,
+html[data-url-key="localized.artTagGallery"] #featured-indirect-line,
+html[data-url-key="localized.artTagGallery"] #showing-direct-line,
+html[data-url-key="localized.artTagGallery"] #showing-indirect-line {
+  display: none;
+}
+
+/* Specific pages - Art Tag Network */
+
 html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd) {
   margin-left: 20px;
   margin-bottom: 0;
@@ -1763,16 +1786,6 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   font-size: 0.9em;
 }
 
-/* important easter egg mode */
-
-html[data-language-code="preview-en"][data-url-key="localized.home"] #content
-  h1::after {
-  font-family: cursive;
-  display: block;
-  content: "(Preview Build)";
-  font-size: 0.8em;
-}
-
 /* Layout - Wide (most computers) */
 
 @media (min-width: 900px) {
diff --git a/src/strings-default.json b/src/strings-default.json
index 89f54a44..5d4f111c 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -351,11 +351,17 @@
   "artTagInfoPage.descendantTags.item.withGallery": "{TAG} ({GALLERY})",
   "artTagInfoPage.descendantTags.item.gallery": "Gallery",
   "artTagGalleryPage.title": "{TAG}",
-  "artTagGalleryPage.infoLine": "Featured in {COVER_ARTS}.",
-  "artTagGalleryPage.infoLine.notFeatured": "This tag hasn't been featured in any artworks yet.",
-  "artTagGalleryPage.infoLine.callToAction": "Maybe your track will be the first!",
+  "artTagGalleryPage.featuredLine.all": "Featured in {COVER_ARTS}.",
+  "artTagGalleryPage.featuredLine.direct": "Featured directly in {COVER_ARTS}.",
+  "artTagGalleryPage.featuredLine.indirect": "Featured indirectly in {COVER_ARTS}.",
+  "artTagGalleryPage.featuredLine.notFeatured": "This tag hasn't been featured in any artworks yet.",
+  "artTagGalleryPage.featuredLine.notFeatured.callToAction": "Maybe your track will be the first!",
   "artTagGalleryPage.descendsFrom": "Descends from {TAGS}.",
   "artTagGalleryPage.desendants": "Direct descendants: {TAGS}.",
+  "artTagGalleryPage.showingLine": "({SHOWING})",
+  "artTagGalleryPage.showingLine.all": "Showing all artworks.",
+  "artTagGalleryPage.showingLine.indirect": "Showing artworks where this tag is only featured indirectly.",
+  "artTagGalleryPage.showingLine.direct": "Showing artworks where this tag is featured directly.",
   "artTagSidebar.otherTagsExempt": "(…another {TAGS}…)",
   "commentaryIndex.title": "Commentary",
   "commentaryIndex.infoLine": "{WORDS} across {ENTRIES}, in all.",