393 lines
13 KiB
JavaScript
393 lines
13 KiB
JavaScript
let stylesheet
|
|
var audio = new(window.AudioContext)
|
|
let jsDiv
|
|
|
|
let mode
|
|
let side
|
|
let focusListMain, focusListSecond, focusStart
|
|
const focusSelector = "a, d"
|
|
|
|
const back = document.createElement("a")
|
|
back.setAttribute("onclick", "tui.home()")
|
|
back.setAttribute("tabindex", "0")
|
|
back.className = "back"
|
|
back.innerHTML = `⬑Back`
|
|
|
|
window.addEventListener("load", () => {
|
|
stylesheet = document.styleSheets[0];
|
|
document.documentElement.style.setProperty("--vh", `${window.innerHeight * 0.01}px`)
|
|
|
|
document.styleSheets[3].disabled = true // this one is for non-js
|
|
|
|
// randomize loading text
|
|
fetch("/assets/loading.txt")
|
|
.then(r => r.text())
|
|
.then(t => Load(t))
|
|
|
|
// allow the user to skip on click
|
|
let skipNode = document.createElement("div");
|
|
skipNode.setAttribute("class", "skip-animation");
|
|
skipNode.setAttribute("onclick", "skipAnimation()");
|
|
document.body.appendChild(skipNode);
|
|
|
|
// get rid of shit since we have javascript babyyyyyyy
|
|
if (matchMedia("(min-width: 430px) or (min-height: 430px)").matches) {
|
|
for (let node of document.getElementsByClassName("nojs")) {
|
|
node.style.display = "none"
|
|
}
|
|
stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length)
|
|
stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length)
|
|
stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length)
|
|
stylesheet.insertRule(`@media screen and (min-width: 420px) and (max-width: 649px) { .ascii-2 { display: block !important } }`, stylesheet.cssRules.length)
|
|
stylesheet.insertRule(`@media screen and (min-width: 650px) { .ascii-1 { display: block !important } }`, stylesheet.cssRules.length)
|
|
|
|
document.querySelectorAll("head style").forEach(style => style.remove());
|
|
jsDiv = document.getElementsByClassName("js")[0]
|
|
|
|
if (matchMedia("(any-hover: none), not (pointer: fine)").matches) {
|
|
for (let node of document.getElementById("users").children) {
|
|
const a = node.children[0]
|
|
if (a.hasAttribute("href")) {
|
|
a.setAttribute("data-href", a.href)
|
|
a.setAttribute("tabindex", "0")
|
|
a.removeAttribute("href")
|
|
}
|
|
}
|
|
for (let node of document.getElementById("services").children) {
|
|
const a = node.children[0]
|
|
if (a.hasAttribute("href")) {
|
|
a.setAttribute("data-href", a.href)
|
|
a.setAttribute("tabindex", "0")
|
|
a.removeAttribute("href")
|
|
}
|
|
}
|
|
}
|
|
|
|
tui.home()
|
|
}
|
|
});
|
|
|
|
// skip animations and shit
|
|
function skipAnimation() {
|
|
for (let node of document.getElementsByClassName("skip")) {
|
|
const animations = node.getAnimations();
|
|
for (let anim of animations) {
|
|
anim.finish();
|
|
}
|
|
}
|
|
for (let node of document.getElementsByClassName("splash")) {
|
|
const animations = node.getAnimations();
|
|
for (let anim of animations) {
|
|
anim.finish();
|
|
}
|
|
}
|
|
document.getElementsByClassName("skip-animation")[0].remove();
|
|
}
|
|
|
|
// this randomizes the loading messages
|
|
function Load (text) {
|
|
const loadArray = text.split("\n")
|
|
const loading = document.getElementsByClassName("loading")[0]
|
|
|
|
const r = Math.floor(Math.random() * (loadArray.length-1))
|
|
let loadText = loadArray[r]
|
|
|
|
if (loadText === "") {loadText = "You should not be seeing this"}
|
|
|
|
loading.children[0].innerHTML = loadText + "."
|
|
loading.children[1].innerHTML = loadText + ".."
|
|
loading.children[2].innerHTML = loadText + "..."
|
|
}
|
|
|
|
// beep!
|
|
function beep() {
|
|
var oscillator = audio.createOscillator()
|
|
|
|
oscillator.type = "square"
|
|
oscillator.frequency.value = "1200"
|
|
oscillator.connect(audio.destination)
|
|
oscillator.start()
|
|
|
|
setTimeout(() => {
|
|
oscillator.stop()
|
|
}, 200)
|
|
}
|
|
|
|
// here are the functions that create every different section
|
|
const tui = {
|
|
home: function() {
|
|
mode = "home"
|
|
side = -1
|
|
focusStart = 0
|
|
|
|
const div = document.createElement("div")
|
|
div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
|
|
|
|
let buttons = document.createElement("div")
|
|
buttons.className = "buttons"
|
|
buttons.innerHTML = `<a onclick="tui.about()" tabindex="0">About</a>
|
|
<a onclick="tui.users()" tabindex="0">Users</a>
|
|
<a onclick="tui.services()" tabindex="0">Services</a>
|
|
<a href="https://linuxposting.xyz/">Linuxposting</a>
|
|
<a onclick="beep()" tabindex="0">Beep</a>`
|
|
div.appendChild(buttons)
|
|
|
|
const title = document.createElement("span")
|
|
title.className = "title"
|
|
title.innerHTML = "Linuxposting Tilde~"
|
|
div.appendChild(title)
|
|
|
|
jsDiv.children[0].replaceChildren(div)
|
|
if (jsDiv.children[1]) {jsDiv.children[1].remove()}
|
|
|
|
indexFocus()
|
|
},
|
|
|
|
about: function() {
|
|
mode = "about"
|
|
side = -1
|
|
focusStart = 1
|
|
|
|
const div = document.createElement("div")
|
|
|
|
div.appendChild(back)
|
|
|
|
div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
|
|
div.appendChild(document.getElementById("about").cloneNode(true));
|
|
|
|
const title = document.createElement("span")
|
|
title.className = "title"
|
|
title.innerHTML = "About"
|
|
div.appendChild(title)
|
|
|
|
jsDiv.children[0].replaceChildren(div)
|
|
if (jsDiv.children[1]) {jsDiv.children[1].remove()}
|
|
|
|
indexFocus()
|
|
},
|
|
|
|
users: function() {
|
|
mode = "users"
|
|
side = 0
|
|
focusStart = 1
|
|
|
|
const div = document.createElement("div")
|
|
|
|
div.appendChild(back)
|
|
|
|
div.appendChild(document.getElementById("users").cloneNode(true));
|
|
|
|
const title = document.createElement("span")
|
|
title.className = "title"
|
|
title.innerHTML = "Users"
|
|
div.appendChild(title)
|
|
|
|
const div2 = document.createElement("div")
|
|
|
|
const title2 = document.createElement("span")
|
|
title2.className = "title2"
|
|
title2.innerHTML = "Description"
|
|
div2.appendChild(document.createElement("div"))
|
|
div2.appendChild(title2)
|
|
|
|
jsDiv.children[0].replaceChildren(div)
|
|
if (jsDiv.children[1]) {jsDiv.children[1].remove()}
|
|
jsDiv.appendChild(div2)
|
|
|
|
indexFocus()
|
|
},
|
|
|
|
services: function() {
|
|
mode = "services"
|
|
side = 0
|
|
focusStart = 1
|
|
|
|
const div = document.createElement("div")
|
|
|
|
div.appendChild(back)
|
|
|
|
div.appendChild(document.getElementById("services").cloneNode(true));
|
|
|
|
const title = document.createElement("span")
|
|
title.className = "title"
|
|
title.innerHTML = "Services"
|
|
div.appendChild(title)
|
|
|
|
const div2 = document.createElement("div")
|
|
|
|
const title2 = document.createElement("span")
|
|
title2.className = "title2"
|
|
title2.innerHTML = "Description"
|
|
div2.appendChild(document.createElement("div"))
|
|
div2.appendChild(title2)
|
|
|
|
jsDiv.children[0].replaceChildren(div)
|
|
if (jsDiv.children[1]) {jsDiv.children[1].remove()}
|
|
jsDiv.appendChild(div2)
|
|
|
|
indexFocus()
|
|
},
|
|
|
|
// does stuff based on focus changing
|
|
updateFocus: function() {
|
|
const focused = document.activeElement
|
|
const sibling = focused.nextElementSibling
|
|
const credit = document.getElementById("credit")
|
|
const onMainList = (focusListMain.includes(focused))
|
|
|
|
// keep track of focus by giving both focused elements the f class
|
|
if (onMainList || focused == credit) {
|
|
for (let el of focusListMain) {
|
|
el.classList.remove("f")
|
|
credit.classList.remove("f")
|
|
}
|
|
focused.classList.add("f")
|
|
}
|
|
|
|
switch(mode) {
|
|
case "users":
|
|
case "services":
|
|
if (onMainList && sibling && sibling.tagName === "P") {
|
|
jsDiv.children[1].children[0].replaceChildren(sibling.cloneNode(true))
|
|
} else if (onMainList) {
|
|
jsDiv.children[1].children[0].innerHTML = ""
|
|
}
|
|
|
|
if (onMainList) {
|
|
for (let node of document.getElementsByClassName("hyper"))
|
|
node.remove()
|
|
|
|
if (focused.hasAttribute("data-href")) {
|
|
const link = document.createElement("a")
|
|
link.className = "title2 hyper"
|
|
link.href = focused.getAttribute("data-href")
|
|
link.innerHTML = "Go to site"
|
|
jsDiv.children[1].appendChild(link)
|
|
}
|
|
}
|
|
|
|
indexFocus()
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
function indexFocus() {
|
|
let focusList = Array.from(document.querySelectorAll(focusSelector)).filter(el => el.offsetParent !== null)
|
|
if (jsDiv.children[1]) {
|
|
focusListMain = focusList.filter(el => !jsDiv.children[1].contains(el))
|
|
focusListSecond = focusList.filter(el => jsDiv.children[1].contains(el))
|
|
} else {
|
|
focusListMain = focusList
|
|
focusListSecond = []
|
|
}
|
|
const back = document.getElementsByClassName("back")[0]
|
|
if (back) {back.classList.remove("f")}
|
|
}
|
|
|
|
document.addEventListener("mouseover", (e) => {
|
|
if (!jsDiv) {return}
|
|
if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
|
|
e.target.focus()
|
|
if (side == 0 && focusListSecond.includes(document.activeElement)) {
|
|
side = 1
|
|
} else if (side == 1 && focusListMain.includes(document.activeElement)) {
|
|
side = 0
|
|
}
|
|
tui.updateFocus()
|
|
}
|
|
})
|
|
|
|
document.addEventListener("mousedown", (e) => {
|
|
if (!jsDiv) {return}
|
|
if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
|
|
e.target.focus()
|
|
if (side == 0 && focusListSecond.includes(document.activeElement)) {
|
|
side = 1
|
|
} else if (side == 1 && focusListMain.includes(document.activeElement)) {
|
|
side = 0
|
|
}
|
|
tui.updateFocus()
|
|
}
|
|
})
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (!jsDiv) { return }
|
|
let focused = document.activeElement
|
|
if (!focusListMain.includes(focused) && !focusListSecond.includes(focused)) {
|
|
focused = document.getElementsByClassName("f")[0]
|
|
}
|
|
const list = side != 1 ? focusListMain : focusListSecond
|
|
const currentFocus = list.indexOf(focused)
|
|
switch(e.key) {
|
|
case "Escape":
|
|
tui.home()
|
|
break
|
|
case "ArrowRight":
|
|
case "ArrowDown":
|
|
if (list.length > 0) {
|
|
if (currentFocus < list.length - 1) { e.preventDefault() }
|
|
if (side < 1 && currentFocus == -1) {
|
|
list[focusStart].focus()
|
|
} else {
|
|
list[Math.min(currentFocus+1, list.length-1)].focus()
|
|
}
|
|
tui.updateFocus()
|
|
}
|
|
break
|
|
case "ArrowLeft":
|
|
case "ArrowUp":
|
|
if (list.length > 0) {
|
|
if (currentFocus > 0) { e.preventDefault() }
|
|
if (side < 1 && currentFocus == -1) {
|
|
list[focusStart].focus()
|
|
} else {
|
|
list[Math.max(0, currentFocus-1)].focus()
|
|
}
|
|
tui.updateFocus()
|
|
}
|
|
break
|
|
case "Enter":
|
|
case " ":
|
|
const skipDiv = document.getElementsByClassName("skip-animation")[0]
|
|
if (skipDiv) {
|
|
if (window.getComputedStyle(skipDiv).visibility != "hidden") {skipAnimation()}
|
|
skipDiv.remove()
|
|
return
|
|
}
|
|
focused.click()
|
|
break
|
|
case "Tab":
|
|
e.preventDefault()
|
|
if (side >= 0) {side = (side + 1) % 2}
|
|
if (side == 0) {
|
|
document.getElementsByClassName("f")[0].focus()
|
|
} else if (side == 1 && focusListSecond[0]) {
|
|
focusListSecond[0].focus()
|
|
}
|
|
break
|
|
|
|
/* not convinced by this
|
|
case "ArrowLeft":
|
|
e.preventDefault()
|
|
if (side == 1) {
|
|
side = 0
|
|
document.getElementsByClassName("f")[0].focus()
|
|
}
|
|
break
|
|
case "ArrowRight":
|
|
e.preventDefault()
|
|
if (side == 0 && focusListSecond[0]) {
|
|
side = 1
|
|
focusListSecond[0].focus()
|
|
}*/
|
|
}
|
|
})
|
|
|
|
let resizeTimeout = 0
|
|
window.addEventListener("resize", () => {
|
|
clearTimeout(resizeTimeout)
|
|
resizeTimeout = setTimeout(() => {
|
|
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
|
|
}, 200)
|
|
})
|