@openfin/web-utils 0.41.108 → 0.41.111

package/out/custom-elements/of-view.d.ts

@@ -1,7 +1,12 @@
 declare const mixin: (Base: typeof HTMLElement) => {
     new (): {
+        "__#1@#titleObserver": MutationObserver | null;
+        "__#1@#initObservers"(): void;
+        "__#1@#clearObservers"(): void;
+        readonly lastKnownUrl: string | undefined;
         connectedCallback(): void;
-        "__#1@#iframe": HTMLIFrameElement;
+        readonly iframe: HTMLIFrameElement | null;
+        title: string;
         brokerUrl: string | null;
         name: string | null;
         forceFrameName: string | null;
@@ -9,6 +14,7 @@ declare const mixin: (Base: typeof HTMLElement) => {
         src: string | null;
         providerId: string | null;
         contextGroup: string | null;
+        allow: string | null;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -25,7 +31,6 @@ declare const mixin: (Base: typeof HTMLElement) => {
         readonly offsetWidth: number;
         outerText: string;
         spellcheck: boolean;
-        title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
@@ -328,6 +333,7 @@ export type OfViewAttributes = {
     'of-name': string;
     'of-broker'?: string;
     'forceFrameName'?: string;
+    'allow'?: string;
     'src': string;
 };
 type OfViewElementConstructor = ReturnType<typeof mixin>;

package/out/custom-elements/of-view.js

@@ -1,5 +1,31 @@
 import { encodeOptions } from '../utils/options-encoder';
+import { getTitleObserver, isSameOrigin } from '../utils/utils';
 const mixin = (Base) => class _OfViewElement extends Base {
+    constructor() {
+        super(...arguments);
+        this.#titleObserver = null;
+    }
+    #titleObserver;
+    #initObservers() {
+        // we can only monitor the DOM if the iframe is same-origin
+        const iframe = this.iframe;
+        if (iframe &&
+            iframe.contentDocument?.head &&
+            iframe.contentWindow &&
+            window.top &&
+            isSameOrigin(iframe.contentWindow.window, window.top)) {
+            this.#titleObserver = getTitleObserver(iframe.contentDocument.head, (title) => this.dispatchEvent(new CustomEvent('page-title-updated', { detail: { title } })));
+        }
+    }
+    #clearObservers() {
+        if (this.#titleObserver) {
+            this.#titleObserver.disconnect();
+            this.#titleObserver = null;
+        }
+    }
+    get lastKnownUrl() {
+        return this.iframe?.contentDocument?.location.href;
+    }
     connectedCallback() {
         if (!this.name || !this.uuid) {
             throw new Error('<of-view> Name or uuid attribute missing');
@@ -7,18 +33,28 @@ const mixin = (Base) => class _OfViewElement extends Base {
         if (!this.src) {
             throw new Error(`<of-view> missing 'src' attribute.`);
         }
-        if (!this.#iframe) {
-            this.#iframe = document.createElement('iframe');
-            this.#iframe.src = this.src;
-            this.#iframe.style.height = '100%';
-            this.#iframe.style.width = '100%';
-            this.#iframe.style.border = 'none';
+        if (!this.iframe) {
+            const iframe = document.createElement('iframe');
+            iframe.addEventListener('load', () => {
+                // reload observers every navigation
+                this.#initObservers();
+            });
+            iframe.addEventListener('unload', () => {
+                this.#clearObservers();
+            });
+            iframe.src = this.src;
+            if (this.allow) {
+                iframe.allow = this.allow;
+            }
+            iframe.style.height = '100%';
+            iframe.style.width = '100%';
+            iframe.style.border = 'none';
             if (this.forceFrameName) {
                 // if forceFrameName is set, the consumer is intentionally breaking auto-connection
-                this.#iframe.setAttribute('name', this.forceFrameName);
+                iframe.setAttribute('name', this.forceFrameName);
             }
             else {
-                this.#iframe.setAttribute('name', encodeOptions({
+                iframe.setAttribute('name', encodeOptions({
                     brokerUrl: this.brokerUrl,
                     name: this.name,
                     uuid: this.uuid,
@@ -26,11 +62,23 @@ const mixin = (Base) => class _OfViewElement extends Base {
                     contextGroup: this.contextGroup
                 }, 'of-frame'));
             }
-            this.#iframe.setAttribute('id', this.name);
-            this.appendChild(this.#iframe);
+            iframe.setAttribute('id', this.name);
+            this.appendChild(iframe);
+        }
+    }
+    get iframe() {
+        return this.querySelector(`iframe[id="${this.name}"]`);
+    }
+    get title() {
+        return this.getAttribute('title') ?? this.iframe?.title ?? '';
+    }
+    set title(val) {
+        this.setAttribute('title', val);
+        // keep iframe title attribute in sync with of-view
+        if (this.iframe) {
+            this.iframe.title = val;
         }
     }
-    #iframe;
     get brokerUrl() {
         return this.getAttribute('of-broker');
     }
@@ -87,6 +135,14 @@ const mixin = (Base) => class _OfViewElement extends Base {
             this.setAttribute('of-context-group', val);
         }
     }
+    get allow() {
+        return this.getAttribute('allow');
+    }
+    set allow(val) {
+        if (val) {
+            this.setAttribute('allow', val);
+        }
+    }
     static get observedAttributes() {
         return ['name'];
     }

package/out/utils/main.d.ts

@@ -1 +1,2 @@
 export * from './options-encoder';
+export * from './utils';

package/out/utils/main.js

@@ -1 +1,2 @@
 export * from './options-encoder';
+export * from './utils';

package/out/utils/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isSameOrigin: (windowA: Window | WindowProxy, windowB: Window | WindowProxy) => boolean;
+export declare const getTitleObserver: (documentHead: Node, setter: (title: string | null) => void) => MutationObserver;

package/out/utils/utils.js

@@ -0,0 +1,50 @@
+export const isSameOrigin = (windowA, windowB) => {
+    try {
+        return windowA.origin === windowB.origin;
+    }
+    catch (error) {
+        // CORS errors on access of window proxy origin means the windows are in different origins.
+        return false;
+    }
+};
+export const getTitleObserver = (documentHead, setter) => {
+    const observer = new MutationObserver((mutations) => {
+        let shouldEmit = false;
+        mutations.forEach((mutation) => {
+            // title DOM structure looks like this <title><text_node /><title> and all mutations boil down to:
+            // - mutation.target is <text_node>: text_node changed
+            // - mutation.target is <title>    : text_node either added or removed
+            // - mutation.target is <head>     : title is either added or removed
+            // check easy cases first and early return
+            // case 1
+            if (mutation.target.parentNode?.nodeName === 'TITLE') {
+                shouldEmit = true;
+                return;
+            }
+            // case 2
+            if (mutation.target.nodeName === 'TITLE') {
+                shouldEmit = true;
+                return;
+            }
+            // case 3 - check removed nodes first
+            mutation.removedNodes.forEach((node) => {
+                if (node.nodeName === 'TITLE' || node.parentNode?.nodeName === 'TITLE') {
+                    shouldEmit = true;
+                }
+            });
+            mutation.addedNodes.forEach((node) => {
+                if (node.nodeName === 'TITLE' || node.parentNode?.nodeName === 'TITLE') {
+                    shouldEmit = true;
+                }
+            });
+        });
+        // don't use mutation record for values, just grab a new title elem from DOM
+        const title = documentHead.querySelector('title')?.textContent ?? '';
+        if (shouldEmit) {
+            setter(title);
+        }
+    });
+    observer.observe(documentHead, { childList: true, subtree: true, characterData: true });
+    return observer;
+};
+// TODO: getFavIconObserver()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@openfin/web-utils",
-    "version": "0.41.108",
+    "version": "0.41.111",
     "description": "",
     "private": false,
     "files": [