diff options
Diffstat (limited to 'src/js')
-rw-r--r-- | src/js/love.js | 145 | ||||
-rw-r--r-- | src/js/sidenotes.js | 40 | ||||
-rw-r--r-- | src/js/theme.js | 60 | ||||
-rw-r--r-- | src/js/zen.js | 49 |
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; } |