Added title page.
This commit is contained in:
Dakota Blair
parent
35ad34598c
commit
786c28ef01
22
tilde.js
22
tilde.js
|
|
@ -1,8 +1,8 @@
|
|||
(() => {
|
||||
/* DOM */
|
||||
const ascii = document.getElementById('pref-ascii');
|
||||
const force = document.getElementById('pref-force');
|
||||
const themeRadios = document.getElementsByName('pref-theme');
|
||||
const ascii = document.getElementById("pref-ascii");
|
||||
const force = document.getElementById("pref-force");
|
||||
const themeRadios = document.getElementsByName("pref-theme");
|
||||
const bodyClass = document.body.classList;
|
||||
|
||||
/* localStorage management */
|
||||
|
|
@ -10,16 +10,16 @@
|
|||
const getPref = (pref) => localStorage.getItem(lsn + pref);
|
||||
const setPref = (pref, value) => localStorage.setItem(lsn + pref, value);
|
||||
const getPrefs = () => ({
|
||||
prefASCII: getPref('ascii') === 'true',
|
||||
prefForce: getPref('force') === 'true',
|
||||
prefTheme: getPref('theme') || 'dark',
|
||||
prefASCII: getPref("ascii") === "true",
|
||||
prefForce: getPref("force") === "true",
|
||||
prefTheme: getPref("theme") || "dark",
|
||||
});
|
||||
|
||||
/* Update the state of the document based on client preferences. */
|
||||
const renderPreferences = () => {
|
||||
const { prefASCII, prefForce, prefTheme } = getPrefs();
|
||||
if(prefASCII) {
|
||||
bodyClass.add('ascii');
|
||||
bodyClass.add("ascii");
|
||||
ascii.checked = "checked";
|
||||
}
|
||||
if(prefForce) {
|
||||
|
|
@ -37,8 +37,8 @@
|
|||
/* ASCII aesthetic intensifies */
|
||||
ascii.onchange = (evt) => {
|
||||
const { prefASCII } = getPrefs();
|
||||
bodyClass.toggle('ascii');
|
||||
setPref('ascii', (!prefASCII).toString());
|
||||
bodyClass.toggle("ascii");
|
||||
setPref("ascii", (!prefASCII).toString());
|
||||
};
|
||||
|
||||
/* Manage theme forcing behavior */
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
if (nextForce) {
|
||||
bodyClass.add(prefTheme);
|
||||
}
|
||||
setPref('force', nextForce.toString())
|
||||
setPref("force", nextForce.toString())
|
||||
};
|
||||
|
||||
/* Manage theme selection */
|
||||
themeRadios.forEach(radio => radio.onchange = () => {
|
||||
const { prefForce } = getPrefs();
|
||||
setPref('theme', radio.value);
|
||||
setPref("theme", radio.value);
|
||||
if(prefForce) {
|
||||
themes.forEach(theme => bodyClass.remove(theme));
|
||||
bodyClass.add(radio.value);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="tilde.css" media="screen">
|
||||
<script src="title.js" async defer></script>
|
||||
<style>
|
||||
body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 200px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: var(--bg);
|
||||
border: 0;
|
||||
color: var(--fg);
|
||||
font-family: monospace;
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<title>title</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>title</h1>
|
||||
<textarea class="hidden">title</textarea>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
(() => {
|
||||
/* DOM */
|
||||
const bodyClass = document.body.classList
|
||||
const entry = document.getElementsByTagName("textarea")[0]
|
||||
const titleDOM = document.getElementsByTagName("h1")[0]
|
||||
|
||||
/* localStorage management */
|
||||
const lsn = "~ddb:" // localStorage namespace
|
||||
const getPref = (pref) => localStorage.getItem(lsn + pref)
|
||||
const getPrefs = () => ({
|
||||
prefForce: getPref("force") === "true",
|
||||
prefTheme: getPref("theme") || "dark",
|
||||
})
|
||||
|
||||
/* Update the state of the document based on client preferences. */
|
||||
const renderPreferences = () => {
|
||||
const { prefForce, prefTheme } = getPrefs()
|
||||
if(prefForce) {
|
||||
bodyClass.add(prefTheme)
|
||||
}
|
||||
}
|
||||
renderPreferences()
|
||||
|
||||
/* Display the title. */
|
||||
const setTitle = (title) => {
|
||||
if(title) {
|
||||
titleDOM.childNodes.forEach(child => child.remove())
|
||||
titleDOM.append(document.createTextNode(title))
|
||||
document.title = title
|
||||
}
|
||||
}
|
||||
|
||||
/* Update title based on the document fragment. */
|
||||
const hashchangeHandler = () => {
|
||||
const here = new URL(window.location.href)
|
||||
const title = decodeURI(here.hash.slice(1))
|
||||
const updated = setTitle(title)
|
||||
entry.value = title
|
||||
}
|
||||
|
||||
/* Update the title on page load */
|
||||
hashchangeHandler()
|
||||
/* and any time the hash changes, eg. when using the back button. */
|
||||
addEventListener("hashchange", hashchangeHandler)
|
||||
|
||||
/* Add a way to easily edit the title. */
|
||||
const checkKey = (evt) => {
|
||||
const code = evt.code
|
||||
if(code === "Escape") {
|
||||
entry.classList.toggle("hidden")
|
||||
const title = entry.value
|
||||
setTitle(title)
|
||||
if(entry.classList.contains("hidden")) {
|
||||
const here = new URL(window.location.href)
|
||||
here.hash = `#${encodeURI(title)}`
|
||||
history.pushState({}, "", here)
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("keyup", checkKey)
|
||||
})()
|
||||
Loading…
Reference in New Issue