mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 19:49:59 +02:00
Make it impossible to drop splitview tab on itself, lower opacity of tab being dragged. Fix splitters not being cleared after browser drop.
This commit is contained in:
parent
3c8006df0e
commit
fdf81f2fe9
1 changed files with 36 additions and 12 deletions
|
@ -185,6 +185,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
}
|
}
|
||||||
|
|
||||||
enableTabSwitchView() {
|
enableTabSwitchView() {
|
||||||
|
if (this.switchViewEnabled) return;
|
||||||
|
this.switchViewEnabled = true;
|
||||||
|
this.switchViewView = this.currentView;
|
||||||
if (!this._thumnailCanvas) {
|
if (!this._thumnailCanvas) {
|
||||||
this._thumnailCanvas = document.createElement("canvas");
|
this._thumnailCanvas = document.createElement("canvas");
|
||||||
this._thumnailCanvas.width = 280 * devicePixelRatio;
|
this._thumnailCanvas.width = 280 * devicePixelRatio;
|
||||||
|
@ -194,26 +197,36 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
const browsers = this._data[this.currentView].tabs.map(t => t.linkedBrowser);
|
const browsers = this._data[this.currentView].tabs.map(t => t.linkedBrowser);
|
||||||
browsers.forEach(b => {
|
browsers.forEach(b => {
|
||||||
b.style.pointerEvents = 'none';
|
b.style.pointerEvents = 'none';
|
||||||
b.style.opacity = '.7';
|
b.style.opacity = '.85';
|
||||||
});
|
});
|
||||||
this.tabBrowserPanel.addEventListener('dragstart', this.onBrowserDragStart);
|
this.tabBrowserPanel.addEventListener('dragstart', this.onBrowserDragStart);
|
||||||
this.tabBrowserPanel.addEventListener('dragover', this.onBrowserDragOver);
|
this.tabBrowserPanel.addEventListener('dragover', this.onBrowserDragOver);
|
||||||
this.tabBrowserPanel.addEventListener('drop', this.onBrowserDrop);
|
this.tabBrowserPanel.addEventListener('drop', this.onBrowserDrop);
|
||||||
this.tabBrowserPanel.addEventListener('dragend', this.onBrowserDragEnd)
|
this.tabBrowserPanel.addEventListener('dragend', this.onBrowserDragEnd)
|
||||||
document.addEventListener('click', this.disableTabSwitchView, {once: true});
|
this.tabBrowserPanel.addEventListener('click', this.disableTabSwitchView);
|
||||||
}
|
}
|
||||||
|
|
||||||
disableTabSwitchView = () => {
|
disableTabSwitchView = (event = null) => {
|
||||||
this.switchViewEnabled = false;
|
if (!this.switchViewEnabled) return;
|
||||||
|
if (event) {
|
||||||
|
if (event.type === 'click' && event.button !== 0) return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.switchViewEnabled || (event && event.target.classList.contains('zen-split-view-splitter'))) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.tabBrowserPanel.removeEventListener('dragstart', this.onBrowserDragStart);
|
this.tabBrowserPanel.removeEventListener('dragstart', this.onBrowserDragStart);
|
||||||
this.tabBrowserPanel.removeEventListener('dragover', this.onBrowserDragOver);
|
this.tabBrowserPanel.removeEventListener('dragover', this.onBrowserDragOver);
|
||||||
this.tabBrowserPanel.removeEventListener('drop', this.onBrowserDrop);
|
this.tabBrowserPanel.removeEventListener('drop', this.onBrowserDrop);
|
||||||
const browsers = this._data[this.currentView].tabs.map(t => t.linkedBrowser);
|
this.tabBrowserPanel.removeEventListener('click', this.disableTabSwitchView);
|
||||||
|
const browsers = this._data[this.switchViewView].tabs.map(t => t.linkedBrowser);
|
||||||
browsers.forEach(b => {
|
browsers.forEach(b => {
|
||||||
b.style.pointerEvents = '';
|
b.style.pointerEvents = '';
|
||||||
b.style.opacity = '';
|
b.style.opacity = '';
|
||||||
});
|
});
|
||||||
|
this.switchViewEnabled = false;
|
||||||
|
this.switchViewView = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
onBrowserDragStart = (event) => {
|
onBrowserDragStart = (event) => {
|
||||||
|
@ -222,9 +235,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
if (!browser) {
|
if (!browser) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.dropZone.setAttribute('enabled', true);
|
browser.style.opacity = '.2';
|
||||||
const browserContainer = browser.closest('.browserSidebarContainer');
|
const browserContainer = browser.closest('.browserSidebarContainer');
|
||||||
event.dataTransfer.setData('text/plain', browserContainer.id);
|
event.dataTransfer.setData('text/plain', browserContainer.id);
|
||||||
|
this._draggingTab = gBrowser.getTabForBrowser(browser);
|
||||||
|
|
||||||
let dt = event.dataTransfer;
|
let dt = event.dataTransfer;
|
||||||
let scale = window.devicePixelRatio;
|
let scale = window.devicePixelRatio;
|
||||||
|
@ -298,6 +312,15 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
const browser = event.target.querySelector('browser');
|
const browser = event.target.querySelector('browser');
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
const tab = gBrowser.getTabForBrowser(browser);
|
const tab = gBrowser.getTabForBrowser(browser);
|
||||||
|
if (tab === this._draggingTab) {
|
||||||
|
if (this.dropZone.hasAttribute('enabled')) {
|
||||||
|
this.dropZone.removeAttribute('enabled');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.dropZone.hasAttribute('enabled')) {
|
||||||
|
this.dropZone.setAttribute('enabled', true);
|
||||||
|
}
|
||||||
const splitNode = this.getSplitNodeFromTab(tab);
|
const splitNode = this.getSplitNodeFromTab(tab);
|
||||||
|
|
||||||
const posToRoot = {...splitNode.positionToRoot};
|
const posToRoot = {...splitNode.positionToRoot};
|
||||||
|
@ -320,6 +343,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
|
|
||||||
onBrowserDragEnd = (event) => {
|
onBrowserDragEnd = (event) => {
|
||||||
this.dropZone.removeAttribute('enabled');
|
this.dropZone.removeAttribute('enabled');
|
||||||
|
const draggingBrowser = this._draggingTab.linkedBrowser;
|
||||||
|
draggingBrowser.style.opacity = '.85';
|
||||||
|
this._draggingTab = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
_oppositeSide(side) {
|
_oppositeSide(side) {
|
||||||
|
@ -343,15 +369,12 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
const browserDroppedOn = event.target.querySelector('browser');
|
const browserDroppedOn = event.target.querySelector('browser');
|
||||||
if (!browserDroppedOn) return;
|
if (!browserDroppedOn) return;
|
||||||
|
|
||||||
const droppedContainerId= event.dataTransfer.getData('text/plain');
|
const droppedTab = this._draggingTab;
|
||||||
|
|
||||||
const droppedTab = gBrowser.getTabForBrowser(
|
|
||||||
document.getElementById(droppedContainerId).querySelector('browser')
|
|
||||||
);
|
|
||||||
if (!droppedTab) return;
|
if (!droppedTab) return;
|
||||||
const droppedOnTab = gBrowser.getTabForBrowser(
|
const droppedOnTab = gBrowser.getTabForBrowser(
|
||||||
event.target.querySelector('browser')
|
event.target.querySelector('browser')
|
||||||
);
|
);
|
||||||
|
if (droppedTab === droppedOnTab) return;
|
||||||
|
|
||||||
const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserDroppedOn.getBoundingClientRect());
|
const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserDroppedOn.getBoundingClientRect());
|
||||||
const droppedSplitNode = this.getSplitNodeFromTab(droppedTab);
|
const droppedSplitNode = this.getSplitNodeFromTab(droppedTab);
|
||||||
|
@ -363,7 +386,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
}
|
}
|
||||||
this.removeNode(droppedSplitNode);
|
this.removeNode(droppedSplitNode);
|
||||||
this.splitIntoNode(droppedOnSplitNode, droppedSplitNode, hoverSide, .5);
|
this.splitIntoNode(droppedOnSplitNode, droppedSplitNode, hoverSide, .5);
|
||||||
this.applyGridLayout(this._data[this.currentView].layoutTree);
|
this.activateSplitView(this._data[this.currentView], true);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -640,6 +663,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
||||||
this.deactivateCurrentSplitView();
|
this.deactivateCurrentSplitView();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
this.disableTabSwitchView();
|
||||||
this.activateSplitView(this._data[newView]);
|
this.activateSplitView(this._data[newView]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue