Started working on scripts

This commit is contained in:
Eduard Urbach 2017-06-19 16:20:46 +02:00
parent d6acc8a9b2
commit f7732295a2
8 changed files with 170 additions and 12 deletions

9
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,9 @@
{
"tsimporter.emitSemicolon": false,
"tsimporter.doubleQuotes": true,
"files.exclude": {
"**/*.js": {
"when": "$(basename).ts"
}
}
}

10
.vscode/tasks.json vendored Normal file
View File

@ -0,0 +1,10 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}

View File

@ -16,7 +16,7 @@ component Layout(app *aero.Application, user *arn.User, content string)
script(src="/scripts.js") script(src="/scripts.js")
component LoadingAnimation component LoadingAnimation
#loading-animation.sk-cube-grid.fade #loading.sk-cube-grid.fade
.sk-cube.hide .sk-cube.hide
.sk-cube .sk-cube
.sk-cube.hide .sk-cube.hide

126
scripts/Aero/Aero.ts Normal file
View File

@ -0,0 +1,126 @@
class Aero {
ajaxClass: string
fadeOutClass: string
content: HTMLElement
loading: HTMLElement
currentURL: string
originalURL: string
lastRequest: XMLHttpRequest
constructor() {
this.currentURL = window.location.pathname
this.originalURL = window.location.pathname
this.ajaxClass = "ajax"
this.fadeOutClass = "fade-out"
}
find(id: string): HTMLElement {
return document.getElementById(id)
}
get(url: string): Promise<string> {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.onerror = () => reject(new Error("You are either offline or the requested page doesn't exist."))
request.ontimeout = () => reject(new Error("The page took too much time to respond."))
request.onload = () => {
if(request.status < 200 || request.status >= 400)
reject(request.responseText)
else
resolve(request.responseText)
}
request.open("GET", url, true)
request.send()
this.lastRequest = request
})
}
load(url: string, addToHistory: boolean) {
if(this.lastRequest) {
this.lastRequest.abort()
this.lastRequest = null
}
this.currentURL = url
console.log(url)
// function sleep(ms) {
// return new Promise(resolve => setTimeout(resolve, ms))
// }
// sleep(500).then(() => {
// })
let request = this.get("/_" + url)
this.content.addEventListener("transitionend", e => {
request.then(html => {
if(addToHistory)
history.pushState(url, null, url)
this.setContent(html)
this.scrollToTop()
this.content.classList.remove(this.fadeOutClass)
this.loading.classList.add(this.fadeOutClass)
})
}, { once: true })
this.content.classList.add(this.fadeOutClass)
this.loading.classList.remove(this.fadeOutClass)
}
setContent(html: string) {
this.content.innerHTML = html
this.ajaxify(this.content)
}
ajaxify(element?: HTMLElement) {
if(!element)
element = document.body
let links = element.querySelectorAll("." + this.ajaxClass)
for(let i = 0; i < links.length; i++) {
let link = links[i] as HTMLElement
link.classList.remove(this.ajaxClass)
link.onclick = function(e) {
// Middle mouse button should have standard behaviour
if(e.which === 2)
return
let url = this.getAttribute("href")
e.preventDefault()
e.stopPropagation()
if(!url || url === window.location.pathname)
return
// Load requested page
aero.load(url, true)
}
}
}
run() {
this.ajaxify()
this.loading.classList.add(this.fadeOutClass)
}
scrollToTop() {
let parent = this.content
while(parent = parent.parentElement) {
parent.scrollTop = 0
}
}
}
export var aero = new Aero()

View File

@ -1,5 +0,0 @@
export class Greeter {
greet(name: string) {
console.log("Hello, " + name)
}
}

View File

@ -1,4 +1,22 @@
import {Greeter} from "scripts/hello" import { aero as app } from "./Aero/Aero"
var greeter = new Greeter() class AnimeNotifier {
greeter.greet("World") constructor() {
app.content = app.find("content")
app.loading = app.find("loading")
app.run()
}
}
document.onreadystatechange = function() {
if(document.readyState === "interactive") {
let arn = new AnimeNotifier()
}
}
window.onpopstate = e => {
if(e.state)
app.load(e.state, false)
else if(app.currentURL !== app.originalURL)
app.load(app.originalURL, false)
}

View File

@ -1,7 +1,7 @@
loading-anim-duration = 0.8s loading-anim-duration = 0.8s
loading-anim-size = 24px loading-anim-size = 24px
#loading-animation #loading
position fixed position fixed
bottom 1.15rem bottom 1.15rem
right calc(1.15rem + 17px) right calc(1.15rem + 17px)

View File

@ -3,8 +3,8 @@
"target": "es6", "target": "es6",
"module": "commonjs", "module": "commonjs",
"moduleResolution": "node", "moduleResolution": "node",
"baseUrl": "./" "baseUrl": "."
}, },
"compileOnSave": false, "compileOnSave": true,
"buildOnSave": false "buildOnSave": false
} }