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

Resize views in split view (only works in vertical, still has problems)

Browse source
This commit is contained in:
brahim 2024-09-14 15:33:23 +02:00
parent b9c35455ad
commit 73dc9e79c2
1 changed files with 48 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/ZenViewSplitter.mjs
View file

@ -270,6 +270,7 @@ var gZenViewSplitter = new (class {
}
this.activateSplitView(splitData, tab);
if (!splitData.sizes) this.applySplitters(splitData);
}
/**
@ -322,6 +323,27 @@ var gZenViewSplitter = new (class {
});
}
applySplitters(splitData) {
const tabs = splitData.tabs;
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[0];
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
if (splitData.gridType === 'vsep' && i != tabs.length - 1) {
let splitter = document.createXULElement('div');
splitter.className = 'zen-split-view-splitter';
splitter.setAttribute('orient', 'vertical');
splitter.addEventListener('mousedown', this.handleSplitterMouseDown);
container.insertAdjacentElement("beforeend", splitter);
}
}
if (splitData.gridType === 'vsep') {
const w = 100 / tabs.length;
splitData.sizes = tabs.map(t => ({width: w}));
}
}
/**
* Calculates the grid areas for the tabs.
*
@ -401,6 +423,32 @@ var gZenViewSplitter = new (class {
}
};
handleSplitterMouseDown = (event) => {
const container = event.target.parentElement;
const tab = window.gBrowser.tabs.find((t) => t.linkedBrowser.closest('.browserSidebarContainer') === container);
const currentView = this._data[this.currentView];
const tabIdx = currentView.tabs.findIndex(t => t === tab);
let dragFunc;
let prevX = event.clientX;
dragFunc = (dEvent) => {
requestAnimationFrame(() => {
const movementX = dEvent.clientX - prevX;
const percentageChange = (movementX / this._tabBrowserPanel.getBoundingClientRect().width) * 100;
currentView.sizes[tabIdx].width += percentageChange;
currentView.sizes[tabIdx + 1].width -= percentageChange;
this._tabBrowserPanel.style['grid-template-columns'] = currentView.tabs.map((t, i) => `${currentView.sizes[i].width}%`).join(' ');
prevX = dEvent.clientX;
});
}
const stopListeners = () => {
removeEventListener('mousemove', dragFunc);
removeEventListener('mouseup', stopListeners);
}
addEventListener('mousemove', dragFunc);
addEventListener('mouseup', stopListeners);
}
/**
* Sets the docshell state for the tabs.
*