summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorache <ache@ache.one>2022-05-03 19:31:21 +0200
committerache <ache@ache.one>2022-05-03 19:31:21 +0200
commiteb60dc268024b0716b5eb3cdfd4dfc3a179207ff (patch)
tree070b4ef98d7a62c035ff48ec4a6df137ead4b8a2
parentAccessibility fix (diff)
Event review
-rw-r--r--src/js/sidenotes.js26
-rw-r--r--src/js/zen.js66
2 files changed, 45 insertions, 47 deletions
diff --git a/src/js/sidenotes.js b/src/js/sidenotes.js
index f31bef7..db2781f 100644
--- a/src/js/sidenotes.js
+++ b/src/js/sidenotes.js
@@ -1,5 +1,3 @@
-'use strict';
-
function getPos(element) {
/* Element.getBoundingClientRect()
* Return box of the element relatively to viewport.
@@ -15,10 +13,10 @@ function getPos(element) {
};
}
-const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
-let sidenotes = undefined;
+// Use this if needed :
+// const getTop = element => element.offsetTop + (element.offsetParent && getTop(element.offsetParent));
+let sidenotes;
const resize = () => {
-
for (const sidenote of sidenotes) {
if (sidenote.offsetWidth < 200 || window.screen.width < 1400) {
sidenote.innerHTML = '';
@@ -26,8 +24,7 @@ const resize = () => {
}
const articleRef = sidenote.attributes.for.value;
- const article = document.querySelector(`#${articleRef}`);
- console.log(article, articleRef);
+ const article = document.querySelector(`#${CSS.escape(articleRef)}`);
const notes = Array.from(article.querySelectorAll('li'))
.filter(element => element.id.startsWith('user-content-fn'));
const newSidenotes = notes.map(sidenoteLi => {
@@ -59,16 +56,13 @@ const resize = () => {
}
};
-if (sidenotes.length > 0) {
- new ResizeObserver(resize).observe(sidenotes[0])
-}
-
-// window.addEventListener('resize', resize);
-window.addEventListener('DOMContentLoaded') () => {
-
-};
window.addEventListener('DOMContentLoaded', () => {
- if(document.querySelectorAll('.math-display').length > 0) {
+ sidenotes = document.querySelectorAll('.sidenotes');
+ if (sidenotes.length > 0) {
+ new ResizeObserver(resize).observe(sidenotes[0]);
+ }
+
+ if (document.querySelectorAll('.math-display').length > 0) {
document.head.innerHTML += '<link href="/s/css/katex.css" rel="stylesheet"/>';
}
});
diff --git a/src/js/zen.js b/src/js/zen.js
index 05ec6b3..301e21b 100644
--- a/src/js/zen.js
+++ b/src/js/zen.js
@@ -1,38 +1,42 @@
-'use strict';
+window.addEventListener('DOMContentLoaded', () => {
+ let firstTime = window.location.pathname != '/';
+ const toggleArrow = document.querySelector('#harr');
+ const initValue = document.body.style.getPropertyValue('--width_panel_bis');
-const toggleArrow = document.getElementById('harr');
-const initValue = document.body.style.getPropertyValue('--width_panel_bis');
+ toggleArrow.addEventListener('click', () => {
+ if (toggleArrow.classList.contains('hide_arrow_off')) {
+ showAbout();
+ setTimeout(() => {
+ toggleArrow.classList.remove('hide_arrow_off');
+ }, 1000);
+ } else {
+ toggleArrow.classList.add('hide_arrow_off');
+ hideAbout();
+ }
+ });
-toggleArrow.addEventListener('click', () => {
- if (toggleArrow.classList.contains('hide_arrow_off')) {
- showAbout();
- setTimeout(() => {
- toggleArrow.classList.remove('hide_arrow_off');
- }, 1000);
- } else {
- toggleArrow.classList.add('hide_arrow_off');
- hideAbout();
+ function hideAbout() {
+ document.body.style.setProperty('--width_panel_bis', '0px');
}
-});
-
-function hideAbout() {
- document.body.style.setProperty('--width_panel_bis', '0px');
-}
-function showAbout() {
- document.body.style.setProperty('--width_panel_bis', initValue);
-}
-
-window.addEventListener('scroll', () => {
- const toggleArrow = document.getElementById('harr');
+ function showAbout() {
+ document.body.style.setProperty('--width_panel_bis', initValue);
+ }
- if (window.pageYOffset >= 800) {
- if (toggleArrow) {
- toggleArrow.classList.add('hide_arrow_show');
+ window.addEventListener('scroll', () => {
+ if (window.pageYOffset >= 800) {
+ if (toggleArrow) {
+ if (firstTime) {
+ toggleArrow.click();
+ firstTime = false;
+ } else {
+ toggleArrow.classList.add('hide_arrow_show');
+ }
+ }
+ // A hideAbout(header, articles);
+ } else if (toggleArrow && !toggleArrow.classList.contains('hide_arrow_off')) {
+ // A showAbout(header, articles);
+ toggleArrow.classList.remove('hide_arrow_show');
}
- // A hideAbout(header, articles);
- } else if (toggleArrow && !toggleArrow.classList.contains('hide_arrow_off')) {
- // A showAbout(header, articles);
- toggleArrow.classList.remove('hide_arrow_show');
- }
+ });
});