Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

global: add custom context menu, fix js not working when swapping through htmx

Browse source
This commit is contained in:
Agahnim 2026-03-24 16:33:32 +01:00
parent c8d03cf709
commit 8f4b04a1fd
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
5 changed files with 89 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
static/assets/gifs/helo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

42
static/contextmenu.js Normal file
View file

@ -0,0 +1,42 @@
(function() {
if (window._contextMenuInitialized) return;
window._contextMenuInitialized = true;
const menu = document.createElement('div');
menu.className = 'context-menu';
menu.innerHTML = `
<img src="/static/assets/gifs/helo.gif"/>
`;
menu.style.display = 'none';
document.body.appendChild(menu);
const showMenu = (x, y) => {
menu.style.display = 'block';
menu.style.left = `${x}px`;
menu.style.top = `${y}px`;
const rect = menu.getBoundingClientRect();
if (x + rect.width > window.innerWidth) {
menu.style.left = `${window.innerWidth - rect.width - 10}px`;
}
if (y + rect.height > window.innerHeight) {
menu.style.top = `${window.innerHeight - rect.height - 10}px`;
}
};
const hideMenu = () => {
menu.style.display = 'none';
};
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
showMenu(e.clientX, e.clientY);
}, false);
document.addEventListener('click', hideMenu);
document.addEventListener('scroll', hideMenu);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') hideMenu();
});
})();

19
static/style.css
View file

@ -924,3 +924,22 @@ mini-player {
} }
} }
} }
/* Context Menu */
.context-menu {
position: fixed;
background: var(--win-bg-grey);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
box-shadow: 2px 2px 0 #000;
border-radius: 4px;
padding: 0.5rem 0;
min-width: 150px;
z-index: 9999;
font-family: 'VT323', monospace;
font-size: 1.2rem;
img {
width: 10svw;
}
}

6
templates/base.html
View file

@ -1,6 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!-- Welcome!! -->
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, interactive-widget=resizes-content" /> <meta name="viewport" content="width=device-width, interactive-widget=resizes-content" />
@ -17,6 +19,7 @@
<body hx-boost="true" hx-target="#content"> <body hx-boost="true" hx-target="#content">
<crt> <crt>
<!-- They won't ever disappear -->
<persistent-ui> <persistent-ui>
{% include "partials/header.html" %} {% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container"> <miniplayer-container id="miniplayer-container">
@ -24,12 +27,15 @@
</miniplayer-container> </miniplayer-container>
</persistent-ui> </persistent-ui>
<!-- Will get swapped by HTMX-->
<main id="content"> <main id="content">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
</crt> </crt>
<!-- Noooooooooooooooooooooooooo -->
<script src="/static/miniplayer.js"></script> <script src="/static/miniplayer.js"></script>
<script src="/static/contextmenu.js"></script>
<script> <script>
function updateMiniplayerVisibility() { function updateMiniplayerVisibility() {
const isMusicPage = window.location.pathname === '/music'; const isMusicPage = window.location.pathname === '/music';

42
templates/partials/home.html
View file

@ -83,6 +83,7 @@
</website-news> </website-news>
</box> </box>
</boxes> </boxes>
<!-- Nous sommes les bestioles et nous sommes responsive -->
<chibis> <chibis>
<img id="me" src="/static/assets/images/boubouille.webp" /> <img id="me" src="/static/assets/images/boubouille.webp" />
<img id="raplapla" src="/static/assets/images/rapla.webp" /> <img id="raplapla" src="/static/assets/images/rapla.webp" />
@ -91,7 +92,7 @@
<!-- I know I know but I need it for this pretty rainbow flagish animation --> <!-- I know I know but I need it for this pretty rainbow flagish animation -->
<script> <script>
(function() { (function () {
<!-- For rainbow text --> <!-- For rainbow text -->
const el = document.querySelector('woopwoop'); const el = document.querySelector('woopwoop');
if (!el) return; if (!el) return;
@ -100,28 +101,29 @@
`<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>` `<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
).join(''); ).join('');
const BIBOU_QUOTES = {{bibou_quotes| tojson | safe }}; const BIBOU_QUOTES = {{bibou_quotes| tojson | safe
}};
const txtEl = document.querySelector('bibou-text'); const txtEl = document.querySelector('bibou-text');
const ctrEl = document.querySelector('bibou-container'); const ctrEl = document.querySelector('bibou-container');
let intervalRef = null; let intervalRef = null;
const ttText = (texte) => { const ttText = (texte) => {
if (intervalRef) clearInterval(intervalRef); if (intervalRef) clearInterval(intervalRef);
let accumulated = ""; let accumulated = "";
let index = 0; let index = 0;
intervalRef = setInterval(() => { intervalRef = setInterval(() => {
if (index < texte.length) {accumulated += texte.charAt(index); txtEl.textContent = accumulated; index++;} else { if (index < texte.length) {accumulated += texte.charAt(index); txtEl.textContent = accumulated; index++;} else {
clearInterval(intervalRef); intervalRef = null; clearInterval(intervalRef); intervalRef = null;
} }
}, 40); }, 40);
}; };
ctrEl.addEventListener('mouseenter', () => { ctrEl.addEventListener('mouseenter', () => {
const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)]; const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)];
ttText(quote); ttText(quote);
}); });
})(); }) ();
</script> </script>