Bring every tool's header in line with archive's pattern: [logo] [title] [version] [Add Local Directory] [⟳] ............... [◐] [?] ------------- header-left --------------- ----- header-right - Changes per tool: * browse: rename "Select Directory" → "Add Local Directory"; add the red-non-stable wrap to the build label (was missing); add a help panel + bundle shared/help.js. * classifier: rename selectDirectoryBtn → addDirectoryBtn, refreshBtn → refreshHeaderBtn for consistency. Update all JS callers and welcome-screen copy to the new label. * mdedit: same id rename. Move the previously-in-pane refresh button into the header. Stop renaming the dir button to "Directory: <name>" once a folder is loaded — instead use the shared btn--subtle variant to de-emphasize while keeping the standard label. * transmittal: convert non-standard <div class="app-header"> with spacer/icons containers to <header class="app-header"> with the canonical header-left/header-right pair. Move the publish split- button into header-left (Transmittal-specific primary action). Remove dead .app-header__spacer/__icons/header-icon-btn CSS now that nothing references those classes. * landing, form: add help-btn + help-panel + bundle shared/help.js. Each panel is tool-specific (project picker docs for landing, schema-driven form docs for form). Cross-cutting: * shared/base.css: promote .btn--subtle from browse/css/tree.css so any tool with an online mode can de-emphasize Add Local Directory consistently. Verified all 7 tools in headless Chromium: header structure correct, build label red on non-stable cuts, help panel opens + closes via button + Esc.
81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
/**
|
|
* Event listeners setup
|
|
*/
|
|
|
|
/**
|
|
* Set up all event listeners for the application
|
|
*/
|
|
function setupEventListeners() {
|
|
// Add Local Directory button (was id="select-directory" / "refresh-directory")
|
|
const selectDirectoryBtn = document.getElementById('addDirectoryBtn');
|
|
if (selectDirectoryBtn) {
|
|
selectDirectoryBtn.addEventListener('click', openDirectory);
|
|
}
|
|
|
|
// Refresh button (now in header, was in file-nav pane)
|
|
const refreshDirectoryBtn = document.getElementById('refreshHeaderBtn');
|
|
if (refreshDirectoryBtn) {
|
|
refreshDirectoryBtn.addEventListener('click', refreshDirectory);
|
|
}
|
|
|
|
// New file (root) button
|
|
const newFileRootBtn = document.getElementById('new-file-root');
|
|
if (newFileRootBtn) {
|
|
newFileRootBtn.addEventListener('click', () => {
|
|
if (directoryHandle) {
|
|
createNewFile('');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Save All button
|
|
const saveAllBtn = document.getElementById('save-all');
|
|
if (saveAllBtn) {
|
|
saveAllBtn.addEventListener('click', saveAllFiles);
|
|
}
|
|
|
|
// Warn when leaving with unsaved changes
|
|
window.addEventListener('beforeunload', function (e) {
|
|
let hasUnsavedChanges = false;
|
|
|
|
editorInstances.forEach((instanceData) => {
|
|
if (instanceData.isDirty) {
|
|
hasUnsavedChanges = true;
|
|
}
|
|
});
|
|
|
|
if (hasUnsavedChanges) {
|
|
e.preventDefault();
|
|
return 'You have unsaved changes. If you leave now, your changes will be lost.';
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set up TOC depth selector
|
|
*/
|
|
function setupTocDepthSelector() {
|
|
const depthSelector = document.getElementById('toc-depth-selector');
|
|
if (!depthSelector) return;
|
|
|
|
depthSelector.value = tocMaxDepth.toString();
|
|
|
|
depthSelector.addEventListener('change', function () {
|
|
tocMaxDepth = parseInt(this.value, 10);
|
|
|
|
if (currentFileHandle && currentFileHandle.name.match(/\.(md|markdown)$/i)) {
|
|
const filePath = currentFileHandle.name;
|
|
const instance = editorInstances.get(filePath);
|
|
|
|
if (instance && instance.editor && instance.tocContainer) {
|
|
const content = instance.editor.getMarkdown();
|
|
|
|
try {
|
|
window.updateToc(content, instance.tocContainer, instance.editor, tocMaxDepth);
|
|
} catch (error) {
|
|
console.error('Error updating TOC depth:', error);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|