Merge pull request #224 from FlowFuse/223-two-way-communication-betwe…

…en-iframe-and-parent-window

Allow the parent window to configure and manage navigation requests

lib/theme/common/forge-common.js

@@ -5,6 +5,27 @@
     document.head = (document.head || document.getElementsByTagName('head')[0]);
     // eslint-disable-next-line
     const monitorInsertion = (function () { 'use strict'; let m = 100; let t = !1; let u = 'animationName'; let d = ''; const n = 'Webkit Moz O ms Khtml'.split(' '); let e = ''; const i = document.createElement('div'); const s = { strictlyNew: !0, timeout: 20, addImportant: !1 }; if (i.style.animationName && (t = !0), !1 === t) for (let o = 0; o < n.length; o++) if (void 0 !== i.style[n[o] + 'AnimationName']) { e = n[o], u = e + 'AnimationName', d = '-' + e.toLowerCase() + '-', t = !0; break } function c (t) { return s.strictlyNew && !0 === t.QinsQ } function r (t, n) { function e (t) { t.animationName !== o && t[u] !== o || c(t.target) || n(t.target) } let i; var o = 'insQ_' + m++; const r = s.addImportant ? ' !important' : ''; (i = document.createElement('style')).innerHTML = '@' + d + 'keyframes ' + o + ' {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n' + t + ' { animation-duration: 0.001s' + r + '; animation-name: ' + o + r + '; ' + d + 'animation-duration: 0.001s' + r + '; ' + d + 'animation-name: ' + o + r + ';  } ', document.head.appendChild(i); const a = setTimeout(function () { document.addEventListener('animationstart', e, !1), document.addEventListener('MSAnimationStart', e, !1), document.addEventListener('webkitAnimationStart', e, !1) }, s.timeout); return { destroy: function () { clearTimeout(a), i && (document.head.removeChild(i), i = null), document.removeEventListener('animationstart', e), document.removeEventListener('MSAnimationStart', e), document.removeEventListener('webkitAnimationStart', e) } } } function a (t) { t.QinsQ = !0 } function f (t) { if (t) for (a(t), t = t.firstChild; t; t = t.nextSibling) void 0 !== t && t.nodeType === 1 && f(t) } function l (t, n) { let e; let i = []; const o = function () { clearTimeout(e), e = setTimeout(function () { i.forEach(f), n(i), i = [] }, 10) }; return r(t, function (t) { if (!c(t)) { a(t); const n = (function t (n) { return c(n.parentNode) || n.nodeName === 'BODY' ? n : t(n.parentNode) }(t)); i.indexOf(n) < 0 && i.push(n), o() } }) } function v (n) { return !(!t || !n.match(/[^{}]/)) && (s.strictlyNew && f(document.body), { every: function (t) { return r(n, t) }, summary: function (t) { return l(n, t) } }) } return v.config = function (t) { for (const n in t)t.hasOwnProperty(n) && (s[n] = t[n]) }, v }()); typeof module !== 'undefined' && void 0 !== module.exports && (module.exports = monitorInsertion)
+    const context = {
+        isEmbedded: window.parent !== window.self,
+        shouldEmitInsteadOfRedirect: false
+    }
+    const navigateTo = (url) => {
+        if (context.shouldEmitInsteadOfRedirect) {
+            window.parent.postMessage({
+                type: 'navigate',
+                payload: url
+            }, '*')
+        } else {
+            window.location = url
+        }
+    }
+    const interceptLogoClick = (url) => {
+        document.querySelector('#red-ui-header > span > a')
+            .addEventListener('click', (e) => {
+                e.preventDefault()
+                navigateTo(url)
+            })
+    }
 
     function changeFavicon (src) {
         const link = document.createElement('link')
@@ -18,6 +39,17 @@
         document.head.appendChild(link)
     }
 
+    function handleMessage (event) {
+        if (event.data.type === 'prevent-redirect') {
+            context.shouldEmitInsteadOfRedirect = event.data.payload
+        }
+    }
+
+    if (context.isEmbedded) {
+        window.parent.postMessage({ type: 'load', payload: true }, '*')
+        window.addEventListener('message', handleMessage)
+    }
+
     window.addEventListener('load', (_event) => {
         // set favicon
         // eslint-disable-next-line quotes
@@ -34,7 +66,7 @@
                 id: 'usermenu-item-ffsite',
                 label: 'About FlowFuse',
                 onselect: function () {
-                    window.location = 'https://flowfuse.com/'
+                    navigateTo('https://flowfuse.com/')
                 }
             })
             // gather info from settings and page - prep for next 2 menu items
@@ -56,7 +88,7 @@
                     id: 'usermenu-item-ffmain',
                     label: 'FlowFuse Application',
                     onselect: function () {
-                        window.location = projectURL
+                        navigateTo(projectURL)
                     }
                 })
             }
@@ -70,6 +102,8 @@
                     }
                 })
             }
+
+            interceptLogoClick(projectURL)
         })
     })
 })()

lib/theme/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/nr-theme",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "description": "FlowFuse themes for Node-RED",
     "scripts": {
         "prepack": "node scripts/prepack.mjs",
@@ -51,4 +51,4 @@
         "LICENSE",
         "CHANGELOG.md"
     ]
-}
+}