mirror of
https://github.com/zadam/trilium.git
synced 2024-09-20 23:55:59 +08:00
toc fixes
This commit is contained in:
parent
cce3f9a700
commit
dcf31f8f95
4
package-lock.json
generated
4
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "trilium",
|
||||
"version": "0.51.2",
|
||||
"version": "0.52.0-beta",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "trilium",
|
||||
"version": "0.51.2",
|
||||
"version": "0.52.0-beta",
|
||||
"hasInstallScript": true,
|
||||
"license": "AGPL-3.0-only",
|
||||
"dependencies": {
|
||||
|
|
|
@ -103,10 +103,22 @@ class BasicWidget extends Component {
|
|||
this.$widget.toggleClass('hidden-int', !show);
|
||||
}
|
||||
|
||||
isHiddenInt() {
|
||||
return this.$widget.hasClass('hidden-int');
|
||||
}
|
||||
|
||||
toggleExt(show) {
|
||||
this.$widget.toggleClass('hidden-ext', !show);
|
||||
}
|
||||
|
||||
isHiddenExt() {
|
||||
return this.$widget.hasClass('hidden-ext');
|
||||
}
|
||||
|
||||
canBeShown() {
|
||||
return !this.isHiddenInt() && !this.isHiddenExt();
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
return this.$widget.is(":visible");
|
||||
}
|
||||
|
|
|
@ -35,8 +35,4 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
|
|||
|
||||
/** for overriding */
|
||||
async doRenderBody() {}
|
||||
|
||||
isExpanded() {
|
||||
return this.$bodyWrapper.hasClass("show");
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,9 @@ export default class RightPaneContainer extends FlexContainer {
|
|||
}
|
||||
|
||||
isEnabled() {
|
||||
return super.isEnabled() && this.children.length > 0 && !!this.children.find(ch => ch.isEnabled());
|
||||
return super.isEnabled()
|
||||
&& this.children.length > 0
|
||||
&& !!this.children.find(ch => ch.isEnabled() && ch.canBeShown());
|
||||
}
|
||||
|
||||
handleEventInChildren(name, data) {
|
||||
|
@ -21,13 +23,20 @@ export default class RightPaneContainer extends FlexContainer {
|
|||
// right pane is displayed only if some child widget is active
|
||||
// we'll reevaluate the visibility based on events which are probable to cause visibility change
|
||||
// but these events needs to be finished and only then we check
|
||||
promise.then(() => {
|
||||
this.toggleInt(this.isEnabled());
|
||||
|
||||
splitService.setupRightPaneResizer();
|
||||
});
|
||||
promise.then(() => this.reevaluateIsEnabledCommand());
|
||||
}
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
reevaluateIsEnabledCommand() {
|
||||
const oldToggle = !this.isHiddenInt();
|
||||
const newToggle = this.isEnabled();
|
||||
|
||||
if (oldToggle !== newToggle) {
|
||||
this.toggleInt(newToggle);
|
||||
|
||||
splitService.setupRightPaneResizer();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -26,11 +26,11 @@ const TPL = `<div class="toc-widget">
|
|||
}
|
||||
|
||||
.toc ol {
|
||||
padding-left: 20px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.toc > ol {
|
||||
padding-left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -75,7 +75,10 @@ function findHeadingElementByIndex(parent, headingIndex) {
|
|||
// "H" plus the level, eg "H2", "H3", "H2", etc and not nested wrt the
|
||||
// heading level. If a heading node is found, decrement the headingIndex
|
||||
// until zero is reached
|
||||
if (child.tagName.match(/H\d+/) !== null) {
|
||||
|
||||
console.log(child.tagName, headingIndex);
|
||||
|
||||
if (child.tagName.match(/H\d+/i) !== null) {
|
||||
if (headingIndex === 0) {
|
||||
headingElement = child;
|
||||
break;
|
||||
|
@ -86,6 +89,8 @@ function findHeadingElementByIndex(parent, headingIndex) {
|
|||
return headingElement;
|
||||
}
|
||||
|
||||
const MIN_HEADING_COUNT = 3;
|
||||
|
||||
export default class TocWidget extends CollapsibleWidget {
|
||||
get widgetTitle() {
|
||||
return "Table of Contents";
|
||||
|
@ -94,7 +99,7 @@ export default class TocWidget extends CollapsibleWidget {
|
|||
isEnabled() {
|
||||
return super.isEnabled()
|
||||
&& this.note.type === 'text'
|
||||
&& !this.note.hasLabel('noTocWidget');
|
||||
&& !this.note.hasLabel('noToc');
|
||||
}
|
||||
|
||||
async doRenderBody() {
|
||||
|
@ -103,21 +108,23 @@ export default class TocWidget extends CollapsibleWidget {
|
|||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
let toc = "";
|
||||
let $toc = "", headingCount = 0;
|
||||
// Check for type text unconditionally in case alwaysShowWidget is set
|
||||
if (this.note.type === 'text') {
|
||||
const { content } = await note.getNoteComplement();
|
||||
toc = await this.getToc(content);
|
||||
({$toc, headingCount} = await this.getToc(content));
|
||||
}
|
||||
|
||||
this.$toc.html(toc);
|
||||
this.$toc.html($toc);
|
||||
this.toggleInt(headingCount >= MIN_HEADING_COUNT);
|
||||
this.triggerCommand("reevaluateIsEnabled");
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds a jquery table of contents.
|
||||
*
|
||||
* @param {String} html Note's html content
|
||||
* @returns {jQuery} ordered list table of headings, nested by heading level
|
||||
* @returns {$toc: jQuery, headingCount: integer} ordered list table of headings, nested by heading level
|
||||
* with an onclick event that will cause the document to scroll to
|
||||
* the desired position.
|
||||
*/
|
||||
|
@ -133,7 +140,8 @@ export default class TocWidget extends CollapsibleWidget {
|
|||
// Note heading 2 is the first level Trilium makes available to the note
|
||||
let curLevel = 2;
|
||||
const $ols = [$toc];
|
||||
for (let m = null, headingIndex = 0; ((m = headingTagsRegex.exec(html)) !== null); ++headingIndex) {
|
||||
let headingCount;
|
||||
for (let m = null, headingIndex = 0; ((m = headingTagsRegex.exec(html)) !== null); headingIndex++) {
|
||||
//
|
||||
// Nest/unnest whatever necessary number of ordered lists
|
||||
//
|
||||
|
@ -164,7 +172,18 @@ export default class TocWidget extends CollapsibleWidget {
|
|||
}).mouseout(function () {
|
||||
$(this).css("font-weight", "normal");
|
||||
});
|
||||
$li.on("click", async () => {
|
||||
$li.on("click", () => this.jumpToHeading(headingIndex));
|
||||
$ols[$ols.length - 1].append($li);
|
||||
headingCount = headingIndex;
|
||||
}
|
||||
|
||||
return {
|
||||
$toc,
|
||||
headingCount
|
||||
};
|
||||
}
|
||||
|
||||
async jumpToHeading(headingIndex) {
|
||||
// A readonly note can change state to "readonly disabled
|
||||
// temporarily" (ie "edit this note" button) without any
|
||||
// intervening events, do the readonly calculation at navigation
|
||||
|
@ -173,8 +192,9 @@ export default class TocWidget extends CollapsibleWidget {
|
|||
const isReadOnly = await this.noteContext.isReadOnly();
|
||||
|
||||
if (isReadOnly) {
|
||||
const readonlyTextElement = await this.noteContext.getContentElement();
|
||||
const headingElement = findHeadingElementByIndex(readonlyTextElement, headingIndex);
|
||||
const $readonlyTextContent = await this.noteContext.getContentElement();
|
||||
|
||||
const headingElement = findHeadingElementByIndex($readonlyTextContent[0], headingIndex);
|
||||
|
||||
if (headingElement != null) {
|
||||
headingElement.scrollIntoView();
|
||||
|
@ -239,17 +259,13 @@ export default class TocWidget extends CollapsibleWidget {
|
|||
textEditor.editing.view.scrollToTheSelection();
|
||||
}
|
||||
}
|
||||
});
|
||||
$ols[$ols.length - 1].append($li);
|
||||
}
|
||||
|
||||
return $toc;
|
||||
}
|
||||
|
||||
async entitiesReloadedEvent({loadResults}) {
|
||||
if (loadResults.isNoteContentReloaded(this.noteId)
|
||||
|| loadResults.getAttributes().find(attr => attr.type === 'label'
|
||||
&& attr.name.toLowerCase().includes('readonly')
|
||||
if (loadResults.isNoteContentReloaded(this.noteId)) {
|
||||
await this.refresh();
|
||||
} else if (loadResults.getAttributes().find(attr => attr.type === 'label'
|
||||
&& (attr.name.toLowerCase().includes('readonly') || attr.name === 'noToc')
|
||||
&& attributeService.isAffecting(attr, this.note))) {
|
||||
|
||||
await this.refresh();
|
||||
|
|
|
@ -943,7 +943,6 @@ input {
|
|||
border: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
#right-pane .card-body ul {
|
||||
|
|
Loading…
Reference in a new issue