mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 00:49:58 +02:00
Resize views in split view (only works in vertical, still has problems)
This commit is contained in:
parent
b9c35455ad
commit
73dc9e79c2
1 changed files with 48 additions and 0 deletions
|
@ -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.
|
||||
*
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue