mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 17:19:58 +02:00
feat: Update splitViews module and split-views configuration
This commit is contained in:
parent
dcc7aafbe9
commit
856de195c8
4 changed files with 102 additions and 25 deletions
2
.gitattributes
vendored
2
.gitattributes
vendored
|
@ -1 +1 @@
|
||||||
*.js linguist-language=TypeScript
|
*.mjs linguist-language=TypeScript
|
1
@types/split-views.d.ts
vendored
1
@types/split-views.d.ts
vendored
|
@ -9,4 +9,5 @@ declare interface SplitViewConfig extends Config {
|
||||||
declare interface SplitView {
|
declare interface SplitView {
|
||||||
type: SplitType;
|
type: SplitType;
|
||||||
tabs: MockedExports.BrowserTab[];
|
tabs: MockedExports.BrowserTab[];
|
||||||
|
id: number;
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,7 +4,7 @@ Some components used by @zen-browser and @Floorp-Projects as an attempt to make
|
||||||
## Example usage
|
## Example usage
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import("chrome://../browser-splitView.mjs").then(
|
import("chrome://../browser-splitViews.mjs").then(
|
||||||
({ SplitViews }) => {
|
({ SplitViews }) => {
|
||||||
window.gSplitView = new SplitViews({
|
window.gSplitView = new SplitViews({
|
||||||
splitIndicator: "zen-splitted",
|
splitIndicator: "zen-splitted",
|
||||||
|
|
|
@ -12,7 +12,7 @@ class SplitViewsBase {
|
||||||
this.config = config;
|
this.config = config;
|
||||||
this.data = [];
|
this.data = [];
|
||||||
this.currentView = -1;
|
this.currentView = -1;
|
||||||
this.addEventListeners();
|
this.globalIdCounter = 0;
|
||||||
// Added to "navigator-toolbox" element
|
// Added to "navigator-toolbox" element
|
||||||
this.parentSplitIndicator = this.config.splitIndicator + '-view';
|
this.parentSplitIndicator = this.config.splitIndicator + '-view';
|
||||||
this.log('SplitViewsBase initialized');
|
this.log('SplitViewsBase initialized');
|
||||||
|
@ -26,6 +26,100 @@ class SplitViewsBase {
|
||||||
console.log(`SplitViews: ${message}`);
|
console.log(`SplitViews: ${message}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get isActivated() {
|
||||||
|
return this.currentView !== -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get activeView() {
|
||||||
|
if (!this.isActivated) {
|
||||||
|
throw new Error('No active view');
|
||||||
|
}
|
||||||
|
return this.data[this.currentView];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MockedExports.BrowserTab} tab
|
||||||
|
*/
|
||||||
|
getTabView(tab) {
|
||||||
|
return this.data.find(view => view.tabs.includes(tab));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MockedExports.BrowserTab} tab
|
||||||
|
*/
|
||||||
|
isTabSplit(tab) {
|
||||||
|
return tab.hasAttribute(this.config.splitIndicator);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MockedExports.BrowserTab} tab
|
||||||
|
* @param {SplitType} type
|
||||||
|
* @param {MockedExports.BrowserTab[]} tabs
|
||||||
|
*/
|
||||||
|
changeSplitViewBase(tab, type, tabs) {
|
||||||
|
let view = this.getTabView(tab);
|
||||||
|
if (!view) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
view.type = type;
|
||||||
|
view.tabs.push(...tabs.filter(t => !view.tabs.includes(t)));
|
||||||
|
return view.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MockedExports.BrowserTab[]} tabs
|
||||||
|
* @param {SplitType} type
|
||||||
|
*/
|
||||||
|
createSplitViewBase(tabs, type) {
|
||||||
|
let view = {
|
||||||
|
id: this.globalIdCounter++,
|
||||||
|
type,
|
||||||
|
tabs,
|
||||||
|
};
|
||||||
|
this.data.push(view);
|
||||||
|
this.currentView = this.data.length - 1;
|
||||||
|
return view.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} viewId
|
||||||
|
* @protected
|
||||||
|
*/
|
||||||
|
updateSplitView(viewId) {
|
||||||
|
let view = this.data.find(view => view.id === viewId);
|
||||||
|
if (!view) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// TODO: Update tab DOM here
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MockedExports.BrowserTab[]} tabs
|
||||||
|
* @param {SplitType} type
|
||||||
|
* @protected
|
||||||
|
*/
|
||||||
|
createOrChangeSplitView(tabs, type) {
|
||||||
|
let activeTab = tabs.find(tab => this.isTabSplit(tab));
|
||||||
|
let viewId = -1;
|
||||||
|
if (activeTab) {
|
||||||
|
viewId = this.changeSplitViewBase(activeTab, type, tabs);
|
||||||
|
} else {
|
||||||
|
viewId = this.createSplitViewBase(tabs, type);
|
||||||
|
}
|
||||||
|
this.updateSplitView(viewId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API exposed by the module
|
||||||
|
export class SplitViews extends SplitViewsBase {
|
||||||
|
/**
|
||||||
|
* @param {SplitViewConfig} config
|
||||||
|
*/
|
||||||
|
constructor(config) {
|
||||||
|
super(config);
|
||||||
|
this.addEventListeners();
|
||||||
|
}
|
||||||
|
|
||||||
addEventListeners() {
|
addEventListeners() {
|
||||||
window.addEventListener('TabClose', this);
|
window.addEventListener('TabClose', this);
|
||||||
}
|
}
|
||||||
|
@ -47,27 +141,6 @@ class SplitViewsBase {
|
||||||
onTabClose(event) {
|
onTabClose(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
get isActivated() {
|
|
||||||
return this.currentView !== -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
get activeView() {
|
|
||||||
if (!this.isActivated) {
|
|
||||||
throw new Error('No active view');
|
|
||||||
}
|
|
||||||
return this.data[this.currentView];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public API exposed by the module
|
|
||||||
export class SplitViews extends SplitViewsBase {
|
|
||||||
/**
|
|
||||||
* @param {SplitViewConfig} config
|
|
||||||
*/
|
|
||||||
constructor(config) {
|
|
||||||
super(config);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {MockedExports.Browser} browser
|
* @param {MockedExports.Browser} browser
|
||||||
*/
|
*/
|
||||||
|
@ -105,6 +178,9 @@ export class SplitViews extends SplitViewsBase {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
createSplitView(tabs, type = this.config.defaultSplitView) {
|
createSplitView(tabs, type = this.config.defaultSplitView) {
|
||||||
this.log('createSplitView');
|
if (tabs.length < 2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.createOrChangeSplitView(tabs, type);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue