2020-01-13 02:05:09 +08:00
|
|
|
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";
|
2020-01-19 02:46:30 +08:00
|
|
|
import NotePathsWidget from "./note_paths.js";
|
2020-01-13 02:05:09 +08:00
|
|
|
|
|
|
|
const TPL = `
|
|
|
|
<div class="note-title-row">
|
2020-01-15 03:27:40 +08:00
|
|
|
<style>
|
|
|
|
.note-title-row {
|
|
|
|
flex-grow: 0;
|
|
|
|
flex-shrink: 0;
|
|
|
|
padding-top: 2px;
|
2020-01-19 02:46:30 +08:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-01-15 03:27:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.note-title {
|
|
|
|
margin-left: 15px;
|
|
|
|
margin-right: 10px;
|
|
|
|
font-size: 150%;
|
|
|
|
border: 0;
|
|
|
|
width: 5em;
|
|
|
|
flex-grow: 100;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<input autocomplete="off" value="" class="note-title" tabindex="1">
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<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>
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<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>
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<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>
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<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>
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<div class="note-type-actions" style="display: flex;">
|
|
|
|
<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>
|
2020-01-13 02:05:09 +08:00
|
|
|
</button>
|
2020-01-19 02:46:30 +08:00
|
|
|
<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>
|
2020-01-13 02:05:09 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>`;
|
|
|
|
|
|
|
|
export default class NoteTitleWidget extends TabAwareWidget {
|
2020-01-13 03:15:05 +08:00
|
|
|
doRender() {
|
2020-01-15 03:27:40 +08:00
|
|
|
this.$widget = $(TPL);
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-15 03:27:40 +08:00
|
|
|
this.$noteTitle = this.$widget.find(".note-title");
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-15 03:27:40 +08:00
|
|
|
this.$protectButton = this.$widget.find(".protect-button");
|
2020-01-13 02:05:09 +08:00
|
|
|
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
|
|
|
|
|
2020-01-15 03:27:40 +08:00
|
|
|
this.$unprotectButton = this.$widget.find(".unprotect-button");
|
2020-01-13 02:05:09 +08:00
|
|
|
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
|
|
|
|
|
2020-01-15 03:27:40 +08:00
|
|
|
this.$savedIndicator = this.$widget.find(".saved-indicator");
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
this.noteType = new NoteTypeWidget(this.appContext);
|
|
|
|
this.$widget.find('.note-type-actions').prepend(this.noteType.render());
|
|
|
|
|
|
|
|
this.notePaths = new NotePathsWidget(this.appContext);
|
|
|
|
this.$widget.prepend(this.notePaths.render());
|
|
|
|
|
|
|
|
this.children.push(this.noteType, this.notePaths);
|
2020-01-13 02:05:09 +08:00
|
|
|
|
|
|
|
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)
|
|
|
|
});
|
|
|
|
}
|
2020-01-13 03:15:05 +08:00
|
|
|
|
2020-01-15 03:27:40 +08:00
|
|
|
return this.$widget;
|
2020-01-13 02:05:09 +08:00
|
|
|
}
|
|
|
|
|
2020-01-19 18:37:24 +08:00
|
|
|
async refreshWithNote() {
|
2020-01-13 02:05:09 +08:00
|
|
|
const note = this.tabContext.note;
|
|
|
|
|
2020-01-13 06:03:55 +08:00
|
|
|
this.$noteTitle.val(note.title);
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
|
|
|
|
this.$noteTitle.prop("readonly", true);
|
|
|
|
}
|
|
|
|
|
2020-01-13 02:05:09 +08:00
|
|
|
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());
|
|
|
|
}
|
|
|
|
|
|
|
|
noteSavedListener() {
|
|
|
|
this.$savedIndicator.fadeIn();
|
|
|
|
}
|
|
|
|
}
|