neil/silverbullet
1
0
Fork 0
Code

Tweaks in rendering and buttons

Browse Source
This commit is contained in:
Zef Hemel 2024-01-02 11:01:34 +01:00
parent c1a6253b34
commit 8ab5edeccc
7 changed files with 102 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugs/index/index.plug.yaml
View File

@ -178,8 +178,8 @@ functions:
env: client
panelWidget: top
refreshTOC:
path: toc.ts:refreshTOC
refreshWidgets:
path: toc.ts:refreshWidgets
lintYAML:
path: lint.ts:lintYAML

23
plugs/index/linked_mentions.ts
View File

@ -13,12 +13,10 @@ export async function toggleMentions() {
}
export async function renderMentions(): Promise<CodeWidgetContent | null> {
console.log("Hide mentions", await clientStore.get(hideMentionsKey));
if (await clientStore.get(hideMentionsKey)) {
return null;
}
console.log("Stil here");
const page = await editor.getCurrentPage();
const linksResult = await queryObjects<LinkObject>("link", {
// Query all links that point to this page, excluding those that are inside directives and self pointers.
@ -43,12 +41,21 @@ export async function renderMentions(): Promise<CodeWidgetContent | null> {
}
return {
markdown: renderedMd,
buttons: [{
description: "Hide",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
invokeFunction: "index.toggleMentions",
}],
buttons: [
{
description: "Reload",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
invokeFunction: "index.refreshWidgets",
},
{
description: "Hide",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
invokeFunction: "index.toggleMentions",
},
],
};
}
}

4
plugs/index/toc.ts
View File

@ -23,7 +23,7 @@ export async function toggleTOC() {
await codeWidget.refreshAll();
}
export async function refreshTOC() {
export async function refreshWidgets() {
await codeWidget.refreshAll();
}
@ -66,7 +66,7 @@ export async function renderTOC(): Promise<CodeWidgetContent | null> {
description: "Reload",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
invokeFunction: "index.refreshTOC",
invokeFunction: "index.refreshWidgets",
},
{
description: "Hide",

100
web/client.ts
View File

@ -287,57 +287,59 @@ export class Client {
cleanPageRef(this.settings.indexPage),
);
this.pageNavigator.subscribe(async (pageName, pos: number | string) => {
console.log("Now navigating to", pageName);
this.pageNavigator.subscribe(
async (pageName, pos: number | string | undefined) => {
console.log("Now navigating to", pageName, pos);
const stateRestored = await this.loadPage(pageName);
if (pos) {
if (typeof pos === "string") {
console.log("Navigating to anchor", pos);
const stateRestored = await this.loadPage(pageName, pos === undefined);
if (pos) {
if (typeof pos === "string") {
console.log("Navigating to anchor", pos);
// We're going to look up the anchor through a API invocation
const matchingAnchor = await this.system.system.localSyscall(
"index",
"system.invokeFunction",
["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
);
if (!matchingAnchor) {
return this.flashNotification(
`Could not find anchor $${pos}`,
"error",
// We're going to look up the anchor through a API invocation
const matchingAnchor = await this.system.system.localSyscall(
"index",
"system.invokeFunction",
["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
);
} else {
pos = matchingAnchor.pos as number;
}
}
setTimeout(() => {
this.editorView.dispatch({
selection: { anchor: pos as number },
effects: EditorView.scrollIntoView(pos as number, { y: "start" }),
});
});
} else if (!stateRestored) {
// Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_.
const pageText = this.editorView.state.sliceDoc();
// Default the cursor to be at position 0
let initialCursorPos = 0;
const match = frontMatterRegex.exec(pageText);
if (match) {
// Frontmatter found, put cursor after it
initialCursorPos = match[0].length;
if (!matchingAnchor) {
return this.flashNotification(
`Could not find anchor $${pos}`,
"error",
);
} else {
pos = matchingAnchor.pos as number;
}
}
setTimeout(() => {
this.editorView.dispatch({
selection: { anchor: pos as number },
effects: EditorView.scrollIntoView(pos as number, { y: "start" }),
});
});
} else if (!stateRestored) {
// Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_.
const pageText = this.editorView.state.sliceDoc();
// Default the cursor to be at position 0
let initialCursorPos = 0;
const match = frontMatterRegex.exec(pageText);
if (match) {
// Frontmatter found, put cursor after it
initialCursorPos = match[0].length;
}
// By default scroll to the top
this.editorView.scrollDOM.scrollTop = 0;
this.editorView.dispatch({
selection: { anchor: initialCursorPos },
// And then scroll down if required
scrollIntoView: true,
});
}
// By default scroll to the top
this.editorView.scrollDOM.scrollTop = 0;
this.editorView.dispatch({
selection: { anchor: initialCursorPos },
// And then scroll down if required
scrollIntoView: true,
});
}
await this.stateDataStore.set(["client", "lastOpenedPage"], pageName);
});
await this.stateDataStore.set(["client", "lastOpenedPage"], pageName);
},
);
if (location.hash === "#boot") {
(async () => {
@ -846,11 +848,13 @@ export class Client {
await this.pageNavigator!.navigate(name, pos, replaceState);
}
async loadPage(pageName: string): Promise<boolean> {
async loadPage(pageName: string, restoreState = true): Promise<boolean> {
const loadingDifferentPage = pageName !== this.currentPage;
const editorView = this.editorView;
const previousPage = this.currentPage;
// console.log("Navigating to", pageName, restoreState);
// Persist current page state and nicely close page
if (previousPage) {
this.openPages.saveState(previousPage);
@ -915,7 +919,7 @@ export class Client {
if (editorView.contentDOM) {
this.tweakEditorDOM(editorView.contentDOM);
}
const stateRestored = this.openPages.restoreState(pageName);
const stateRestored = restoreState && this.openPages.restoreState(pageName);
this.space.watchPage(pageName);
// Note: these events are dispatched asynchronously deliberately (not waiting for results)

17
web/navigator.ts
View File

@ -13,20 +13,24 @@ export class PathPageNavigator {
constructor(readonly indexPage: string, readonly root: string = "") {}
async navigate(page: string, pos?: number | string, replaceState = false) {
async navigate(
page: string,
pos?: number | string | undefined,
replaceState = false,
) {
let encodedPage = encodePageUrl(page);
if (page === this.indexPage) {
encodedPage = "";
}
if (replaceState) {
window.history.replaceState(
{ page, pos },
{ page },
page,
`${this.root}/${encodedPage}`,
);
} else {
window.history.pushState(
{ page, pos },
{ page },
page,
`${this.root}/${encodedPage}`,
);
@ -43,7 +47,10 @@ export class PathPageNavigator {
}
subscribe(
pageLoadCallback: (pageName: string, pos: number | string) => Promise<void>,
pageLoadCallback: (
pageName: string,
pos: number | string | undefined,
) => Promise<void>,
): void {
const cb = (event?: PopStateEvent) => {
const gotoPage = this.getCurrentPage();
@ -53,7 +60,7 @@ export class PathPageNavigator {
safeRun(async () => {
await pageLoadCallback(
this.getCurrentPage(),
event?.state?.pos || this.getCurrentPos(),
event?.state?.pos,
);
if (this.navigationResolve) {
this.navigationResolve();

26
web/styles/editor.scss
View File

@ -471,7 +471,7 @@
overflow-y: auto;
border: 1px solid var(--editor-directive-background-color);
border-radius: 5px;
white-space: wrap;
white-space: normal;
position: relative;
ul,
@ -520,21 +520,27 @@
background-color: var(--editor-code-background-color);
}
// Button bar
&:hover .button-bar,
&:active .button-bar {
// Only show the button bar on hover on non-touch devices
&:hover .button-bar {
display: block;
}
// Always show button bar on touch devices
@media (hover: none) and (pointer: coarse) {
.button-bar {
display: block !important;
}
}
.button-bar {
position: absolute;
right: 10px;
top: 10px;
right: 0;
top: 0;
display: none;
background: var(--editor-directive-background-color);
padding-inline: 3px;
padding-bottom: 1px;
border-radius: 5px;
padding: 4px 0;
// border-radius: 0 5px;
button {
@ -545,6 +551,10 @@
margin-right: -8px;
}
button:last-of-type {
margin-right: 2px;
}
}
}

2
web/styles/theme.scss
View File

@ -101,7 +101,7 @@ html {
--editor-frontmatter-background-color: rgba(255, 246, 189, 0.5);
--editor-frontmatter-color: var(--subtle-color);
--editor-frontmatter-marker-color: #89000080;
--editor-directive-background-color: rgb(233, 233, 233, 50%);
--editor-directive-background-color: rgb(238, 238, 238);
--editor-directive-border-color: #0000000f;
--editor-directive-color: #5b5b5b;
--editor-directive-info-color: var(--subtle-color);