82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
|
/**
|
||
|
|
* Adds a macOS-style traffic-light title bar to the top of the page content.
|
||
|
|
* Most pages render inside #wpbody-content (native WP pages and all of
|
||
|
|
* Aurora's own Vue pages, since each mounts its root div there). The
|
||
|
|
* Dashboard is the one exception — DashboardTakeover.php renders it into a
|
||
|
|
* separate #aurora-admin-dashboard-root sibling, above #wpbody (which it
|
||
|
|
* hides), to fully replace the native dashboard, so it gets wrapped in its
|
||
|
|
* own frame to match the card treatment #wpbody-content already has. The
|
||
|
|
* block editor bypasses both (see SiteShell.vue isBlockEditor), so it's
|
||
|
|
* skipped there.
|
||
|
|
*
|
||
|
|
* Red closes (navigates back to the Aurora dashboard). Yellow minimizes —
|
||
|
|
* on any page other than the dashboard, that means "save where I am and
|
||
|
|
* send me home", with SiteShell.vue's taskbar offering a way back; on the
|
||
|
|
* dashboard itself (already home) it just collapses in place instead,
|
||
|
|
* since there's nowhere further back to send it. Green hides Aurora's own
|
||
|
|
* sidebar/toolbar so the content fills the browser window. All of this is
|
||
|
|
* just classes on <html> plus one sessionStorage entry (taskbar.js) — no
|
||
|
|
* server-side state.
|
||
|
|
*/
|
||
|
|
import { setMinimizedWindow, currentPageTitle } from './taskbar.js';
|
||
|
|
|
||
|
|
export function initWindowChrome(adminUrl) {
|
||
|
|
if (document.querySelector('.aurora-winbar')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const bar = document.createElement('div');
|
||
|
|
bar.className = 'aurora-winbar';
|
||
|
|
|
||
|
|
const makeDot = (variant, label, onClick) => {
|
||
|
|
const dot = document.createElement('button');
|
||
|
|
dot.type = 'button';
|
||
|
|
dot.className = 'aurora-winbar__dot aurora-winbar__dot--' + variant;
|
||
|
|
dot.setAttribute('aria-label', label);
|
||
|
|
dot.title = label;
|
||
|
|
dot.addEventListener('click', onClick);
|
||
|
|
return dot;
|
||
|
|
};
|
||
|
|
|
||
|
|
const root = document.documentElement;
|
||
|
|
const dashboardRoot = document.getElementById('aurora-admin-dashboard-root');
|
||
|
|
const isDashboard = !!dashboardRoot;
|
||
|
|
|
||
|
|
bar.appendChild(
|
||
|
|
makeDot('close', 'Close', () => {
|
||
|
|
window.location.href = adminUrl || '/wp-admin/';
|
||
|
|
})
|
||
|
|
);
|
||
|
|
bar.appendChild(
|
||
|
|
makeDot('minimize', 'Minimize', () => {
|
||
|
|
if (isDashboard) {
|
||
|
|
root.classList.toggle('aurora-minimized');
|
||
|
|
root.classList.remove('aurora-maximized');
|
||
|
|
} else {
|
||
|
|
setMinimizedWindow(currentPageTitle(), window.location.href);
|
||
|
|
window.location.href = adminUrl || '/wp-admin/';
|
||
|
|
}
|
||
|
|
})
|
||
|
|
);
|
||
|
|
bar.appendChild(
|
||
|
|
makeDot('maximize', 'Maximize', () => {
|
||
|
|
root.classList.toggle('aurora-maximized');
|
||
|
|
root.classList.remove('aurora-minimized');
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
if (dashboardRoot) {
|
||
|
|
const frame = document.createElement('div');
|
||
|
|
frame.className = 'aurora-dashboard-frame';
|
||
|
|
dashboardRoot.parentNode.insertBefore(frame, dashboardRoot);
|
||
|
|
frame.appendChild(bar);
|
||
|
|
frame.appendChild(dashboardRoot);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const wpbodyContent = document.getElementById('wpbody-content');
|
||
|
|
if (wpbodyContent) {
|
||
|
|
wpbodyContent.insertBefore(bar, wpbodyContent.firstChild);
|
||
|
|
}
|
||
|
|
}
|