NoteContext => TabContext

This commit is contained in:
zadam 2019-05-08 19:55:24 +02:00
parent db7e083a21
commit bacf163c96
14 changed files with 104 additions and 104 deletions

View File

@ -7,14 +7,14 @@ import linkService from "./link.js";
class Attributes {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$attributeList = ctx.$noteTabContent.find(".attribute-list");
this.$attributeListInner = ctx.$noteTabContent.find(".attribute-list-inner");
this.$promotedAttributesContainer = ctx.$noteTabContent.find(".note-detail-promoted-attributes");
this.$savedIndicator = ctx.$noteTabContent.find(".saved-indicator");
this.$attributeList = ctx.$tabContent.find(".attribute-list");
this.$attributeListInner = ctx.$tabContent.find(".attribute-list-inner");
this.$promotedAttributesContainer = ctx.$tabContent.find(".note-detail-promoted-attributes");
this.$savedIndicator = ctx.$tabContent.find(".saved-indicator");
this.attributePromise = null;
}

View File

@ -10,7 +10,7 @@ const dragAndDropSetup = {
return false;
}
if (!data.originalEvent.ctrlKey) {
if (!data.originalEvent.shiftKey) {
// keep existing selection only if CTRL key is pressed
for (const selectedNode of treeService.getSelectedNodes()) {
selectedNode.setSelected(false);

View File

@ -98,7 +98,7 @@ function init() {
};
}
function noteContextMenu(e) {
function tabContextMenu(e) {
const $link = $(e.target);
const notePath = getNotePathFromLink($link);
@ -123,9 +123,9 @@ function noteContextMenu(e) {
});
}
$(document).on('contextmenu', '.note-detail-text a', noteContextMenu);
$(document).on('contextmenu', "a[data-action='note']", noteContextMenu);
$(document).on('contextmenu', ".note-detail-render a", noteContextMenu);
$(document).on('contextmenu', '.note-detail-text a', tabContextMenu);
$(document).on('contextmenu', "a[data-action='note']", tabContextMenu);
$(document).on('contextmenu', ".note-detail-render a", tabContextMenu);
// when click on link popup, in case of internal link, just go the the referenced note instead of default behavior
// of opening the link in new window/tab

View File

@ -17,7 +17,7 @@ import noteDetailRelationMap from "./note_detail_relation_map.js";
import noteDetailProtectedSession from "./note_detail_protected_session.js";
import protectedSessionService from "./protected_session.js";
const $noteTabContentsContainer = $("#note-tab-container");
const $tabContentsContainer = $("#note-tab-container");
const componentClasses = {
'code': noteDetailCode,
@ -32,7 +32,7 @@ const componentClasses = {
let tabIdCounter = 1;
class NoteContext {
class TabContext {
constructor(chromeTabs, openOnBackground) {
this.tabId = tabIdCounter++;
this.chromeTabs = chromeTabs;
@ -43,17 +43,17 @@ class NoteContext {
background: openOnBackground
});
this.$noteTabContent = $(".note-tab-content-template").clone();
this.$noteTabContent.removeClass('note-tab-content-template');
this.$noteTabContent.attr('data-tab-id', this.tabId);
this.$tabContent = $(".note-tab-content-template").clone();
this.$tabContent.removeClass('note-tab-content-template');
this.$tabContent.attr('data-tab-id', this.tabId);
$noteTabContentsContainer.append(this.$noteTabContent);
$tabContentsContainer.append(this.$tabContent);
this.$noteTitle = this.$noteTabContent.find(".note-title");
this.$noteDetailComponents = this.$noteTabContent.find(".note-detail-component");
this.$childrenOverview = this.$noteTabContent.find(".children-overview");
this.$scriptArea = this.$noteTabContent.find(".note-detail-script-area");
this.$savedIndicator = this.$noteTabContent.find(".saved-indicator");
this.$noteTitle = this.$tabContent.find(".note-title");
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");
this.noteChangeDisabled = false;
this.isNoteChanged = false;
this.attributes = new Attributes(this);
@ -68,10 +68,10 @@ class NoteContext {
treeService.setNoteTitle(this.noteId, title);
});
this.$protectButton = this.$noteTabContent.find(".protect-button");
this.$protectButton = this.$tabContent.find(".protect-button");
this.$protectButton.click(protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$noteTabContent.find(".unprotect-button");
this.$unprotectButton = this.$tabContent.find(".unprotect-button");
this.$unprotectButton.click(protectedSessionService.unprotectNoteAndSendToServer);
console.log(`Created note tab ${this.tabId} for ${this.noteId}`);
@ -81,26 +81,26 @@ class NoteContext {
this.noteId = note.noteId;
this.note = note;
this.tab.setAttribute('data-note-id', this.noteId);
this.$noteTabContent.attr('data-note-id', note.noteId);
this.$tabContent.attr('data-note-id', note.noteId);
this.chromeTabs.updateTab(this.tab, {title: note.title});
this.attributes.invalidateAttributes();
this.$noteTabContent.toggleClass("protected", this.note.isProtected);
this.$tabContent.toggleClass("protected", this.note.isProtected);
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());
for (const clazz of Array.from(this.$noteTabContent[0].classList)) { // create copy to safely iterate over while removing classes
for (const clazz of Array.from(this.$tabContent[0].classList)) { // create copy to safely iterate over while removing classes
if (clazz.startsWith("type-") || clazz.startsWith("mime-")) {
this.$noteTabContent.removeClass(clazz);
this.$tabContent.removeClass(clazz);
}
}
this.$noteTabContent.addClass(utils.getNoteTypeClass(this.note.type));
this.$noteTabContent.addClass(utils.getMimeTypeClass(this.note.mime));
this.$tabContent.addClass(utils.getNoteTypeClass(this.note.type));
this.$tabContent.addClass(utils.getMimeTypeClass(this.note.mime));
console.log(`Switched tab ${this.tabId} to ${this.noteId}`);
}
@ -199,4 +199,4 @@ class NoteContext {
}
}
export default NoteContext;
export default TabContext;

View File

@ -1,5 +1,5 @@
import treeService from './tree.js';
import NoteContext from './note_context.js';
import TabContext from './note_context.js';
import server from './server.js';
import messagingService from "./messaging.js";
import infoService from "./info.js";
@ -14,7 +14,7 @@ const chromeTabsEl = document.querySelector('.chrome-tabs');
const chromeTabs = new ChromeTabs();
chromeTabs.init(chromeTabsEl);
const $noteTabContentsContainer = $("#note-tab-container");
const $tabContentsContainer = $("#note-tab-container");
const $savedIndicator = $(".saved-indicator");
let detailLoadedListeners = [];
@ -44,10 +44,10 @@ async function reload() {
}
async function reloadAllTabs() {
for (const noteContext of noteContexts) {
const note = await loadNote(noteContext.note.noteId);
for (const tabContext of tabContexts) {
const note = await loadNote(tabContext.note.noteId);
await loadNoteDetailToContext(noteContext, note);
await loadNoteDetailToContext(tabContext, note);
}
}
@ -73,7 +73,7 @@ function onNoteChange(func) {
}
async function saveNotesIfChanged() {
for (const ctx of noteContexts) {
for (const ctx of tabContexts) {
await ctx.saveNoteIfChanged();
}
@ -81,17 +81,17 @@ async function saveNotesIfChanged() {
$savedIndicator.fadeIn();
}
/** @type {NoteContext[]} */
let noteContexts = [];
/** @type {TabContext[]} */
let tabContexts = [];
function getActiveComponent() {
return getActiveContext().getComponent();
}
/** @returns {NoteContext} */
/** @returns {TabContext} */
function getActiveContext() {
for (const ctx of noteContexts) {
if (ctx.$noteTabContent.is(":visible")) {
for (const ctx of tabContexts) {
if (ctx.$tabContent.is(":visible")) {
return ctx;
}
}
@ -100,13 +100,13 @@ function getActiveContext() {
function showTab(tabId) {
tabId = parseInt(tabId);
for (const ctx of noteContexts) {
ctx.$noteTabContent.toggle(ctx.tabId === tabId);
for (const ctx of tabContexts) {
ctx.$tabContent.toggle(ctx.tabId === tabId);
}
}
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
* @param {NoteFull} note
*/
async function loadNoteDetailToContext(ctx, note) {
@ -167,10 +167,10 @@ async function loadNoteDetail(noteId, newTab = false) {
const loadedNote = await loadNote(noteId);
let ctx;
if (noteContexts.length === 0 || newTab) {
if (tabContexts.length === 0 || newTab) {
// if it's a new tab explicitly by user then it's in background
ctx = new NoteContext(chromeTabs, newTab);
noteContexts.push(ctx);
ctx = new TabContext(chromeTabs, newTab);
tabContexts.push(ctx);
if (!newTab) {
showTab(ctx.tabId);
@ -238,11 +238,11 @@ messagingService.subscribeToSyncMessages(syncData => {
}
});
$noteTabContentsContainer.on("dragover", e => e.preventDefault());
$tabContentsContainer.on("dragover", e => e.preventDefault());
$noteTabContentsContainer.on("dragleave", e => e.preventDefault());
$tabContentsContainer.on("dragleave", e => e.preventDefault());
$noteTabContentsContainer.on("drop", e => {
$tabContentsContainer.on("drop", e => {
importDialog.uploadFiles(getActiveNoteId(), e.originalEvent.dataTransfer.files, {
safeImport: true,
shrinkImages: true,
@ -263,7 +263,7 @@ chromeTabsEl.addEventListener('activeTabChange', ({ detail }) => {
chromeTabsEl.addEventListener('tabRemove', ({ detail }) => {
const tabId = parseInt(detail.tabEl.getAttribute('data-tab-id'));
noteContexts = noteContexts.filter(nc => nc.tabId !== tabId);
tabContexts = tabContexts.filter(nc => nc.tabId !== tabId);
console.log(`Removed tab ${tabId}`);
});
@ -287,7 +287,7 @@ $(chromeTabsEl).on('contextmenu', '.chrome-tab', e => {
if (utils.isElectron()) {
utils.bindShortcut('ctrl+w', () => {
if (noteContexts.length === 1) {
if (tabContexts.length === 1) {
// at least one tab must be present
return;
}

View File

@ -8,13 +8,13 @@ import utils from "./utils.js";
class NoteDetailCode {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.codeEditor = null;
this.$component = ctx.$noteTabContent.find('.note-detail-code');
this.$executeScriptButton = ctx.$noteTabContent.find(".execute-script-button");
this.$component = ctx.$tabContent.find('.note-detail-code');
this.$executeScriptButton = ctx.$tabContent.find(".execute-script-button");
utils.bindShortcut("ctrl+return", () => this.executeCurrentNote());

View File

@ -5,19 +5,19 @@ import noteDetailService from "./note_detail.js";
class NoteDetailFile {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTabContent.find('.note-detail-file');
this.$fileNoteId = ctx.$noteTabContent.find(".file-note-id");
this.$fileName = ctx.$noteTabContent.find(".file-filename");
this.$fileType = ctx.$noteTabContent.find(".file-filetype");
this.$fileSize = ctx.$noteTabContent.find(".file-filesize");
this.$previewRow = ctx.$noteTabContent.find(".file-preview-row");
this.$previewContent = ctx.$noteTabContent.find(".file-preview-content");
this.$downloadButton = ctx.$noteTabContent.find(".file-download");
this.$openButton = ctx.$noteTabContent.find(".file-open");
this.$component = ctx.$tabContent.find('.note-detail-file');
this.$fileNoteId = ctx.$tabContent.find(".file-note-id");
this.$fileName = ctx.$tabContent.find(".file-filename");
this.$fileType = ctx.$tabContent.find(".file-filetype");
this.$fileSize = ctx.$tabContent.find(".file-filesize");
this.$previewRow = ctx.$tabContent.find(".file-preview-row");
this.$previewContent = ctx.$tabContent.find(".file-preview-content");
this.$downloadButton = ctx.$tabContent.find(".file-download");
this.$openButton = ctx.$tabContent.find(".file-open");
this.$downloadButton.click(() => utils.download(this.getFileUrl()));

View File

@ -5,19 +5,19 @@ import server from "./server.js";
class NoteDetailImage {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTabContent.find('.note-detail-image');
this.$imageWrapper = ctx.$noteTabContent.find('.note-detail-image-wrapper');
this.$imageView = ctx.$noteTabContent.find('.note-detail-image-view');
this.$copyToClipboardButton = ctx.$noteTabContent.find(".image-copy-to-clipboard");
this.$fileName = ctx.$noteTabContent.find(".image-filename");
this.$fileType = ctx.$noteTabContent.find(".image-filetype");
this.$fileSize = ctx.$noteTabContent.find(".image-filesize");
this.$component = ctx.$tabContent.find('.note-detail-image');
this.$imageWrapper = ctx.$tabContent.find('.note-detail-image-wrapper');
this.$imageView = ctx.$tabContent.find('.note-detail-image-view');
this.$copyToClipboardButton = ctx.$tabContent.find(".image-copy-to-clipboard");
this.$fileName = ctx.$tabContent.find(".image-filename");
this.$fileType = ctx.$tabContent.find(".image-filetype");
this.$fileSize = ctx.$tabContent.find(".image-filesize");
this.$imageDownloadButton = ctx.$noteTabContent.find(".image-download");
this.$imageDownloadButton = ctx.$tabContent.find(".image-download");
this.$imageDownloadButton.click(() => utils.download(this.getFileUrl()));
this.$copyToClipboardButton.click(() => {

View File

@ -2,13 +2,13 @@ import protectedSessionService from './protected_session.js';
class NoteDetailProtectedSession {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTabContent.find(".protected-session-password-component");
this.$passwordForm = ctx.$noteTabContent.find(".protected-session-password-form");
this.$passwordInput = ctx.$noteTabContent.find(".protected-session-password");
this.$component = ctx.$tabContent.find(".protected-session-password-component");
this.$passwordForm = ctx.$tabContent.find(".protected-session-password-form");
this.$passwordInput = ctx.$tabContent.find(".protected-session-password");
this.$passwordForm.submit(() => {
const password = this.$passwordInput.val();

View File

@ -68,16 +68,16 @@ let containerCounter = 1;
class NoteDetailRelationMap {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTabContent.find(".note-detail-relation-map");
this.$relationMapContainer = ctx.$noteTabContent.find(".relation-map-container");
this.$createChildNote = ctx.$noteTabContent.find(".relation-map-create-child-note");
this.$zoomInButton = ctx.$noteTabContent.find(".relation-map-zoom-in");
this.$zoomOutButton = ctx.$noteTabContent.find(".relation-map-zoom-out");
this.$resetPanZoomButton = ctx.$noteTabContent.find(".relation-map-reset-pan-zoom");
this.$component = ctx.$tabContent.find(".note-detail-relation-map");
this.$relationMapContainer = ctx.$tabContent.find(".relation-map-container");
this.$createChildNote = ctx.$tabContent.find(".relation-map-create-child-note");
this.$zoomInButton = ctx.$tabContent.find(".relation-map-zoom-in");
this.$zoomOutButton = ctx.$tabContent.find(".relation-map-zoom-out");
this.$resetPanZoomButton = ctx.$tabContent.find(".relation-map-reset-pan-zoom");
this.mapData = null;
this.jsPlumbInstance = null;
@ -94,7 +94,7 @@ class NoteDetailRelationMap {
{title: "Edit title", cmd: "edit-title", uiIcon: "pencil"},
];
},
selectContextMenuItem: (event, cmd) => this.noteContextMenuHandler(event, cmd)
selectContextMenuItem: (event, cmd) => this.tabContextMenuHandler(event, cmd)
});
return false;
@ -133,7 +133,7 @@ class NoteDetailRelationMap {
this.$component.on("dragover", ev => ev.preventDefault());
}
async noteContextMenuHandler(event, cmd) {
async tabContextMenuHandler(event, cmd) {
const $noteBox = $(event.originalTarget).closest(".note-box");
const $title = $noteBox.find(".title a");
const noteId = this.idToNoteId($noteBox.prop("id"));

View File

@ -5,14 +5,14 @@ import attributeService from "./attributes.js";
class NoteDetailRender {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTabContent.find('.note-detail-render');
this.$noteDetailRenderHelp = ctx.$noteTabContent.find('.note-detail-render-help');
this.$noteDetailRenderContent = ctx.$noteTabContent.find('.note-detail-render-content');
this.$renderButton = ctx.$noteTabContent.find('.render-button');
this.$component = ctx.$tabContent.find('.note-detail-render');
this.$noteDetailRenderHelp = ctx.$tabContent.find('.note-detail-render-help');
this.$noteDetailRenderContent = ctx.$tabContent.find('.note-detail-render-content');
this.$renderButton = ctx.$tabContent.find('.render-button');
this.$renderButton.click(this.show);
}

View File

@ -3,14 +3,14 @@ import searchNotesService from "./search_notes.js";
class NoteDetailSearch {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$searchString = ctx.$noteTabContent.find(".search-string");
this.$component = ctx.$noteTabContent.find('.note-detail-search');
this.$help = ctx.$noteTabContent.find(".note-detail-search-help");
this.$refreshButton = ctx.$noteTabContent.find('.note-detail-search-refresh-results-button');
this.$searchString = ctx.$tabContent.find(".search-string");
this.$component = ctx.$tabContent.find('.note-detail-search');
this.$help = ctx.$tabContent.find(".note-detail-search-help");
this.$refreshButton = ctx.$tabContent.find('.note-detail-search-refresh-results-button');
this.$refreshButton.click(async () => {
await noteDetailService.saveNotesIfChanged();

View File

@ -3,11 +3,11 @@ import treeService from './tree.js';
class NoteDetailText {
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTabContent.find('.note-detail-text');
this.$component = ctx.$tabContent.find('.note-detail-text');
this.textEditor = null;
this.$component.on("dblclick", "img", e => {

View File

@ -44,15 +44,15 @@ const DEFAULT_MIME_TYPES = [
let mimeTypes = DEFAULT_MIME_TYPES;
/**
* @param {NoteContext} ctx
* @param {TabContext} ctx
* @constructor
*/
function NoteTypeContext(ctx) {
const self = this;
this.$executeScriptButton = ctx.$noteTabContent.find(".execute-script-button");
this.$toggleEditButton = ctx.$noteTabContent.find('.toggle-edit-button');
this.$renderButton = ctx.$noteTabContent.find('.render-button');
this.$executeScriptButton = ctx.$tabContent.find(".execute-script-button");
this.$toggleEditButton = ctx.$tabContent.find('.toggle-edit-button');
this.$renderButton = ctx.$tabContent.find('.render-button');
this.ctx = ctx;
this.type = ko.observable('text');
@ -184,7 +184,7 @@ function NoteTypeContext(ctx) {
self.$renderButton.toggle(self.type() === 'render');
};
ko.applyBindings(this, ctx.$noteTabContent.find('.note-type-wrapper')[0])
ko.applyBindings(this, ctx.$tabContent.find('.note-type-wrapper')[0])
}
export default {