* Frontend restructure with webpack

Doing this means we only have to serve up a single js
file across all pages, reducing the amount of fuckery the backend
has to do. Also we can start marking the js to require much heavier caching

ts/category.ts

@@ -1,4 +1,4 @@
-class VideoMeta {
+export class VideoMeta {
 	name: string|null
 	thumbnail: string|null
 	category: string
@@ -79,26 +79,4 @@ class VideoMeta {
 	}
 }
 
-function category_ready_handler(e?: Event) : Event {
-	if(document.readyState != 'complete') { return e }
-
-	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 VideoMeta(cat_raw)
-				cat.as_div()
-			}
-		}
-	}
-
-	const endpoint = window.location.origin + '/api' + window.location.pathname
-	xml.open('GET', endpoint, true)
-	xml.send()
-
-	return e
-}
-document.addEventListener('readystatechange', category_ready_handler)
 

ts/index.ts

@@ -1,4 +1,4 @@
-class Category {
+export class Category {
 	name: string
 	thumbnail: string|null
 	constructor(raw: any) {
@@ -70,29 +70,3 @@ class Category {
 }
 
 
-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)

ts/main.ts

@@ -0,0 +1,33 @@
+import * as ready from './ready'
+
+enum PageType {
+	Index,
+	Category,
+	Admin,
+}
+
+function get_page_type(uri: string) : PageType {
+	if(uri == '/') {
+		return PageType.Index
+	} 
+	if (uri.startsWith('/category')) {
+		return PageType.Category
+	} 
+	if (uri.startsWith('/admin')) {
+		return PageType.Admin
+	}
+	return PageType.Index
+}
+
+document.addEventListener('readystatechange', (e?: Event) : Event => {
+	/*
+	 * This dispatch method basically figures out what kind of
+	 * page we're sitting on before delegating control to the
+	 * appropriate place.
+	 */
+	switch (get_page_type(document.location.pathname)) {
+		case PageType.Index: return ready.index_ready_handler(e)
+		case PageType.Category: return ready.category_ready_handler(e)
+		case PageType.Admin: return e
+	}
+})

ts/ready.ts

@@ -0,0 +1,60 @@
+/*
+ * This module defines the hooks required
+ * to initialize a page's JS environment
+ * when the document.readystate is changed
+ * */
+import { Category }  from './index'
+import { VideoMeta } from './category'
+
+export function category_ready_handler(e?: Event) : Event {
+	/*
+	 * On page load:
+	 * 	This function takes care of fetching the links/thumbnails for that
+	 * 	category
+	 */
+	if(document.readyState != 'complete') { return e }
+
+	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 VideoMeta(cat_raw)
+				cat.as_div()
+			}
+		}
+	}
+
+	const endpoint = window.location.origin + '/api' + window.location.pathname
+	xml.open('GET', endpoint, true)
+	xml.send()
+
+	return e
+}
+
+export function index_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
+}
+