58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
"use strict";
|
|
class Category {
|
|
constructor(raw) {
|
|
this.name = raw['name'];
|
|
this.thumbnail_b64 = raw['thumbnail'];
|
|
}
|
|
title_link() {
|
|
let container = document.createElement('h2');
|
|
let link = document.createElement('a');
|
|
link.href = `/collection?c=${this.name}`;
|
|
link.text = this.name;
|
|
container.appendChild(link);
|
|
return container;
|
|
}
|
|
thumbnail_div() {
|
|
let nail = document.createElement('img');
|
|
nail.className = 'pure-img';
|
|
if (!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
|
|
nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`);
|
|
}
|
|
else {
|
|
nail.setAttribute('src', '/cantfindshit.gif');
|
|
}
|
|
return nail;
|
|
}
|
|
as_div() {
|
|
let container = document.createElement('div');
|
|
container.className = 'video-block';
|
|
let title = this.title_link();
|
|
let thumbnail = this.thumbnail_div();
|
|
container.appendChild(title);
|
|
container.appendChild(thumbnail);
|
|
// Dump gallery onto the main page
|
|
document.getElementById('main-container').appendChild(container);
|
|
return container;
|
|
}
|
|
}
|
|
function ready_handler(e) {
|
|
// Only let this make a get request once we're ready on the page
|
|
if (document.readyState != 'complete') {
|
|
return e;
|
|
}
|
|
// All we do here is basically make a get request to /api/categories
|
|
const endpoint = 'http://localhost/api/categories';
|
|
let xml = new XMLHttpRequest();
|
|
xml.open('GET', endpoint, false); // sync request
|
|
xml.send(null); // nothing required for stuff
|
|
if (xml.getResponseHeader('Content-Type') == 'application/json') {
|
|
let raw = JSON.parse(xml.responseText);
|
|
for (const cat_raw of raw['categories']) {
|
|
let cat = new Category(cat_raw);
|
|
cat.as_div();
|
|
}
|
|
}
|
|
return e;
|
|
}
|
|
document.addEventListener('readystatechange', ready_handler);
|