Skip to content

Commit

Permalink
Adding and Removing Layouts Example Additions. (#8)
Browse files Browse the repository at this point in the history 
Updated to support additional layout tabs with the ability to add and remove.
  • Loading branch information
@joeransegnola
joeransegnola authored Jun 21, 2024
1 parent e1cd714 commit 751162d
Show file tree
Hide file tree
Showing 5 changed files with 651 additions and 473 deletions.
231 changes: 199 additions & 32 deletions how-to/web-layout/client/src/provider.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable jsdoc/require-param */
import type OpenFin from "@openfin/core";
import { type WebLayoutSnapshot, connect } from "@openfin/core-web";
import { getDefaultLayout, getSettings } from "./platform/settings";
import { getDefaultLayout, getSecondLayout, getSettings } from "./platform/settings";
import type { LayoutManager, LayoutManagerConstructor, LayoutManagerItem } from "./shapes/layout-shapes";
import type { Settings } from "./shapes/setting-shapes";

Expand Down Expand Up @@ -39,12 +40,131 @@ function setupPanels(settings: Settings): void {
* Attach listeners to elements.
*/
async function attachListeners(): Promise<void> {
const swapButton = document.querySelector<HTMLButtonElement>("#swap-layouts");
swapButton?.addEventListener("click", async () => {
await swapLayout();
const addLayoutBtn = document.querySelector<HTMLButtonElement>("#add-layout");
addLayoutBtn?.addEventListener("click", async () => {
await addLayout();
});
}

/**
* Attaches Listeners to Tab Click Events.
* @param tabName the name of the tab to add the event to.
*/
async function attachTabListener(tabName: string): Promise<void> {
const tabBtn = document.querySelector<HTMLDivElement>(`#${tabName}`);
tabBtn?.addEventListener("click", async () => {
await selectTab(tabName);
});
}

/**
* Creates a new tab in the tab row given a specific tab/layout name.
*/
async function createTabBtn(tabName: string): Promise<void> {
const tabRow = document.querySelector<HTMLDivElement>("#tabs");
const newTab = document.createElement("div");
newTab.id = `tab-${tabName}`;
newTab.className = "tab";
newTab.style.display = "block";
newTab.append(document.createTextNode(`${tabName}`));
const closeBtn = document.createElement("span");
closeBtn.className = "close-btn";
closeBtn.innerHTML = "X";
closeBtn.addEventListener("click", async (e) => {
await removeTab(tabName);
e.stopPropagation();
});
newTab.append(closeBtn);
if (tabRow) {
tabRow.append(newTab);
if (document.querySelector<HTMLDivElement>(`#tab-${tabName}`)) {
await attachTabListener(newTab.id);
await selectTab(tabName);
}
}
}

/**
* Makes a layout and tab active.
*/
async function selectTab(tabName: string, removedTabName?: string): Promise<void> {
console.log(`Tab ${tabName} selected`);
let actualName = tabName;
if (tabName.includes("tab")) {
const split = tabName.split("-");
actualName = split[1];
}
const currentOrder = window.localStorage.getItem("order");
if (currentOrder !== "") {
const layoutsArr = currentOrder?.split(",");
if (layoutsArr) {
for (const tab of layoutsArr) {
if (actualName !== removedTabName) {
if (tab === actualName) {
await showTab(tab);
} else {
await hideTab(tab);
}
}
}
}
}
}

/**
* Makes a layout and tab hidden.
*/
async function showTab(tabName: string): Promise<void> {
console.log(`Tab ${tabName} showing...`);
const currentTab = document.querySelector<HTMLDivElement>(`#${tabName}`);
if (currentTab) {
currentTab.style.display = "block";
}
}

/**
* Makes a layout and tab hidden.
*/
async function hideTab(tabName: string): Promise<void> {
console.log(`Tab ${tabName} hiding...`);
const currentTab = document.querySelector<HTMLDivElement>(`#${tabName}`);
if (currentTab) {
currentTab.style.display = "none";
}
}

/**
* Removes a layout & tab from the page.
*/
async function removeTab(tabName: string): Promise<void> {
console.log(`Removing Tab & Layout ${tabName}`);
const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync();
await lm?.removeLayout({ layoutName: tabName } as OpenFin.LayoutIdentity);
const tabToRemove = document.querySelector<HTMLDivElement>(`#tab-${tabName}`);
tabToRemove?.remove();

const currentOrder = window.localStorage.getItem("order");
if (currentOrder !== "") {
const layouts = currentOrder?.split(",");
const newOrder = layouts?.filter((e) => e !== tabName);
if (newOrder && newOrder.length > 0) {
window.localStorage.setItem("order", newOrder.toString());
} else {
window.localStorage.setItem("order", "");
}

if (newOrder) {
if (newOrder.length > 0) {
await selectTab(newOrder[0], tabName);
} else {
console.log("There are no layouts loaded.");
// eslint-disable-next-line no-alert
alert("There are no layouts loaded. Please add one.");
}
}
}
}

/**
* A Create function for layouts.
* @param fin the fin object.
Expand All @@ -67,16 +187,14 @@ async function createLayout(

// Normally you can use state here, but just tracking the order of layouts in localStorage.
const currentOrder = window.localStorage.getItem("order");
if (!currentOrder) {
window.localStorage.setItem("order", "");
}
let newOrder = "";
if (order === 0) {
if (!currentOrder || currentOrder === "") {
newOrder = layoutName;
} else {
newOrder = currentOrder ? currentOrder.concat(",", layoutName) : "";
newOrder = currentOrder?.concat(",", layoutName);
}
window.localStorage.setItem("order", newOrder);

// Finally, call the Layout.create() function to apply the snapshot layout to the div we just created.
await fin.Platform.Layout.create({ layoutName, layout, container });
}
Expand All @@ -103,44 +221,93 @@ function makeOverride(fin: OpenFin.Fin<OpenFin.EntityType>, layoutContainerId: s
* @param snapshot The layouts object containing the fixed set of available layouts.
*/
public async applyLayoutSnapshot(snapshot: WebLayoutSnapshot): Promise<void> {
console.log(`Does this exist? ${Boolean(this.layoutContainer)}`);
console.log(`[Apply Layout] Does this exist? ${Boolean(this.layoutContainer)}`);
if (this.layoutContainer !== null && this.layoutContainer !== undefined) {
for (const [key, value] of Object.entries(snapshot.layouts)) {
this.layoutMapArray.push({ layoutName: key, layout: value, container: this.layoutContainer });
}
setTimeout(
() =>
Object.entries(snapshot.layouts).map(async ([layoutName, layout], i) =>
createLayout(fin, layoutName, layout, i)
),
Object.entries(snapshot.layouts).map(async ([layoutName, layout], i) => {
await createLayout(fin, layoutName, layout, i);
await createTabBtn(layoutName);
}),
1000
);
console.log("Layouts loaded");
console.log("[Apply Layout] Layouts loaded");
console.log(`[Apply Layout] Layouts are: ${JSON.stringify(this.layoutMapArray)}`);
window.localStorage.setItem("currentLayout", JSON.stringify(this.layoutMapArray));
}
}

/**
* Remove Layout - You guessed it, it removes a layout from the existing array of layouts.
* @param id The name of the layout you want removed.
*/
public async removeLayout(id: OpenFin.LayoutIdentity): Promise<void> {
const index = this.layoutMapArray.findIndex((x) => x.layoutName === id.layoutName);
console.log(`[LM Override] Removing Layout ${id.layoutName}`);
console.log(`[LM Override] Found layout at index ${index}`);
await removeThisLayout(id.layoutName);
}
};
};
}

/**
* Returns a layout from the settings with a provided name.
* @returns The default layout from the settings.
* Saves the list of layout items to Local Storage.
* @param updatedLayoutContents List of Layouts to save.
*/
export async function swapLayout(): Promise<void> {
// Get that order of created div ids from storage, or state, or wherever you want to save them.
const currentOrder = window.localStorage.getItem("order");
const layouts = currentOrder?.split(",");
// This is a simple swap between two, but you can do this anyway you like.
const firstLayout = document.querySelector<HTMLElement>(`#${layouts ? layouts[0] : null}`);
const secondLayout = document.querySelector<HTMLElement>(`#${layouts ? layouts[1] : null}`);
if (firstLayout && secondLayout) {
if (secondLayout.style.display === "block") {
firstLayout.style.display = "block";
secondLayout.style.display = "none";
} else {
firstLayout.style.display = "none";
secondLayout.style.display = "block";
}
export async function saveLayout(updatedLayoutContents: LayoutManagerItem[]): Promise<void> {
window.localStorage.setItem("currentLayout", JSON.stringify(updatedLayoutContents));
}

/**
* Reads a list of layouts from Local Storage.
* @returns List of Layouts.
*/
export function readLayouts(): LayoutManagerItem[] {
const currentLayouts = window.localStorage.getItem("currentLayout");
if (currentLayouts) {
return JSON.parse(currentLayouts) as LayoutManagerItem[];
}

return [];
}

/**
* Adds another layout.
*/
export async function addLayout(): Promise<void> {
const secondLayoutToAdd = await getSecondLayout();
console.log("[Add Layout] Grabbing Secondary layout file...");
if (secondLayoutToAdd !== undefined) {
const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync();
console.log("[Add Layout] Adding layout");
await lm?.applyLayoutSnapshot(secondLayoutToAdd);
} else {
console.log("[Add Layout] Error adding Layout. No Secondary Layout exists.");
}
}

/**
* Click function to remove a layout by name.
* @param layoutName the name of a layout.
*/
export async function removeThisLayout(layoutName: string): Promise<void> {
// remove layout from state.
const layoutsBefore = readLayouts();
let layoutsRemoved: LayoutManagerItem[] = [];
const layoutNameElement = document.querySelector<HTMLElement>(`#${layoutName}`);
if (layoutsBefore.length > 0 && layoutNameElement !== null) {
const idx = layoutsBefore.findIndex((x) => x.layoutName === layoutName);
layoutsRemoved = layoutsBefore.splice(idx, 1);
console.log(`[Remove Layout] Removed this layout: ${JSON.stringify(layoutsRemoved)}`);
await saveLayout(layoutsBefore);
console.log(`[Remove Layout] Layouts After Removal: ${JSON.stringify(layoutsBefore)}`);
layoutNameElement.remove();
}
}
/**
* Initializes the OpenFin Web Broker connection.
*/
Expand Down Expand Up @@ -182,7 +349,7 @@ async function init(): Promise<void> {
connectionInheritance: "enabled",
platform: { layoutSnapshot }
});

window.fin = fin;
if (fin) {
const layoutManagerOverride = makeOverride(fin, settings.platform.layout.layoutContainerId);
// You may now use the `fin` object to initialize the broker and the layout.
Expand Down
27 changes: 27 additions & 0 deletions how-to/web-layout/public/common/style/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -943,3 +943,30 @@ td,
.nowrap {
white-space: nowrap;
}

.tabs {
display: inline-flex;
height: 30px;
width: 100%;
}

.tab {
min-width: 120px;
min-height: 30px;
padding: 5px;
border: 2px solid var(--brand-border);
font-weight: 300;
border-top: 2px solid var(--tab-border-top-color);
background-color: var(--tab-background-active-color);
opacity: 100%;
cursor: pointer;
}

.close-btn {
float: right;
font-size: 1em;
max-height: 18px;
content: var(--tab-close-button-url);
color: var(--brand-text-secondary);
cursor: pointer;
}
2 changes: 1 addition & 1 deletion how-to/web-layout/public/layouts/secondary.layout.fin.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"layouts": {
"default": {
"new": {
"content": [
{
"type": "row",
Expand Down
7 changes: 5 additions & 2 deletions how-to/web-layout/public/platform/provider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@ <h1>Web Multiple Layout Example</h1>
<h1 class="tag">Demonstrate web interop usage with multiple layouts</h1>
</div>
<div class="row middle gap20">
<button id="swap-layouts">Swap Layouts</button>
<button id="add-layout">+ Add</button>
<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
</div>
</header>
<main class="row fill gap10">
<div class="row fill" id="main-page">
<div class="col hidden" id="left-panel-container"><iframe id="left-panel" class="fill"></iframe></div>
<div id="layout_container" class="col fill"></div>
<div class="col fill">
<div class="tabs-row row tabs" id="tabs"></div>
<div id="layout_container" class="col fill"></div>
</div>
</div>
</main>
</body>
Expand Down
Loading

0 comments on commit 751162d

Please sign in to comment.