gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

more tab row refactoring

Browse Source
This commit is contained in:
zadam 2020-01-15 22:27:52 +01:00
parent 1552c3804d
commit cc138ef9f8
4 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/public/javascripts/services/app_context.js
View File

@ -161,13 +161,7 @@ class AppContext {
/** @returns {TabContext} */ /** @returns {TabContext} */
getActiveTabContext() { getActiveTabContext() {
const activeTabEl = this.tabRow.activeTabEl; const tabId = this.tabRow.activeTabId;
if (!activeTabEl) {
return null;
}
const tabId = activeTabEl.getAttribute('data-tab-id');
return this.tabContexts.find(tc => tc.tabId === tabId); return this.tabContexts.find(tc => tc.tabId === tabId);
} }
@ -294,7 +288,7 @@ class AppContext {
async filterTabs(noteId) { async filterTabs(noteId) {
for (const tc of this.tabContexts) { for (const tc of this.tabContexts) {
if (tc.notePath && !tc.notePath.split("/").includes(noteId)) { if (tc.notePath && !tc.notePath.split("/").includes(noteId)) {
await this.tabRow.removeTab(tc.$tab[0]); this.tabRow.removeTab(tc.tabId);
} }
} }
@ -349,15 +343,11 @@ class AppContext {
this.openEmptyTab(); this.openEmptyTab();
} }
async activeTabChangedListener({tabEl}) { async activeTabChangedListener({tabId}) {
const tabId = tabEl.getAttribute('data-tab-id');
await this.showTab(tabId); await this.showTab(tabId);
} }
async tabRemoveListener({tabEl}) { async tabRemoveListener({tabId}) {
const tabId = tabEl.getAttribute('data-tab-id');
this.tabContexts.filter(nc => nc.tabId === tabId) this.tabContexts.filter(nc => nc.tabId === tabId)
.forEach(tc => tc.remove()); .forEach(tc => tc.remove());
@ -383,7 +373,7 @@ keyboardActionService.setGlobalActionHandler('OpenNewTab', () => {
keyboardActionService.setGlobalActionHandler('CloseActiveTab', () => { keyboardActionService.setGlobalActionHandler('CloseActiveTab', () => {
if (this.tabRow.activeTabEl) { if (this.tabRow.activeTabEl) {
this.tabRow.removeTab(this.tabRow.activeTabEl); this.tabRow.removeTab(this.tabRow.activeTabId);
} }
}); });

2
src/public/javascripts/services/note_detail.js
View File

@ -139,7 +139,7 @@ async function noteDeleted(noteId) {
// not removing active even if it contains deleted note since that one will move to another note (handled by deletion logic) // not removing active even if it contains deleted note since that one will move to another note (handled by deletion logic)
// and we would lose tab context state (e.g. sidebar visibility) // and we would lose tab context state (e.g. sidebar visibility)
if (!tc.isActive() && tc.notePath && tc.notePath.split("/").includes(noteId)) { if (!tc.isActive() && tc.notePath && tc.notePath.split("/").includes(noteId)) {
await tabRow.removeTab(tc.$tab[0]); tabRow.removeTab(tc.tabId);
} }
} }
} }

4
src/public/javascripts/services/tab_context.js
View File

@ -109,7 +109,7 @@ class TabContext extends Component {
} }
isActive() { isActive() {
return this.$tab[0] === this.tabRow.activeTabEl; return this.tabId === this.tabRow.activeTabId;
} }
setupClasses() { setupClasses() {
@ -213,7 +213,7 @@ class TabContext extends Component {
return { return {
tabId: this.tabId, tabId: this.tabId,
notePath: this.notePath, notePath: this.notePath,
active: this.tabRow.activeTabEl === this.$tab[0] active: this.tabRow.activeTabId === this.tabId
} }
} }

36
src/public/javascripts/widgets/tab_row.js
View File

@ -399,17 +399,23 @@ export default class TabRowWidget extends BasicWidget {
setTabCloseEventListener(tabEl) { setTabCloseEventListener(tabEl) {
tabEl.querySelector('.note-tab-close') tabEl.querySelector('.note-tab-close')
.addEventListener('click', _ => this.removeTab(tabEl)); .addEventListener('click', _ => this.removeTab(tabEl.getAttribute('data-tab-id')));
tabEl.addEventListener('mousedown', e => { tabEl.addEventListener('mousedown', e => {
if (e.which === 2) { if (e.which === 2) {
this.removeTab(tabEl); this.removeTab(tabEl.getAttribute('data-tab-id'));
return true; // event has been handled return true; // event has been handled
} }
}); });
} }
get activeTabId() {
const tabEl = this.activeTabEl;
return tabEl ? tabEl.getAttribute('data-tab-id') : null;
}
get activeTabEl() { get activeTabEl() {
return this.$widget.find('.note-tab[active]')[0]; return this.$widget.find('.note-tab[active]')[0];
} }
@ -458,40 +464,42 @@ export default class TabRowWidget extends BasicWidget {
return !!this.activeTabEl; return !!this.activeTabEl;
} }
async activateTab(tabEl) { activateTab(tabEl) {
const activeTabEl = this.activeTabEl; const activeTabEl = this.activeTabEl;
if (activeTabEl === tabEl) return; if (activeTabEl === tabEl) return;
if (activeTabEl) activeTabEl.removeAttribute('active'); if (activeTabEl) activeTabEl.removeAttribute('active');
tabEl.setAttribute('active', ''); tabEl.setAttribute('active', '');
await this.trigger('activeTabChanged', { tabEl }); this.trigger('activeTabChanged', { tabId: tabEl.getAttribute('data-tab-id') });
} }
async removeTab(tabEl) { removeTab(tabId) {
const tabEl = this.$widget.find(`[data-tab-id='${tabId}']`)[0];
if (tabEl === this.activeTabEl) { if (tabEl === this.activeTabEl) {
if (tabEl.nextElementSibling && tabEl.nextElementSibling.classList.contains("note-tab")) { if (tabEl.nextElementSibling && tabEl.nextElementSibling.classList.contains("note-tab")) {
await this.activateTab(tabEl.nextElementSibling) this.activateTab(tabEl.nextElementSibling)
} else if (tabEl.previousElementSibling && tabEl.previousElementSibling.classList.contains("note-tab")) { } else if (tabEl.previousElementSibling && tabEl.previousElementSibling.classList.contains("note-tab")) {
await this.activateTab(tabEl.previousElementSibling) this.activateTab(tabEl.previousElementSibling)
} }
} }
tabEl.parentNode.removeChild(tabEl); tabEl.parentNode.removeChild(tabEl);
await this.trigger('tabRemove', { tabEl }); this.trigger('tabRemove', { tabId: tabEl.getAttribute('data-tab-id') });
this.cleanUpPreviouslyDraggedTabs(); this.cleanUpPreviouslyDraggedTabs();
this.layoutTabs(); this.layoutTabs();
this.setupDraggabilly(); this.setupDraggabilly();
this.setVisibility(); this.setVisibility();
} }
async removeAllTabs() { removeAllTabs() {
for (const tabEl of this.tabEls) { for (const tabEl of this.tabEls) {
await this.removeTab(tabEl); this.removeTab(tabEl.getAttribute('data-tab-id'));
} }
} }
async removeAllTabsExceptForThis(remainingTabEl) { removeAllTabsExceptForThis(remainingTabEl) {
for (const tabEl of this.tabEls) { for (const tabEl of this.tabEls) {
if (remainingTabEl !== tabEl) { if (remainingTabEl !== tabEl) {
await this.removeTab(tabEl); this.removeTab(tabEl.getAttribute('data-tab-id'));
} }
} }
} }
@ -585,7 +593,7 @@ export default class TabRowWidget extends BasicWidget {
}) })
} }
async animateTabMove(tabEl, originIndex, destinationIndex) { animateTabMove(tabEl, originIndex, destinationIndex) {
if (destinationIndex < originIndex) { if (destinationIndex < originIndex) {
tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]); tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]);
} else { } else {
@ -593,7 +601,7 @@ export default class TabRowWidget extends BasicWidget {
tabEl.parentNode.insertBefore(tabEl, beforeEl); tabEl.parentNode.insertBefore(tabEl, beforeEl);
} }
await this.trigger('tabReorder', { tabEl, originIndex, destinationIndex }); this.trigger('tabReorder');
this.layoutTabs(); this.layoutTabs();
} }