Beter layouting
This commit is contained in:
@@ -195,9 +195,16 @@ body {
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: block;
|
||||
color: #111;
|
||||
font-size: 1.18rem;
|
||||
margin-bottom: 14px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#user-box,
|
||||
@@ -795,3 +802,167 @@ body.editor-mode .editor-metadata-row {
|
||||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Top navigation -------------------------------------------------------- */
|
||||
.top-chrome {
|
||||
position: sticky;
|
||||
z-index: 120;
|
||||
top: 0;
|
||||
margin: -8px 0 20px;
|
||||
padding: 0 0 10px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.account-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
gap: .5rem;
|
||||
min-height: 1.35rem;
|
||||
margin-bottom: 4px;
|
||||
font-size: .82rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.account-bar a,
|
||||
.page-action-links a,
|
||||
.admin-menu a,
|
||||
.sidebar-primary-link {
|
||||
color: var(--wiki-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-bar a:hover,
|
||||
.page-action-links a:hover,
|
||||
.admin-menu a:hover,
|
||||
.sidebar-primary-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navigation-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.navigation-row .breadcrumbs {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-action-links {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: .65rem;
|
||||
white-space: nowrap;
|
||||
font-size: .86rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.sidebar-primary-link {
|
||||
display: block;
|
||||
margin: -4px 0 8px;
|
||||
padding: 2px 0;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.admin-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: .65rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#user-admin-view {
|
||||
max-width: 1040px;
|
||||
}
|
||||
|
||||
/* Wiki image layout extensions. Width itself remains a sanitized inline
|
||||
style generated by wiki.js; these fixed classes only control placement. */
|
||||
.markdown-body img.wiki-image-left,
|
||||
.EasyMDEContainer .editor-preview img.wiki-image-left,
|
||||
.EasyMDEContainer .editor-preview-side img.wiki-image-left {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.markdown-body img.wiki-image-center,
|
||||
.EasyMDEContainer .editor-preview img.wiki-image-center,
|
||||
.EasyMDEContainer .editor-preview-side img.wiki-image-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.markdown-body img.wiki-image-right,
|
||||
.EasyMDEContainer .editor-preview img.wiki-image-right,
|
||||
.EasyMDEContainer .editor-preview-side img.wiki-image-right {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.markdown-body img.wiki-image-float-left,
|
||||
.EasyMDEContainer .editor-preview img.wiki-image-float-left,
|
||||
.EasyMDEContainer .editor-preview-side img.wiki-image-float-left {
|
||||
float: left;
|
||||
margin: .2rem 1rem .75rem 0;
|
||||
}
|
||||
|
||||
.markdown-body img.wiki-image-float-right,
|
||||
.EasyMDEContainer .editor-preview img.wiki-image-float-right,
|
||||
.EasyMDEContainer .editor-preview-side img.wiki-image-float-right {
|
||||
float: right;
|
||||
margin: .2rem 0 .75rem 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.top-chrome {
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.account-bar {
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navigation-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: .35rem;
|
||||
}
|
||||
|
||||
.page-action-links {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* 0.2.12 navigation polish --------------------------------------------- */
|
||||
.account-separator {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Account and page actions are navigation, not push buttons. Keep them on
|
||||
the same visual scale as the breadcrumb. */
|
||||
.account-bar,
|
||||
.page-action-links {
|
||||
font-size: .86rem;
|
||||
}
|
||||
|
||||
.top-chrome {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Keep the page navigation available while reading long documents too. */
|
||||
@media (max-width: 900px) {
|
||||
.top-chrome {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 120;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
+35
-17
@@ -15,13 +15,8 @@
|
||||
<div id="connection-status" class="connection-status hidden" role="status"></div>
|
||||
<div id="app">
|
||||
<aside id="sidebar">
|
||||
<div class="brand">Racket Wiki</div>
|
||||
<div id="user-box"></div>
|
||||
<div class="sidebar-actions">
|
||||
<button id="todo-button" data-tr="todo">Todo</button>
|
||||
<button id="translations-button" class="admin-only hidden" data-tr="translations">Translations</button>
|
||||
<button id="admin-button" class="admin-only hidden" data-tr="users">Users</button>
|
||||
</div>
|
||||
<a id="wiki-brand" class="brand" href="#">Racket Wiki</a>
|
||||
<a id="todo-link" class="sidebar-primary-link" href="#">* <span data-tr="todo-list">Todo list</span></a>
|
||||
<form id="search-form" class="wiki-search" role="search">
|
||||
<input id="search-input" type="search" placeholder="Search wiki" data-tr-placeholder="search-wiki" autocomplete="off" aria-label="Search wiki">
|
||||
</form>
|
||||
@@ -36,7 +31,25 @@
|
||||
</aside>
|
||||
|
||||
<main id="main">
|
||||
<nav id="breadcrumbs" class="breadcrumbs hidden" aria-label="Breadcrumb"></nav>
|
||||
<div id="top-chrome" class="top-chrome">
|
||||
<div id="account-bar" class="account-bar">
|
||||
<span id="account-name"></span>
|
||||
<span class="account-separator" aria-hidden="true">·</span>
|
||||
<span id="account-role" class="muted"></span>
|
||||
<span class="account-separator" aria-hidden="true">·</span>
|
||||
<a id="logout-link" href="#" data-tr="sign-out">Sign out</a>
|
||||
<span class="account-separator admin-only hidden" aria-hidden="true">·</span>
|
||||
<a id="admin-link" class="admin-only hidden" href="#" data-tr="admin">Admin</a>
|
||||
</div>
|
||||
<div class="navigation-row">
|
||||
<nav id="breadcrumbs" class="breadcrumbs hidden" aria-label="Breadcrumb"></nav>
|
||||
<div id="page-action-links" class="page-action-links hidden">
|
||||
<a id="edit-page" class="editor-only hidden" href="#" data-tr="edit">Edit</a>
|
||||
<a id="history-page" href="#" data-tr="history">History</a>
|
||||
<a id="delete-page" class="editor-only danger hidden" href="#" data-tr="delete">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="page-view" class="hidden">
|
||||
<header class="page-header">
|
||||
@@ -44,11 +57,6 @@
|
||||
<h1 id="page-title"></h1>
|
||||
<div id="page-meta" class="muted"></div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button id="edit-page" class="editor-only hidden" data-tr="edit">Edit</button>
|
||||
<button id="history-page" data-tr="history">History</button>
|
||||
<button id="delete-page" class="editor-only danger hidden" data-tr="delete">Delete</button>
|
||||
</div>
|
||||
</header>
|
||||
<article id="markdown-preview" class="markdown-body"></article>
|
||||
<footer id="page-details" class="page-details"></footer>
|
||||
@@ -109,18 +117,28 @@
|
||||
</section>
|
||||
|
||||
<section id="admin-view" class="hidden">
|
||||
<header class="page-header">
|
||||
<h1 data-tr="admin">Admin</h1>
|
||||
</header>
|
||||
<nav class="admin-menu">
|
||||
<a id="admin-users-link" href="#" data-tr="users">Users</a>
|
||||
<a id="admin-translations-link" href="#" data-tr="translations">Translations</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<section id="user-admin-view" class="hidden">
|
||||
<header class="page-header">
|
||||
<h1 data-tr="user-administration">User administration</h1>
|
||||
<button id="close-admin" data-tr="back">Back</button>
|
||||
<a id="close-user-admin" href="#" data-tr="back">Back</a>
|
||||
</header>
|
||||
<form id="new-user-form" class="user-form">
|
||||
<input id="new-username" placeholder="Username" data-tr-placeholder="username" required>
|
||||
<input id="new-display-name" placeholder="Display name" data-tr-placeholder="display-name">
|
||||
<input id="new-password" type="password" placeholder="Initial password" data-tr-placeholder="initial-password" required>
|
||||
<select id="new-role">
|
||||
<option value="reader">reader</option>
|
||||
<option value="editor">editor</option>
|
||||
<option value="admin">admin</option>
|
||||
<option value="reader" data-tr="role-reader">reader</option>
|
||||
<option value="editor" data-tr="role-editor">editor</option>
|
||||
<option value="admin" data-tr="role-admin">admin</option>
|
||||
</select>
|
||||
<button type="submit" data-tr="create-user">Create user</button>
|
||||
</form>
|
||||
|
||||
+129
-48
@@ -9,7 +9,9 @@
|
||||
newPageSlug: null,
|
||||
previousView: "page-view",
|
||||
translations: {},
|
||||
translationPage: "wiki-translations-en"
|
||||
translationPage: "wiki-translations",
|
||||
translationTemplate: "",
|
||||
siteTitle: "Racket Wiki"
|
||||
};
|
||||
|
||||
let easyMDE = null;
|
||||
@@ -17,9 +19,10 @@
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
function show(viewId) {
|
||||
for (const id of ["page-view", "not-found-view", "editor-view", "search-view", "todo-view", "history-view", "admin-view"]) {
|
||||
for (const id of ["page-view", "not-found-view", "editor-view", "search-view", "todo-view", "history-view", "admin-view", "user-admin-view"]) {
|
||||
$(id).classList.toggle("hidden", id !== viewId);
|
||||
}
|
||||
$("page-action-links").classList.toggle("hidden", viewId !== "page-view");
|
||||
document.body.classList.toggle("editor-mode", viewId === "editor-view");
|
||||
}
|
||||
|
||||
@@ -98,8 +101,45 @@
|
||||
return body;
|
||||
}
|
||||
|
||||
function applyImageWidthMarkup(html) {
|
||||
const imageOptionsSuffix = /(<img\b[^>]*>)\s*\{\s*width\s*=\s*([0-9]+(?:\.[0-9]+)?)(%|px)?(?:\s+(left|center|right))?(?:\s+(float))?(?:\s+float\s*=\s*(left|right))?\s*\}/gi;
|
||||
|
||||
return (html || "").replace(imageOptionsSuffix, (_match, imageTag, amount, unit, align, floatFlag, floatSide) => {
|
||||
const width = `${amount}${unit || "px"}`;
|
||||
const closing = imageTag.endsWith("/>") ? "/>" : ">";
|
||||
let tagBody = imageTag.slice(0, imageTag.length - closing.length);
|
||||
const classes = [];
|
||||
const effectiveFloatSide = floatSide || (floatFlag && (align === "left" || align === "right") ? align : null);
|
||||
|
||||
if (effectiveFloatSide) {
|
||||
classes.push(`wiki-image-float-${effectiveFloatSide}`);
|
||||
} else if (align) {
|
||||
classes.push(`wiki-image-${align}`);
|
||||
}
|
||||
|
||||
if (/\sstyle=(['"])(.*?)\1/i.test(tagBody)) {
|
||||
tagBody = tagBody.replace(/\sstyle=(['"])(.*?)\1/i, (_style, quote, value) =>
|
||||
` style=${quote}${value}; width: ${width}${quote}`);
|
||||
} else {
|
||||
tagBody += ` style="width: ${width}"`;
|
||||
}
|
||||
|
||||
if (classes.length > 0) {
|
||||
if (/\sclass=(['"])(.*?)\1/i.test(tagBody)) {
|
||||
tagBody = tagBody.replace(/\sclass=(['"])(.*?)\1/i, (_class, quote, value) =>
|
||||
` class=${quote}${value} ${classes.join(" ")}${quote}`);
|
||||
} else {
|
||||
tagBody += ` class="${classes.join(" ")}"`;
|
||||
}
|
||||
}
|
||||
|
||||
return `${tagBody}${closing}`;
|
||||
});
|
||||
}
|
||||
|
||||
function renderMarkdown(markdown) {
|
||||
return easyMDE.markdown(expandTodoMarkup(markdown || ""));
|
||||
const html = easyMDE.markdown(expandTodoMarkup(markdown || ""));
|
||||
return DOMPurify.sanitize(applyImageWidthMarkup(html));
|
||||
}
|
||||
|
||||
function slugTitle(slug) {
|
||||
@@ -261,7 +301,7 @@
|
||||
.then(onSuccess)
|
||||
.catch((error) => onError(error.message));
|
||||
},
|
||||
previewRender: (plainText) => easyMDE ? easyMDE.markdown(expandTodoMarkup(plainText)) : "",
|
||||
previewRender: (plainText) => easyMDE ? renderMarkdown(plainText) : "",
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
hljs: window.hljs,
|
||||
@@ -474,7 +514,7 @@
|
||||
|
||||
function pageBreadcrumbs(page, suffix = null) {
|
||||
const items = [
|
||||
{ label: "Racket Wiki", href: "/" },
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: page?.title || page?.slug || "New page" }
|
||||
];
|
||||
|
||||
@@ -486,6 +526,25 @@
|
||||
renderBreadcrumbs(items);
|
||||
}
|
||||
|
||||
function startPage() {
|
||||
const namedStartPage = state.pages.find((page) => page.slug === "start") || null;
|
||||
if (namedStartPage) return namedStartPage;
|
||||
if (state.pages.length === 0) return null;
|
||||
|
||||
return state.pages.reduce((first, page) => {
|
||||
if (!first) return page;
|
||||
return Number(page.createdAt) < Number(first.createdAt) ? page : first;
|
||||
}, null);
|
||||
}
|
||||
|
||||
function updateWikiIdentity() {
|
||||
const firstPage = startPage();
|
||||
state.siteTitle = firstPage?.title || "Racket Wiki";
|
||||
$("wiki-brand").textContent = state.siteTitle;
|
||||
$("wiki-brand").href = firstPage ? `#/${encodeURIComponent(firstPage.slug)}` : "#";
|
||||
document.title = state.siteTitle;
|
||||
}
|
||||
|
||||
function renderPageList() {
|
||||
const list = $("page-list");
|
||||
list.replaceChildren();
|
||||
@@ -506,6 +565,7 @@
|
||||
async function loadPages() {
|
||||
const result = await api("/api/pages");
|
||||
state.pages = result.pages;
|
||||
updateWikiIdentity();
|
||||
renderPageList();
|
||||
}
|
||||
|
||||
@@ -545,14 +605,7 @@
|
||||
$("editor-title").value = translationPage ? tr("translations", "Translations") : "";
|
||||
$("editor-tags").value = "";
|
||||
if (translationPage) {
|
||||
const lines = [
|
||||
"# Translation overrides",
|
||||
"",
|
||||
"Edit only the values after =. Unknown keys are ignored by the UI until they are used.",
|
||||
""
|
||||
];
|
||||
Object.keys(state.translations).sort().forEach((key) => lines.push(`${key} = ${state.translations[key]}`));
|
||||
easyMDE.value(lines.join("\n"));
|
||||
easyMDE.value(state.translationTemplate || "");
|
||||
} else {
|
||||
easyMDE.value("");
|
||||
}
|
||||
@@ -620,6 +673,14 @@
|
||||
state.editingNew = false;
|
||||
state.newPageSlug = null;
|
||||
await loadPages();
|
||||
if (page.slug === state.translationPage) {
|
||||
const translationData = await api("/api/translations");
|
||||
state.language = translationData.language;
|
||||
state.translationTemplate = translationData.template || state.translationTemplate;
|
||||
state.translations = translationData.translations || {};
|
||||
applyTranslations();
|
||||
$("account-role").textContent = tr(`role-${state.session.user.role}`, state.session.user.role);
|
||||
}
|
||||
location.hash = `#/${encodeURIComponent(page.slug)}`;
|
||||
await openPage(page.slug);
|
||||
$("save-status").textContent = tr("saved", "Saved");
|
||||
@@ -730,11 +791,12 @@
|
||||
state.currentPage = null;
|
||||
await loadPages();
|
||||
if (state.pages.length > 0) {
|
||||
location.hash = `#/${encodeURIComponent(state.pages[0].slug)}`;
|
||||
const firstPage = startPage();
|
||||
location.hash = `#/${encodeURIComponent(firstPage.slug)}`;
|
||||
} else {
|
||||
$("page-title").textContent = tr("no-pages", "No pages yet");
|
||||
$("markdown-preview").innerHTML = "";
|
||||
renderBreadcrumbs([{ label: "Racket Wiki" }]);
|
||||
renderBreadcrumbs([{ label: state.siteTitle }]);
|
||||
renderToc([], () => {});
|
||||
show("page-view");
|
||||
}
|
||||
@@ -819,7 +881,7 @@
|
||||
|
||||
const result = await api(`/api/search?q=${encodeURIComponent(text)}`);
|
||||
renderBreadcrumbs([
|
||||
{ label: "Racket Wiki", href: "/" },
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: tr("search", "Search") }
|
||||
]);
|
||||
renderToc([], () => {});
|
||||
@@ -899,10 +961,22 @@
|
||||
});
|
||||
}
|
||||
|
||||
async function loadAdmin() {
|
||||
function showAdmin() {
|
||||
state.previousView = state.currentPage ? "page-view" : "admin-view";
|
||||
renderBreadcrumbs([]);
|
||||
renderBreadcrumbs([
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: tr("admin", "Admin") }
|
||||
]);
|
||||
show("admin-view");
|
||||
}
|
||||
|
||||
async function loadUsersAdmin() {
|
||||
renderBreadcrumbs([
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: tr("admin", "Admin") },
|
||||
{ label: tr("users", "Users") }
|
||||
]);
|
||||
show("user-admin-view");
|
||||
const result = await api("/api/admin/users");
|
||||
const list = $("user-list");
|
||||
list.replaceChildren();
|
||||
@@ -917,7 +991,7 @@
|
||||
for (const roleName of ["reader", "editor", "admin"]) {
|
||||
const option = document.createElement("option");
|
||||
option.value = roleName;
|
||||
option.textContent = roleName;
|
||||
option.textContent = tr(`role-${roleName}`, roleName);
|
||||
option.selected = roleName === user.role;
|
||||
role.append(option);
|
||||
}
|
||||
@@ -949,7 +1023,7 @@
|
||||
remove.addEventListener("click", async () => {
|
||||
if (!confirm(`Delete user ${user.username}?`)) return;
|
||||
await api(`/api/admin/users/${user.id}`, { method: "DELETE" });
|
||||
await loadAdmin();
|
||||
await loadUsersAdmin();
|
||||
});
|
||||
actions.append(save, remove);
|
||||
row.append(username, display, role, enabled, password, actions);
|
||||
@@ -963,7 +1037,7 @@
|
||||
state.newPageSlug = null;
|
||||
$("not-found-message").textContent = `${tr("page-does-not-exist", "The page does not exist.")} (${slug})`;
|
||||
renderBreadcrumbs([
|
||||
{ label: "Racket Wiki", href: "/" },
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: slug }
|
||||
]);
|
||||
show("not-found-view");
|
||||
@@ -980,7 +1054,7 @@
|
||||
$("markdown-preview").innerHTML = "";
|
||||
$("page-details").replaceChildren();
|
||||
renderBreadcrumbs([
|
||||
{ label: "Racket Wiki", href: "/" },
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: slugTitle(slug) || slug }
|
||||
]);
|
||||
show("page-view");
|
||||
@@ -1008,7 +1082,8 @@
|
||||
return;
|
||||
}
|
||||
if (state.pages.length > 0) {
|
||||
location.hash = `#/${encodeURIComponent(state.pages[0].slug)}`;
|
||||
const firstPage = startPage();
|
||||
location.hash = `#/${encodeURIComponent(firstPage.slug)}`;
|
||||
} else {
|
||||
if (can("editor")) {
|
||||
showMissingEditablePage("start");
|
||||
@@ -1017,7 +1092,7 @@
|
||||
$("page-title").textContent = tr("no-pages", "No pages yet");
|
||||
$("page-meta").textContent = "";
|
||||
$("markdown-preview").innerHTML = "";
|
||||
renderBreadcrumbs([{ label: "Racket Wiki" }]);
|
||||
renderBreadcrumbs([{ label: state.siteTitle }]);
|
||||
renderToc([], () => {});
|
||||
show("page-view");
|
||||
}
|
||||
@@ -1027,7 +1102,7 @@
|
||||
async function showTodos() {
|
||||
state.previousView = state.currentPage ? "page-view" : "todo-view";
|
||||
renderBreadcrumbs([
|
||||
{ label: "Racket Wiki", href: "/" },
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: tr("todo", "Todo") }
|
||||
]);
|
||||
renderToc([], () => {});
|
||||
@@ -1097,24 +1172,12 @@
|
||||
const translationData = await api("/api/translations");
|
||||
state.language = translationData.language;
|
||||
state.translationPage = translationData.page;
|
||||
state.translationTemplate = translationData.template || "";
|
||||
state.translations = translationData.translations || {};
|
||||
applyTranslations();
|
||||
initializeEditor();
|
||||
const userBox = $("user-box");
|
||||
userBox.replaceChildren();
|
||||
const displayName = document.createTextNode(state.session.user.displayName);
|
||||
const breakNode = document.createElement("br");
|
||||
const role = document.createElement("span");
|
||||
role.className = "muted";
|
||||
role.textContent = state.session.user.role;
|
||||
const logout = document.createElement("button");
|
||||
logout.id = "logout";
|
||||
logout.textContent = tr("sign-out", "Sign out");
|
||||
userBox.append(displayName, breakNode, role, " ", logout);
|
||||
logout.addEventListener("click", async () => {
|
||||
await api("/api/logout", { method: "POST", body: "{}" });
|
||||
window.location.replace("/login");
|
||||
});
|
||||
$("account-name").textContent = state.session.user.displayName;
|
||||
$("account-role").textContent = tr(`role-${state.session.user.role}`, state.session.user.role);
|
||||
updateRoleUi();
|
||||
await loadPages();
|
||||
await route();
|
||||
@@ -1128,14 +1191,32 @@
|
||||
searchWiki($("search-input").value).catch((error) => console.error(error));
|
||||
});
|
||||
|
||||
$("edit-page").addEventListener("click", beginEditPage);
|
||||
$("delete-page").addEventListener("click", deleteCurrentPage);
|
||||
$("history-page").addEventListener("click", showHistory);
|
||||
$("todo-button").addEventListener("click", () => showTodos().catch((error) => console.error(error)));
|
||||
$("translations-button").addEventListener("click", () => { location.hash = `#/${encodeURIComponent(state.translationPage)}`; });
|
||||
$("admin-button").addEventListener("click", loadAdmin);
|
||||
$("edit-page").addEventListener("click", (event) => { event.preventDefault(); beginEditPage(); });
|
||||
$("delete-page").addEventListener("click", (event) => { event.preventDefault(); deleteCurrentPage(); });
|
||||
$("history-page").addEventListener("click", (event) => { event.preventDefault(); showHistory(); });
|
||||
$("todo-link").addEventListener("click", (event) => { event.preventDefault(); showTodos().catch((error) => console.error(error)); });
|
||||
$("logout-link").addEventListener("click", async (event) => {
|
||||
event.preventDefault();
|
||||
await api("/api/logout", { method: "POST", body: "{}" });
|
||||
window.location.replace("/login");
|
||||
});
|
||||
$("admin-link").addEventListener("click", (event) => { event.preventDefault(); showAdmin(); });
|
||||
$("admin-users-link").addEventListener("click", (event) => { event.preventDefault(); loadUsersAdmin().catch(console.error); });
|
||||
$("admin-translations-link").addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
const page = state.pages.find((item) => item.slug === state.translationPage);
|
||||
if (page) {
|
||||
location.hash = `#/${encodeURIComponent(state.translationPage)}`;
|
||||
return;
|
||||
}
|
||||
renderBreadcrumbs([
|
||||
{ label: state.siteTitle, href: "/" },
|
||||
{ label: tr("translations", "Translations") }
|
||||
]);
|
||||
beginNewPage(state.translationPage);
|
||||
});
|
||||
$("close-history").addEventListener("click", () => show("page-view"));
|
||||
$("close-admin").addEventListener("click", () => state.currentPage ? show("page-view") : route());
|
||||
$("close-user-admin").addEventListener("click", (event) => { event.preventDefault(); showAdmin(); });
|
||||
$("cancel-edit").addEventListener("click", () => {
|
||||
if (state.currentPage) {
|
||||
openPage(state.currentPage.slug);
|
||||
@@ -1167,7 +1248,7 @@
|
||||
})
|
||||
});
|
||||
event.target.reset();
|
||||
await loadAdmin();
|
||||
await loadUsersAdmin();
|
||||
});
|
||||
|
||||
window.addEventListener("hashchange", () => route().catch(console.error));
|
||||
|
||||
Reference in New Issue
Block a user