peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add diy replacement for turbo

Browse Source
This commit is contained in:
Peter Stockings
2026-03-11 22:57:54 +11:00
parent 5b43bca7ca
commit 675ca02818
3 changed files with 155 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/templates/_layout.html
View File

@@ -7,6 +7,7 @@
<title>{% block title %}BP Tracker{% endblock %}</title>
<link rel="icon" type="image/svg+xml" sizes="any" href="{{ url_for('static', filename='images/favicon.svg') }}">
<link href="/static/css/tailwind.css" rel="stylesheet">
<script src="{{ url_for('static', filename='js/diy-turbo.js') }}"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
@@ -128,26 +129,25 @@
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Flash messages
document.querySelectorAll('.flash-close-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const el = e.target.closest('.flash-message');
if (el) {
el.style.opacity = '0';
setTimeout(() => el.remove(), 300);
}
});
});
// Use document for event delegation since body is replaced by diy-turbo
document.addEventListener('click', async (e) => {
// Flash messages close button
const flashCloseBtn = e.target.closest('.flash-close-btn');
if (flashCloseBtn) {
const el = flashCloseBtn.closest('.flash-message');
if (el) {
el.style.opacity = '0';
setTimeout(() => el.remove(), 300);
}
return;
}
// Micro-HTMX implementation
document.body.addEventListener('click', async (e) => {
const trigger = e.target.closest('[hx-get]');
if (!trigger) return;
const htmxTrigger = e.target.closest('[hx-get]');
if (htmxTrigger) {
e.preventDefault();
const url = trigger.getAttribute('hx-get');
const targetSelector = trigger.getAttribute('hx-target');
const url = htmxTrigger.getAttribute('hx-get');
const targetSelector = htmxTrigger.getAttribute('hx-target');
if (!url || !targetSelector) return;
const targetEl = document.querySelector(targetSelector);
@@ -160,19 +160,20 @@
} catch (err) {
console.error('Micro-HTMX error:', err);
}
});
return;
}
// Mobile Menu
const menuBtn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
const nav = document.getElementById('mobile-nav');
const iconMenu = document.getElementById('icon-menu');
const iconClose = document.getElementById('icon-close');
// Mobile Menu Toggle Button
const menuBtn = e.target.closest('#mobile-menu-btn');
if (menuBtn) {
const menu = document.getElementById('mobile-menu');
const nav = document.getElementById('mobile-nav');
const iconMenu = document.getElementById('icon-menu');
const iconClose = document.getElementById('icon-close');
if (menuBtn && menu) {
const toggleMenu = (forceClose = false) => {
if (menu) {
const isHidden = menu.classList.contains('hidden');
if (!isHidden || forceClose) {
if (!isHidden) {
menu.classList.add('hidden');
nav.classList.replace('bg-primary-900', 'bg-primary-800');
iconMenu.classList.remove('hidden');
@@ -185,15 +186,43 @@
iconClose.classList.remove('hidden');
menuBtn.classList.add('rotate-180', 'transform');
}
};
}
return;
}
menuBtn.addEventListener('click', () => toggleMenu());
document.addEventListener('click', (e) => {
if (!nav.contains(e.target) && !menu.classList.contains('hidden')) toggleMenu(true);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !menu.classList.contains('hidden')) toggleMenu(true);
});
// Handle clicks outside of nav/menu to close mobile menu
const nav = document.getElementById('mobile-nav');
const menu = document.getElementById('mobile-menu');
if (nav && menu && !nav.contains(e.target) && !menu.classList.contains('hidden')) {
menu.classList.add('hidden');
nav.classList.replace('bg-primary-900', 'bg-primary-800');
const iconMenu = document.getElementById('icon-menu');
const iconClose = document.getElementById('icon-close');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
if (iconMenu) iconMenu.classList.remove('hidden');
if (iconClose) iconClose.classList.add('hidden');
if (mobileMenuBtn) mobileMenuBtn.classList.remove('rotate-180', 'transform');
}
});
// Handle Escape key to close mobile menu
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const menu = document.getElementById('mobile-menu');
if (menu && !menu.classList.contains('hidden')) {
const nav = document.getElementById('mobile-nav');
menu.classList.add('hidden');
if (nav) nav.classList.replace('bg-primary-900', 'bg-primary-800');
const iconMenu = document.getElementById('icon-menu');
const iconClose = document.getElementById('icon-close');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
if (iconMenu) iconMenu.classList.remove('hidden');
if (iconClose) iconClose.classList.add('hidden');
if (mobileMenuBtn) mobileMenuBtn.classList.remove('rotate-180', 'transform');
}
}
});
</script>