summaryrefslogtreecommitdiff
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/love.js145
-rw-r--r--src/js/sidenotes.js40
-rw-r--r--src/js/theme.js60
-rw-r--r--src/js/zen.js49
4 files changed, 160 insertions, 134 deletions
diff --git a/src/js/love.js b/src/js/love.js
index 66f47d4..59ecccc 100644
--- a/src/js/love.js
+++ b/src/js/love.js
@@ -1,15 +1,18 @@
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener("DOMContentLoaded", () => {
// This script insert a love button at the end of an article page
- const articles = document.querySelectorAll('article');
+ const articles = document.querySelectorAll("article");
function getCurrentPageLang() {
- return document.documentElement.lang || "en";
+ return document.documentElement.lang || "en";
}
function getLikeEndPoint() {
- let currentArticleName = window.location.pathname.split('/')[2];
- if (currentArticleName.indexOf('.') > 0) {
- currentArticleName = currentArticleName.slice(0, currentArticleName.lastIndexOf('.'))
+ let currentArticleName = window.location.pathname.split("/")[2];
+ if (currentArticleName.indexOf(".") > 0) {
+ currentArticleName = currentArticleName.slice(
+ 0,
+ currentArticleName.lastIndexOf("."),
+ );
}
return `${window.location.origin}/like/${currentArticleName}`;
@@ -19,20 +22,20 @@ window.addEventListener('DOMContentLoaded', () => {
if (isAnArticle) {
const article = articles[0];
- const likes = article.querySelector('.likes');
- const nbLikes = article.querySelector('.nbLikes');
- const footnotes = article.querySelector('.footnotes');
+ const likes = article.querySelector(".likes");
+ const nbLikes = article.querySelector(".nbLikes");
+ const footnotes = article.querySelector(".footnotes");
- likes.style="display: 'block';";
+ likes.style = "display: 'block';";
const updateNbLikes = () => {
fetch(getLikeEndPoint(), {
- method: 'GET',
+ method: "GET",
headers: {
- 'i-love-what-you-do': '<3',
+ "i-love-what-you-do": "<3",
},
}).then((res) => {
if (res.ok) {
- res.text().then((text) => nbLikes.textContent = text);
+ res.text().then((text) => (nbLikes.textContent = text));
} else {
nbLikes.textContent = "";
}
@@ -46,80 +49,88 @@ window.addEventListener('DOMContentLoaded', () => {
footnotes.before(likes);
}
- const icon = likes.querySelector('.icon');
- const messagesLike = likes.querySelector('.likesNotes');
+ const icon = likes.querySelector(".icon");
+ const messagesLike = likes.querySelector(".likesNotes");
- icon.addEventListener('mouseover', () => {
+ icon.addEventListener("mouseover", () => {
for (const c of icon.children) {
- const path = c.querySelector('path');
- path?.classList.add('anim');
+ const path = c.querySelector("path");
+ path?.classList.add("anim");
}
});
- icon.addEventListener('mouseout', () => {
+ icon.addEventListener("mouseout", () => {
for (const c of icon.children) {
- const path = c.querySelector('path');
- path?.classList.remove('anim');
+ const path = c.querySelector("path");
+ path?.classList.remove("anim");
}
});
- icon.addEventListener('click', () => {
+ icon.addEventListener("click", () => {
const c = icon.children[1];
const lang = getCurrentPageLang();
- const path = c.querySelector('path');
+ const path = c.querySelector("path");
- path.classList.add('anim-click');
- path.getAnimations().forEach(anim => {
+ path.classList.add("anim-click");
+ path.getAnimations().forEach((anim) => {
anim.cancel();
anim.play();
});
fetch(getLikeEndPoint(), {
- method: 'POST',
+ method: "POST",
headers: {
- 'i-love-what-you-do': '<3',
- 'lang': lang,
+ "i-love-what-you-do": "<3",
+ lang: lang,
},
- }).then(response => {
- const t = response.text();
-
- if (response.ok) {
- messagesLike.classList.remove('err');
- t.then(t => messagesLike.textContent = t);
- updateNbLikes();
- } else {
- t.then(t => {
- // In case of error, we want to be able to set the initial message back
- const previousText = messagesLike.textContent;
- const timeoutErr = 3000;
- const wasAnError = messagesLike.classList.contains('err');
-
- // Set the error
- messagesLike.classList.add('err');
- if (Math.floor(response.status / 100) == 4) {
- messagesLike.textContent = t;
- } else {
- messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
- }
-
- // Set the initial message back
- if(!wasAnError) {
- setTimeout(() => {
- if(messagesLike.classList.contains('err')) {
- messagesLike.classList.remove('err');
- messagesLike.textContent = previousText;
- }
- }, timeoutErr);
- }
- });
- }
- }).catch(() => {
- // In case of exception error. We don't want to set back the initial message.
- messagesLike.classList.add('err');
- messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
- messageText = '';
- });
+ })
+ .then((response) => {
+ const t = response.text();
+
+ if (response.ok) {
+ messagesLike.classList.remove("err");
+ t.then((t) => (messagesLike.textContent = t));
+ updateNbLikes();
+ } else {
+ t.then((t) => {
+ // In case of error, we want to be able to set the initial message back
+ const previousText = messagesLike.textContent;
+ const timeoutErr = 3000;
+ const wasAnError = messagesLike.classList.contains("err");
+
+ // Set the error
+ messagesLike.classList.add("err");
+ if (Math.floor(response.status / 100) == 4) {
+ messagesLike.textContent = t;
+ } else {
+ messagesLike.textContent =
+ lang == "fr"
+ ? "Désolé, le service est indisponible."
+ : "Sorry, service unavailable.";
+ }
+
+ // Set the initial message back
+ if (!wasAnError) {
+ setTimeout(() => {
+ if (messagesLike.classList.contains("err")) {
+ messagesLike.classList.remove("err");
+ messagesLike.textContent = previousText;
+ }
+ }, timeoutErr);
+ }
+ });
+ }
+ })
+ .catch(() => {
+ // In case of exception error. We don't want to set back the initial message.
+ messagesLike.classList.add("err");
+ messagesLike.textContent =
+ lang == "fr"
+ ? "Désolé, le service est indisponible."
+ : "Sorry, service unavailable.";
+ messageText = "";
+ });
});
}
});
diff --git a/src/js/sidenotes.js b/src/js/sidenotes.js
index 851e11b..591f856 100644
--- a/src/js/sidenotes.js
+++ b/src/js/sidenotes.js
@@ -19,19 +19,23 @@ let articles;
const resize = () => {
for (const [article, sidenote] of articles) {
if (sidenote.offsetWidth < 200 || window.screen.width < 1400) {
- sidenote.innerHTML = '';
+ sidenote.innerHTML = "";
return;
}
- const notes = Array.from(article.querySelectorAll('li'))
- .filter(element => element.id.startsWith('user-content-fn'));
- const newSidenotes = notes.map(sidenoteLi => {
- const div = document.createElement('div');
- const refName = sidenoteLi.querySelector('.data-footnote-backref').attributes.href.value;
- const refSideNode = article.querySelector(`#${CSS.escape(refName.slice(1))}`);
+ const notes = Array.from(article.querySelectorAll("li")).filter((element) =>
+ element.id.startsWith("user-content-fn"),
+ );
+ const newSidenotes = notes.map((sidenoteLi) => {
+ const div = document.createElement("div");
+ const refName = sidenoteLi.querySelector(".data-footnote-backref")
+ .attributes.href.value;
+ const refSideNode = article.querySelector(
+ `#${CSS.escape(refName.slice(1))}`,
+ );
- const sup = document.createElement('sup');
- sup.textContent = refSideNode.textContent + ' ';
+ const sup = document.createElement("sup");
+ sup.textContent = refSideNode.textContent + " ";
for (const element of sidenoteLi.children) {
const child = element.cloneNode(true);
@@ -40,7 +44,7 @@ const resize = () => {
div.children[0].prepend(sup);
div.style.top = `${getPos(refSideNode).y}px`;
- div.classList.add('sidenote');
+ div.classList.add("sidenote");
return div;
});
@@ -48,21 +52,25 @@ const resize = () => {
sidenote.replaceChildren(...newSidenotes);
if (sidenote.offsetWidth < 100 || window.screen.width < 1400) {
- sidenote.innerHTML = '';
+ sidenote.innerHTML = "";
return;
}
}
};
-window.addEventListener('DOMContentLoaded', () => {
- articles = Array.from(document.querySelectorAll('article'));
+window.addEventListener("DOMContentLoaded", () => {
+ articles = Array.from(document.querySelectorAll("article"));
if (articles.length > 0) {
- articles = articles.map(x => [x, x.parentElement.querySelector('.sidenotes')]);
+ articles = articles.map((x) => [
+ x,
+ x.parentElement.querySelector(".sidenotes"),
+ ]);
new ResizeObserver(resize).observe(articles[0][1]);
}
- if (document.querySelectorAll('.math-display').length > 0) {
- document.head.innerHTML += '<link href="/s/css/katex.css" rel="stylesheet"/>';
+ if (document.querySelectorAll(".math-display").length > 0) {
+ document.head.innerHTML +=
+ '<link href="/s/css/katex.css" rel="stylesheet"/>';
}
});
diff --git a/src/js/theme.js b/src/js/theme.js
index 8239c69..a49fc8c 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -1,30 +1,32 @@
-window.addEventListener('DOMContentLoaded', () => {
- const storageTheme = window.localStorage?.getItem('theme');
- const preferesDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+window.addEventListener("DOMContentLoaded", () => {
+ const storageTheme = window.localStorage?.getItem("theme");
+ const preferesDark = window.matchMedia(
+ "(prefers-color-scheme: dark)",
+ ).matches;
let isDark = preferesDark;
- const hid = document.querySelector('#hid');
- const html = document.querySelector('html');
- const aside = document.querySelector('#side-bar');
- const sidenotes = document.querySelector('.sidenotes');
- const footnotes = document.querySelector('.footnotes');
- const harr = document.querySelector('#harr');
- const links = document.querySelectorAll('a');
- const likes = document.querySelectorAll('.likes');
- const tables = document.querySelectorAll('table');
- const codes = document.querySelectorAll('p code');
-
- if (storageTheme === 'dark' || storageTheme === 'light') {
+ const hid = document.querySelector("#hid");
+ const html = document.querySelector("html");
+ const aside = document.querySelector("#side-bar");
+ const sidenotes = document.querySelector(".sidenotes");
+ const footnotes = document.querySelector(".footnotes");
+ const harr = document.querySelector("#harr");
+ const links = document.querySelectorAll("a");
+ const likes = document.querySelectorAll(".likes");
+ const tables = document.querySelectorAll("table");
+ const codes = document.querySelectorAll("p code");
+
+ if (storageTheme === "dark" || storageTheme === "light") {
const theme = storageTheme;
- isDark = storageTheme === 'dark';
+ isDark = storageTheme === "dark";
hid.classList.add(theme);
html.classList.add(theme);
aside.classList.add(theme);
sidenotes.classList.add(theme);
harr.classList.add(theme);
- if(footnotes) {
+ if (footnotes) {
footnotes.classList.add(theme);
}
@@ -41,17 +43,17 @@ window.addEventListener('DOMContentLoaded', () => {
code.classList.add(theme);
}
- for (const article of document.querySelectorAll('article')) {
+ for (const article of document.querySelectorAll("article")) {
article.classList.add(theme);
}
- for (const article of document.querySelectorAll('article')) {
+ for (const article of document.querySelectorAll("article")) {
article.classList.add(theme);
}
}
function toogleTheme() {
- const arg = isDark ? ['dark', 'light'] : ['light', 'dark'];
+ const arg = isDark ? ["dark", "light"] : ["light", "dark"];
const theme = arg[1];
if (!hid.classList.replace(...arg)) {
@@ -73,8 +75,6 @@ window.addEventListener('DOMContentLoaded', () => {
footnotes.classList.add(theme);
}
-
-
if (!harr.classList.replace(...arg)) {
harr.classList.add(theme);
}
@@ -100,7 +100,7 @@ window.addEventListener('DOMContentLoaded', () => {
}
}
- for (const article of document.querySelectorAll('article')) {
+ for (const article of document.querySelectorAll("article")) {
if (!article.classList.replace(...arg)) {
article.classList.add(theme);
}
@@ -108,19 +108,19 @@ window.addEventListener('DOMContentLoaded', () => {
isDark = !isDark;
if (window.localStorage) {
- window.localStorage.setItem('theme', isDark ? 'dark' : 'light');
+ window.localStorage.setItem("theme", isDark ? "dark" : "light");
}
}
- const sun = document.querySelector('.sun');
- const moon = document.querySelector('.moon');
+ const sun = document.querySelector(".sun");
+ const moon = document.querySelector(".moon");
- sun.addEventListener('click', toogleTheme);
- moon.addEventListener('click', toogleTheme);
+ sun.addEventListener("click", toogleTheme);
+ moon.addEventListener("click", toogleTheme);
if (isDark) {
- hid.classList.add('dark');
+ hid.classList.add("dark");
} else {
- hid.classList.add('light');
+ hid.classList.add("light");
}
});
diff --git a/src/js/zen.js b/src/js/zen.js
index be5f7d7..8437c81 100644
--- a/src/js/zen.js
+++ b/src/js/zen.js
@@ -1,19 +1,19 @@
-window.addEventListener('DOMContentLoaded', () => {
- let firstTime = window.location.pathname != '/' && window.pageYOffset < 800;
- const toggleArrow = document.querySelector('#harr');
- const hid = document.querySelector('#hid');
- const initValue = document.body.style.getPropertyValue('--width_panel_bis');
-
- toggleArrow.addEventListener('click', () => {
- if (toggleArrow.classList.contains('hide_arrow_off')) {
+window.addEventListener("DOMContentLoaded", () => {
+ let firstTime = window.location.pathname != "/" && window.pageYOffset < 800;
+ const toggleArrow = document.querySelector("#harr");
+ const hid = document.querySelector("#hid");
+ const initValue = document.body.style.getPropertyValue("--width_panel_bis");
+
+ toggleArrow.addEventListener("click", () => {
+ if (toggleArrow.classList.contains("hide_arrow_off")) {
firstTime = false;
showAbout();
showHID();
setTimeout(() => {
- toggleArrow.classList.remove('hide_arrow_off');
+ toggleArrow.classList.remove("hide_arrow_off");
}, 1000);
} else {
- toggleArrow.classList.add('hide_arrow_off');
+ toggleArrow.classList.add("hide_arrow_off");
hideAbout();
// If the screen is smaller than 500px, hide the HID
@@ -24,37 +24,44 @@ window.addEventListener('DOMContentLoaded', () => {
});
function hideAbout() {
- document.body.style.setProperty('--width_panel_bis', '0px');
+ document.body.style.setProperty("--width_panel_bis", "0px");
}
function showAbout() {
- document.body.style.setProperty('--width_panel_bis', initValue);
+ document.body.style.setProperty("--width_panel_bis", initValue);
}
function hideHID() {
- hid.style.setProperty('display', 'none');
+ hid.style.setProperty("display", "none");
}
function showHID() {
- hid.style.setProperty('display', '');
+ hid.style.setProperty("display", "");
}
- window.addEventListener('scroll', () => {
- if(!toggleArrow) return;
+ window.addEventListener("scroll", () => {
+ if (!toggleArrow) return;
if (window.pageYOffset >= 800) {
- if (firstTime && document.body.style.getPropertyValue('--width_panel_bis') === initValue) {
+ if (
+ firstTime &&
+ document.body.style.getPropertyValue("--width_panel_bis") === initValue
+ ) {
toggleArrow.click();
firstTime = true;
}
- toggleArrow.classList.add('hide_arrow_show');
+ toggleArrow.classList.add("hide_arrow_show");
// A hideAbout(header, articles);
- } else if (!toggleArrow.classList.contains('hide_arrow_off')) {
+ } else if (!toggleArrow.classList.contains("hide_arrow_off")) {
// A showAbout(header, articles);
- toggleArrow.classList.remove('hide_arrow_show');
+ toggleArrow.classList.remove("hide_arrow_show");
}
- if(firstTime && window.pageYOffset === 0 && document.body.style.getPropertyValue('--width_panel_bis') !== initValue) {
+ if (
+ firstTime &&
+ window.pageYOffset === 0 &&
+ document.body.style.getPropertyValue("--width_panel_bis") !== initValue
+ ) {
toggleArrow.click();
firstTime = true;
}
By 🩊 with love. ❀