gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01: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:35:15 +01:00
parent cc138ef9f8
commit 0178232f26
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -302,13 +302,13 @@ export default class TabRowWidget extends BasicWidget {
return Array.prototype.slice.call(this.$widget.find('.note-tab')); return Array.prototype.slice.call(this.$widget.find('.note-tab'));
} }
get tabContentEl() { get $tabContent() {
return this.$widget.find('.note-tab-row-content')[0]; return this.$widget.find('.note-tab-row-content');
} }
get tabContentWidths() { get tabContentWidths() {
const numberOfTabs = this.tabEls.length; const numberOfTabs = this.tabEls.length;
const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH; const tabsContentWidth = this.$tabContent[0].clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH;
const targetWidth = tabsContentWidth / numberOfTabs; const targetWidth = tabsContentWidth / numberOfTabs;
const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth)); const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
const flooredClampedTargetWidth = Math.floor(clampedTargetWidth); const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
@ -324,8 +324,8 @@ export default class TabRowWidget extends BasicWidget {
if (extraWidthRemaining > 0) extraWidthRemaining -= 1; if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
} }
if (this.fillerEl) { if (this.$filler) {
this.fillerEl.style.width = (extraWidthRemaining + MIN_FILLER_WIDTH) + "px"; this.$filler.css("width", (extraWidthRemaining + MIN_FILLER_WIDTH) + "px");
} }
return widths; return widths;
@ -386,7 +386,7 @@ export default class TabRowWidget extends BasicWidget {
tabEl.classList.add('note-tab-was-just-added'); tabEl.classList.add('note-tab-was-just-added');
setTimeout(() => tabEl.classList.remove('note-tab-was-just-added'), 500); setTimeout(() => tabEl.classList.remove('note-tab-was-just-added'), 500);
this.newTabEl.before(tabEl); this.$newTab.before(tabEl);
this.setVisibility(); this.setVisibility();
this.setTabCloseEventListener(tabEl); this.setTabCloseEventListener(tabEl);
this.updateTab(tabEl, {title: 'New tab'}); this.updateTab(tabEl, {title: 'New tab'});
@ -535,7 +535,7 @@ export default class TabRowWidget extends BasicWidget {
const draggabilly = new Draggabilly(tabEl, { const draggabilly = new Draggabilly(tabEl, {
axis: 'x', axis: 'x',
handle: '.note-tab-drag-handle', handle: '.note-tab-drag-handle',
containment: this.tabContentEl containment: this.$tabContent[0]
}); });
this.draggabillies.push(draggabilly); this.draggabillies.push(draggabilly);
@ -597,7 +597,7 @@ export default class TabRowWidget extends BasicWidget {
if (destinationIndex < originIndex) { if (destinationIndex < originIndex) {
tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]); tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]);
} else { } else {
const beforeEl = this.tabEls[destinationIndex + 1] || this.newTabEl; const beforeEl = this.tabEls[destinationIndex + 1] || this.$newTab;
tabEl.parentNode.insertBefore(tabEl, beforeEl); tabEl.parentNode.insertBefore(tabEl, beforeEl);
} }
@ -606,21 +606,17 @@ export default class TabRowWidget extends BasicWidget {
} }
setupNewButton() { setupNewButton() {
const div = document.createElement('div'); this.$newTab = $(NEW_TAB_BUTTON_TPL);
div.innerHTML = NEW_TAB_BUTTON_TPL;
this.newTabEl = div.firstElementChild;
this.tabContentEl.appendChild(this.newTabEl); this.$tabContent.append(this.$newTab);
this.newTabEl.addEventListener('click', _ => this.trigger('newTab')); this.$newTab.on('click', _ => this.trigger('newTab'));
} }
setupFiller() { setupFiller() {
const div = document.createElement('div'); this.$filler = $(FILLER_TPL);
div.innerHTML = FILLER_TPL;
this.fillerEl = div.firstElementChild;
this.tabContentEl.appendChild(this.fillerEl); this.$tabContent.append(this.$filler);
} }
closest(value, array) { closest(value, array) {