From 3d218700701a42d2b43714ddc63620ee308f354e Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 13 Aug 2023 23:24:36 -0300 Subject: content, client: "Random Pages" listing --- .../generateListRandomPageLinksGroupSection.js | 79 ++++++++++++++++ src/content/dependencies/listRandomPageLinks.js | 77 ++++++++++++++-- src/listing-spec.js | 90 ------------------- src/static/client2.js | 100 +++++++++++---------- src/strings-default.json | 12 +++ 5 files changed, 215 insertions(+), 143 deletions(-) create mode 100644 src/content/dependencies/generateListRandomPageLinksGroupSection.js diff --git a/src/content/dependencies/generateListRandomPageLinksGroupSection.js b/src/content/dependencies/generateListRandomPageLinksGroupSection.js new file mode 100644 index 0000000..9a46e2c --- /dev/null +++ b/src/content/dependencies/generateListRandomPageLinksGroupSection.js @@ -0,0 +1,79 @@ +import {stitchArrays} from '../../util/sugar.js'; + +export default { + contentDependencies: ['generateColorStyleVariables', 'linkGroup'], + extraDependencies: ['html', 'language', 'wikiData'], + + sprawl: ({albumData}) => ({albumData}), + + query: (sprawl, group) => ({ + albums: + sprawl.albumData + .filter(album => album.groups.includes(group)), + }), + + relations: (relation, query, sprawl, group) => ({ + groupLink: + relation('linkGroup', group), + + albumColorVariables: + query.albums + .map(() => relation('generateColorStyleVariables')), + }), + + data: (query, sprawl, group) => ({ + groupDirectory: + group.directory, + + albumColors: + query.albums + .map(album => album.color), + + albumDirectories: + query.albums + .map(album => album.directory), + + albumNames: + query.albums + .map(album => album.name), + }), + + generate: (data, relations, {html, language}) => + html.tags([ + html.tag('dt', + language.$('listingPage.other.randomPages.group', { + group: relations.groupLink, + + randomAlbum: + html.tag('a', + {href: '#', 'data-random': 'album-in-' + data.groupDirectory}, + language.$('listingPage.other.randomPages.group.randomAlbum')), + + randomTrack: + html.tag('a', + {href: '#', 'data-random': 'track-in-' + data.groupDirectory}, + language.$('listingPage.other.randomPages.group.randomTrack')), + })), + + html.tag('dd', + html.tag('ul', + stitchArrays({ + colorVariables: relations.albumColorVariables, + color: data.albumColors, + directory: data.albumDirectories, + name: data.albumNames, + }).map(({colorVariables, color, directory, name}) => + html.tag('li', + language.$('listingPage.other.randomPages.album', { + album: + html.tag('a', { + href: '#', + 'data-random': 'track-in-album', + style: + colorVariables.slot('color', color).content + + '; ' + + `--album-directory: ${directory}`, + }, name), + }))))), + ]), +}; diff --git a/src/content/dependencies/listRandomPageLinks.js b/src/content/dependencies/listRandomPageLinks.js index 28a925a..43bf7dd 100644 --- a/src/content/dependencies/listRandomPageLinks.js +++ b/src/content/dependencies/listRandomPageLinks.js @@ -1,28 +1,91 @@ export default { - contentDependencies: ['generateListingPage'], - extraDependencies: ['html', 'wikiData'], + contentDependencies: [ + 'generateListingPage', + 'generateListRandomPageLinksGroupSection', + ], - sprawl() { - return {}; + extraDependencies: ['html', 'language', 'wikiData'], + + sprawl({groupData}) { + return {groupData}; }, query(sprawl, spec) { + const group = directory => + sprawl.groupData.find(group => group.directory === directory); + return { spec, + officialGroup: group('official'), + fandomGroup: group('fandom'), + beyondGroup: group('beyond'), }; }, relations(relation, query) { return { page: relation('generateListingPage', query.spec), + + officialSection: + relation('generateListRandomPageLinksGroupSection', query.officialGroup), + + fandomSection: + relation('generateListRandomPageLinksGroupSection', query.fandomGroup), + + beyondSection: + relation('generateListRandomPageLinksGroupSection', query.beyondGroup), }; }, - generate(relations, {html}) { + generate(relations, {html, language}) { return relations.page.slots({ type: 'custom', - content: - html.tag('p', `Alright alright, this is a stub page! Coming soon!`), + content: [ + html.tag('p', + language.$('listingPage.other.randomPages.chooseLinkLine')), + + html.tag('p', + {class: 'js-hide-once-data'}, + language.$('listingPage.other.randomPages.dataLoadingLine')), + + html.tag('p', + {class: 'js-show-once-data'}, + language.$('listingPage.other.randomPages.dataLoadedLine')), + + html.tag('dl', [ + html.tag('dt', + language.$('listingPage.other.randomPages.misc')), + + html.tag('dd', + html.tag('ul', [ + html.tag('li', [ + html.tag('a', + {href: '#', 'data-random': 'artist'}, + language.$('listingPage.other.randomPages.misc.randomArtist')), + + '(' + + html.tag('a', + {href: '#', 'data-random': 'artist-more-than-one-contrib'}, + language.$('listingPage.other.randomPages.misc.atLeastTwoContributions')) + + ')', + ]), + + html.tag('li', + html.tag('a', + {href: '#', 'data-random': 'album'}, + language.$('listingPage.other.randomPages.misc.randomAlbumWholeSite'))), + + html.tag('li', + html.tag('a', + {href: '#', 'data-random': 'track'}, + language.$('listingPage.other.randomPages.misc.randomTrackWholeSite'))), + ])), + + relations.officialSection, + relations.fandomSection, + relations.beyondSection, + ]), + ], }); }, }; diff --git a/src/listing-spec.js b/src/listing-spec.js index e19b90e..402cb6f 100644 --- a/src/listing-spec.js +++ b/src/listing-spec.js @@ -240,96 +240,6 @@ listingSpec.push({ stringsKey: 'other.randomPages', contentFunction: 'listRandomPageLinks', groupUnderOther: true, - - /* - data: ({wikiData: {albumData}}) => [ - { - name: 'Official', - randomCode: 'official', - albums: albumData - .filter((album) => album.groups - .some((group) => group.directory === OFFICIAL_GROUP_DIRECTORY)), - }, - { - name: 'Fandom', - randomCode: 'fandom', - albums: albumData - .filter((album) => album.groups - .every((group) => group.directory !== OFFICIAL_GROUP_DIRECTORY)), - }, - ], - - html: (data, {getLinkThemeString, html}) => - html.fragment([ - html.tag('p', - `Choose a link to go to a random page in that category or album! If your browser doesn't support relatively modern JavaScript or you've disabled it, these links won't work - sorry.`), - - html.tag('p', - {class: 'js-hide-once-data'}, - `(Data files are downloading in the background! Please wait for data to load.)`), - - html.tag('p', - {class: 'js-show-once-data'}, - `(Data files have finished being downloaded. The links should work!)`), - - html.tag('dl', [ - html.tag('dt', - `Miscellaneous:`), - - html.tag('dd', - html.tag('ul', [ - html.tag('li', [ - html.tag('a', - {href: '#', 'data-random': 'artist'}, - `Random Artist`), - '(' + - html.tag('a', - {href: '#', 'data-random': 'artist-more-than-one-contrib'}, - `>1 contribution`) + - ')', - ]), - - html.tag('li', - html.tag('a', - {href: '#', 'data-random': 'album'}, - `Random Album (whole site)`)), - - html.tag('li', - html.tag('a', - {href: '#', 'data-random': 'track'}, - `Random Track (whole site)`)), - ])), - - ...data.flatMap(({albums, name, randomCode}) => [ - html.tag('dt', [ - name + ':', - '(' + - html.tag('a', - {href: '#', 'data-random': 'album-in-' + randomCode}, - `Random Album`) + - ', ' + - html.tag('a', - {href: '#', 'data-random': 'track-in' + randomCode}, - 'Random Track') + - ')', - ]), - - html.tag('dd', - html.tag('ul', - albums.map(album => - html.tag('li', - html.tag('a', - { - href: '#', - 'data-random': 'track-in-album', - style: getLinkThemeString(album.color) + - `; --album-directory: ${album.directory}`, - }, - album.name))))), - ]), - ]), - ]), - */ }); { diff --git a/src/static/client2.js b/src/static/client2.js index dab92ff..36dba2d 100644 --- a/src/static/client2.js +++ b/src/static/client2.js @@ -12,7 +12,7 @@ import {getColors} from '../util/colors.js'; import {getArtistNumContributions} from '../util/wiki-data.js'; let albumData, artistData; -let officialAlbumData, fandomAlbumData; +let officialAlbumData, fandomAlbumData, beyondAlbumData; let ready = false; @@ -96,56 +96,62 @@ for (const a of document.body.querySelectorAll('[data-random]')) { return; } + const tracks = albumData => + albumData + .map(album => album.tracks) + .reduce((acc, tracks) => acc.concat(tracks), []); + setTimeout(() => { a.href = rebase('js-disabled'); }); + switch (a.dataset.random) { case 'album': - return (a.href = openAlbum(pick(albumData).directory)); - case 'album-in-fandom': - return (a.href = openAlbum(pick(fandomAlbumData).directory)); + a.href = openAlbum(pick(albumData).directory); + break; + case 'album-in-official': - return (a.href = openAlbum(pick(officialAlbumData).directory)); + a.href = openAlbum(pick(officialAlbumData).directory); + break; + + case 'album-in-fandom': + a.href = openAlbum(pick(fandomAlbumData).directory); + break; + + case 'album-in-beyond': + a.href = openAlbum(pick(beyondAlbumData).directory); + break; + case 'track': - return (a.href = openTrack( - getRefDirectory( - pick( - albumData.map((a) => a.tracks).reduce((a, b) => a.concat(b), []) - ) - ) - )); + a.href = openTrack(getRefDirectory(pick(tracks(albumData)))); + break; + case 'track-in-album': - return (a.href = openTrack(getRefDirectory(pick(getAlbum(a).tracks)))); - case 'track-in-fandom': - return (a.href = openTrack( - getRefDirectory( - pick( - fandomAlbumData.reduce( - (acc, album) => acc.concat(album.tracks), - [] - ) - ) - ) - )); + a.href = openTrack(getRefDirectory(pick(getAlbum(a).tracks))); + break; + case 'track-in-official': - return (a.href = openTrack( - getRefDirectory( - pick( - officialAlbumData.reduce( - (acc, album) => acc.concat(album.tracks), - [] - ) - ) - ) - )); + a.href = openTrack(getRefDirectory(pick(tracks(officialAlbumData)))); + break; + + case 'track-in-fandom': + a.href = openTrack(getRefDirectory(pick(tracks(fandomAlbumData)))); + break; + + case 'track-in-beyond': + a.href = openTrack(getRefDirectory(pick(tracks(beyondAlbumData)))); + break; + case 'artist': - return (a.href = openArtist(pick(artistData).directory)); + a.href = openArtist(pick(artistData).directory); + break; + case 'artist-more-than-one-contrib': - return (a.href = openArtist( - pick( - artistData.filter((artist) => getArtistNumContributions(artist) > 1) - ).directory - )); + a.href = + openArtist( + pick(artistData.filter((artist) => getArtistNumContributions(artist) > 1)) + .directory); + break; } }); } @@ -201,12 +207,14 @@ fetch(rebase('data.json', 'rebaseShared')) albumData = data.albumData; artistData = data.artistData; - officialAlbumData = albumData.filter((album) => - album.groups.includes('group:official') - ); - fandomAlbumData = albumData.filter( - (album) => !album.groups.includes('group:official') - ); + const albumsInGroup = directory => + albumData + .filter(album => + album.groups.includes(`group:${directory}`)); + + officialAlbumData = albumsInGroup('official'); + fandomAlbumData = albumsInGroup('fandom'); + beyondAlbumData = albumsInGroup('beyond'); for (const element of elements1) element.style.display = 'none'; for (const element of elements2) element.style.display = 'block'; diff --git a/src/strings-default.json b/src/strings-default.json index 82a046f..8d7756a 100644 --- a/src/strings-default.json +++ b/src/strings-default.json @@ -469,6 +469,18 @@ "listingPage.other.allAdditionalFiles.file.withMultipleFiles": "{TITLE} ({FILES})", "listingPage.other.randomPages.title": "Random Pages", "listingPage.other.randomPages.title.short": "Random Pages", + "listingPage.other.randomPages.chooseLinkLine": "Choose a link to go to a random page in that category or album! If your browser doesn't support relatively modern JavaScript or you've disabled it, these links won't work - sorry.", + "listingPage.other.randomPages.dataLoadingLine": "(Data files are downloading in the background! Please wait for data to load.)", + "listingPage.other.randomPages.dataLoadedLine": "(Data files have finished being downloaded. The links should work!)", + "listingPage.other.randomPages.misc": "Miscellaneous:", + "listingPage.other.randomPages.misc.randomArtist": "Random Artist", + "listingPage.other.randomPages.misc.atLeastTwoContributions": "at least 2 contributions", + "listingPage.other.randomPages.misc.randomAlbumWholeSite": "Random Album (whole site)", + "listingPage.other.randomPages.misc.randomTrackWholeSite": "Random Track (whole site)", + "listingPage.other.randomPages.group": "From {GROUP}: ({RANDOM_ALBUM}, {RANDOM_TRACK})", + "listingPage.other.randomPages.group.randomAlbum": "Random Album", + "listingPage.other.randomPages.group.randomTrack": "Random Track", + "listingPage.other.randomPages.album": "{ALBUM}", "listingPage.misc.trackContributors": "Track Contributors", "listingPage.misc.artContributors": "Art Contributors", "listingPage.misc.flashContributors": "Flash & Game Contributors", -- cgit 1.3.0-6-gf8a5