* Moving frontend TS to its own root dir
Knowing that some pepople(myself) don't like JS this is to keep any potential JS as non-hidden as possible
This commit is contained in:
@@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:0cfdedb04d45802c1c008c9610bda2df8e3482f195bd254c11ebe07205e2bd5d
|
||||
size 8560
|
||||
@@ -1,59 +0,0 @@
|
||||
// This module takes care of pulling down videos for the given category
|
||||
class Video {
|
||||
title: string
|
||||
category: string
|
||||
thumbnail_b64: string|null
|
||||
constructor(raw: any) {
|
||||
this.title = raw['name']
|
||||
this.category = raw['category']
|
||||
this.thumbnail_b64 = raw['thumbnail']
|
||||
}
|
||||
|
||||
title_link() : HTMLHeadingElement {
|
||||
let container = document.createElement('h2')
|
||||
|
||||
let link = document.createElement('a')
|
||||
link.href = `/video?c=${this.category}&v=${this.title}`
|
||||
link.text = this.title
|
||||
|
||||
container.appendChild(link)
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
||||
function get_category() : string|null {
|
||||
// Used to modify the DOM
|
||||
let params = (new URL(document.location.toString())).searchParams;
|
||||
return params.get('c')
|
||||
}
|
||||
function base_url() : string {
|
||||
const loc = document.location
|
||||
return loc.protocol + '//' + loc.host
|
||||
}
|
||||
|
||||
function fetch_videos() : Array<Video> {
|
||||
const category = get_category()
|
||||
if(!category) { return [] }
|
||||
const endpoint = base_url() + `/api/categories?c=${category}`
|
||||
|
||||
let xml = new XMLHttpRequest()
|
||||
xml.open('GET', endpoint, false) // sync request
|
||||
xml.send(null) // no params required
|
||||
if(xml.getResponseHeader('Content-Type') == 'application/json') {
|
||||
let raw = JSON.parse(xml.responseText)
|
||||
for(const vid of raw['videos']) {
|
||||
console.log(vid)
|
||||
}
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
function ready(e) {
|
||||
if(document.readyState != 'complete') { return e }
|
||||
|
||||
const video_data = fetch_videos()
|
||||
}
|
||||
|
||||
document.addEventListener('readystatechange', ready)
|
||||
@@ -1,70 +0,0 @@
|
||||
class Category {
|
||||
name: string
|
||||
thumbnail_b64: string|null
|
||||
constructor(raw: any) {
|
||||
this.name = raw['name']
|
||||
this.thumbnail_b64 = raw['thumbnail']
|
||||
}
|
||||
|
||||
title_link() : HTMLHeadingElement {
|
||||
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() : HTMLImageElement {
|
||||
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
|
||||
}
|
||||
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 = '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)
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"name": "ts",
|
||||
"version": "1.0.0",
|
||||
"description": "Frontend scripts built out for clippable's frontend",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "tsc"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "gitlab.com/shockrah/clippable.git"
|
||||
},
|
||||
"author": "shockrah",
|
||||
"license": "GPL-3.0"
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"module": "commonjs",
|
||||
"outDir": "../themes/clippable/static/js/",
|
||||
"importHelpers": true,
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true,
|
||||
"strictNullChecks": false,
|
||||
"strictFunctionTypes": true,
|
||||
"noImplicitThis": true,
|
||||
"alwaysStrict": true,
|
||||
|
||||
/* Additional Checks */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
/*"noUncheckedIndexedAccess": true, */
|
||||
/*"noPropertyAccessFromIndexSignature": true, */
|
||||
|
||||
/* Module Resolution Options */
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user