From 33d67ffc4f9d9d0d7ad672997ffc5261770d988b Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 28 Oct 2020 18:01:59 -0300 Subject: so far so good --- static/client.js | 166 +++++++++++++++++ static/icons.svg | 9 + static/lazy-fallback.js | 19 ++ static/lazy-loading.js | 25 +++ static/lazy-show.js | 16 ++ static/site.css | 483 ++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 718 insertions(+) create mode 100644 static/client.js create mode 100644 static/icons.svg create mode 100644 static/lazy-fallback.js create mode 100644 static/lazy-loading.js create mode 100644 static/lazy-show.js create mode 100644 static/site.css (limited to 'static') diff --git a/static/client.js b/static/client.js new file mode 100644 index 0000000..5d706b2 --- /dev/null +++ b/static/client.js @@ -0,0 +1,166 @@ +// This is the JS file that gets loaded on the client! It's only really used for +// the random track feature right now - the idea is we only use it for stuff +// that cannot 8e done at static-site compile time, 8y its fundamentally +// ephemeral nature. + +'use strict'; + +const officialAlbumData = albumData.filter(album => !album.isFanon); +const fandomAlbumData = albumData.filter(album => album.isFanon); +const artistNames = artistData.filter(artist => !artist.alias).map(artist => artist.name); +const allTracks = C.getAllTracks(albumData); + +function rebase(href) { + const relative = document.documentElement.dataset.rebase; + if (relative) { + return relative + "/" + href; + } else { + return href; + } +} + +function pick(array) { + return array[Math.floor(Math.random() * array.length)]; +} + +function cssProp(el, key) { + return getComputedStyle(el).getPropertyValue(key).trim(); +} + +function getAlbum(el) { + const directory = cssProp(el, '--album-directory'); + return albumData.find(album => album.directory === directory); +} + +function getFlash(el) { + const directory = cssProp(el, '--flash-directory'); + return flashData.find(flash => flash.directory === directory); +} + +function openAlbum(album) { + location.href = rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/index.html`); +} + +function openTrack(track) { + location.href = rebase(`${C.TRACK_DIRECTORY}/${track.directory}/index.html`); +} + +function openArtist(artist) { + location.href = rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/index.html`); +} + +function openFlash(flash) { + location.href = rebase(`${C.FLASH_DIRECTORY}/${flash.directory}/index.html`); +} + +/* i implemented these functions but we dont actually use them anywhere lol +function isFlashPage() { + return !!cssProp(document.body, '--flash-directory'); +} + +function isTrackOrAlbumPage() { + return !!cssProp(document.body, '--album-directory'); +} + +function isTrackPage() { + return !!cssProp(document.body, '--track-directory'); +} +*/ + +function getTrackListAndIndex() { + const album = getAlbum(document.body); + const directory = cssProp(document.body, '--track-directory'); + if (!directory && !album) return {}; + if (!directory) return {list: album.tracks}; + const trackIndex = album.tracks.findIndex(track => track.directory === directory); + return {list: album.tracks, index: trackIndex}; +} + +function openNextTrack() { + const { list, index } = getTrackListAndIndex(); + if (!list) return; + if (index === list.length) return; + openTrack(list[index + 1]); +} + +function openPreviousTrack() { + const { list, index } = getTrackListAndIndex(); + if (!list) return; + if (index === 0) return; + openTrack(list[index - 1]); +} + +function openRandomTrack() { + const { list } = getTrackListAndIndex(); + if (!list) return; + openTrack(pick(list)); +} + +function getFlashListAndIndex() { + const list = flashData.filter(flash => !flash.act8r8k) + const flash = getFlash(document.body); + if (!flash) return {list}; + const flashIndex = list.indexOf(flash); + return {list, index: flashIndex}; +} + +function openNextFlash() { + const { list, index } = getFlashListAndIndex(); + if (index === list.length) return; + openFlash(list[index + 1]); +} + +function openPreviousFlash() { + const { list, index } = getFlashListAndIndex(); + if (index === 0) return; + openFlash(list[index - 1]); +} + +for (const a of document.body.querySelectorAll('[data-random]')) { + a.addEventListener('click', evt => { + try { + switch (a.dataset.random) { + case 'album': return openAlbum(pick(albumData)); + case 'album-in-fandom': return openAlbum(pick(fandomAlbumData)); + case 'album-in-official': openAlbum(pick(officialAlbumData)); + case 'track': return openTrack(pick(allTracks)); + case 'track-in-album': return openTrack(pick(getAlbum(a).tracks)); + case 'track-in-fandom': return openTrack(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); + case 'track-in-official': return openTrack(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); + case 'artist': return openArtist(pick(artistNames)); + case 'artist-more-than-one-contrib': return openArtist(pick(artistNames.filter(name => C.getArtistNumContributions(name, {albumData, allTracks, flashData}) > 1))); + } + } finally { + evt.preventDefault(); + } + }); +} + +const next = document.getElementById('next-button'); +const previous = document.getElementById('previous-button'); +const random = document.getElementById('random-button'); + +const prependTitle = (el, prepend) => { + const existing = el.getAttribute('title'); + if (existing) { + el.setAttribute('title', prepend + ' ' + existing); + } else { + el.setAttribute('title', prepend); + } +}; + +if (next) prependTitle(next, '(Shift+N)'); +if (previous) prependTitle(previous, '(Shift+P)'); +if (random) prependTitle(random, '(Shift+R)'); + +document.addEventListener('keypress', event => { + if (event.shiftKey) { + if (event.charCode === 'N'.charCodeAt(0)) { + if (next) next.click(); + } else if (event.charCode === 'P'.charCodeAt(0)) { + if (previous) previous.click(); + } else if (event.charCode === 'R'.charCodeAt(0)) { + if (random) random.click(); + } + } +}); diff --git a/static/icons.svg b/static/icons.svg new file mode 100644 index 0000000..84d6360 --- /dev/null +++ b/static/icons.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/lazy-fallback.js b/static/lazy-fallback.js new file mode 100644 index 0000000..a66b922 --- /dev/null +++ b/static/lazy-fallback.js @@ -0,0 +1,19 @@ +// Fall8ack code for lazy loading. 8asically, this runs if the stuff in +// lazy-loading.js doesn't; while that file's written with the same kinda +// modern syntax/APIs used all over the site, displaying the images is a pretty +// damn important thing to do, so we have this goodol' Olde JavaScripte fix for +// 8rowsers which have JS ena8led (and so won't display gener8ted