Skip to content

Commit

Permalink
Detect and remember user theme preferences
Browse files Browse the repository at this point in the history
  • Loading branch information
@lynn
lynn committed Jul 6, 2024
1 parent f365751 commit 660975c
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 53 deletions.
34 changes: 17 additions & 17 deletions _layouts/delta-refgram.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Toaq - {{ page.title }}</title>
<meta charset="utf-8" />
<title>Toaq - {{ page.title }}</title>
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />

<link rel="stylesheet" type="text/css" href="../css/r-c-min.css" />

<link rel="stylesheet" type="text/css" href="../css/style.css" />

<link rel="stylesheet" type="text/css" href="../css/interlinear.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" type="text/css" href="../css/r-c-min.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/interlinear.css"/>
<link rel="stylesheet" type="text/css" href="../../css/SegoeUI/segoe.css"/>


<script type="text/javascript" src="../css/toc.js"></script>
<script>
if (getTheme() === 'light') {
document.getElementsByTagName('html')[0].classList.add("light");
}
</script>
</head>
<body class="delta-refgram">

<button type="button" class="button" style="padding:8px 16px; margin: 8px 8px -16px"
onclick="document.body.parentElement.className = /light/.test(document.body.parentElement.className) ? '' : 'light';">Theme</button>
<button type="button" class="button theme-button" style="float: left; padding:8px 16px; margin: 8px 8px -100% 8px">Toggle theme</button>

<img src="../assets/logo.webp" class="logo"></img>

Expand All @@ -37,7 +38,7 @@

<div class="toc">
<div class="toc-header">Table of contents</div>
<div class="toc-title"><a style="color:white" href="#">{{ page.title }}</a></div>
<div class="toc-title"><a class="current" href="#">{{ page.title }}</a></div>
{% include toc.html html=content ordered=true h_min=2 h_max=3 sanitize=true %}
</div>
{{ content }}
Expand All @@ -61,5 +62,4 @@
</body>

