refactored tab activation

This commit is contained in:
zadam
2020-01-19 21:12:53 +01:00
parent 1098d75ce0
commit 0760dc742b
8 changed files with 79 additions and 44 deletions

View File

@@ -18,6 +18,12 @@ class BasicWidget extends Component {
this.$widget.toggle(show);
}
remove() {
if (this.$widget) {
this.$widget.remove();
}
}
cleanup() {}
}

View File

@@ -132,7 +132,13 @@ export default class NoteTitleWidget extends TabAwareWidget {
}
}
async beforeNoteSwitch({tabId}) {
async beforeNoteSwitchListener({tabId}) {
if (this.isTab(tabId)) {
await this.spacedUpdate.updateNowIfNecessary();
}
}
async beforeTabRemoveListener({tabId}) {
if (this.isTab(tabId)) {
await this.spacedUpdate.updateNowIfNecessary();
}

View File

@@ -408,6 +408,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
if (oldActiveNode) {
oldActiveNode.setActive(false);
oldActiveNode.setFocus(false);
}
if (this.tabContext && this.tabContext.notePath) {

View File

@@ -35,6 +35,14 @@ export default class TabCachingWidget extends TabAwareWidget {
return false; // stop propagation to children
}
tabRemovedListener({tabId}) {
const widget = this.widgets[tabId];
if (widget) {
widget.remove();
}
}
toggle(show) {
for (const tabId in this.widgets) {
this.widgets[tabId].toggle(show && this.tabContext && tabId === this.tabContext.tabId);

View File

@@ -399,11 +399,11 @@ export default class TabRowWidget extends BasicWidget {
setTabCloseEventListener(tabEl) {
tabEl.querySelector('.note-tab-close')
.addEventListener('click', _ => this.removeTab(tabEl.getAttribute('data-tab-id')));
.addEventListener('click', _ => this.appContext.removeTab(tabEl.getAttribute('data-tab-id')));
tabEl.addEventListener('mousedown', e => {
if (e.which === 2) {
this.removeTab(tabEl.getAttribute('data-tab-id'));
this.appContext.removeTab(tabEl.getAttribute('data-tab-id'));
return true; // event has been handled
}
@@ -464,44 +464,26 @@ export default class TabRowWidget extends BasicWidget {
return !!this.activeTabEl;
}
activateTab(tabEl) {
activeTabChangedListener({tabId}) {
const tabEl = this.getTabById(tabId)[0];
const activeTabEl = this.activeTabEl;
if (activeTabEl === tabEl) return;
if (activeTabEl) activeTabEl.removeAttribute('active');
tabEl.setAttribute('active', '');
this.trigger('activeTabChanged', { tabId: tabEl.getAttribute('data-tab-id') });
}
removeTab(tabId) {
const tabEl = this.$widget.find(`[data-tab-id='${tabId}']`)[0];
const tabEl = this.getTabById(tabId)[0];
if (tabEl === this.activeTabEl) {
if (tabEl.nextElementSibling && tabEl.nextElementSibling.classList.contains("note-tab")) {
this.activateTab(tabEl.nextElementSibling)
} else if (tabEl.previousElementSibling && tabEl.previousElementSibling.classList.contains("note-tab")) {
this.activateTab(tabEl.previousElementSibling)
}
}
tabEl.parentNode.removeChild(tabEl);
this.trigger('tabRemove', { tabId: tabEl.getAttribute('data-tab-id') });
this.cleanUpPreviouslyDraggedTabs();
this.layoutTabs();
this.setupDraggabilly();
this.setVisibility();
}
removeAllTabs() {
for (const tabEl of this.tabEls) {
this.removeTab(tabEl.getAttribute('data-tab-id'));
}
}
removeAllTabsExceptForThis(remainingTabEl) {
for (const tabEl of this.tabEls) {
if (remainingTabEl !== tabEl) {
this.removeTab(tabEl.getAttribute('data-tab-id'));
}
}
getTabIdsInOrder() {
return this.tabEls.map(el => el.getAttribute('data-tab-id'));
}
updateTab(tabEl, tabProperties) {
@@ -519,6 +501,10 @@ export default class TabRowWidget extends BasicWidget {
.forEach($el => $el.find('.note-tab-title').text(title));
}
tabRemovedListener({tabId}) {
this.removeTab(tabId);
}
cleanUpPreviouslyDraggedTabs() {
this.tabEls.forEach((tabEl) => tabEl.classList.remove('note-tab-was-just-dragged'));
}
@@ -552,7 +538,7 @@ export default class TabRowWidget extends BasicWidget {
this.draggabillies.push(draggabilly);
draggabilly.on('pointerDown', _ => {
this.activateTab(tabEl)
this.appContext.activateTab(tabEl.getAttribute('data-tab-id'));
});
draggabilly.on('dragStart', _ => {