683dcffd6f
*! Async requests for category pictures With async requests in place HTTP2 should be defaulted more often now It is recommended now however to enable it with the reverse proxy of choice
99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
class Category {
|
|
name: string
|
|
thumbnail: string|null
|
|
constructor(raw: any) {
|
|
this.name = raw['name']
|
|
this.thumbnail= raw['thumbnail']
|
|
|
|
// Setting some defaults
|
|
if(!this.name) { this.name = null }
|
|
if(!this.thumbnail) { this.thumbnail= null }
|
|
}
|
|
|
|
title_link() : HTMLHeadingElement {
|
|
let container = document.createElement('h2')
|
|
|
|
let link = document.createElement('a')
|
|
if(this.name) {
|
|
link.href = `/category/${this.name}`
|
|
link.text = this.name
|
|
} else {
|
|
link.href = '#'
|
|
link.text = this.name + 'ft. No thumbnail'
|
|
}
|
|
link.text = link.text[0].toUpperCase() + link.text.substring(1, link.text.length)
|
|
|
|
container.appendChild(link)
|
|
|
|
|
|
return container
|
|
}
|
|
|
|
thumbnail_div() : HTMLAnchorElement {
|
|
let nail = document.createElement('img')
|
|
nail.className = 'img-fluid'
|
|
|
|
// Modern browser's should be able to cache this request
|
|
if(!(this.thumbnail == null || this.thumbnail.length == 0)) {
|
|
nail.setAttribute('src', `${this.thumbnail}`)
|
|
} else{
|
|
nail.setAttribute('src', '/static/cantfindshit.gif')
|
|
}
|
|
|
|
let link = document.createElement('a')
|
|
if(this.name) {
|
|
link.href = `/category/${this.name}`
|
|
} else {
|
|
link.href = '#'
|
|
}
|
|
link.appendChild(nail)
|
|
|
|
return link
|
|
}
|
|
|
|
|
|
public 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?: Event) : Event {
|
|
// 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 = window.location.origin + '/api/categories'
|
|
let xml = new XMLHttpRequest()
|
|
|
|
xml.onload = function() {
|
|
if(this.getResponseHeader('Content-Type') == 'application/json') {
|
|
let raw = JSON.parse(this.responseText)
|
|
for(const cat_raw of raw) {
|
|
let cat = new Category(cat_raw)
|
|
cat.as_div()
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fire request
|
|
xml.open('GET', endpoint, true) // sync request
|
|
xml.send(null) // nothing required for stuff
|
|
|
|
return e
|
|
}
|
|
|
|
document.addEventListener('readystatechange', ready_handler)
|