<script type="text/javascript" src="../css/interlinear.js"></script>
<script type="text/javascript" src="../css/toc.js"></script>
</html>
21 changes: 9 additions & 12 deletions refgram/css/interlinear.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
//Add configure method
//and then method for redisplaying the glosses.
(function (root){

//default options
var options = {
citationClass: 'citation',
Expand Down Expand Up @@ -34,27 +34,27 @@
raw: {},
layout: function(line){
/*
This regex matches in this priority:
This regex matches in this priority:
1. Words grouped by double quotes "
2. Words groupd by single quotes ' (this includes a word medial single quotes. so 'you're cute' would
match the entire string)
3. Single words
** If there is a ! in front of the line, it will match the whole line if the rest of the phrase
is surrounded by quotes of some sort. This is used for pulling out full lines.
is surrounded by quotes of some sort. This is used for pulling out full lines.
The regex:
(!\s)? -- include a ![space] at the front
("|'((?!\s)|^)) -- match a double quote, or a single quote that is proceeded by a space, or beg. of line
.+? -- any character, non-greedy
("|(?=').*?"|'((?=\s)|$)) -- double quote, a double quote even if there is a single quote in there,
("|(?=').*?"|'((?=\s)|$)) -- double quote, a double quote even if there is a single quote in there,
a single quote followed by a space, end of line
|[^\s]+ -- or characters that aren't spaces (e.g. a single word)
*/

var preformatArray = line.match(/(!\s)?("|'((?!\s)|^)).+?("|(?=').*?"|'((?=\s)|$))|[^\s]+/g);

if(options.useSmallCaps){
if(options.useFakeSmallCaps)
preformatArray = preformatArray.map(setFakeSmallCaps);
Expand Down Expand Up @@ -118,23 +118,21 @@
wordIdxlines = equalizeArrayLength(lines.map(this.layout));
wordzips = zipn(wordIdxlines);

console.log(wordzips);

if(options.numberGlosses) {
output = "<div class=\"gloss-segment gloss-label\"><a id=\"mua"+(i+1)+"\" href=\"#mua"+(i+1)+"\">("+(i+1)+")</a></div>";
}

output += "<title>";

/*
Wordzips:
Wordzips:
My s Marko
1PL COM Marko
We with Marko
Becomes an array of the columns
[
[
[My, 1PL, We],
[s, COM, with],
[Marko, Marko, Marko]
Expand All @@ -146,7 +144,6 @@
skipRow = [];

for(var col = 0; col < wordzips.length; col++){
console.log(col);
var formattedGloss = "",
currentColumn = wordzips[col],
firstChar = "";
Expand Down Expand Up @@ -186,7 +183,7 @@
formattedGloss += "<br/>";
}
}

formattedGloss += "</div>";
output += formattedGloss;
}
Expand Down
43 changes: 23 additions & 20 deletions refgram/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -637,7 +637,6 @@ table.conjunctionexamples th {
display: inline-block;
font-size: 16px;
margin: 24px 2px;
transition-duration: 0.4s;
cursor: pointer;
border: 1px solid var(--toaq-color);
}
Expand Down Expand Up @@ -702,6 +701,10 @@ button.button {
font-variant: normal;
}

.toc a.current {
font-weight: bold;
}

.toc a:hover {
text-decoration: underline;
}
Expand All @@ -714,6 +717,7 @@ button.button {
}
}
.delta-refgram .toc {
padding-top: 2em;
position: fixed;
right: 0;
top: 0;
Expand All @@ -738,22 +742,21 @@ button.button {
}
}

@media (prefers-color-scheme: light) {
html {
--text-color: #282828;
--technical-color: #00aa00;
--derani-color: #cc3399;
--toaq-color: #0088ee;
--heading-color: #282828;
--morphemes-color: #888888;
--semantic-color: #cc3399;
}
.syntax { background-color: white; }
body { background-color: #f0f0f0; }
img[src*=svg] { filter: invert() grayscale(1) contrast(0.3); }
tr:hover {background-color: #dddddd;}
.exword { color: inherit; }
.listen:hover { background-color: #dddddd; }
.fixed-width > * { border-style: none; }
.gold { color: #ffc000; }
}
html.light {
--text-color: #282828;
--technical-color: #00aa00;
--derani-color: #cc3399;
--toaq-color: #0088ee;
--heading-color: #282828;
--morphemes-color: #888888;
--semantic-color: #cc3399;
}
html.light .toc { border: none; background: #00000008; }
html.light .syntax { background-color: white; }
html.light body { background-color: #f8f8f8; }
html.light img[src*=svg] { filter: invert() grayscale(1) contrast(0.3); }
html.light tr:hover {background-color: #dddddd;}
html.light .exword { color: inherit; }
html.light .listen:hover { background-color: #dddddd; }
html.light .fixed-width > * { border-style: none; }
html.light .gold { color: #ffc000; }
39 changes: 35 additions & 4 deletions refgram/css/toc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,53 @@ function handleScroll() {
const scrollable = toc.scrollHeight > toc.clientHeight;
let done = false;
for (const a of as) {
a.style.color = "";
a.className = "";
if (!done) {
const header = document.getElementById(a.href.split("#")[1]);
if (!header) continue;
const top = header.getBoundingClientRect().top;
if (top < window.innerHeight / 5) {
a.style.color = "inherit";
if (top < window.innerHeight / 4) {
a.className = "current";
if (scrollable) {
a.scrollIntoView({ block: "center" });
}
done = true;
}
}
}
document.querySelector(".toc-title>a").style.color = done ? "" : "inherit";
document.querySelector(".toc-title>a").className = done ? "" : "current";
}

function lget(key) {
try {
return localStorage.getItem(key);
} catch (e) {
return null;
}
}

function lset(key, value) {
try {
localStorage.setItem(key, value);
} catch (e) { }
}

const prefersDark = () =>
window.matchMedia?.matchMedia("(prefers-color-scheme: dark)").matches;

function setDark(dark) {
lset("theme", dark ? "dark" : "light");
document.body.parentElement.className = dark ? "" : "light";
}

const getTheme = () => lget("theme") ?? (prefersDark ? "dark" : "light");

window.addEventListener("DOMContentLoaded", () => {
setDark(getTheme() === "dark");
document.querySelector(".theme-button")?.addEventListener("click", () => {
setDark(document.body.parentElement.className === "light");
});
});

window.addEventListener("scroll", handleScroll);
handleScroll();

0 comments on commit 660975c

Please sign in to comment.