« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/client.js95
-rw-r--r--static/site.css142
2 files changed, 153 insertions, 84 deletions
diff --git a/static/client.js b/static/client.js
index 8247a42c..549fde29 100644
--- a/static/client.js
+++ b/static/client.js
@@ -5,10 +5,10 @@
 
 '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);
+let albumData, artistData, flashData;
+let officialAlbumData, fandomAlbumData, artistNames;
+
+let ready = false;
 
 function rebase(href) {
     const relative = document.documentElement.dataset.rebase;
@@ -27,6 +27,10 @@ function cssProp(el, key) {
     return getComputedStyle(el).getPropertyValue(key).trim();
 }
 
+function getRefDirectory(ref) {
+    return ref.split(':')[1];
+}
+
 function getAlbum(el) {
     const directory = cssProp(el, '--album-directory');
     return albumData.find(album => album.directory === directory);
@@ -37,16 +41,16 @@ function getFlash(el) {
     return flashData.find(flash => flash.directory === directory);
 }
 
-function openAlbum(album) {
-    return rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/`);
+function openAlbum(directory) {
+    return rebase(`${C.ALBUM_DIRECTORY}/${directory}/`);
 }
 
-function openTrack(track) {
-    return rebase(`${C.TRACK_DIRECTORY}/${track.directory}/`);
+function openTrack(directory) {
+    return rebase(`${C.TRACK_DIRECTORY}/${directory}/`);
 }
 
-function openArtist(artist) {
-    return rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/`);
+function openArtist(directory) {
+    return rebase(`${C.ARTIST_DIRECTORY}/${directory}/`);
 }
 
 function openFlash(flash) {
@@ -76,20 +80,6 @@ function getTrackListAndIndex() {
     return {list: album.tracks, index: trackIndex};
 }
 
-function openNextTrack() {
-    const { list, index } = getTrackListAndIndex();
-    if (!list) return;
-    if (index === list.length) return;
-    return openTrack(list[index + 1]);
-}
-
-function openPreviousTrack() {
-    const { list, index } = getTrackListAndIndex();
-    if (!list) return;
-    if (index === 0) return;
-    return openTrack(list[index - 1]);
-}
-
 function openRandomTrack() {
     const { list } = getTrackListAndIndex();
     if (!list) return;
@@ -104,33 +94,26 @@ function getFlashListAndIndex() {
     return {list, index: flashIndex};
 }
 
-function openNextFlash() {
-    const { list, index } = getFlashListAndIndex();
-    if (index === list.length) return;
-    return openFlash(list[index + 1]);
-}
-
-function openPreviousFlash() {
-    const { list, index } = getFlashListAndIndex();
-    if (index === 0) return;
-    return openFlash(list[index - 1]);
-}
-
 for (const a of document.body.querySelectorAll('[data-random]')) {
     a.addEventListener('click', evt => {
+        if (!ready) {
+            evt.preventDefault();
+            return;
+        }
+
         setTimeout(() => {
             a.href = rebase(C.JS_DISABLED_DIRECTORY);
         });
         switch (a.dataset.random) {
-            case 'album': return a.href = openAlbum(pick(albumData));
-            case 'album-in-fandom': return a.href = openAlbum(pick(fandomAlbumData));
-            case 'album-in-official': return a.href = openAlbum(pick(officialAlbumData));
-            case 'track': return a.href = openTrack(pick(allTracks));
-            case 'track-in-album': return a.href = openTrack(pick(getAlbum(a).tracks));
-            case 'track-in-fandom': return a.href = openTrack(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), [])));
-            case 'track-in-official': return a.href = openTrack(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), [])));
-            case 'artist': return a.href = openArtist(pick(artistNames));
-            case 'artist-more-than-one-contrib': return a.href = openArtist(pick(artistNames.filter(name => C.getArtistNumContributions(name, {albumData, allTracks, flashData}) > 1)));
+            case 'album': return a.href = openAlbum(pick(albumData).directory);
+            case 'album-in-fandom': return a.href = openAlbum(pick(fandomAlbumData).directory);
+            case 'album-in-official': return a.href = openAlbum(pick(officialAlbumData).directory);
+            case 'track': return a.href = openTrack(getRefDirectory(pick(albumData.map(a => a.tracks).reduce((a, b) => a.concat(b), []))));
+            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), []))));
+            case 'track-in-official': return a.href = openTrack(getRefDirectory(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))));
+            case 'artist': return a.href = openArtist(pick(artistData).directory);
+            case 'artist-more-than-one-contrib': return a.href = openArtist(pick(artistData.filter(artist => C.getArtistNumContributions(artist) > 1)).directory);
         }
     });
 }
