ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-08 19:29:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix deactivate split view.

Browse source
This commit is contained in:
brahim 2024-09-15 13:08:11 +02:00
parent e4cb4646b8
commit ad106d5337
1 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/ZenViewSplitter.mjs
View file

@ -102,6 +102,8 @@ var gZenViewSplitter = new (class {
this.currentView = -1; this.currentView = -1;
this.tabBrowserPanel.removeAttribute('zen-split-view'); this.tabBrowserPanel.removeAttribute('zen-split-view');
this.tabBrowserPanel.style.gridTemplateAreas = ''; this.tabBrowserPanel.style.gridTemplateAreas = '';
this.tabBrowserPanel.style.gridTemplateColumns = '';
this.tabBrowserPanel.style.gridTemplateRows = '';
} }
/** /**
@ -270,7 +272,6 @@ var gZenViewSplitter = new (class {
} }
} }
this.applySplitters(splitData);
this.activateSplitView(splitData, tab); this.activateSplitView(splitData, tab);
} }
@ -286,6 +287,7 @@ var gZenViewSplitter = new (class {
this.tabBrowserPanel.removeAttribute('zen-split-view'); this.tabBrowserPanel.removeAttribute('zen-split-view');
this.tabBrowserPanel.style.gridTemplateAreas = ''; this.tabBrowserPanel.style.gridTemplateAreas = '';
this.tabBrowserPanel.style.gridTemplateColumns = ''; this.tabBrowserPanel.style.gridTemplateColumns = '';
this.tabBrowserPanel.style.gridTemplateRows = '';
this.setTabsDocShellState(this._data[this.currentView].tabs, false); this.setTabsDocShellState(this._data[this.currentView].tabs, false);
this.currentView = -1; this.currentView = -1;
} }
@ -305,6 +307,7 @@ var gZenViewSplitter = new (class {
this.setTabsDocShellState(splitData.tabs, true); this.setTabsDocShellState(splitData.tabs, true);
this.updateSplitViewButton(false); this.updateSplitViewButton(false);
this.applySplitters(splitData);
this.updateGridSizes(); this.updateGridSizes();
} }
@ -335,12 +338,11 @@ var gZenViewSplitter = new (class {
splitter.className = 'zen-split-view-splitter'; splitter.className = 'zen-split-view-splitter';
splitter.setAttribute('orient', orient); splitter.setAttribute('orient', orient);
splitter.setAttribute('idx', i + 1); splitter.setAttribute('idx', i + 1);
splitter.style = `grid-area: splitter${i + 1}`; splitter.style = `grid-area: ${orient === 'vertical' ? 'v' : 'h'}Splitter${i + 1}`;
splitter.addEventListener('mousedown', this.handleSplitterMouseDown); splitter.addEventListener('mousedown', this.handleSplitterMouseDown);
this.tabBrowserPanel.insertAdjacentElement("afterbegin", splitter); this.tabBrowserPanel.insertAdjacentElement("afterbegin", splitter);
} }
const splitters = [...gZenViewSplitter.tabBrowserPanel.children].filter(e => e.classList.contains('zen-split-view-splitter')); const splitters = [...gZenViewSplitter.tabBrowserPanel.children].filter(e => e.classList.contains('zen-split-view-splitter'));
const vSplittersNeeded = gridType === 'vsep' ? (tabs.length - 1) : gridType === 'hsep' ? 0 : NaN; const vSplittersNeeded = gridType === 'vsep' ? (tabs.length - 1) : gridType === 'hsep' ? 0 : NaN;
@ -358,20 +360,17 @@ var gZenViewSplitter = new (class {
insertSplitter(i, 'horizontal'); insertSplitter(i, 'horizontal');
} }
for (let i = 0; i < hSplitters.length - hSplittersNeeded; i++) { for (let i = 0; i < hSplitters.length - hSplittersNeeded; i++) {
vSplitters[i].remove(); hSplitters[i].remove();
} }
if (!splitData.sizes) { if (splitData.gridType === 'vsep' && splitData?.widths !== splitData.tabs.length) {
if (splitData.gridType === 'vsep') { splitData.widths = tabs.map(t => 100 / tabs.length);
const w = 100 / tabs.length;
splitData.widths = tabs.map(t => w);
splitData.heights = [100]; splitData.heights = [100];
} else if (splitData.gridType === 'hsep') { } else if (splitData.gridType === 'hsep' && splitData?.widths !== splitData.tabs.length) {
splitData.widths = [100]; splitData.widths = [100];
splitData.heights = tabs.map(t => 100 / tabs.length); splitData.heights = tabs.map(t => 100 / tabs.length);
} }
} }
}
/** /**
* Calculates the grid areas for the tabs. * Calculates the grid areas for the tabs.
@ -385,10 +384,10 @@ var gZenViewSplitter = new (class {
return this.calculateGridAreasForGrid(tabs); return this.calculateGridAreasForGrid(tabs);
} }
if (gridType === 'vsep') { if (gridType === 'vsep') {
return `'${tabs.slice(0, -1).map((_, j) => `tab${j + 1} splitter${j + 1}`).join(' ')} tab${tabs.length}'`; return `'${tabs.slice(0, -1).map((_, j) => `tab${j + 1} vSplitter${j + 1}`).join(' ')} tab${tabs.length}'`;
} }
if (gridType === 'hsep') { if (gridType === 'hsep') {
return tabs.slice(0, -1).map((_, j) => `'tab${j + 1}' 'splitter${j + 1}'`).join(' ') + `'tab${tabs.length}`; return tabs.slice(0, -1).map((_, j) => `'tab${j + 1}' 'hSplitter${j + 1}'`).join(' ') + `'tab${tabs.length}`;
} }
return ''; return '';
} }
@ -495,14 +494,22 @@ var gZenViewSplitter = new (class {
updateGridSizes() { updateGridSizes() {
const splitData = this._data[this.currentView]; const splitData = this._data[this.currentView];
this.tabBrowserPanel.style.gridTemplateColumns = splitData.tabs.slice(0, -1).map( if (splitData.widths.length === 1) {
(t, i) => `calc(${splitData.widths[i]}% - 7px) 7px` this.tabBrowserPanel.style.gridTemplateColumns = '';
} else {
this.tabBrowserPanel.style.gridTemplateColumns = splitData.widths.slice(0, -1).map(
(w) => `calc(${w}% - 7px) 7px`
).join(' '); ).join(' ');
}
this.tabBrowserPanel.style.gridTemplateRows = splitData.tabs.slice(0, -1).map( if (splitData.heights.length === 1) {
(t, i) => `calc(${splitData.heights[i]}% - 7px) 7px` this.tabBrowserPanel.style.gridTemplateRows = '';
} else {
this.tabBrowserPanel.style.gridTemplateRows = splitData.heights.slice(0, -1).map(
(h) => `calc(${h}% - 7px) 7px`
).join(' '); ).join(' ');
} }
}
/** /**
* Sets the docshell state for the tabs. * Sets the docshell state for the tabs.