Deploying to gh-pages from @ f7fe347 🚀

web/v19.0.0/web-layout/common/style/app.css

@@ -71,6 +71,7 @@ body {
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
+	width: 100%;
 }
 
 body.border {
@@ -705,6 +706,10 @@ em {
 	flex: 2;
 }
 
+.fill_3 {
+	flex: 3;
+}
+
 .scroll {
 	overflow: auto;
 }
@@ -943,3 +948,38 @@ 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;
+}
+
+.main-container {
+	display: flex;
+	justify-content: stretch;
+	align-items: stretch;
+	height: 100%;
+	width: 100%;
+}

web/v19.0.0/web-layout/js/provider.bundle.js

@@ -30934,7 +30934,10 @@ var exports = __webpack_exports__;
   \********************************/
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.swapLayout = swapLayout;
+exports.saveLayout = saveLayout;
+exports.readLayouts = readLayouts;
+exports.addLayout = addLayout;
+exports.removeThisLayout = removeThisLayout;
 const core_web_1 = __webpack_require__(/*! @openfin/core-web */ "../../node_modules/@openfin/core-web/out/api-client.js");
 const settings_1 = __webpack_require__(/*! ./platform/settings */ "./client/src/platform/settings.ts");
 let PARENT_CONTAINER;
@@ -30967,11 +30970,125 @@ function setupPanels(settings) {
  * Attach listeners to elements.
  */
 async function attachListeners() {
-    const swapButton = document.querySelector("#swap-layouts");
-    swapButton?.addEventListener("click", async () => {
-        await swapLayout();
+    const addLayoutBtn = document.querySelector("#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) {
+    const tabBtn = document.querySelector(`#${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) {
+    const tabRow = document.querySelector("#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(`#tab-${tabName}`)) {
+            await attachTabListener(newTab.id);
+            await selectTab(tabName);
+        }
+    }
+}
+/**
+ * Makes a layout and tab active.
+ */
+async function selectTab(tabName, removedTabName) {
+    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) {
+    console.log(`Tab ${tabName} showing...`);
+    const currentTab = document.querySelector(`#${tabName}`);
+    if (currentTab) {
+        currentTab.style.display = "block";
+    }
+}
+/**
+ * Makes a layout and tab hidden.
+ */
+async function hideTab(tabName) {
+    console.log(`Tab ${tabName} hiding...`);
+    const currentTab = document.querySelector(`#${tabName}`);
+    if (currentTab) {
+        currentTab.style.display = "none";
+    }
+}
+/**
+ * Removes a layout & tab from the page.
+ */
+async function removeTab(tabName) {
+    console.log(`Removing Tab & Layout ${tabName}`);
+    const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync();
+    await lm?.removeLayout({ layoutName: tabName });
+    const tabToRemove = document.querySelector(`#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.
@@ -30988,15 +31105,12 @@ async function createLayout(fin, layoutName, layout, order) {
     PARENT_CONTAINER?.append(container);
     // 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.
@@ -31025,34 +31139,92 @@ function makeOverride(fin, layoutContainerId) {
              * @param snapshot The layouts object containing the fixed set of available layouts.
              */
             async applyLayoutSnapshot(snapshot) {
-                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) {
-                    setTimeout(() => Object.entries(snapshot.layouts).map(async ([layoutName, layout], i) => createLayout(fin, layoutName, layout, i)), 1000);
-                    console.log("Layouts loaded");
+                    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) => {
+                        await createLayout(fin, layoutName, layout, i);
+                        await createTabBtn(layoutName);
+                    }), 1000);
+                    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.
+             */
+            async removeLayout(id) {
+                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.
  */
-async function swapLayout() {
-    // 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(`#${layouts ? layouts[0] : null}`);
-    const secondLayout = document.querySelector(`#${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";
+async function saveLayout(updatedLayoutContents) {
+    window.localStorage.setItem("currentLayout", JSON.stringify(updatedLayoutContents));
+}
+/**
+ *	Reads a list of layouts from Local Storage.
+ *	@returns List of Layouts.
+ */
+function readLayouts() {
+    const currentLayouts = window.localStorage.getItem("currentLayout");
+    if (currentLayouts) {
+        return JSON.parse(currentLayouts);
+    }
+    return [];
+}
+/**
+ * Adds another layout.
+ */
+async function addLayout() {
+    const secondLayoutToAdd = await (0, settings_1.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.");
+    }
+    const addBtn = document.querySelector("#add-layout");
+    if (addBtn) {
+        addBtn.setAttribute("disabled", "disabled");
+    }
+}
+/**
+ * Click function to remove a layout by name.
+ * @param layoutName the name of a layout.
+ */
+async function removeThisLayout(layoutName) {
+    // remove layout from state.
+    const layoutsBefore = readLayouts();
+    let layoutsRemoved = [];
+    const layoutNameElement = document.querySelector(`#${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();
+        await fin.Platform.Layout.destroy({ layoutName, uuid: fin.me.uuid, name: fin.me.name });
+        if (layoutName === "new") {
+            const addBtn = document.querySelector("#add-layout");
+            if (addBtn) {
+                addBtn.removeAttribute("disabled");
+            }
         }
     }
 }
@@ -31089,6 +31261,7 @@ async function init() {
         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.

web/v19.0.0/web-layout/layouts/secondary.layout.fin.json

@@ -1,6 +1,6 @@
 {
 	"layouts": {
-		"default": {
+		"new": {
 			"content": [
 				{
 					"type": "row",
@@ -18,10 +18,10 @@
 											"type": "component",
 											"componentName": "view",
 											"componentState": {
-												"url": "https://built-on-openfin.github.io/web-starter/web/v19.0.0/web-layout/views/fdc3-view.html",
-												"name": "internal-generated-view-secondary-1"
+												"url": "https://built-on-openfin.github.io/web-starter/web/v19.0.0/web-layout/views/fdc3-view.html"
 											},
-											"title": "FDC3 Same Domain"
+											"title": "FDC3 Same Domain",
+											"isClosable": false
 										}
 									]
 								},
@@ -33,10 +33,10 @@
 											"type": "component",
 											"componentName": "view",
 											"componentState": {
-												"url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html",
-												"name": "internal-generated-view-secondary-2"
+												"url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html"
 											},
-											"title": "FDC3 Different Domain"
+											"title": "FDC3 Different Domain",
+											"isClosable": true
 										}
 									]
 								}

web/v19.0.0/web-layout/platform/provider.html

@@ -19,14 +19,19 @@ <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="row fill gap10" id="main-page">
+				<div class="col hidden" id="left-panel-container">
+					<iframe id="left-panel" class="fill"></iframe>
+				</div>
+				<div class="col fill_3" id="right-container">
+					<div class="tabs-row row tabs" id="tabs"></div>
+					<div id="layout_container" class="main-container"></div>
+				</div>
 			</div>
 		</main>
 	</body>