mirror of
https://github.com/zadam/trilium.git
synced 2025-11-15 17:55:52 +01:00
tab row widgetizing
This commit is contained in:
zadam
219
src/public/javascripts/widgets/note_title.js
Normal file
219
src/public/javascripts/widgets/note_title.js
Normal file
@@ -0,0 +1,219 @@
|
||||
import TabAwareWidget from "./tab_aware_widget.js";
|
||||
import treeService from "../services/tree.js";
|
||||
import utils from "../services/utils.js";
|
||||
import protectedSessionService from "../services/protected_session.js";
|
||||
import treeUtils from "../services/tree_utils.js";
|
||||
import linkService from "../services/link.js";
|
||||
import protectedSessionHolder from "../services/protected_session_holder.js";
|
||||
import NoteTypeWidget from "./note_type.js";
|
||||
|
||||
const TPL = `
|
||||
<style>
|
||||
.note-title-row {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.note-title {
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
font-size: 150%;
|
||||
border: 0;
|
||||
width: 5em;
|
||||
flex-grow: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="note-title-row">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="dropdown hide-in-zen-mode">
|
||||
<button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="note-path-count">1 path</span>
|
||||
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="note-path-list dropdown-menu" aria-labelledby="note-path-list-button">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<input autocomplete="off" value="" class="note-title" tabindex="1">
|
||||
|
||||
<span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
|
||||
|
||||
<div class="hide-in-zen-mode" style="display: flex; align-items: center;">
|
||||
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Render"></button>
|
||||
|
||||
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Execute (Ctrl+Enter)"></button>
|
||||
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button bx bx-check-shield protect-button"
|
||||
title="Protected note can be viewed and edited only after entering password">
|
||||
</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button bx bx-shield unprotect-button"
|
||||
title="Not protected note can be viewed without entering password">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="display: flex;">
|
||||
<!-- note type here -->
|
||||
|
||||
<div class="dropdown note-actions">
|
||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Note actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
|
||||
<a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
|
||||
<a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
|
||||
<a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
|
||||
<kbd data-kb-action="ShowNoteSource"></kbd>
|
||||
Note source
|
||||
</a>
|
||||
<a class="dropdown-item import-files-button">Import files</a>
|
||||
<a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
|
||||
<a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
|
||||
<a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class NoteTitleWidget extends TabAwareWidget {
|
||||
constructor(appContext) {
|
||||
super(appContext);
|
||||
|
||||
this.tree = null;
|
||||
}
|
||||
|
||||
async doRender($widget) {
|
||||
$widget.append($(TPL));
|
||||
|
||||
this.$noteTitle = this.$tabContent.find(".note-title");
|
||||
this.$noteTitleRow = this.$tabContent.find(".note-title-row");
|
||||
this.$notePathList = this.$tabContent.find(".note-path-list");
|
||||
this.$notePathCount = this.$tabContent.find(".note-path-count");
|
||||
|
||||
this.$protectButton = this.$tabContent.find(".protect-button");
|
||||
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
|
||||
|
||||
this.$unprotectButton = this.$tabContent.find(".unprotect-button");
|
||||
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
|
||||
|
||||
this.$savedIndicator = this.$tabContent.find(".saved-indicator");
|
||||
|
||||
this.noteType = new NoteTypeWidget(this);
|
||||
|
||||
this.$noteTitle.on('input', () => {
|
||||
if (!this.note) {
|
||||
return;
|
||||
}
|
||||
|
||||
// FIXME event not used
|
||||
this.trigger(`activeNoteChanged`);
|
||||
|
||||
this.note.title = this.$noteTitle.val();
|
||||
|
||||
this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
|
||||
treeService.setNoteTitle(this.note.noteId, this.note.title);
|
||||
|
||||
this.setTitleBar();
|
||||
});
|
||||
|
||||
if (utils.isDesktop()) {
|
||||
// keyboard plugin is not loaded in mobile
|
||||
utils.bindElShortcut(this.$noteTitle, 'return', () => {
|
||||
this.getComponent().focus();
|
||||
|
||||
return false; // to not propagate the enter into the editor (causes issues with codemirror)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async activeTabChanged() {
|
||||
const note = this.tabContext.note;
|
||||
|
||||
this.$noteTitle.val(this.note.title);
|
||||
|
||||
this.$protectButton.toggleClass("active", note.isProtected);
|
||||
this.$protectButton.prop("disabled", note.isProtected);
|
||||
this.$unprotectButton.toggleClass("active", !note.isProtected);
|
||||
this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
|
||||
|
||||
await this.showPaths();
|
||||
}
|
||||
|
||||
async showPaths() {
|
||||
const note = this.tabContext.note;
|
||||
|
||||
if (note.noteId === 'root') {
|
||||
// root doesn't have any parent, but it's still technically 1 path
|
||||
|
||||
this.$notePathCount.html("1 path");
|
||||
|
||||
this.$notePathList.empty();
|
||||
|
||||
await this.addPath('root', true);
|
||||
}
|
||||
else {
|
||||
const parents = await note.getParentNotes();
|
||||
|
||||
this.$notePathCount.html(parents.length + " path" + (parents.length > 1 ? "s" : ""));
|
||||
this.$notePathList.empty();
|
||||
|
||||
const pathSegments = this.notePath.split("/");
|
||||
const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
|
||||
|
||||
for (const parentNote of parents) {
|
||||
const parentNotePath = await treeService.getSomeNotePath(parentNote);
|
||||
// this is to avoid having root notes leading '/'
|
||||
const notePath = parentNotePath ? (parentNotePath + '/' + note.noteId) : note.noteId;
|
||||
const isCurrent = activeNoteParentNoteId === parentNote.noteId;
|
||||
|
||||
await this.addPath(notePath, isCurrent);
|
||||
}
|
||||
|
||||
const cloneLink = $("<div>")
|
||||
.addClass("dropdown-item")
|
||||
.append(
|
||||
$('<button class="btn btn-sm">')
|
||||
.text('Clone note to new location...')
|
||||
.on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([note.noteId])))
|
||||
);
|
||||
|
||||
this.$notePathList.append(cloneLink);
|
||||
}
|
||||
}
|
||||
|
||||
async addPath(notePath, isCurrent) {
|
||||
const title = await treeUtils.getNotePathTitle(notePath);
|
||||
|
||||
const noteLink = await linkService.createNoteLink(notePath, {title});
|
||||
|
||||
noteLink
|
||||
.addClass("no-tooltip-preview")
|
||||
.addClass("dropdown-item");
|
||||
|
||||
if (isCurrent) {
|
||||
noteLink.addClass("current");
|
||||
}
|
||||
|
||||
this.$notePathList.append(noteLink);
|
||||
}
|
||||
|
||||
noteSavedListener() {
|
||||
this.$savedIndicator.fadeIn();
|
||||
}
|
||||
}
|
||||
157
src/public/javascripts/widgets/note_type.js
Normal file
157
src/public/javascripts/widgets/note_type.js
Normal file
@@ -0,0 +1,157 @@
|
||||
import treeService from '../services/tree.js';
|
||||
import noteDetailService from '../services/note_detail.js';
|
||||
import server from '../services/server.js';
|
||||
import mimeTypesService from '../services/mime_types.js';
|
||||
import TabAwareWidget from "./tab_aware_widget.js";
|
||||
|
||||
const NOTE_TYPES = [
|
||||
{ type: "file", title: "File", selectable: false },
|
||||
{ type: "image", title: "Image", selectable: false },
|
||||
{ type: "search", title: "Saved search", selectable: false },
|
||||
|
||||
{ type: "text", mime: "text/html", title: "Text", selectable: true },
|
||||
{ type: "relation-map", mime: "application/json", title: "Relation Map", selectable: true },
|
||||
{ type: "render", mime: '', title: "Render Note", selectable: true },
|
||||
{ type: "book", mime: '', title: "Book", selectable: true },
|
||||
{ type: "code", mime: 'text/plain', title: "Code", selectable: true }
|
||||
];
|
||||
|
||||
const TPL = `
|
||||
<style>
|
||||
.note-type-dropdown {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="dropdown note-type">
|
||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
|
||||
Type: <span class="note-type-desc"></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class NoteTypeWidget extends TabAwareWidget {
|
||||
async doRender($widget) {
|
||||
$widget.append($(TPL));
|
||||
|
||||
$widget.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
|
||||
|
||||
this.$noteTypeDropdown = $widget.find(".note-type-dropdown");
|
||||
this.$noteTypeButton = $widget.find(".note-type-button");
|
||||
this.$noteTypeDesc = $widget.find(".note-type-desc");
|
||||
this.$executeScriptButton = $widget.find(".execute-script-button");
|
||||
this.$renderButton = $widget.find('.render-button');
|
||||
|
||||
return $widget;
|
||||
}
|
||||
|
||||
async update() {
|
||||
this.$noteTypeButton.prop("disabled",
|
||||
() => ["file", "image", "search"].includes(this.ctx.note.type));
|
||||
|
||||
this.$noteTypeDesc.text(await this.findTypeTitle(this.ctx.note.type, this.ctx.note.mime));
|
||||
|
||||
this.$executeScriptButton.toggle(this.ctx.note.mime.startsWith('application/javascript'));
|
||||
this.$renderButton.toggle(this.ctx.note.type === 'render');
|
||||
}
|
||||
|
||||
async activeTabChanged() {
|
||||
this.update();
|
||||
}
|
||||
|
||||
/** actual body is rendered lazily on note-type button click */
|
||||
async renderDropdown() {
|
||||
this.$noteTypeDropdown.empty();
|
||||
|
||||
for (const noteType of NOTE_TYPES.filter(nt => nt.selectable)) {
|
||||
const $typeLink = $('<a class="dropdown-item">')
|
||||
.attr("data-note-type", noteType.type)
|
||||
.append('<span class="check">✓</span> ')
|
||||
.append($('<strong>').text(noteType.title))
|
||||
.on('click', e => {
|
||||
const type = $typeLink.attr('data-note-type');
|
||||
const noteType = NOTE_TYPES.find(nt => nt.type === type);
|
||||
|
||||
this.save(noteType.type, noteType.mime);
|
||||
});
|
||||
|
||||
if (this.ctx.note.type === noteType.type) {
|
||||
$typeLink.addClass("selected");
|
||||
}
|
||||
|
||||
this.$noteTypeDropdown.append($typeLink);
|
||||
|
||||
if (noteType.type !== 'code') {
|
||||
this.$noteTypeDropdown.append('<div class="dropdown-divider"></div>');
|
||||
}
|
||||
}
|
||||
|
||||
for (const mimeType of await mimeTypesService.getMimeTypes()) {
|
||||
if (!mimeType.enabled) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const $mimeLink = $('<a class="dropdown-item">')
|
||||
.attr("data-mime-type", mimeType.mime)
|
||||
.append('<span class="check">✓</span> ')
|
||||
.append($('<span>').text(mimeType.title))
|
||||
.on('click', e => {
|
||||
const $link = $(e.target).closest('.dropdown-item');
|
||||
|
||||
this.save('code', $link.attr('data-mime-type'))
|
||||
});
|
||||
|
||||
if (this.ctx.note.type === 'code' && this.ctx.note.mime === mimeType.mime) {
|
||||
$mimeLink.addClass("selected");
|
||||
|
||||
this.$noteTypeDesc.text(mimeType.title);
|
||||
}
|
||||
|
||||
this.$noteTypeDropdown.append($mimeLink);
|
||||
}
|
||||
}
|
||||
|
||||
async findTypeTitle(type, mime) {
|
||||
if (type === 'code') {
|
||||
const mimeTypes = await mimeTypesService.getMimeTypes();
|
||||
const found = mimeTypes.find(mt => mt.mime === mime);
|
||||
|
||||
return found ? found.title : mime;
|
||||
}
|
||||
else {
|
||||
const noteType = NOTE_TYPES.find(nt => nt.type === type);
|
||||
|
||||
return noteType ? noteType.title : type;
|
||||
}
|
||||
}
|
||||
|
||||
async save(type, mime) {
|
||||
if (type !== this.ctx.note.type && !await this.confirmChangeIfContent()) {
|
||||
return;
|
||||
}
|
||||
|
||||
await server.put('notes/' + this.ctx.note.noteId
|
||||
+ '/type/' + encodeURIComponent(type)
|
||||
+ '/mime/' + encodeURIComponent(mime));
|
||||
|
||||
await noteDetailService.reload();
|
||||
|
||||
// for the note icon to be updated in the tree
|
||||
await treeService.reload();
|
||||
|
||||
this.update();
|
||||
}
|
||||
|
||||
async confirmChangeIfContent() {
|
||||
if (!this.ctx.getComponent().getContent()) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const confirmDialog = await import("../dialogs/confirm.js");
|
||||
return await confirmDialog.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
|
||||
}
|
||||
}
|
||||
19
src/public/javascripts/widgets/tab_aware_widget.js
Normal file
19
src/public/javascripts/widgets/tab_aware_widget.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import BasicWidget from "./basic_widget.js";
|
||||
|
||||
export default class TabAwareWidget extends BasicWidget {
|
||||
constructor(appContext) {
|
||||
super(appContext);
|
||||
|
||||
/** @var {TabContext} */
|
||||
this.tabContext = null;
|
||||
}
|
||||
|
||||
// to override
|
||||
activeTabChanged() {}
|
||||
|
||||
activeTabChangedListener() {
|
||||
this.tabContext = this.appContext.getActiveTabContext();
|
||||
|
||||
this.activeTabChanged();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user