Merge pull request #76 from built-on-openfin/dev/martyn/content-creat…

…ion-rules

Expand content creation rules example

how-to/use-content-creation-rules/client/src/app.ts

@@ -1,10 +1,45 @@
-document.addEventListener("DOMContentLoaded", () => {
-	const openGoogleBtn = document.querySelector("#open-google");
-	openGoogleBtn.addEventListener("click", (e) => {
+document.addEventListener("DOMContentLoaded", async () => {
+	const openView = document.querySelector("#open-view");
+	openView.addEventListener("click", (e) => {
 		window.open("https://www.google.com");
 	});
-	const openCdnBtn = document.querySelector("#open-cdn");
-	openCdnBtn.addEventListener("click", (e) => {
-		window.open("https://cdn.openfin.co/embed-web/chart.html");
+
+	const openViewTarget = document.querySelector("#open-view-target");
+	const viewTargets = [
+		"https://www.examples.com/category/business/advertising",
+		"https://www.examples.com/category/business/agenda",
+		"https://www.examples.com/category/business/agreement"
+	];
+
+	let viewTargetIndex = 0;
+	openViewTarget.addEventListener("click", (e) => {
+		window.open(viewTargets[viewTargetIndex++ % viewTargets.length], "examples");
+	});
+
+	const openWindow = document.querySelector("#open-window");
+	openWindow.addEventListener("click", (e) => {
+		window.open("https://www.bing.com");
+	});
+
+	const openWindowTarget = document.querySelector("#open-window-target");
+	const windowTargets = [
+		"https://www.examples.com/category/education/case-study",
+		"https://www.examples.com/category/education/essays",
+		"https://www.examples.com/category/education/finance"
+	];
+
+	let windowTargetIndex = 0;
+	openWindowTarget.addEventListener("click", (e) => {
+		window.open(windowTargets[windowTargetIndex++ % windowTargets.length], "examples2");
+	});
+
+	const openBrowser = document.querySelector("#open-browser");
+	openBrowser.addEventListener("click", (e) => {
+		window.open("https://www.microsoft.com");
+	});
+
+	const openBlocked = document.querySelector("#open-blocked");
+	openBlocked.addEventListener("click", (e) => {
+		window.open("https://www.apple.com");
 	});
 });

how-to/use-content-creation-rules/client/src/default-platform-window.ts

@@ -1,3 +1,5 @@
+import type OpenFin from "@openfin/core";
+
 window.addEventListener("DOMContentLoaded", async () => {
 	const platform = fin.Platform.getCurrentSync();
 	const me = fin.me as OpenFin.Window;
@@ -26,19 +28,80 @@ window.addEventListener("DOMContentLoaded", async () => {
 
 		return me.restore();
 	}
-	await me.on("child-view-created", async (e) => {
-		const viewOptions: OpenFin.PlatformViewCreationOptions = {
-			url: e.childOptions.url,
-			target: fin.me.identity
-		};
-		await platform.createView(viewOptions, fin.me.identity);
-	});
 
 	await me.on("view-child-view-created", async (e) => {
-		const viewOptions: OpenFin.PlatformViewCreationOptions = {
-			url: e.childOptions.url,
-			target: fin.me.identity
-		};
-		await platform.createView(viewOptions, fin.me.identity);
+		// The content creation rules construct the options for the view in the childOptions
+		// The view has been created but not yet attached or navigated
+		console.log(e);
+		const viewOptions: OpenFin.PlatformViewCreationOptions = e.childOptions;
+		let originalTargetName;
+		let create = true;
+
+		// If the window.open contained a target it is the viewOptions.name,
+		// the name starts internal-generated if a target wasn't specified
+		if (!viewOptions.name.startsWith("internal-generated")) {
+			// This is a window.open with a target, but we can't use the original target name
+			// as the view name, because this would not allow it to be re-used, so we
+			// substitute a derived view name and then remove the old view later
+
+			// Store the original view name so that we can destroy it later
+			originalTargetName = viewOptions.name;
+
+			// Set a new derived name for the view based on the original name
+			viewOptions.name = `${viewOptions.name}-view`;
+
+			try {
+				// See if we can get the derived reusable view name
+				const currentView = fin.View.wrapSync({ uuid: fin.me.identity.uuid, name: viewOptions.name });
+
+				// If we have it then navigate to the requested url
+				await currentView.navigate(viewOptions.url);
+
+				// And focus it, which will switch to the tab if its not active
+				await currentView.focus();
+
+				// We have reused so no need to create
+				create = false;
+			} catch {
+				// Something failed, most likely the view does not exist
+				// so the create flag will still be set
+			}
+		}
+
+		// The create flag is set because we couldn't find the existing view
+		if (create) {
+			// Create the view using the original view options, this will just attach the
+			// view created for us by the content creation rules
+			// Or if it had the name swapped due to a target specified in the original
+			// window.open it will create a new view with the derived name
+			const view = await platform.createView(viewOptions, e.target as OpenFin.Identity);
+
+			// We must explicitly navigate the view created by the content creation rules
+			await view.navigate(viewOptions.url);
+		}
+
+		// Cleanup the view that was created with the original target name if it had one
+		// as we have substituted a view with a derived name
+		if (originalTargetName) {
+			try {
+				const targetView = fin.View.wrapSync({ uuid: fin.me.identity.uuid, name: originalTargetName });
+				await targetView.destroy();
+			} catch {}
+		}
+	});
+
+	await me.on("view-child-window-created", async (e) => {
+		// Called when content is opened in a window
+		console.log(e);
+	});
+
+	await me.on("view-child-content-opened-in-browser", async (e) => {
+		// Called when content is opened in the browser
+		console.log(e);
+	});
+
+	await me.on("view-child-content-blocked", async (e) => {
+		// Called when content is blocked
+		console.log(e);
 	});
 });

how-to/use-content-creation-rules/client/src/provider.ts

@@ -1 +1,3 @@
-fin.Platform.init().catch((e) => console.error(e));
+document.addEventListener("DOMContentLoaded", async () => {
+	await fin.Platform.init();
+});

how-to/use-content-creation-rules/public/html/app.html

@@ -10,9 +10,31 @@
 	</head>
 	<body class="col fill gap20">
 		<h1>Content Creation Rules</h1>
-		<div class="row gap10">
-			<button id="open-google">window.open google</button>
-			<button id="open-cdn">window.open openfin cdn</button>
+		<div class="col gap10">
+			<div class="row middle gap10">
+				<button id="open-view">Open</button>
+				<p>Open a View with www.google.com</p>
+			</div>
+			<div class="row middle gap10">
+				<button id="open-view-target">Open</button>
+				<p>Open a View using a target with rotating urls</p>
+			</div>
+			<div class="row middle gap10">
+				<button id="open-window">Open</button>
+				<p>Open a Window with www.bing.com</p>
+			</div>
+			<div class="row middle gap10">
+				<button id="open-window-target">Open</button>
+				<p>Open a Window using a target with rotating urls</p>
+			</div>
+			<div class="row middle gap10">
+				<button id="open-browser">Open</button>
+				<p>Open a Browser Window with www.microsoft.com</p>
+			</div>
+			<div class="row middle gap10">
+				<button id="open-blocked">Open</button>
+				<p>Opening is Blocked</p>
+			</div>
 		</div>
 	</body>
 </html>

how-to/use-content-creation-rules/public/manifest.fin.json

@@ -31,18 +31,31 @@
 			"minWidth": 308
 		},
 		"defaultViewOptions": {
-			"experimental": {
-				"childWindows": true
-			},
 			"contentCreation": {
 				"rules": [
 					{
 						"behavior": "view",
-						"match": ["*://cdn.openfin.co/*"]
+						"match": ["*://*.google.com/*"]
 					},
 					{
 						"behavior": "view",
-						"match": ["*://*.google.com/*"]
+						"match": ["*://*.examples.com/category/business/*"]
+					},
+					{
+						"behavior": "window",
+						"match": ["*://*.bing.com/*"]
+					},
+					{
+						"behavior": "window",
+						"match": ["*://*.examples.com/category/education/*"]
+					},
+					{
+						"behavior": "browser",
+						"match": ["*://*.microsoft.com/*"]
+					},
+					{
+						"behavior": "block",
+						"match": ["*://*.apple.com/*"]
 					}
 				]
 			}