Added title page.
This commit is contained in:
parent
35ad34598c
commit
786c28ef01
22
tilde.js
22
tilde.js
|
@ -1,8 +1,8 @@
|
||||||
(() => {
|
(() => {
|
||||||
/* DOM */
|
/* DOM */
|
||||||
const ascii = document.getElementById('pref-ascii');
|
const ascii = document.getElementById("pref-ascii");
|
||||||
const force = document.getElementById('pref-force');
|
const force = document.getElementById("pref-force");
|
||||||
const themeRadios = document.getElementsByName('pref-theme');
|
const themeRadios = document.getElementsByName("pref-theme");
|
||||||
const bodyClass = document.body.classList;
|
const bodyClass = document.body.classList;
|
||||||
|
|
||||||
/* localStorage management */
|
/* localStorage management */
|
||||||
|
@ -10,16 +10,16 @@
|
||||||
const getPref = (pref) => localStorage.getItem(lsn + pref);
|
const getPref = (pref) => localStorage.getItem(lsn + pref);
|
||||||
const setPref = (pref, value) => localStorage.setItem(lsn + pref, value);
|
const setPref = (pref, value) => localStorage.setItem(lsn + pref, value);
|
||||||
const getPrefs = () => ({
|
const getPrefs = () => ({
|
||||||
prefASCII: getPref('ascii') === 'true',
|
prefASCII: getPref("ascii") === "true",
|
||||||
prefForce: getPref('force') === 'true',
|
prefForce: getPref("force") === "true",
|
||||||
prefTheme: getPref('theme') || 'dark',
|
prefTheme: getPref("theme") || "dark",
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Update the state of the document based on client preferences. */
|
/* Update the state of the document based on client preferences. */
|
||||||
const renderPreferences = () => {
|
const renderPreferences = () => {
|
||||||
const { prefASCII, prefForce, prefTheme } = getPrefs();
|
const { prefASCII, prefForce, prefTheme } = getPrefs();
|
||||||
if(prefASCII) {
|
if(prefASCII) {
|
||||||
bodyClass.add('ascii');
|
bodyClass.add("ascii");
|
||||||
ascii.checked = "checked";
|
ascii.checked = "checked";
|
||||||
}
|
}
|
||||||
if(prefForce) {
|
if(prefForce) {
|
||||||
|
@ -37,8 +37,8 @@
|
||||||
/* ASCII aesthetic intensifies */
|
/* ASCII aesthetic intensifies */
|
||||||
ascii.onchange = (evt) => {
|
ascii.onchange = (evt) => {
|
||||||
const { prefASCII } = getPrefs();
|
const { prefASCII } = getPrefs();
|
||||||
bodyClass.toggle('ascii');
|
bodyClass.toggle("ascii");
|
||||||
setPref('ascii', (!prefASCII).toString());
|
setPref("ascii", (!prefASCII).toString());
|
||||||
};
|
};
|
||||||
|
|
||||||
/* Manage theme forcing behavior */
|
/* Manage theme forcing behavior */
|
||||||
|
@ -50,13 +50,13 @@
|
||||||
if (nextForce) {
|
if (nextForce) {
|
||||||
bodyClass.add(prefTheme);
|
bodyClass.add(prefTheme);
|
||||||
}
|
}
|
||||||
setPref('force', nextForce.toString())
|
setPref("force", nextForce.toString())
|
||||||
};
|
};
|
||||||
|
|
||||||
/* Manage theme selection */
|
/* Manage theme selection */
|
||||||
themeRadios.forEach(radio => radio.onchange = () => {
|
themeRadios.forEach(radio => radio.onchange = () => {
|
||||||
const { prefForce } = getPrefs();
|
const { prefForce } = getPrefs();
|
||||||
setPref('theme', radio.value);
|
setPref("theme", radio.value);
|
||||||
if(prefForce) {
|
if(prefForce) {
|
||||||
themes.forEach(theme => bodyClass.remove(theme));
|
themes.forEach(theme => bodyClass.remove(theme));
|
||||||
bodyClass.add(radio.value);
|
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