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

68
app/static/js/diy-turbo.js Normal file
View File

@@ -0,0 +1,68 @@
document.addEventListener('click', async (e) => {
const link = e.target.closest('a');
if (!link) return;
const url = link.getAttribute('href');
if (!url || url.startsWith('#') || url.startsWith('javascript:')) return;
// Only intercept same-origin links
if (link.origin !== window.location.origin) return;
// Ignore links that open in a new tab, download, or modifier keys
if (link.target === '_blank' || link.hasAttribute('download')) return;
if (e.ctrlKey || e.shiftKey || e.metaKey || e.altKey) return;
// Optional: add a "data-turbo='false'" attribute check to disable it on specific links
if (link.getAttribute('data-turbo') === 'false') return;
e.preventDefault();
document.body.style.cursor = 'wait';
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Fetch failed');
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
document.title = doc.title;
document.body.innerHTML = doc.body.innerHTML;
// Carry over classes on the body if they changed
document.body.className = doc.body.className;
document.body.style.cursor = 'default';
window.history.pushState({}, '', url);
window.scrollTo(0, 0);
// Dispatch a custom event so other scripts can re-initialize if necessary
document.dispatchEvent(new Event('diy-turbo:load'));
} catch (error) {
console.error('DIY Turbo navigation error:', error);
window.location.href = url; // fallback
}
});
window.addEventListener('popstate', async () => {
document.body.style.cursor = 'wait';
try {
const response = await fetch(window.location.href);
if (!response.ok) throw new Error('Fetch failed');
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
document.title = doc.title;
document.body.innerHTML = doc.body.innerHTML;
document.body.className = doc.body.className;
document.body.style.cursor = 'default';
document.dispatchEvent(new Event('diy-turbo:load'));
} catch (error) {
console.error('DIY Turbo popstate error:', error);
window.location.reload(); // fallback
}
});

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>

43
app/templates/dashboard.html
View File

@@ -114,38 +114,41 @@
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Use event delegation for dashboard interactions to survive DIY Turbo page replacements
document.addEventListener('click', (e) => {
// Filter Form Toggle
const filterBtn = document.getElementById('filter-btn');
const filterForm = document.getElementById('filter-form');
const iconClosed = document.getElementById('filter-icon-closed');
const iconOpen = document.getElementById('filter-icon-open');
const filterBtn = e.target.closest('#filter-btn');
if (filterBtn) {
const filterForm = document.getElementById('filter-form');
const iconClosed = document.getElementById('filter-icon-closed');
const iconOpen = document.getElementById('filter-icon-open');
if (filterBtn && filterForm) {
filterBtn.addEventListener('click', () => {
if (filterForm) {
const isHidden = filterForm.classList.contains('hidden');
if (isHidden) {
filterForm.classList.remove('hidden');
iconClosed.classList.add('hidden');
iconOpen.classList.remove('hidden');
if (iconClosed) iconClosed.classList.add('hidden');
if (iconOpen) iconOpen.classList.remove('hidden');
} else {
filterForm.classList.add('hidden');
iconClosed.classList.remove('hidden');
iconOpen.classList.add('hidden');
if (iconClosed) iconClosed.classList.remove('hidden');
if (iconOpen) iconOpen.classList.add('hidden');
}
});
}
return;
}
// Tabs
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
tabBtns.forEach(b => {
b.classList.remove('border-primary-600', 'text-primary-600');
});
btn.classList.add('border-primary-600', 'text-primary-600');
const tabBtn = e.target.closest('.tab-btn');
if (tabBtn) {
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(b => {
b.classList.remove('border-primary-600', 'text-primary-600');
});
});
tabBtn.classList.add('border-primary-600', 'text-primary-600');
// The click will still bubble up and be caught by the Micro-HTMX logic in _layout.html
return;
}
});
</script>
{% endblock %}