From 8221798603833bbb8c7bc3664dae4aec0cb8ce10 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 14 Oct 2023 13:35:18 -0300 Subject: content, client, css: tag gallery: showing all / direct / indirect --- .../dependencies/generateArtTagGalleryPage.js | 58 ++++++-- src/static/client2.js | 153 +++++++++++++++++++++ src/static/site5.css | 45 +++--- src/strings-default.json | 12 +- 4 files changed, 235 insertions(+), 33 deletions(-) diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js index 72badb7..595fbb1 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 164b3ba..b80cfc8 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 dd5f3d2..167c398 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 89f54a4..5d4f111 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.", -- cgit 1.3.0-6-gf8a5