Simplified component
This commit is contained in:
parent
4278156e4a
commit
b9ce32ea8d
|
|
@ -1,52 +1,36 @@
|
|||
function createH2(headerName) {
|
||||
return `<h2>${headerName}</h2><section>`;
|
||||
}
|
||||
|
||||
function createFigure(imageURL, heading, subheading) {
|
||||
return `<figure>
|
||||
<img src="${imageURL}">
|
||||
<figcaption>
|
||||
<b>${heading}</b><br>
|
||||
<em>${subheading}</em>
|
||||
</figcaption>
|
||||
</figure>`;
|
||||
}
|
||||
|
||||
function createSection(headerName, figureArray) {
|
||||
let figuresHTML = "";
|
||||
for (let i = 0; i < figureArray.length; i++) {
|
||||
let figure = figureArray[i];
|
||||
figuresHTML = figuresHTML.concat(
|
||||
createFigure(figure.url, figure.main, figure.sub)
|
||||
);
|
||||
async function figureGrid(jsonURL) {
|
||||
const response = await fetch(jsonURL);
|
||||
const json = await response.json();
|
||||
let html = "";
|
||||
for (const headerName in json) {
|
||||
html = html.concat("<section>")
|
||||
let entries = json[headerName];
|
||||
for (let i = 0; i < entries.length; i++) {
|
||||
let entry = entries[i];
|
||||
html = html.concat(
|
||||
`<figure>
|
||||
<img src="${entry.url}">
|
||||
<figcaption>
|
||||
<b>${entry.main}</b><br>
|
||||
<em>${entry.sub}</em>
|
||||
</figcaption>
|
||||
</figure>`
|
||||
);
|
||||
}
|
||||
html = html.concat("</section>")
|
||||
}
|
||||
return `<section>${figuresHTML}</section>`
|
||||
}
|
||||
|
||||
function figureGrid(jsonURL, targetID) {
|
||||
fetch(source)
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
let html = "";
|
||||
for (const headerName in json) {
|
||||
let figureArray = json[category];
|
||||
html = html.concat(createSection(headerName, figureArray));
|
||||
}
|
||||
const thisScript = document.getElementById("albums");
|
||||
return html;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
|
||||
class FigureGrid extends HTMLElement {
|
||||
static observedAttributes = ["src"];
|
||||
constructor() {
|
||||
super();
|
||||
this._internals = this.attachInternals();
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
async attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name == "src") {
|
||||
this.innerHTML =
|
||||
this.innerHTML = await figureGrid(newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,207 +1,207 @@
|
|||
{
|
||||
"chill": [
|
||||
{
|
||||
"name": "Cosmos",
|
||||
"artist": "Yuji Ohno",
|
||||
"link": "cosmos"
|
||||
"main": "Cosmos",
|
||||
"sub": "Yuji Ohno",
|
||||
"url": "/res/albums/cosmos.webp"
|
||||
},
|
||||
{
|
||||
"name": "Deep Breakfast",
|
||||
"artist": "Ray Lynch",
|
||||
"link": "deep_breakfast"
|
||||
"main": "Deep Breakfast",
|
||||
"sub": "Ray Lynch",
|
||||
"url": "/res/albums/deep_breakfast.webp"
|
||||
},
|
||||
{
|
||||
"name": "Dune",
|
||||
"artist": "David Matthews",
|
||||
"link": "dune"
|
||||
"main": "Dune",
|
||||
"sub": "David Matthews",
|
||||
"url": "/res/albums/dune.webp"
|
||||
},
|
||||
{
|
||||
"name": "God's Trashmen Sent to Right the Mess",
|
||||
"artist": "Fievel is Glauque",
|
||||
"link": "gods_trashmen"
|
||||
"main": "God's Trashmen Sent to Right the Mess",
|
||||
"sub": "Fievel is Glauque",
|
||||
"url": "/res/albums/gods_trashmen.webp"
|
||||
},
|
||||
{
|
||||
"name": "MACROCOSM",
|
||||
"artist": "BALTHVS",
|
||||
"link": "macrocosm"
|
||||
"main": "MACROCOSM",
|
||||
"sub": "BALTHVS",
|
||||
"url": "/res/albums/macrocosm.webp"
|
||||
},
|
||||
{
|
||||
"name": "Ciao! Baby",
|
||||
"artist": "The Marshmallow Kisses",
|
||||
"link": "ciao_baby"
|
||||
"main": "Ciao! Baby",
|
||||
"sub": "The Marshmallow Kisses",
|
||||
"url": "/res/albums/ciao_baby.webp"
|
||||
},
|
||||
{
|
||||
"name": "an anxious object",
|
||||
"artist": "mouse on the keys",
|
||||
"link": "mouse_on_the_keys"
|
||||
"main": "an anxious object",
|
||||
"sub": "mouse on the keys",
|
||||
"url": "/res/albums/mouse_on_the_keys.webp"
|
||||
},
|
||||
{
|
||||
"name": "Funky Stuff",
|
||||
"artist": " Jiro Inagaki",
|
||||
"link": "funky_stuff"
|
||||
"main": "Funky Stuff",
|
||||
"sub": " Jiro Inagaki",
|
||||
"url": "/res/albums/funky_stuff.webp"
|
||||
},
|
||||
{
|
||||
"name": "Make Up City",
|
||||
"artist": "CASIOPEA",
|
||||
"link": "make_up_city"
|
||||
"main": "Make Up City",
|
||||
"sub": "CASIOPEA",
|
||||
"url": "/res/albums/make_up_city.webp"
|
||||
},
|
||||
{
|
||||
"name": "Mint Jams",
|
||||
"artist": "CASIOPEA",
|
||||
"link": "mint_jams"
|
||||
"main": "Mint Jams",
|
||||
"sub": "CASIOPEA",
|
||||
"url": "/res/albums/mint_jams.webp"
|
||||
}
|
||||
],
|
||||
"experimental": [
|
||||
{
|
||||
"name": "Departing",
|
||||
"artist": "Jesus Molina",
|
||||
"link": "departing"
|
||||
"main": "Departing",
|
||||
"sub": "Jesus Molina",
|
||||
"url": "/res/albums/departing.webp"
|
||||
},
|
||||
{
|
||||
"name": "Choose your Weapon",
|
||||
"artist": "Hiatus Kaiyote",
|
||||
"link": "choose_your_weapon"
|
||||
"main": "Choose your Weapon",
|
||||
"sub": "Hiatus Kaiyote",
|
||||
"url": "/res/albums/choose_your_weapon.webp"
|
||||
},
|
||||
{
|
||||
"name": "Hold Your Horse Is",
|
||||
"artist": "Hella",
|
||||
"link": "hold_your_horse_is"
|
||||
"main": "Hold Your Horse Is",
|
||||
"sub": "Hella",
|
||||
"url": "/res/albums/hold_your_horse_is.webp"
|
||||
},
|
||||
{
|
||||
"name": "Mother Earth's Plantasia",
|
||||
"artist": "Mort Garson",
|
||||
"link": "plantasia"
|
||||
"main": "Mother Earth's Plantasia",
|
||||
"sub": "Mort Garson",
|
||||
"url": "/res/albums/plantasia.webp"
|
||||
},
|
||||
{
|
||||
"name": "The Wozard of Iz - An Electronic Odyssey",
|
||||
"artist": "Mort Garson",
|
||||
"link": "wozard_of_iz"
|
||||
"main": "The Wozard of Iz - An Electronic Odyssey",
|
||||
"sub": "Mort Garson",
|
||||
"url": "/res/albums/wozard_of_iz.webp"
|
||||
},
|
||||
{
|
||||
"name": "Los Desamores de Dewey Martino",
|
||||
"artist": "Dewey Martino",
|
||||
"link": "los_desamores_de_dewey_martino"
|
||||
"main": "Los Desamores de Dewey Martino",
|
||||
"sub": "Dewey Martino",
|
||||
"url": "/res/albums/los_desamores_de_dewey_martino.webp"
|
||||
},
|
||||
{
|
||||
"name": "New History Warfare Vol. 3: To See More Light",
|
||||
"artist": "Colin Stetson",
|
||||
"link": "new_history_warfare_3"
|
||||
"main": "New History Warfare Vol. 3: To See More Light",
|
||||
"sub": "Colin Stetson",
|
||||
"url": "/res/albums/new_history_warfare_3.webp"
|
||||
},
|
||||
{
|
||||
"name": "Hylics 2 Original Soundtrack",
|
||||
"artist": "Chuck Salamone",
|
||||
"link": "hylics2"
|
||||
"main": "Hylics 2 Original Soundtrack",
|
||||
"sub": "Chuck Salamone",
|
||||
"url": "/res/albums/hylics2.webp"
|
||||
}
|
||||
],
|
||||
"electronic": [
|
||||
{
|
||||
"name": "H.A.Q.Q.",
|
||||
"artist": "Liturgy",
|
||||
"link": "haqq"
|
||||
"main": "H.A.Q.Q.",
|
||||
"sub": "Liturgy",
|
||||
"url": "/res/albums/haqq.webp"
|
||||
},
|
||||
{
|
||||
"name": "One Year Madness",
|
||||
"artist": "Golemm",
|
||||
"link": "one_year_madness"
|
||||
"main": "One Year Madness",
|
||||
"sub": "Golemm",
|
||||
"url": "/res/albums/one_year_madness.webp"
|
||||
},
|
||||
{
|
||||
"name": "Cyberspace",
|
||||
"artist": "Yameii Online",
|
||||
"link": "cyberspace"
|
||||
"main": "Cyberspace",
|
||||
"sub": "Yameii Online",
|
||||
"url": "/res/albums/cyberspace.webp"
|
||||
},
|
||||
{
|
||||
"name": "Wlfgrl",
|
||||
"artist": "Machine Girl",
|
||||
"link": "wlfgrl"
|
||||
"main": "Wlfgrl",
|
||||
"sub": "Machine Girl",
|
||||
"url": "/res/albums/wlfgrl.webp"
|
||||
},
|
||||
{
|
||||
"name": "...Because I'm Young Arrogant and Hate Everything You Stand For",
|
||||
"artist": "Machine Girl",
|
||||
"link": "young_arrogant"
|
||||
"main": "...Because I'm Young Arrogant and Hate Everything You Stand For",
|
||||
"sub": "Machine Girl",
|
||||
"url": "/res/albums/young_arrogant.webp"
|
||||
},
|
||||
{
|
||||
"name": "Parousia",
|
||||
"artist": "XI",
|
||||
"link": "parousia"
|
||||
"main": "Parousia",
|
||||
"sub": "XI",
|
||||
"url": "/res/albums/parousia.webp"
|
||||
},
|
||||
{
|
||||
"name": "www.",
|
||||
"artist": "cosmic collective",
|
||||
"link": "www"
|
||||
"main": "www.",
|
||||
"sub": "cosmic collective",
|
||||
"url": "/res/albums/www.webp"
|
||||
},
|
||||
{
|
||||
"name": "TMP2",
|
||||
"artist": "Graham Kartna",
|
||||
"link": "tmp2"
|
||||
"main": "TMP2",
|
||||
"sub": "Graham Kartna",
|
||||
"url": "/res/albums/tmp2.webp"
|
||||
}
|
||||
],
|
||||
"high energy": [
|
||||
{
|
||||
"name": "Each and Every Word Leaves Me Here Alone",
|
||||
"artist": "Foreground Eclipse",
|
||||
"link": "fge_1"
|
||||
"main": "Each and Every Word Leaves Me Here Alone",
|
||||
"sub": "Foreground Eclipse",
|
||||
"url": "/res/albums/fge_1.webp"
|
||||
},
|
||||
{
|
||||
"name": "Missing, Loving, Suffering",
|
||||
"artist": "Foreground Eclipse",
|
||||
"link": "fge_2"
|
||||
"main": "Missing, Loving, Suffering",
|
||||
"sub": "Foreground Eclipse",
|
||||
"url": "/res/albums/fge_2.webp"
|
||||
},
|
||||
{
|
||||
"name": "ITEKOMA HITS",
|
||||
"artist": "Otoboke Beaver",
|
||||
"link": "itekoma_hits"
|
||||
"main": "ITEKOMA HITS",
|
||||
"sub": "Otoboke Beaver",
|
||||
"url": "/res/albums/itekoma_hits.webp"
|
||||
},
|
||||
{
|
||||
"name": "World is Yours",
|
||||
"artist": "MASS OF THE FERMENTING DREGS",
|
||||
"link": "world_is_yours"
|
||||
"main": "World is Yours",
|
||||
"sub": "MASS OF THE FERMENTING DREGS",
|
||||
"url": "/res/albums/world_is_yours.webp"
|
||||
},
|
||||
{
|
||||
"name": "New Levels New Devils",
|
||||
"artist": "Polyphia",
|
||||
"link": "new_levels_new_devils"
|
||||
"main": "New Levels New Devils",
|
||||
"sub": "Polyphia",
|
||||
"url": "/res/albums/new_levels_new_devils.webp"
|
||||
}
|
||||
],
|
||||
"misc": [
|
||||
{
|
||||
"name": "27 Demos",
|
||||
"artist": "Margo Guryan ",
|
||||
"link": "27_demos"
|
||||
"main": "27 Demos",
|
||||
"sub": "Margo Guryan ",
|
||||
"url": "/res/albums/27_demos.webp"
|
||||
},
|
||||
{
|
||||
"name": "the first glass beach album",
|
||||
"artist": "Glass Beach",
|
||||
"link": "glass_beach"
|
||||
"main": "the first glass beach album",
|
||||
"sub": "Glass Beach",
|
||||
"url": "/res/albums/glass_beach.webp"
|
||||
},
|
||||
{
|
||||
"name": "Her Abiding Memory",
|
||||
"artist": "Pitcher56",
|
||||
"link": "her_abiding_memory"
|
||||
"main": "Her Abiding Memory",
|
||||
"sub": "Pitcher56",
|
||||
"url": "/res/albums/her_abiding_memory.webp"
|
||||
},
|
||||
{
|
||||
"name": "High Society",
|
||||
"artist": "Enon",
|
||||
"link": "high_society"
|
||||
"main": "High Society",
|
||||
"sub": "Enon",
|
||||
"url": "/res/albums/high_society.webp"
|
||||
},
|
||||
{
|
||||
"name": "Live at Bush Hall",
|
||||
"artist": "Black Country, New Road",
|
||||
"link": "live_at_bush_hall"
|
||||
"main": "Live at Bush Hall",
|
||||
"sub": "Black Country, New Road",
|
||||
"url": "/res/albums/live_at_bush_hall.webp"
|
||||
},
|
||||
{
|
||||
"name": "Mass Teen Fainting",
|
||||
"artist": "Plumtree",
|
||||
"link": "mass_teen_fainting"
|
||||
"main": "Mass Teen Fainting",
|
||||
"sub": "Plumtree",
|
||||
"url": "/res/albums/mass_teen_fainting.webp"
|
||||
},
|
||||
{
|
||||
"name": "My Caution Line",
|
||||
"artist": "Citrobal",
|
||||
"link": "my_caution_line"
|
||||
"main": "My Caution Line",
|
||||
"sub": "Citrobal",
|
||||
"url": "/res/albums/my_caution_line.webp"
|
||||
},
|
||||
{
|
||||
"name": "Oncle Jazz",
|
||||
"artist": "Men I Trust",
|
||||
"link": "oncle_jazz"
|
||||
"main": "Oncle Jazz",
|
||||
"sub": "Men I Trust",
|
||||
"url": "/res/albums/oncle_jazz.webp"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,33 +2,5 @@
|
|||
Music is a huge passion of mine. I prefer listening to albums in full from
|
||||
start to finish in order. My favorite albums are usually experimental, unique,
|
||||
or have a particular theme they explore
|
||||
<script id="albums">
|
||||
const thisScript = document.getElementById("albums");
|
||||
fetch("/music/albums.json")
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
let html = "";
|
||||
for (const category in json) {
|
||||
let albums = json[category];
|
||||
html = html.concat(`<h2>${category}</h2><section>`);
|
||||
for (let i = 0; i < albums.length; i++) {
|
||||
let album = albums[i];
|
||||
let link = "/res/albums/" + album.link + ".webp";
|
||||
let name = album.name;
|
||||
let artist = album.artist;
|
||||
let template = `<figure>
|
||||
<img src="${link}">
|
||||
<figcaption>
|
||||
<b>${name}</b><br/><em>${artist}</em>
|
||||
</figcaption>
|
||||
</figure>`;
|
||||
html = html.concat(template);
|
||||
}
|
||||
html = html.concat("</section>")
|
||||
}
|
||||
let section = document.createElement("div");
|
||||
section.innerHTML = html;
|
||||
thisScript.replaceWith(section); // lol
|
||||
});
|
||||
</script>
|
||||
|
||||
<figure-grid src="/music/albums.json"></figure-grid>
|
||||
|
|
|
|||
Loading…
Reference in a new issue