@@ -159,7 +142,7 @@ document.addEventListener('keypress', event => {
         } else if (event.charCode === 'P'.charCodeAt(0)) {
             if (previous) previous.click();
         } else if (event.charCode === 'R'.charCodeAt(0)) {
-            if (random) random.click();
+            if (random && ready) random.click();
         }
     }
 });
@@ -173,3 +156,23 @@ for (const reveal of document.querySelectorAll('.reveal')) {
         }
     });
 }
+
+const elements1 = document.getElementsByClassName('js-hide-once-data');
+const elements2 = document.getElementsByClassName('js-show-once-data');
+
+for (const element of elements1) element.style.display = 'block';
+
+fetch(rebase('data.json')).then(data => data.json()).then(data => {
+    albumData = data.albumData;
+    artistData = data.artistData;
+    flashData = data.flashData;
+
+    officialAlbumData = albumData.filter(album => !album.isFanon);
+    fandomAlbumData = albumData.filter(album => album.isFanon);
+    artistNames = artistData.filter(artist => !artist.alias).map(artist => artist.name);
+
+    for (const element of elements1) element.style.display = 'none';
+    for (const element of elements2) element.style.display = 'block';
+
+    ready = true;
+});
diff --git a/static/site.css b/static/site.css
index 016f74c4..90f8ed3e 100644
--- a/static/site.css
+++ b/static/site.css
@@ -15,14 +15,37 @@
 }
 
 body {
-    background-color: var(--bg-color);
-
     --bg-shade: calc(255 * var(--theme));
     --fg-shade: calc(255 * (1 - var(--theme)));
+    background: black;
+    margin: 10px;
+    overflow-y: scroll;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+
+    background-image: url("https://www.homestuck.com/images/desktops/johnhouse_1920x1080.jpg");
+    background-position: center;
+    background-size: cover;
+    opacity: 0.5;
+}
 
+#page-container {
+    background-color: var(--bg-color);
     color: rgb(var(--fg-shade), var(--fg-shade), var(--fg-shade));
 
+    max-width: 1200px;
+    margin: 10px auto 50px;
     padding: 15px;
+
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
 }
 
 a {
@@ -34,14 +57,36 @@ a:hover {
     text-decoration: underline;
 }
 
+#skippers {
+    position: absolute;
+    left: -100px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+}
+
+#skippers:focus-within {
+    position: static;
+    width: unset;
+    height: unset;
+}
+
+#skippers > .skipper:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
 .layout-columns {
     display: flex;
 }
 
-#header {
+#header, #skippers {
     margin-bottom: 10px;
     padding: 5px;
     font-size: 0.85em;
+}
+
+#header {
     display: flex;
 }
 
@@ -122,7 +167,7 @@ a:hover {
 }
 
 @media (max-width: 780px) {
-    #sidebar:not(.no-hide) {
+    .sidebar:not(.no-hide) {
         display: none;
     }
 
@@ -134,7 +179,7 @@ a:hover {
         margin-bottom: 10px;
     }
 
-    #sidebar.no-hide {
+    .sidebar.no-hide {
         max-width: unset !important;
         flex-basis: unset !important;
         margin-right: 0;
@@ -147,25 +192,43 @@ a:hover {
     }
 }
 
-#sidebar, #content, #header {
+.sidebar, #content, #header, #skippers {
     background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6);
     border: 1px dotted var(--fg-color);
     border-radius: 3px;
 }
 
