56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
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)
|
|
);
|
|
}
|
|
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;
|
|
});
|
|
}
|
|
|
|
class FigureGrid extends HTMLElement {
|
|
static observedAttributes = ["src"];
|
|
constructor() {
|
|
super();
|
|
this._internals = this.attachInternals();
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
if (name == "src") {
|
|
this.innerHTML =
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("figure-grid", FigureGrid);
|
|
|