feat: extract bookmarks as standalone module with MintyPHP\Module\Bookmarks namespace
Moves bookmarks from core hardcoding into modules/bookmarks/ as a
fully self-contained module, following the same pattern as addressbook.
Module contributions via platform slots:
- aside.tab_panel: bookmark sidebar panel
- topbar.right_item: bookmark toggle button
- layout.body_end_template: bookmark/group dialogs
- layout.head_style: bookmark CSS (form + sidebar)
- runtime.component: bookmark-save and bookmark-panel (phase: late)
- search.resource_item: bookmarks in global search (user-scoped via {{userId}})
Backend fully in module namespace (MintyPHP\Module\Bookmarks\*):
- Service: BookmarkService, BookmarkServicesFactory, BookmarkRepositoryFactory
- Repository: BookmarkRepository, BookmarkGroupRepository, BookmarkNavigationRepository
- Support: BookmarkUrlNormalizer
- Providers: BookmarksSessionProvider, BookmarksLayoutProvider, BookmarksSearchProvider
Core cleanup:
- Removed all bookmark-specific markup from core templates
- Removed core DI registrations for bookmark services
- Removed core bookmark pages, JS, CSS
- AuthSessionTenantContextService delegates to module SessionProvider
Architecture guards:
- NoBookmarksHardcodingTest: verifies zero bookmark references in core
- testModuleClassesUseModuleNamespace: prevents core namespace leakage
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
529
modules/bookmarks/web/js/components/app-bookmark-panel.js
Normal file
529
modules/bookmarks/web/js/components/app-bookmark-panel.js
Normal file
@@ -0,0 +1,529 @@
|
||||
/**
|
||||
* Sidebar bookmarks panel actions:
|
||||
* - Reorder root navigation (groups + ungrouped bookmarks) via up/down
|
||||
* - Reorder bookmarks inside groups (up/down)
|
||||
* - Edit/Delete groups and bookmarks with confirm dialog
|
||||
*/
|
||||
import { showAsyncFlash } from '../../../../js/components/app-async-flash.js';
|
||||
import { warnOnce, resolveHost } from '../../../../js/core/app-dom.js';
|
||||
import { confirmDialog } from '../../../../js/core/app-confirm-dialog.js';
|
||||
|
||||
export function initBookmarkPanel(root = document, options = {}) {
|
||||
const host = resolveHost(root);
|
||||
const panelSelector = String(options.selector || '[data-aside-panel="bookmarks"]').trim() || '[data-aside-panel="bookmarks"]';
|
||||
const panel = host.matches?.(panelSelector) ? host : host.querySelector(panelSelector);
|
||||
if (!(panel instanceof HTMLElement)) {
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
if (panel.dataset.bookmarkPanelBound === '1' && panel._bookmarkPanelApi) {
|
||||
return panel._bookmarkPanelApi;
|
||||
}
|
||||
|
||||
const reorderUrl = String(panel.dataset.bookmarkReorderUrl || '').trim();
|
||||
const groupDeleteUrl = String(panel.dataset.bookmarkGroupDeleteUrl || '').trim();
|
||||
const bookmarkDeleteUrl = String(panel.dataset.bookmarkDeleteUrl || '').trim();
|
||||
if (!reorderUrl || !groupDeleteUrl || !bookmarkDeleteUrl) {
|
||||
warnOnce('UI_DATA_MISSING', 'Missing bookmark panel endpoint metadata', { module: 'bookmark-panel' });
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
|
||||
const documentRoot = document.documentElement;
|
||||
const csrfKey = String(documentRoot.dataset.csrfKey || '').trim();
|
||||
const csrfToken = String(documentRoot.dataset.csrfToken || '').trim();
|
||||
if (!csrfKey || !csrfToken) {
|
||||
warnOnce('UI_DATA_MISSING', 'Missing CSRF metadata for bookmark panel', { module: 'bookmark-panel' });
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
const abortController = new AbortController();
|
||||
const { signal } = abortController;
|
||||
const timerIds = [];
|
||||
|
||||
const messageDeleteConfirm = panel.dataset.bookmarkMsgGroupDeleteConfirm || 'Delete group and keep bookmarks?';
|
||||
const messageGroupDeleted = panel.dataset.bookmarkMsgGroupDeleted || 'Group deleted';
|
||||
const messageGroupDeleteFailed = panel.dataset.bookmarkMsgGroupDeleteFailed || 'Group delete failed';
|
||||
const messageBookmarkDeleteConfirm = panel.dataset.bookmarkMsgBookmarkDeleteConfirm || 'Delete this bookmark?';
|
||||
const messageBookmarkDeleted = panel.dataset.bookmarkMsgBookmarkDeleted || 'Bookmark deleted';
|
||||
const messageBookmarkDeleteFailed = panel.dataset.bookmarkMsgBookmarkDeleteFailed || 'Bookmark action failed';
|
||||
const messageGroupActionFailed = panel.dataset.bookmarkMsgGroupActionFailed || messageGroupDeleteFailed;
|
||||
const messageBookmarkActionFailed = panel.dataset.bookmarkMsgBookmarkActionFailed || messageBookmarkDeleteFailed;
|
||||
const messageReorderFailed = panel.dataset.bookmarkMsgReorderFailed || 'Reorder failed';
|
||||
const labelDelete = panel.dataset.bookmarkLabelDelete || 'Delete';
|
||||
|
||||
const moduleContext = { module: 'bookmark-panel' };
|
||||
|
||||
panel.querySelectorAll('[data-bookmark-item-action], [data-bookmark-group-action]').forEach((button) => {
|
||||
if (!(button instanceof HTMLButtonElement)) {
|
||||
return;
|
||||
}
|
||||
button.dataset.baseDisabled = button.disabled ? '1' : '0';
|
||||
});
|
||||
|
||||
let pending = false;
|
||||
|
||||
const actionMenus = () => Array.from(panel.querySelectorAll('[data-bookmark-action-menu]'))
|
||||
.filter((menu) => menu instanceof HTMLDetailsElement);
|
||||
|
||||
const closeActionMenus = (except = null) => {
|
||||
actionMenus().forEach((menu) => {
|
||||
if (menu === except) {
|
||||
return;
|
||||
}
|
||||
menu.open = false;
|
||||
});
|
||||
};
|
||||
|
||||
const panelActionButtons = () => Array.from(
|
||||
panel.querySelectorAll('[data-bookmark-item-action], [data-bookmark-group-action]')
|
||||
).filter((button) => button instanceof HTMLButtonElement);
|
||||
|
||||
const setPending = (nextPending) => {
|
||||
pending = nextPending;
|
||||
panelActionButtons().forEach((button) => {
|
||||
const baselineDisabled = button.dataset.baseDisabled === '1';
|
||||
button.disabled = nextPending || baselineDisabled;
|
||||
});
|
||||
};
|
||||
|
||||
const parseJsonSafe = async (response) => {
|
||||
try {
|
||||
return await response.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const reportError = (code, message, details = {}) => {
|
||||
warnOnce(code, message, { ...moduleContext, ...details });
|
||||
showAsyncFlash('error', message);
|
||||
};
|
||||
|
||||
const runReload = (successMessage = '') => {
|
||||
if (String(successMessage).trim() !== '') {
|
||||
showAsyncFlash('success', successMessage, 2500);
|
||||
}
|
||||
const timerId = window.setTimeout(() => window.location.reload(), 450);
|
||||
timerIds.push(timerId);
|
||||
};
|
||||
|
||||
const directChildren = (container, className) => {
|
||||
if (!(container instanceof HTMLElement)) {
|
||||
return [];
|
||||
}
|
||||
return Array.from(container.children).filter(
|
||||
(child) => child instanceof HTMLElement && child.classList.contains(className)
|
||||
);
|
||||
};
|
||||
|
||||
const swapInList = (items, currentItem, direction) => {
|
||||
const currentIndex = items.indexOf(currentItem);
|
||||
if (currentIndex < 0) {
|
||||
return [];
|
||||
}
|
||||
const nextIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
|
||||
if (nextIndex < 0 || nextIndex >= items.length) {
|
||||
return [];
|
||||
}
|
||||
const reordered = items.slice();
|
||||
const temp = reordered[currentIndex];
|
||||
reordered[currentIndex] = reordered[nextIndex];
|
||||
reordered[nextIndex] = temp;
|
||||
return reordered;
|
||||
};
|
||||
|
||||
const buildPairs = (items, dataKey) => {
|
||||
const pairs = [];
|
||||
for (let index = 0; index < items.length; index += 1) {
|
||||
const item = items[index];
|
||||
const id = Number.parseInt(item.dataset[dataKey] || '', 10);
|
||||
if (id <= 0) {
|
||||
return [];
|
||||
}
|
||||
pairs.push({
|
||||
id,
|
||||
sort_order: index + 1
|
||||
});
|
||||
}
|
||||
return pairs;
|
||||
};
|
||||
|
||||
const buildRootPairs = (items) => {
|
||||
const pairs = [];
|
||||
for (let index = 0; index < items.length; index += 1) {
|
||||
const item = items[index];
|
||||
const kind = String(item.dataset.bookmarkRootKind || '').trim();
|
||||
const id = Number.parseInt(item.dataset.bookmarkRootId || '', 10);
|
||||
if ((kind !== 'group' && kind !== 'bookmark') || id <= 0) {
|
||||
return [];
|
||||
}
|
||||
pairs.push({
|
||||
kind,
|
||||
id,
|
||||
sort_order: index + 1
|
||||
});
|
||||
}
|
||||
return pairs;
|
||||
};
|
||||
|
||||
const submitReorder = async (type, pairs) => {
|
||||
if (pairs.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const body = new FormData();
|
||||
body.set(csrfKey, csrfToken);
|
||||
body.set('type', type);
|
||||
body.set('items', JSON.stringify(pairs));
|
||||
|
||||
setPending(true);
|
||||
try {
|
||||
const response = await fetch(reorderUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body
|
||||
});
|
||||
const json = await parseJsonSafe(response);
|
||||
if (!response.ok || !json) {
|
||||
reportError('FETCH_FAILED', messageReorderFailed, { status: response.status, type });
|
||||
return;
|
||||
}
|
||||
if (!json.ok) {
|
||||
reportError('FETCH_FAILED', messageReorderFailed, { error: json.error, type });
|
||||
return;
|
||||
}
|
||||
|
||||
runReload();
|
||||
} catch (error) {
|
||||
reportError('FETCH_ERROR', messageReorderFailed, { error, type });
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const reorderGroup = async (button) => {
|
||||
const groupItem = button.closest('.app-sidebar-bookmark-root-item.app-sidebar-bookmark-group');
|
||||
if (!(groupItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
const container = groupItem.parentElement;
|
||||
const rootItems = directChildren(container, 'app-sidebar-bookmark-root-item');
|
||||
if (rootItems.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const action = String(button.dataset.bookmarkGroupAction || '').trim();
|
||||
const direction = action === 'move-up' ? 'up' : action === 'move-down' ? 'down' : '';
|
||||
if (!direction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reorderedRootItems = swapInList(rootItems, groupItem, direction);
|
||||
if (reorderedRootItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pairs = buildRootPairs(reorderedRootItems);
|
||||
if (pairs.length !== reorderedRootItems.length) {
|
||||
reportError('UI_INVALID_STATE', messageReorderFailed, { action, target: 'root' });
|
||||
return;
|
||||
}
|
||||
|
||||
await submitReorder('root', pairs);
|
||||
};
|
||||
|
||||
const reorderBookmark = async (button) => {
|
||||
const bookmarkItem = button.closest('.app-sidebar-bookmark-item');
|
||||
if (!(bookmarkItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const action = String(button.dataset.bookmarkItemAction || '').trim();
|
||||
const direction = action === 'move-up' ? 'up' : action === 'move-down' ? 'down' : '';
|
||||
if (!direction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scope = String(button.dataset.bookmarkItemActionScope || '').trim();
|
||||
if (scope === 'root') {
|
||||
const rootItem = bookmarkItem.closest('.app-sidebar-bookmark-root-item');
|
||||
if (!(rootItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
const container = rootItem.parentElement;
|
||||
const rootItems = directChildren(container, 'app-sidebar-bookmark-root-item');
|
||||
if (rootItems.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reorderedRootItems = swapInList(rootItems, rootItem, direction);
|
||||
if (reorderedRootItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rootPairs = buildRootPairs(reorderedRootItems);
|
||||
if (rootPairs.length !== reorderedRootItems.length) {
|
||||
reportError('UI_INVALID_STATE', messageReorderFailed, { action, target: 'root' });
|
||||
return;
|
||||
}
|
||||
|
||||
await submitReorder('root', rootPairs);
|
||||
return;
|
||||
}
|
||||
|
||||
const container = bookmarkItem.parentElement;
|
||||
const bookmarks = directChildren(container, 'app-sidebar-bookmark-item');
|
||||
if (bookmarks.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reorderedBookmarks = swapInList(bookmarks, bookmarkItem, direction);
|
||||
if (reorderedBookmarks.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pairs = buildPairs(reorderedBookmarks, 'bookmarkId');
|
||||
if (pairs.length !== reorderedBookmarks.length) {
|
||||
reportError('UI_INVALID_STATE', messageReorderFailed, { action, target: 'bookmarks' });
|
||||
return;
|
||||
}
|
||||
|
||||
await submitReorder('bookmarks', pairs);
|
||||
};
|
||||
|
||||
const deleteGroup = async (button) => {
|
||||
const groupItem = button.closest('.app-sidebar-bookmark-group');
|
||||
if (!(groupItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
const groupId = Number.parseInt(groupItem.dataset.bookmarkGroupId || '', 10);
|
||||
if (groupId <= 0) {
|
||||
reportError('UI_INVALID_STATE', messageGroupDeleteFailed, { reason: 'invalid_group_id' });
|
||||
return;
|
||||
}
|
||||
|
||||
const approved = await confirmDialog.confirm({
|
||||
message: messageDeleteConfirm,
|
||||
confirmLabel: labelDelete,
|
||||
actionKind: 'delete',
|
||||
variant: 'danger',
|
||||
focus: 'cancel'
|
||||
});
|
||||
if (!approved) {
|
||||
return;
|
||||
}
|
||||
|
||||
const body = new FormData();
|
||||
body.set(csrfKey, csrfToken);
|
||||
body.set('id', String(groupId));
|
||||
|
||||
setPending(true);
|
||||
try {
|
||||
const response = await fetch(groupDeleteUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body
|
||||
});
|
||||
const json = await parseJsonSafe(response);
|
||||
if (!response.ok || !json) {
|
||||
reportError('FETCH_FAILED', messageGroupDeleteFailed, { status: response.status, groupId });
|
||||
return;
|
||||
}
|
||||
if (!json.ok) {
|
||||
reportError('FETCH_FAILED', messageGroupDeleteFailed, { error: json.error, groupId });
|
||||
return;
|
||||
}
|
||||
|
||||
runReload(messageGroupDeleted);
|
||||
} catch (error) {
|
||||
reportError('FETCH_ERROR', messageGroupDeleteFailed, { error, groupId });
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteBookmark = async (button) => {
|
||||
const bookmarkItem = button.closest('.app-sidebar-bookmark-item');
|
||||
if (!(bookmarkItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
const bookmarkId = Number.parseInt(bookmarkItem.dataset.bookmarkId || '', 10);
|
||||
if (bookmarkId <= 0) {
|
||||
reportError('UI_INVALID_STATE', messageBookmarkDeleteFailed, { reason: 'invalid_bookmark_id' });
|
||||
return;
|
||||
}
|
||||
|
||||
const approved = await confirmDialog.confirm({
|
||||
message: messageBookmarkDeleteConfirm,
|
||||
confirmLabel: labelDelete,
|
||||
actionKind: 'delete',
|
||||
variant: 'danger',
|
||||
focus: 'cancel'
|
||||
});
|
||||
if (!approved) {
|
||||
return;
|
||||
}
|
||||
|
||||
const body = new FormData();
|
||||
body.set(csrfKey, csrfToken);
|
||||
body.set('id', String(bookmarkId));
|
||||
|
||||
setPending(true);
|
||||
try {
|
||||
const response = await fetch(bookmarkDeleteUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body
|
||||
});
|
||||
const json = await parseJsonSafe(response);
|
||||
if (!response.ok || !json) {
|
||||
reportError('FETCH_FAILED', messageBookmarkDeleteFailed, { status: response.status, bookmarkId });
|
||||
return;
|
||||
}
|
||||
if (!json.ok) {
|
||||
reportError('FETCH_FAILED', messageBookmarkDeleteFailed, { error: json.error, bookmarkId });
|
||||
return;
|
||||
}
|
||||
|
||||
runReload(messageBookmarkDeleted);
|
||||
} catch (error) {
|
||||
reportError('FETCH_ERROR', messageBookmarkDeleteFailed, { error, bookmarkId });
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const editGroup = (button) => {
|
||||
const groupItem = button.closest('.app-sidebar-bookmark-group');
|
||||
if (!(groupItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
const groupId = Number.parseInt(groupItem.dataset.bookmarkGroupId || '', 10);
|
||||
const groupName = String(groupItem.dataset.bookmarkGroupName || '').trim();
|
||||
const groupIcon = String(groupItem.dataset.bookmarkGroupIcon || 'bi-folder').trim() || 'bi-folder';
|
||||
if (groupId <= 0 || !groupName) {
|
||||
reportError('UI_INVALID_STATE', messageGroupActionFailed, { reason: 'invalid_group_payload' });
|
||||
return;
|
||||
}
|
||||
|
||||
document.dispatchEvent(new CustomEvent('app:bookmark-group-edit', {
|
||||
detail: {
|
||||
id: groupId,
|
||||
name: groupName,
|
||||
icon: groupIcon
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const editBookmark = (button) => {
|
||||
const bookmarkItem = button.closest('.app-sidebar-bookmark-item');
|
||||
if (!(bookmarkItem instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bookmarkId = Number.parseInt(bookmarkItem.dataset.bookmarkId || '', 10);
|
||||
const bookmarkName = String(bookmarkItem.dataset.bookmarkName || '').trim();
|
||||
const groupId = Number.parseInt(bookmarkItem.dataset.bookmarkGroupId || '', 10);
|
||||
if (bookmarkId <= 0 || !bookmarkName) {
|
||||
reportError('UI_INVALID_STATE', messageBookmarkActionFailed, { reason: 'invalid_bookmark_payload' });
|
||||
return;
|
||||
}
|
||||
|
||||
document.dispatchEvent(new CustomEvent('app:bookmark-edit', {
|
||||
detail: {
|
||||
id: bookmarkId,
|
||||
name: bookmarkName,
|
||||
groupId: groupId > 0 ? String(groupId) : ''
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
panel.addEventListener('click', (event) => {
|
||||
const target = event.target instanceof HTMLElement ? event.target : null;
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
|
||||
const menuSummary = target.closest('[data-bookmark-action-menu] > summary');
|
||||
if (menuSummary instanceof HTMLElement) {
|
||||
if (pending) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
const menu = menuSummary.parentElement;
|
||||
if (menu instanceof HTMLDetailsElement) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const shouldOpen = !menu.open;
|
||||
closeActionMenus(menu);
|
||||
menu.open = shouldOpen;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (pending) {
|
||||
return;
|
||||
}
|
||||
|
||||
const groupActionButton = target.closest('[data-bookmark-group-action]');
|
||||
if (groupActionButton instanceof HTMLButtonElement) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
closeActionMenus();
|
||||
|
||||
const action = String(groupActionButton.dataset.bookmarkGroupAction || '').trim();
|
||||
if (action === 'edit') {
|
||||
editGroup(groupActionButton);
|
||||
return;
|
||||
}
|
||||
if (action === 'delete') {
|
||||
void deleteGroup(groupActionButton);
|
||||
return;
|
||||
}
|
||||
if (action === 'move-up' || action === 'move-down') {
|
||||
void reorderGroup(groupActionButton);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const itemActionButton = target.closest('[data-bookmark-item-action]');
|
||||
if (itemActionButton instanceof HTMLButtonElement) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
closeActionMenus();
|
||||
const action = String(itemActionButton.dataset.bookmarkItemAction || '').trim();
|
||||
if (action === 'edit') {
|
||||
editBookmark(itemActionButton);
|
||||
return;
|
||||
}
|
||||
if (action === 'delete') {
|
||||
void deleteBookmark(itemActionButton);
|
||||
return;
|
||||
}
|
||||
if (action === 'move-up' || action === 'move-down') {
|
||||
void reorderBookmark(itemActionButton);
|
||||
}
|
||||
}
|
||||
}, { signal });
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!(event.target instanceof Node)) {
|
||||
return;
|
||||
}
|
||||
const clickedInsideMenu = actionMenus().some((menu) => menu.contains(event.target));
|
||||
if (!clickedInsideMenu) {
|
||||
closeActionMenus();
|
||||
}
|
||||
}, { signal });
|
||||
|
||||
const destroy = () => {
|
||||
abortController.abort();
|
||||
timerIds.forEach((timerId) => window.clearTimeout(timerId));
|
||||
timerIds.length = 0;
|
||||
delete panel.dataset.bookmarkPanelBound;
|
||||
delete panel._bookmarkPanelApi;
|
||||
};
|
||||
const api = { destroy };
|
||||
panel.dataset.bookmarkPanelBound = '1';
|
||||
panel._bookmarkPanelApi = api;
|
||||
return api;
|
||||
}
|
||||
632
modules/bookmarks/web/js/components/app-bookmark-save.js
Normal file
632
modules/bookmarks/web/js/components/app-bookmark-save.js
Normal file
@@ -0,0 +1,632 @@
|
||||
/**
|
||||
* app-bookmark-save.js
|
||||
* Bookmark dialog (create/update) + group dialog (create/update).
|
||||
*/
|
||||
|
||||
import { showAsyncFlash } from '../../../../js/components/app-async-flash.js';
|
||||
import { warnOnce, resolveHost } from '../../../../js/core/app-dom.js';
|
||||
import { getAppBase } from '../../../../js/pages/app-list-utils.js';
|
||||
|
||||
export function initBookmarkSave(root = document, options = {}) {
|
||||
const host = resolveHost(root);
|
||||
const openButtonSelector = String(options.openButtonSelector || '[data-bookmark-open-dialog]').trim() || '[data-bookmark-open-dialog]';
|
||||
const bookmarkDialogSelector = String(options.dialogSelector || '[data-app-bookmark-dialog]').trim() || '[data-app-bookmark-dialog]';
|
||||
const groupDialogSelector = String(options.groupDialogSelector || '[data-app-bookmark-group-dialog]').trim() || '[data-app-bookmark-group-dialog]';
|
||||
const openBtn = host.querySelector(openButtonSelector);
|
||||
const bookmarkDialog = host.matches?.(bookmarkDialogSelector)
|
||||
? host
|
||||
: host.querySelector(bookmarkDialogSelector);
|
||||
if (!(bookmarkDialog instanceof HTMLDialogElement)) {
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
if (bookmarkDialog.dataset.bookmarkSaveBound === '1' && bookmarkDialog._bookmarkSaveApi) {
|
||||
return bookmarkDialog._bookmarkSaveApi;
|
||||
}
|
||||
|
||||
const bookmarkForm = bookmarkDialog.querySelector('[data-bookmark-save-form]');
|
||||
if (!(bookmarkForm instanceof HTMLFormElement)) {
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
|
||||
const groupDialog = host.querySelector(groupDialogSelector);
|
||||
const groupForm = groupDialog instanceof HTMLDialogElement
|
||||
? groupDialog.querySelector('[data-bookmark-group-save-form]')
|
||||
: null;
|
||||
const hasGroupDialog = groupDialog instanceof HTMLDialogElement && groupForm instanceof HTMLFormElement;
|
||||
const abortController = new AbortController();
|
||||
const { signal } = abortController;
|
||||
const timerIds = [];
|
||||
|
||||
const documentRoot = document.documentElement;
|
||||
const csrfKey = String(documentRoot.dataset.csrfKey || '').trim();
|
||||
const csrfToken = String(documentRoot.dataset.csrfToken || '').trim();
|
||||
const moduleContext = { module: 'bookmark-save' };
|
||||
|
||||
if (!csrfKey || !csrfToken) {
|
||||
warnOnce('UI_DATA_MISSING', 'Missing CSRF metadata for bookmark dialog', moduleContext);
|
||||
return { destroy: () => {} };
|
||||
}
|
||||
|
||||
const nameInput = bookmarkForm.querySelector('input[name="name"]');
|
||||
const groupSelect = bookmarkForm.querySelector('[data-bookmark-group-select]');
|
||||
const newGroupBtn = bookmarkForm.querySelector('[data-bookmark-new-group]');
|
||||
const closeBookmarkBtns = bookmarkDialog.querySelectorAll('[data-bookmark-dialog-close]');
|
||||
const submitBtn = bookmarkDialog.querySelector('[data-bookmark-submit-label]');
|
||||
const titleEl = bookmarkDialog.querySelector('#app-bookmark-dialog-title');
|
||||
|
||||
const maxBookmarkMessage = bookmarkDialog.dataset.maxMessage || '';
|
||||
const bookmarkMessageSaved = bookmarkDialog.dataset.msgSaved || 'Bookmark saved';
|
||||
const bookmarkMessageUpdated = bookmarkDialog.dataset.msgUpdated || 'Bookmark updated';
|
||||
const bookmarkMessageErrorGeneric = bookmarkDialog.dataset.msgErrorGeneric || 'Bookmark action failed';
|
||||
const bookmarkMessageNameRequired = bookmarkDialog.dataset.msgNameRequired || 'Bookmark name is required';
|
||||
const bookmarkApiErrorMessages = {
|
||||
name_required: bookmarkDialog.dataset.msgNameRequired || bookmarkMessageErrorGeneric,
|
||||
url_required: bookmarkDialog.dataset.msgUrlRequired || bookmarkMessageErrorGeneric,
|
||||
group_not_found: bookmarkDialog.dataset.msgGroupNotFound || bookmarkMessageErrorGeneric,
|
||||
not_found: bookmarkMessageErrorGeneric,
|
||||
create_failed: bookmarkMessageErrorGeneric,
|
||||
update_failed: bookmarkMessageErrorGeneric
|
||||
};
|
||||
|
||||
let editingBookmarkId = null;
|
||||
let bookmarkReturnState = null;
|
||||
|
||||
let groupEditingId = null;
|
||||
let groupMode = 'create';
|
||||
let groupSource = 'sidebar';
|
||||
|
||||
const syncModalBodyClass = () => {
|
||||
const isOpen = bookmarkDialog.open || (hasGroupDialog && groupDialog.open);
|
||||
document.body.classList.toggle('modal-is-open', isOpen);
|
||||
};
|
||||
|
||||
const reportError = (code, message, details = {}) => {
|
||||
warnOnce(code, message, { ...moduleContext, ...details });
|
||||
showAsyncFlash('error', message);
|
||||
};
|
||||
|
||||
const parseJsonSafe = async (response) => {
|
||||
try {
|
||||
return await response.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const resolveBookmarkApiErrorMessage = (errorCode) => {
|
||||
if (!errorCode) return bookmarkMessageErrorGeneric;
|
||||
return bookmarkApiErrorMessages[errorCode] || bookmarkMessageErrorGeneric;
|
||||
};
|
||||
|
||||
const runReloadWithSuccess = (message) => {
|
||||
showAsyncFlash('success', message, 2500);
|
||||
const timerId = window.setTimeout(() => window.location.reload(), 450);
|
||||
timerIds.push(timerId);
|
||||
};
|
||||
|
||||
const closeBookmarkDialog = () => {
|
||||
try {
|
||||
if (bookmarkDialog.open) bookmarkDialog.close();
|
||||
} catch {
|
||||
// no-op
|
||||
}
|
||||
bookmarkForm.removeAttribute('aria-busy');
|
||||
syncModalBodyClass();
|
||||
};
|
||||
|
||||
const openBookmarkDialog = () => {
|
||||
try {
|
||||
bookmarkDialog.showModal();
|
||||
syncModalBodyClass();
|
||||
return true;
|
||||
} catch (error) {
|
||||
reportError('UI_DIALOG_OPEN_FAILED', bookmarkMessageErrorGeneric, { error });
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const setBookmarkSubmitPending = (pending) => {
|
||||
if (submitBtn instanceof HTMLButtonElement) {
|
||||
submitBtn.disabled = pending;
|
||||
}
|
||||
bookmarkForm.setAttribute('aria-busy', pending ? 'true' : 'false');
|
||||
};
|
||||
|
||||
const setBookmarkSubmitLabel = (label) => {
|
||||
if (!(submitBtn instanceof HTMLElement)) return;
|
||||
const text = String(label || '').trim();
|
||||
if (!text) return;
|
||||
submitBtn.textContent = text;
|
||||
};
|
||||
|
||||
const applyBookmarkModeUi = (isEditMode) => {
|
||||
if (titleEl) {
|
||||
titleEl.textContent = isEditMode
|
||||
? (bookmarkDialog.dataset.titleEdit || 'Bookmarks')
|
||||
: (bookmarkDialog.dataset.titleCreate || 'Bookmarks');
|
||||
}
|
||||
setBookmarkSubmitLabel(isEditMode
|
||||
? (bookmarkDialog.dataset.labelUpdate || 'Save')
|
||||
: (bookmarkDialog.dataset.labelSave || 'Save'));
|
||||
};
|
||||
|
||||
const configureBookmarkModeFromTopbar = () => {
|
||||
if (!(openBtn instanceof HTMLButtonElement)) {
|
||||
applyBookmarkModeUi(false);
|
||||
editingBookmarkId = null;
|
||||
bookmarkForm.reset();
|
||||
if (nameInput) {
|
||||
const title = document.title.replace(/\s*[|–—].*$/, '').trim();
|
||||
nameInput.value = title || '';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const isEditMode = openBtn.hasAttribute('data-bookmark-existing-id');
|
||||
applyBookmarkModeUi(isEditMode);
|
||||
|
||||
if (isEditMode) {
|
||||
editingBookmarkId = openBtn.dataset.bookmarkExistingId || null;
|
||||
if (nameInput) nameInput.value = openBtn.dataset.bookmarkExistingName || '';
|
||||
if (groupSelect) groupSelect.value = openBtn.dataset.bookmarkExistingGroup || '';
|
||||
return;
|
||||
}
|
||||
|
||||
editingBookmarkId = null;
|
||||
bookmarkForm.reset();
|
||||
if (nameInput) {
|
||||
const title = document.title.replace(/\s*[|–—].*$/, '').trim();
|
||||
nameInput.value = title || '';
|
||||
}
|
||||
};
|
||||
|
||||
const openBookmarkEditFromSidebar = (detail) => {
|
||||
const bookmarkId = Number.parseInt(String(detail?.id ?? ''), 10);
|
||||
const bookmarkName = String(detail?.name ?? '').trim();
|
||||
const groupId = String(detail?.groupId ?? '').trim();
|
||||
if (bookmarkId <= 0 || !bookmarkName) {
|
||||
reportError('UI_INVALID_STATE', bookmarkMessageErrorGeneric, { detail });
|
||||
return;
|
||||
}
|
||||
|
||||
editingBookmarkId = String(bookmarkId);
|
||||
applyBookmarkModeUi(true);
|
||||
if (nameInput instanceof HTMLInputElement) {
|
||||
nameInput.value = bookmarkName;
|
||||
}
|
||||
if (groupSelect instanceof HTMLSelectElement) {
|
||||
groupSelect.value = groupId;
|
||||
}
|
||||
|
||||
if (openBookmarkDialog() && nameInput instanceof HTMLInputElement) {
|
||||
nameInput.focus();
|
||||
nameInput.select();
|
||||
}
|
||||
};
|
||||
|
||||
const captureBookmarkState = () => ({
|
||||
isEditMode: editingBookmarkId !== null && editingBookmarkId !== '',
|
||||
bookmarkId: editingBookmarkId,
|
||||
name: nameInput instanceof HTMLInputElement ? nameInput.value : '',
|
||||
groupId: groupSelect instanceof HTMLSelectElement ? groupSelect.value : ''
|
||||
});
|
||||
|
||||
const restoreBookmarkFromState = (selectedGroupId = null) => {
|
||||
const state = bookmarkReturnState;
|
||||
bookmarkReturnState = null;
|
||||
if (!state) {
|
||||
return;
|
||||
}
|
||||
|
||||
applyBookmarkModeUi(Boolean(state.isEditMode));
|
||||
editingBookmarkId = state.isEditMode ? state.bookmarkId : null;
|
||||
if (nameInput instanceof HTMLInputElement) {
|
||||
nameInput.value = state.name || '';
|
||||
}
|
||||
if (groupSelect instanceof HTMLSelectElement) {
|
||||
groupSelect.value = selectedGroupId ?? state.groupId ?? '';
|
||||
}
|
||||
|
||||
if (openBookmarkDialog() && nameInput instanceof HTMLInputElement) {
|
||||
nameInput.focus();
|
||||
nameInput.select();
|
||||
}
|
||||
};
|
||||
|
||||
// Bookmark dialog open
|
||||
if (openBtn instanceof HTMLButtonElement) {
|
||||
openBtn.addEventListener('click', () => {
|
||||
configureBookmarkModeFromTopbar();
|
||||
if (openBookmarkDialog() && nameInput instanceof HTMLInputElement) {
|
||||
nameInput.select();
|
||||
}
|
||||
}, { signal });
|
||||
}
|
||||
|
||||
document.addEventListener('app:bookmark-edit', (event) => {
|
||||
const detail = event instanceof CustomEvent ? event.detail : null;
|
||||
openBookmarkEditFromSidebar(detail);
|
||||
}, { signal });
|
||||
|
||||
closeBookmarkBtns.forEach((btn) => {
|
||||
btn.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
closeBookmarkDialog();
|
||||
}, { signal });
|
||||
});
|
||||
|
||||
bookmarkDialog.addEventListener('click', (event) => {
|
||||
if (event.target === bookmarkDialog) {
|
||||
closeBookmarkDialog();
|
||||
}
|
||||
}, { signal });
|
||||
bookmarkDialog.addEventListener('close', () => {
|
||||
bookmarkForm.removeAttribute('aria-busy');
|
||||
syncModalBodyClass();
|
||||
}, { signal });
|
||||
bookmarkDialog.addEventListener('cancel', () => {
|
||||
bookmarkForm.removeAttribute('aria-busy');
|
||||
syncModalBodyClass();
|
||||
}, { signal });
|
||||
|
||||
// Save bookmark
|
||||
bookmarkForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const name = nameInput instanceof HTMLInputElement ? nameInput.value.trim() : '';
|
||||
if (!name) {
|
||||
showAsyncFlash('warning', bookmarkMessageNameRequired);
|
||||
return;
|
||||
}
|
||||
|
||||
const body = new FormData();
|
||||
body.set(csrfKey, csrfToken);
|
||||
body.set('name', name);
|
||||
body.set('group_id', groupSelect instanceof HTMLSelectElement ? groupSelect.value : '');
|
||||
|
||||
setBookmarkSubmitPending(true);
|
||||
if (editingBookmarkId) {
|
||||
body.set('id', editingBookmarkId);
|
||||
try {
|
||||
const response = await fetch(getAppBase() + 'bookmarks/update-data', {
|
||||
method: 'POST',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body
|
||||
});
|
||||
const json = await parseJsonSafe(response);
|
||||
if (!response.ok || !json) {
|
||||
reportError('FETCH_FAILED', bookmarkMessageErrorGeneric, { status: response.status });
|
||||
return;
|
||||
}
|
||||
if (!json.ok) {
|
||||
reportError('FETCH_FAILED', resolveBookmarkApiErrorMessage(json.error), { error: json.error });
|
||||
return;
|
||||
}
|
||||
|
||||
closeBookmarkDialog();
|
||||
runReloadWithSuccess(bookmarkMessageUpdated);
|
||||
} catch (error) {
|
||||
reportError('FETCH_ERROR', bookmarkMessageErrorGeneric, { error });
|
||||
} finally {
|
||||
setBookmarkSubmitPending(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
body.set('url', currentRelativeUrl());
|
||||
try {
|
||||
const response = await fetch(getAppBase() + 'bookmarks/save-data', {
|
||||
method: 'POST',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body
|
||||
});
|
||||
const json = await parseJsonSafe(response);
|
||||
if (!response.ok || !json) {
|
||||
reportError('FETCH_FAILED', bookmarkMessageErrorGeneric, { status: response.status });
|
||||
return;
|
||||
}
|
||||
if (!json.ok) {
|
||||
if (json.error === 'max_reached') {
|
||||
showAsyncFlash('warning', maxBookmarkMessage || 'Maximum bookmarks reached');
|
||||
return;
|
||||
}
|
||||
reportError('FETCH_FAILED', resolveBookmarkApiErrorMessage(json.error), { error: json.error });
|
||||
return;
|
||||
}
|
||||
|
||||
closeBookmarkDialog();
|
||||
runReloadWithSuccess(json.mode === 'updated' ? bookmarkMessageUpdated : bookmarkMessageSaved);
|
||||
} catch (error) {
|
||||
reportError('FETCH_ERROR', bookmarkMessageErrorGeneric, { error });
|
||||
} finally {
|
||||
setBookmarkSubmitPending(false);
|
||||
}
|
||||
}, { signal });
|
||||
|
||||
const destroy = () => {
|
||||
abortController.abort();
|
||||
timerIds.forEach((timerId) => window.clearTimeout(timerId));
|
||||
timerIds.length = 0;
|
||||
bookmarkForm.removeAttribute('aria-busy');
|
||||
delete bookmarkDialog.dataset.bookmarkSaveBound;
|
||||
delete bookmarkDialog._bookmarkSaveApi;
|
||||
};
|
||||
const api = { destroy };
|
||||
bookmarkDialog.dataset.bookmarkSaveBound = '1';
|
||||
bookmarkDialog._bookmarkSaveApi = api;
|
||||
|
||||
if (!hasGroupDialog) {
|
||||
return api;
|
||||
}
|
||||
|
||||
const groupNameInput = groupForm.querySelector('input[name="name"]');
|
||||
const groupIconInput = groupForm.querySelector('input[name="icon"]');
|
||||
const groupIconPicker = groupForm.querySelector('[data-bookmark-group-icon-picker]');
|
||||
const groupCloseBtns = groupDialog.querySelectorAll('[data-bookmark-group-dialog-close]');
|
||||
const groupTitleEl = groupDialog.querySelector('#app-bookmark-group-dialog-title');
|
||||
const groupSubmitBtn = groupDialog.querySelector('[data-bookmark-group-submit-label]');
|
||||
|
||||
const groupMessageCreated = groupDialog.dataset.msgCreated || 'Group created';
|
||||
const groupMessageUpdated = groupDialog.dataset.msgUpdated || 'Group updated';
|
||||
const groupMessageErrorGeneric = groupDialog.dataset.msgErrorGeneric || 'Group action failed';
|
||||
const groupMessageNameRequired = groupDialog.dataset.msgNameRequired || 'Group name is required';
|
||||
const maxGroupMessage = groupDialog.dataset.maxMessage || 'Maximum groups reached';
|
||||
const groupApiErrorMessages = {
|
||||
name_required: groupMessageNameRequired,
|
||||
not_found: groupMessageErrorGeneric,
|
||||
create_failed: groupMessageErrorGeneric,
|
||||
update_failed: groupMessageErrorGeneric
|
||||
};
|
||||
|
||||
const resolveGroupApiErrorMessage = (errorCode) => {
|
||||
if (!errorCode) return groupMessageErrorGeneric;
|
||||
return groupApiErrorMessages[errorCode] || groupMessageErrorGeneric;
|
||||
};
|
||||
|
||||
const closeGroupDialog = () => {
|
||||
try {
|
||||
if (groupDialog.open) groupDialog.close();
|
||||
} catch {
|
||||
// no-op
|
||||
}
|
||||
groupForm.removeAttribute('aria-busy');
|
||||
syncModalBodyClass();
|
||||
};
|
||||
|
||||
const openGroupDialog = () => {
|
||||
try {
|
||||
groupDialog.showModal();
|
||||
syncModalBodyClass();
|
||||
return true;
|
||||
} catch (error) {
|
||||
reportError('UI_DIALOG_OPEN_FAILED', groupMessageErrorGeneric, { error });
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const setGroupSubmitPending = (pending) => {
|
||||
if (groupSubmitBtn instanceof HTMLButtonElement) {
|
||||
groupSubmitBtn.disabled = pending;
|
||||
}
|
||||
groupForm.setAttribute('aria-busy', pending ? 'true' : 'false');
|
||||
};
|
||||
|
||||
const setGroupSubmitLabel = (label) => {
|
||||
if (!(groupSubmitBtn instanceof HTMLElement)) return;
|
||||
const text = String(label || '').trim();
|
||||
if (!text) return;
|
||||
groupSubmitBtn.textContent = text;
|
||||
};
|
||||
|
||||
const setGroupIcon = (icon) => {
|
||||
const value = String(icon || '').trim() || 'bi-folder';
|
||||
if (groupIconInput instanceof HTMLInputElement) {
|
||||
groupIconInput.value = value;
|
||||
}
|
||||
if (groupIconPicker instanceof HTMLElement) {
|
||||
groupIconPicker.querySelectorAll('.app-bookmark-icon-active').forEach((item) => item.classList.remove('app-bookmark-icon-active'));
|
||||
const selected = groupIconPicker.querySelector(`[data-icon="${value}"]`);
|
||||
if (selected instanceof HTMLElement) {
|
||||
selected.classList.add('app-bookmark-icon-active');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const upsertGroupOption = (group) => {
|
||||
if (!(groupSelect instanceof HTMLSelectElement)) {
|
||||
return;
|
||||
}
|
||||
const id = String(group?.id ?? '').trim();
|
||||
const name = String(group?.name ?? '').trim();
|
||||
if (!id || !name) {
|
||||
return;
|
||||
}
|
||||
|
||||
const existing = Array.from(groupSelect.options).find((option) => option.value === id);
|
||||
if (existing) {
|
||||
existing.textContent = name;
|
||||
} else {
|
||||
const option = document.createElement('option');
|
||||
option.value = id;
|
||||
option.textContent = name;
|
||||
groupSelect.appendChild(option);
|
||||
}
|
||||
};
|
||||
|
||||
const configureGroupDialog = ({ mode, source, id = null, name = '', icon = 'bi-folder', restoreState = null }) => {
|
||||
groupMode = mode === 'edit' ? 'edit' : 'create';
|
||||
groupSource = source === 'bookmark' ? 'bookmark' : 'sidebar';
|
||||
groupEditingId = groupMode === 'edit' ? id : null;
|
||||
bookmarkReturnState = groupSource === 'bookmark' ? restoreState : null;
|
||||
|
||||
groupForm.reset();
|
||||
setGroupIcon(icon);
|
||||
if (groupNameInput instanceof HTMLInputElement) {
|
||||
groupNameInput.value = String(name || '');
|
||||
}
|
||||
|
||||
if (groupTitleEl instanceof HTMLElement) {
|
||||
groupTitleEl.textContent = groupMode === 'edit'
|
||||
? (groupDialog.dataset.titleEdit || 'Edit group')
|
||||
: (groupDialog.dataset.titleCreate || 'New group');
|
||||
}
|
||||
setGroupSubmitLabel(groupMode === 'edit'
|
||||
? (groupDialog.dataset.labelUpdate || 'Save')
|
||||
: (groupDialog.dataset.labelSave || 'Save'));
|
||||
};
|
||||
|
||||
const handleGroupCancel = () => {
|
||||
closeGroupDialog();
|
||||
if (groupSource === 'bookmark' && bookmarkReturnState) {
|
||||
restoreBookmarkFromState();
|
||||
} else {
|
||||
bookmarkReturnState = null;
|
||||
}
|
||||
};
|
||||
|
||||
const openCreateGroupFromBookmarkDialog = () => {
|
||||
const state = captureBookmarkState();
|
||||
closeBookmarkDialog();
|
||||
configureGroupDialog({
|
||||
mode: 'create',
|
||||
source: 'bookmark',
|
||||
restoreState: state
|
||||
});
|
||||
if (openGroupDialog() && groupNameInput instanceof HTMLInputElement) {
|
||||
groupNameInput.focus();
|
||||
groupNameInput.select();
|
||||
}
|
||||
};
|
||||
|
||||
if (newGroupBtn instanceof HTMLButtonElement) {
|
||||
newGroupBtn.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
openCreateGroupFromBookmarkDialog();
|
||||
}, { signal });
|
||||
}
|
||||
|
||||
if (groupIconPicker instanceof HTMLElement) {
|
||||
groupIconPicker.addEventListener('click', (event) => {
|
||||
const target = event.target instanceof HTMLElement ? event.target.closest('[data-icon]') : null;
|
||||
if (!(target instanceof HTMLElement)) return;
|
||||
event.preventDefault();
|
||||
setGroupIcon(target.dataset.icon || 'bi-folder');
|
||||
}, { signal });
|
||||
}
|
||||
|
||||
groupCloseBtns.forEach((btn) => {
|
||||
btn.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
handleGroupCancel();
|
||||
}, { signal });
|
||||
});
|
||||
|
||||
groupDialog.addEventListener('click', (event) => {
|
||||
if (event.target === groupDialog) {
|
||||
handleGroupCancel();
|
||||
}
|
||||
}, { signal });
|
||||
groupDialog.addEventListener('cancel', (event) => {
|
||||
event.preventDefault();
|
||||
handleGroupCancel();
|
||||
}, { signal });
|
||||
groupDialog.addEventListener('close', () => {
|
||||
groupForm.removeAttribute('aria-busy');
|
||||
syncModalBodyClass();
|
||||
}, { signal });
|
||||
|
||||
document.addEventListener('app:bookmark-group-edit', (event) => {
|
||||
const detail = event instanceof CustomEvent ? event.detail : null;
|
||||
const groupId = Number.parseInt(String(detail?.id ?? ''), 10);
|
||||
const groupName = String(detail?.name ?? '').trim();
|
||||
const groupIcon = String(detail?.icon ?? 'bi-folder').trim() || 'bi-folder';
|
||||
if (groupId <= 0 || !groupName) {
|
||||
reportError('UI_INVALID_STATE', groupMessageErrorGeneric, { detail });
|
||||
return;
|
||||
}
|
||||
|
||||
configureGroupDialog({
|
||||
mode: 'edit',
|
||||
source: 'sidebar',
|
||||
id: groupId,
|
||||
name: groupName,
|
||||
icon: groupIcon
|
||||
});
|
||||
if (openGroupDialog() && groupNameInput instanceof HTMLInputElement) {
|
||||
groupNameInput.focus();
|
||||
groupNameInput.select();
|
||||
}
|
||||
}, { signal });
|
||||
|
||||
groupForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const name = groupNameInput instanceof HTMLInputElement ? groupNameInput.value.trim() : '';
|
||||
if (!name) {
|
||||
showAsyncFlash('warning', groupMessageNameRequired);
|
||||
return;
|
||||
}
|
||||
const icon = groupIconInput instanceof HTMLInputElement ? groupIconInput.value : 'bi-folder';
|
||||
|
||||
const body = new FormData();
|
||||
body.set(csrfKey, csrfToken);
|
||||
body.set('name', name);
|
||||
body.set('icon', icon);
|
||||
if (groupMode === 'edit' && groupEditingId) {
|
||||
body.set('id', String(groupEditingId));
|
||||
}
|
||||
|
||||
setGroupSubmitPending(true);
|
||||
try {
|
||||
const response = await fetch(getAppBase() + 'bookmarks/group-save-data', {
|
||||
method: 'POST',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body
|
||||
});
|
||||
const json = await parseJsonSafe(response);
|
||||
if (!response.ok || !json) {
|
||||
reportError('FETCH_FAILED', groupMessageErrorGeneric, { status: response.status });
|
||||
return;
|
||||
}
|
||||
if (!json.ok) {
|
||||
if (json.error === 'max_reached') {
|
||||
showAsyncFlash('warning', maxGroupMessage);
|
||||
return;
|
||||
}
|
||||
reportError('FETCH_FAILED', resolveGroupApiErrorMessage(json.error), { error: json.error });
|
||||
return;
|
||||
}
|
||||
if (!json.group) {
|
||||
reportError('UI_INVALID_STATE', groupMessageErrorGeneric, { reason: 'missing_group' });
|
||||
return;
|
||||
}
|
||||
|
||||
const mode = json.mode === 'updated' ? 'updated' : 'created';
|
||||
const successMessage = mode === 'updated' ? groupMessageUpdated : groupMessageCreated;
|
||||
|
||||
closeGroupDialog();
|
||||
if (groupSource === 'bookmark') {
|
||||
upsertGroupOption(json.group);
|
||||
restoreBookmarkFromState(String(json.group.id));
|
||||
showAsyncFlash('success', successMessage, 2000);
|
||||
} else {
|
||||
runReloadWithSuccess(successMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
reportError('FETCH_ERROR', groupMessageErrorGeneric, { error });
|
||||
} finally {
|
||||
setGroupSubmitPending(false);
|
||||
}
|
||||
}, { signal });
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
function currentRelativeUrl() {
|
||||
const basePath = new URL(getAppBase()).pathname;
|
||||
const full = window.location.pathname + window.location.search;
|
||||
if (full.startsWith(basePath)) {
|
||||
return full.slice(basePath.length);
|
||||
}
|
||||
return full.replace(/^\//, '');
|
||||
}
|
||||
Reference in New Issue
Block a user