2019-05-02 05:06:18 +08:00
|
|
|
import treeService from "./tree.js";
|
|
|
|
import protectedSessionHolder from "./protected_session_holder.js";
|
|
|
|
import server from "./server.js";
|
|
|
|
import bundleService from "./bundle.js";
|
2019-05-05 04:44:25 +08:00
|
|
|
import Attributes from "./attributes.js";
|
2019-05-02 05:06:18 +08:00
|
|
|
import treeUtils from "./tree_utils.js";
|
|
|
|
import utils from "./utils.js";
|
2019-05-05 04:44:25 +08:00
|
|
|
import {NoteTypeContext} from "./note_type.js";
|
|
|
|
import noteDetailService from "./note_detail.js";
|
2019-05-12 18:58:55 +08:00
|
|
|
import noteDetailEmpty from "./note_detail_empty.js";
|
2019-05-02 05:06:18 +08:00
|
|
|
import noteDetailText from "./note_detail_text.js";
|
2019-05-12 18:58:55 +08:00
|
|
|
import noteDetailCode from "./note_detail_code.js";
|
2019-05-02 05:06:18 +08:00
|
|
|
import noteDetailFile from "./note_detail_file.js";
|
|
|
|
import noteDetailImage from "./note_detail_image.js";
|
|
|
|
import noteDetailSearch from "./note_detail_search.js";
|
|
|
|
import noteDetailRender from "./note_detail_render.js";
|
|
|
|
import noteDetailRelationMap from "./note_detail_relation_map.js";
|
2019-05-06 01:48:30 +08:00
|
|
|
import noteDetailProtectedSession from "./note_detail_protected_session.js";
|
2019-05-06 02:45:07 +08:00
|
|
|
import protectedSessionService from "./protected_session.js";
|
2019-05-02 05:06:18 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
const $tabContentsContainer = $("#note-tab-container");
|
2019-05-03 04:24:43 +08:00
|
|
|
|
2019-05-02 04:19:29 +08:00
|
|
|
const componentClasses = {
|
2019-05-12 18:58:55 +08:00
|
|
|
'empty': noteDetailEmpty,
|
2019-05-02 04:19:29 +08:00
|
|
|
'text': noteDetailText,
|
2019-05-12 18:58:55 +08:00
|
|
|
'code': noteDetailCode,
|
2019-05-02 04:19:29 +08:00
|
|
|
'file': noteDetailFile,
|
|
|
|
'image': noteDetailImage,
|
|
|
|
'search': noteDetailSearch,
|
|
|
|
'render': noteDetailRender,
|
2019-05-06 01:48:30 +08:00
|
|
|
'relation-map': noteDetailRelationMap,
|
|
|
|
'protected-session': noteDetailProtectedSession
|
2019-05-02 04:19:29 +08:00
|
|
|
};
|
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
class TabContext {
|
2019-05-12 01:44:58 +08:00
|
|
|
/**
|
|
|
|
* @param {TabRow} tabRow
|
|
|
|
*/
|
2019-05-15 04:29:47 +08:00
|
|
|
constructor(tabRow, tabId = null) {
|
2019-05-12 01:44:58 +08:00
|
|
|
this.tabRow = tabRow;
|
2019-05-15 04:29:47 +08:00
|
|
|
this.tabId = tabId || utils.randomString(4);
|
|
|
|
this.$tab = $(this.tabRow.addTab(this.tabId));
|
2019-05-05 16:59:34 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$tabContent = $(".note-tab-content-template").clone();
|
|
|
|
this.$tabContent.removeClass('note-tab-content-template');
|
|
|
|
this.$tabContent.attr('data-tab-id', this.tabId);
|
2019-05-05 16:59:34 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
$tabContentsContainer.append(this.$tabContent);
|
2019-05-05 16:59:34 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$noteTitle = this.$tabContent.find(".note-title");
|
2019-05-12 18:58:55 +08:00
|
|
|
this.$noteTitleRow = this.$tabContent.find(".note-title-row");
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$noteDetailComponents = this.$tabContent.find(".note-detail-component");
|
|
|
|
this.$childrenOverview = this.$tabContent.find(".children-overview");
|
|
|
|
this.$scriptArea = this.$tabContent.find(".note-detail-script-area");
|
|
|
|
this.$savedIndicator = this.$tabContent.find(".saved-indicator");
|
2019-05-04 20:34:03 +08:00
|
|
|
this.noteChangeDisabled = false;
|
2019-05-02 04:19:29 +08:00
|
|
|
this.isNoteChanged = false;
|
2019-05-05 04:44:25 +08:00
|
|
|
this.attributes = new Attributes(this);
|
2019-05-14 05:08:59 +08:00
|
|
|
|
|
|
|
if (utils.isDesktop()) {
|
|
|
|
this.noteType = new NoteTypeContext(this);
|
|
|
|
}
|
|
|
|
|
2019-05-02 04:19:29 +08:00
|
|
|
this.components = {};
|
|
|
|
|
|
|
|
this.$noteTitle.on('input', () => {
|
|
|
|
this.noteChanged();
|
|
|
|
|
|
|
|
const title = this.$noteTitle.val();
|
|
|
|
|
2019-05-19 16:46:19 +08:00
|
|
|
this.tabRow.updateTab(this.$tab[0], {title});
|
2019-05-02 04:19:29 +08:00
|
|
|
treeService.setNoteTitle(this.noteId, title);
|
|
|
|
});
|
2019-05-03 04:24:43 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$protectButton = this.$tabContent.find(".protect-button");
|
2019-05-06 02:45:07 +08:00
|
|
|
this.$protectButton.click(protectedSessionService.protectNoteAndSendToServer);
|
2019-05-04 03:50:14 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$unprotectButton = this.$tabContent.find(".unprotect-button");
|
2019-05-06 02:45:07 +08:00
|
|
|
this.$unprotectButton.click(protectedSessionService.unprotectNoteAndSendToServer);
|
|
|
|
|
2019-05-11 03:43:40 +08:00
|
|
|
console.log(`Created note tab ${this.tabId}`);
|
2019-05-03 04:24:43 +08:00
|
|
|
}
|
|
|
|
|
2019-05-09 02:14:41 +08:00
|
|
|
setNote(note, notePath) {
|
2019-05-03 04:24:43 +08:00
|
|
|
this.noteId = note.noteId;
|
2019-05-09 02:14:41 +08:00
|
|
|
this.notePath = notePath;
|
2019-05-03 04:24:43 +08:00
|
|
|
this.note = note;
|
2019-05-14 04:08:06 +08:00
|
|
|
this.tabRow.updateTab(this.$tab[0], {title: note.title});
|
2019-05-05 04:44:25 +08:00
|
|
|
|
|
|
|
this.attributes.invalidateAttributes();
|
2019-05-05 16:59:34 +08:00
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$tabContent.toggleClass("protected", this.note.isProtected);
|
2019-05-06 02:45:07 +08:00
|
|
|
this.$protectButton.toggleClass("active", this.note.isProtected);
|
|
|
|
this.$protectButton.prop("disabled", this.note.isProtected);
|
|
|
|
this.$unprotectButton.toggleClass("active", !this.note.isProtected);
|
|
|
|
this.$unprotectButton.prop("disabled", !this.note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
|
|
|
|
|
2019-05-14 04:08:06 +08:00
|
|
|
this.setupClasses();
|
|
|
|
|
2019-05-15 04:29:47 +08:00
|
|
|
this.setCurrentNotePathToHash();
|
|
|
|
|
|
|
|
setTimeout(async () => {
|
|
|
|
// we include the note into recent list only if the user stayed on the note at least 5 seconds
|
|
|
|
if (notePath && notePath === await this.notePath) {
|
|
|
|
await server.post('recent-notes', { notePath });
|
|
|
|
}
|
|
|
|
}, 5000);
|
|
|
|
|
2019-05-14 04:08:06 +08:00
|
|
|
console.log(`Switched tab ${this.tabId} to ${this.noteId}`);
|
|
|
|
}
|
|
|
|
|
2019-05-15 04:29:47 +08:00
|
|
|
show() {
|
|
|
|
this.$tabContent.show();
|
|
|
|
this.setCurrentNotePathToHash();
|
|
|
|
|
|
|
|
document.title = "Trilium Notes";
|
|
|
|
|
|
|
|
if (this.note) {
|
|
|
|
// it helps navigating in history if note title is included in the title
|
|
|
|
document.title += " - " + this.note.title;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
hide() {
|
|
|
|
this.$tabContent.hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
setCurrentNotePathToHash() {
|
|
|
|
if (this.$tab[0] === this.tabRow.activeTabEl) {
|
|
|
|
document.location.hash = (this.notePath || "") + "-" + this.tabId;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-14 04:08:06 +08:00
|
|
|
setupClasses() {
|
|
|
|
for (const clazz of Array.from(this.$tab[0].classList)) { // create copy to safely iterate over while removing classes
|
|
|
|
if (clazz !== 'note-tab') {
|
|
|
|
this.$tab.removeClass(clazz);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
for (const clazz of Array.from(this.$tabContent[0].classList)) { // create copy to safely iterate over while removing classes
|
2019-05-14 04:08:06 +08:00
|
|
|
if (clazz !== 'note-tab-content') {
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$tabContent.removeClass(clazz);
|
2019-05-06 02:45:07 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-14 04:08:06 +08:00
|
|
|
this.$tab.addClass(this.note.cssClass);
|
|
|
|
this.$tab.addClass(utils.getNoteTypeClass(this.note.type));
|
|
|
|
this.$tab.addClass(utils.getMimeTypeClass(this.note.mime));
|
|
|
|
|
|
|
|
this.$tabContent.addClass(this.note.cssClass);
|
2019-05-09 01:55:24 +08:00
|
|
|
this.$tabContent.addClass(utils.getNoteTypeClass(this.note.type));
|
|
|
|
this.$tabContent.addClass(utils.getMimeTypeClass(this.note.mime));
|
2019-05-02 04:19:29 +08:00
|
|
|
}
|
|
|
|
|
2019-05-06 01:48:30 +08:00
|
|
|
getComponent() {
|
2019-05-12 18:58:55 +08:00
|
|
|
let type;
|
2019-05-06 01:48:30 +08:00
|
|
|
|
2019-05-12 18:58:55 +08:00
|
|
|
if (this.note) {
|
|
|
|
type = this.note.type;
|
2019-05-06 01:48:30 +08:00
|
|
|
|
2019-05-12 18:58:55 +08:00
|
|
|
if (this.note.isProtected) {
|
|
|
|
if (protectedSessionHolder.isProtectedSessionAvailable()) {
|
|
|
|
protectedSessionHolder.touchProtectedSession();
|
|
|
|
} else {
|
|
|
|
type = 'protected-session';
|
|
|
|
|
|
|
|
// user shouldn't be able to edit note title
|
|
|
|
this.$noteTitle.prop("readonly", true);
|
|
|
|
}
|
2019-05-06 01:48:30 +08:00
|
|
|
}
|
2019-05-02 04:19:29 +08:00
|
|
|
}
|
2019-05-12 18:58:55 +08:00
|
|
|
else {
|
|
|
|
type = 'empty';
|
|
|
|
}
|
2019-05-02 04:19:29 +08:00
|
|
|
|
|
|
|
if (!(type in this.components)) {
|
|
|
|
this.components[type] = new componentClasses[type](this);
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.components[type];
|
|
|
|
}
|
|
|
|
|
|
|
|
async saveNote() {
|
|
|
|
if (this.note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.note.title = this.$noteTitle.val();
|
2019-05-05 04:44:25 +08:00
|
|
|
this.note.content = noteDetailService.getActiveNoteContent();
|
2019-05-02 04:19:29 +08:00
|
|
|
|
|
|
|
// it's important to set the flag back to false immediatelly after retrieving title and content
|
|
|
|
// otherwise we might overwrite another change (especially async code)
|
|
|
|
this.isNoteChanged = false;
|
|
|
|
|
|
|
|
treeService.setNoteTitle(this.note.noteId, this.note.title);
|
|
|
|
|
|
|
|
await server.put('notes/' + this.note.noteId, this.note.dto);
|
|
|
|
|
|
|
|
if (this.note.isProtected) {
|
|
|
|
protectedSessionHolder.touchProtectedSession();
|
|
|
|
}
|
|
|
|
|
2019-05-04 03:50:14 +08:00
|
|
|
this.$savedIndicator.fadeIn();
|
2019-05-02 04:19:29 +08:00
|
|
|
|
|
|
|
// run async
|
2019-05-04 03:50:14 +08:00
|
|
|
bundleService.executeRelationBundles(this.note, 'runOnNoteChange');
|
2019-05-02 04:19:29 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
async saveNoteIfChanged() {
|
|
|
|
if (this.isNoteChanged) {
|
|
|
|
await this.saveNote();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
noteChanged() {
|
2019-05-04 20:34:03 +08:00
|
|
|
if (this.noteChangeDisabled) {
|
2019-05-02 04:19:29 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isNoteChanged = true;
|
|
|
|
|
2019-05-04 03:50:14 +08:00
|
|
|
this.$savedIndicator.fadeOut();
|
2019-05-02 04:19:29 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
async showChildrenOverview() {
|
2019-05-05 04:44:25 +08:00
|
|
|
const attributes = await this.attributes.getAttributes();
|
2019-05-02 04:19:29 +08:00
|
|
|
const hideChildrenOverview = attributes.some(attr => attr.type === 'label' && attr.name === 'hideChildrenOverview')
|
|
|
|
|| this.note.type === 'relation-map'
|
|
|
|
|| this.note.type === 'image'
|
|
|
|
|| this.note.type === 'file';
|
|
|
|
|
|
|
|
if (hideChildrenOverview) {
|
|
|
|
this.$childrenOverview.hide();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$childrenOverview.empty();
|
|
|
|
|
|
|
|
for (const childBranch of await this.note.getChildBranches()) {
|
|
|
|
const link = $('<a>', {
|
|
|
|
href: 'javascript:',
|
|
|
|
text: await treeUtils.getNoteTitle(childBranch.noteId, childBranch.parentNoteId)
|
2019-05-15 04:29:47 +08:00
|
|
|
}).attr('data-action', 'note').attr('data-note-path', this.notePath + '/' + childBranch.noteId);
|
2019-05-02 04:19:29 +08:00
|
|
|
|
|
|
|
const childEl = $('<div class="child-overview-item">').html(link);
|
|
|
|
this.$childrenOverview.append(childEl);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$childrenOverview.show();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-09 01:55:24 +08:00
|
|
|
export default TabContext;
|