more tab row refactoring

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

View File

@ -161,13 +161,7 @@ class AppContext {
/** @returns {TabContext} */
getActiveTabContext() {
const activeTabEl = this.tabRow.activeTabEl;
if (!activeTabEl) {
return null;
}
const tabId = activeTabEl.getAttribute('data-tab-id');
const tabId = this.tabRow.activeTabId;
return this.tabContexts.find(tc => tc.tabId === tabId);
}
@ -294,7 +288,7 @@ class AppContext {
async filterTabs(noteId) {
for (const tc of this.tabContexts) {
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();
}
async activeTabChangedListener({tabEl}) {
const tabId = tabEl.getAttribute('data-tab-id');
async activeTabChangedListener({tabId}) {
await this.showTab(tabId);
}
async tabRemoveListener({tabEl}) {
const tabId = tabEl.getAttribute('data-tab-id');
async tabRemoveListener({tabId}) {
this.tabContexts.filter(nc => nc.tabId === tabId)
.forEach(tc => tc.remove());
@ -383,7 +373,7 @@ keyboardActionService.setGlobalActionHandler('OpenNewTab', () => {
keyboardActionService.setGlobalActionHandler('CloseActiveTab', () => {
if (this.tabRow.activeTabEl) {
this.tabRow.removeTab(this.tabRow.activeTabEl);
this.tabRow.removeTab(this.tabRow.activeTabId);
}
});

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)
// and we would lose tab context state (e.g. sidebar visibility)
if (!tc.isActive() && tc.notePath && tc.notePath.split("/").includes(noteId)) {
await tabRow.removeTab(tc.$tab[0]);
tabRow.removeTab(tc.tabId);
}
}
}

View File

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

View File

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