-#sidebar {
+.sidebar-column {
     flex: 1 1 20%;
     min-width: 150px;
     max-width: 250px;
     flex-basis: 250px;
-    float: left;
+    height: 100%;
+}
+
+.sidebar-multiple {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-multiple .sidebar:not(:first-child) {
+    margin-top: 10px;
+}
+
+.sidebar {
     padding: 5px;
-    margin-right: 10px;
     font-size: 0.85em;
-    height: 100%;
 }
 
-#sidebar.wide {
+#sidebar-left {
+    margin-right: 10px;
+}
+
+#sidebar-right {
+    margin-left: 10px;
+}
+
+.sidebar.wide {
     max-width: 350px;
     flex-basis: 300px;
     flex-shrink: 0;
@@ -178,23 +241,23 @@ a:hover {
     flex-shrink: 3;
 }
 
-#sidebar > h1,
-#sidebar > h2,
-#sidebar > h3,
-#sidebar > p {
+.sidebar > h1,
+.sidebar > h2,
+.sidebar > h3,
+.sidebar > p {
     text-align: center;
 }
 
-#sidebar h1 {
+.sidebar h1 {
     font-size: 1.25em;
 }
 
-#sidebar h2 {
+.sidebar h2 {
     font-size: 1.1em;
     margin: 0;
 }
 
-#sidebar h3 {
+.sidebar h3 {
     font-size: 1.1em;
     font-style: oblique;
     font-variant: small-caps;
@@ -202,73 +265,70 @@ a:hover {
     margin-bottom: 0em;
 }
 
-#sidebar > p {
+.sidebar > p {
     margin: 0.5em 0;
+    padding: 0 5px;
 }
 
-#sidebar p:last-child {
-    margin-bottom: 0;
-}
-
-#sidebar hr {
+.sidebar hr {
     color: #555;
     margin: 10px 5px;
 }
 
-#sidebar > ol, #sidebar > ul {
+.sidebar > ol, .sidebar > ul {
     padding-left: 30px;
     padding-right: 15px;
 }
 
-#sidebar > dl {
+.sidebar > dl {
     padding-right: 15px;
     padding-left: 0;
 }
 
-#sidebar > dl dt {
+.sidebar > dl dt {
     padding-left: 10px;
     margin-top: 0.5em;
 }
 
-#sidebar > dl dt.current {
+.sidebar > dl dt.current {
     font-weight: 800;
 }
 
-#sidebar > dl dd {
+.sidebar > dl dd {
     margin-left: 0;
 }
 
-#sidebar > dl dd ul {
+.sidebar > dl dd ul {
     padding-left: 30px;
     margin-left: 0;
 }
 
-#sidebar > dl .side {
+.sidebar > dl .side {
     padding-left: 10px;
 }
 
-#sidebar li.current {
+.sidebar li.current {
     font-weight: 800;
 }
 
-#sidebar li {
+.sidebar li {
     overflow-wrap: break-word;
 }
 
-#sidebar article {
+.sidebar article {
     text-align: left;
     margin: 5px 5px 15px 5px;
 }
 
-#sidebar article:last-child {
+.sidebar article:last-child {
     margin-bottom: 5px;
 }
 
-#sidebar article h2 {
+.sidebar article h2 {
     border-bottom: 1px dotted white;
 }
 
-#sidebar article h2 time {
+.sidebar article h2 time {
     float: right;
     font-weight: normal;
 }
@@ -320,7 +380,9 @@ img {
     */
 }
 
-.js-hide {
+.js-hide,
+.js-show-once-data,
+.js-hide-once-data {
     display: none;
 }
 
@@ -596,6 +658,10 @@ dl ul, dl ol {
     margin-left: 0;
 }
 
+.group-chronology-link {
+    font-style: oblique;
+}
+
 hr.split::before {
     content: "(split)";
     color: #808080;