From 5e746fc556583a31824a85a147c9f0cd53154c8e Mon Sep 17 00:00:00 2001
From: GermanBluefox <dogafox@gmail.com>
Date: Fri, 12 Jul 2024 14:26:36 +0900
Subject: [PATCH] Implemented iFrame8

---
 .../src/public/widgets/basic.html             |   8 +-
 .../src/src/Vis/Widgets/Basic/BasicIFrame.tsx |   2 +-
 .../src/Vis/Widgets/Basic/BasicIFrame8.tsx    | 285 ++++++++++++++++++
 .../src/src/Vis/Widgets/index.tsx             |   2 +
 4 files changed, 292 insertions(+), 5 deletions(-)
 create mode 100644 packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame8.tsx

diff --git a/packages/iobroker.vis-2/src/public/widgets/basic.html b/packages/iobroker.vis-2/src/public/widgets/basic.html
index 5079bec6..d9f6df0f 100644
--- a/packages/iobroker.vis-2/src/public/widgets/basic.html
+++ b/packages/iobroker.vis-2/src/public/widgets/basic.html
@@ -253,7 +253,7 @@
         },
     });
 
-    vis.binds.stateful = {
+    /*vis.binds.stateful = {
         view: function (el, viewArr, persistent, notIfInvisible) {
             var $this = $(el);
             var oid   = $this.attr('data-oid');
@@ -392,7 +392,7 @@
                 return values[0];
             }
         }
-    };
+    };*/
     vis.binds.container = function (el, view) {
         var $this = $(el);
         if (vis.views[view]) {
@@ -2077,7 +2077,7 @@
     </div>
 </script>
 
-<script id="tplStatefulIFrame8"
+<!--script id="tplStatefulIFrame8"
         type="text/ejs"
         class="vis-tpl"
         data-vis-set="basic"
@@ -2105,7 +2105,7 @@
             <div <%= (el) -> vis.binds.stateful.iframe(el, srcArr, data.attr('refreshInterval')) %> />
         </div>
     </div>
-</script>
+</script-->
 
 <!-- basic Container -->
 <!--script id="tplContainerView"
diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame.tsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame.tsx
index 93cbc1ab..a0233f5c 100644
--- a/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame.tsx
+++ b/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame.tsx
@@ -4,7 +4,7 @@ import type { GetRxDataFromWidget, RxRenderWidgetProps } from '@iobroker/types-v
 import VisRxWidget from '@/Vis/visRxWidget';
 
 // eslint-disable-next-line no-use-before-define
-type RxData = GetRxDataFromWidget<typeof BasicIFrame>
+type RxData = GetRxDataFromWidget<typeof BasicIFrame>;
 
 export default class BasicIFrame extends VisRxWidget<RxData> {
     private refreshInterval: ReturnType<typeof setInterval> | null = null;
diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame8.tsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame8.tsx
new file mode 100644
index 00000000..74854fa7
--- /dev/null
+++ b/packages/iobroker.vis-2/src/src/Vis/Widgets/Basic/BasicIFrame8.tsx
@@ -0,0 +1,285 @@
+import React from 'react';
+
+import type { RxRenderWidgetProps } from '@iobroker/types-vis-2';
+import VisRxWidget from '@/Vis/visRxWidget';
+
+// eslint-disable-next-line no-use-before-define
+type RxData = {
+    oid: string;
+    refreshInterval: number;
+    refreshOnWakeUp: boolean;
+    refreshOnViewChange: boolean;
+    refreshWithNoQuery: boolean;
+    scrollX: boolean;
+    scrollY: boolean;
+    seamless: boolean;
+    count: number;
+    [key: `src_${number}`]: string;
+    [key: `noSandbox${number}`]: boolean;
+};
+
+export default class BasicIFrame8 extends VisRxWidget<RxData> {
+    private refreshInterval: ReturnType<typeof setInterval> | null = null;
+
+    private readonly frameRef: React.RefObject<HTMLIFrameElement>;
+
+    private hashInstalled = false;
+
+    private onWakeUpInstalled = false;
+
+    private startedInterval = 0;
+
+    constructor(props: RxRenderWidgetProps) {
+        // @ts-expect-error refactor types to extend from parent types
+        super(props);
+        this.frameRef = React.createRef();
+    }
+
+    /**
+     * Returns the widget info which is rendered in the edit mode
+     */
+    static getWidgetInfo() {
+        return {
+            id: 'tplStatefulIFrame8',
+            visSet: 'basic',
+            visName: 'iFrame 8',
+            visPrev: 'widgets/basic/img/Prev_StatefulIFrame8.png',
+            visAttrs: [{
+                name: 'common',
+                fields: [
+                    {
+                        name: 'oid',
+                        type: 'id',
+                    },
+                    {
+                        name: 'refreshInterval',
+                        tooltip: 'basic_refreshInterval_tooltip',
+                        type: 'slider',
+                        min: 0,
+                        max: 180000,
+                        step: 100,
+                        default: 0,
+                    },
+                    {
+                        name: 'refreshOnWakeUp',
+                        type: 'checkbox',
+                    },
+                    {
+                        name: 'refreshOnViewChange',
+                        type: 'checkbox',
+                    },
+                    {
+                        name: 'refreshWithNoQuery',
+                        type: 'checkbox',
+                    },
+                    {
+                        name: 'scrollX',
+                        type: 'checkbox',
+                    },
+                    {
+                        name: 'scrollY',
+                        type: 'checkbox',
+                    },
+                    {
+                        name: 'seamless',
+                        type: 'checkbox',
+                        default: true,
+                    },
+                    {
+                        name: 'count',
+                        type: 'slider',
+                        min: 1,
+                        max: 20,
+                        default: 2,
+                    },
+                ],
+            },
+            {
+                name: 'frames',
+                label: 'frames',
+                indexFrom: 0,
+                indexTo: 'count',
+                fields: [
+                    {
+                        name: 'src_',
+                        type: 'id',
+                    },
+                    {
+                        name: 'noSandbox',
+                        type: 'checkbox',
+                    },
+                ],
+            }],
+            // visWidgetLabel: 'value_string',  // Label of widget
+            visDefaultStyle: {
+                width: 600,
+                height: 320,
+            },
+        } as const;
+    }
+
+    async componentDidMount(): Promise<void> {
+        super.componentDidMount();
+        this.onPropertyUpdate();
+    }
+
+    async componentWillUnmount(): Promise<void> {
+        super.componentWillUnmount();
+        this.refreshInterval && clearInterval(this.refreshInterval);
+        if (this.hashInstalled) {
+            this.hashInstalled = false;
+            window.removeEventListener('hashchange', this.onHashChange);
+        }
+    }
+
+    /**
+     * Enables calling widget info on the class instance itself
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getWidgetInfo() {
+        return BasicIFrame8.getWidgetInfo();
+    }
+
+    getSrc() {
+        const value = this.state.values[`${this.state.rxData.oid}.val`];
+        if (value === undefined || value === null) {
+            return this.state.rxData.src_1;
+        }
+        return this.state.rxData[`src_${value}`] || '';
+    }
+
+    getNoSandBox() {
+        const value = this.state.values[`${this.state.rxData.oid}.val`];
+        if (value === undefined || value === null) {
+            return this.state.rxData.noSandbox1;
+        }
+
+        return this.state.rxData[`noSandbox${value}`] === true ||
+            // @ts-expect-error back compatibility
+            this.state.rxData[`noSandbox${value}`] === 'true';
+    }
+
+    onHashChange = () => {
+        if (this.props.context.activeView === this.props.view) {
+            this.refreshIFrame();
+        }
+    };
+
+    refreshIFrame() {
+        if (this.state.rxData.refreshWithNoQuery === true) {
+            this.frameRef.current?.contentWindow?.location.reload();
+        } else if (this.frameRef.current) {
+            const src = this.getSrc();
+            this.frameRef.current.src = `${src}${src.includes('?') ? '&' : '?'}_refts=${Date.now()}`;
+        }
+    }
+
+    static isHidden(el: HTMLElement) {
+        return el.offsetParent === null;
+    }
+
+    static getParents(el: HTMLIFrameElement): HTMLElement[] {
+        const els = [];
+        let pel = el as HTMLElement;
+        do {
+            pel = pel.parentNode as HTMLElement;
+            els.unshift(el);
+        } while (pel);
+
+        return els;
+    }
+
+    onPropertyUpdate() {
+        const src = this.getSrc();
+        const refreshInterval = Number(this.state.rxData.refreshInterval) || 0;
+        const refreshOnViewChange = this.state.rxData.refreshOnViewChange === true;
+        const refreshOnWakeUp = this.state.rxData.refreshOnWakeUp === true;
+
+        if (src) {
+            if (refreshOnViewChange) {
+                // install on view changed handler
+                if (!this.hashInstalled) {
+                    this.hashInstalled = true;
+                    window.addEventListener('hashchange', this.onHashChange);
+                }
+            } else if (this.hashInstalled) {
+                this.hashInstalled = false;
+                window.removeEventListener('hashchange', this.onHashChange);
+            }
+
+            if (refreshInterval > 0) {
+                if (this.startedInterval !== refreshInterval) {
+                    this.startedInterval = refreshInterval;
+                    this.refreshInterval && clearInterval(this.refreshInterval);
+                    this.refreshInterval = null;
+                }
+                // install refresh handler
+                this.refreshInterval = this.refreshInterval || setInterval(() => {
+                    if (this.frameRef.current && !BasicIFrame8.isHidden(this.frameRef.current as HTMLElement)) {
+                        const parents = BasicIFrame8.getParents(this.frameRef.current).filter(el => BasicIFrame8.isHidden(el));
+                        if (!parents.length || parents[0].tagName === 'BODY' || parents[0].id === 'materialdesign-vuetify-container') {
+                            this.refreshIFrame();
+                        }
+                    }
+                }, refreshInterval);
+            } else if (this.refreshInterval) {
+                this.startedInterval = 0;
+                clearInterval(this.refreshInterval);
+                this.refreshInterval = null;
+            }
+
+            if (refreshOnWakeUp) {
+                // install on wake-up handler
+                if (!this.onWakeUpInstalled) {
+                    this.onWakeUpInstalled = true;
+                    window.vis.onWakeUp(this.onHashChange, this.props.id);
+                }
+            } else if (this.onWakeUpInstalled) {
+                this.onWakeUpInstalled = false;
+                window.vis.onWakeUp(null, this.props.id);
+            }
+        }
+    }
+
+    onRxDataChanged() {
+        this.onPropertyUpdate();
+    }
+
+    /**
+     * Renders the widget
+     *
+     * @param props props passed to the parent classes render method
+     */
+    renderWidgetBody(props: RxRenderWidgetProps): React.JSX.Element | null {
+        super.renderWidgetBody(props);
+
+        if (this.props.editMode) {
+            props.overlayClassNames.push('vis-editmode-helper');
+        }
+
+        const style: React.CSSProperties = {
+            position: 'absolute',
+            boxSizing: 'border-box',
+            padding: 0,
+            margin: 0,
+            border: 0,
+            width: '100%',
+            height: '100%',
+            overflowX: this.state.rxData.scrollX ? 'scroll' : 'hidden',
+            overflowY: this.state.rxData.scrollY ? 'scroll' : 'hidden',
+        };
+        const src = this.getSrc();
+        const noSandbox = this.getNoSandBox();
+
+        return src ? <div className="vis-widget-body">
+            <iframe
+                style={style}
+                ref={this.frameRef}
+                title={this.props.id}
+                src={src}
+                sandbox={noSandbox ? 'allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts' : undefined}
+                seamless={this.state.rxData.seamless}
+            />
+        </div> : null;
+    }
+}
diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/index.tsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/index.tsx
index 0055e354..838cb8cd 100644
--- a/packages/iobroker.vis-2/src/src/Vis/Widgets/index.tsx
+++ b/packages/iobroker.vis-2/src/src/Vis/Widgets/index.tsx
@@ -13,6 +13,7 @@ import BasicSvgShape from './Basic/BasicSvgShape';
 import BasicScreenResolution from './Basic/BasicScreenResolution';
 import BasicSpeechToText from './Basic/BasicSpeechToText';
 import BasicIFrame from './Basic/BasicIFrame';
+import BasicIFrame8 from './Basic/BasicIFrame8';
 import BasicImage from './Basic/BasicImage';
 import BasicHtmlNav from './Basic/BasicHtmlNav';
 import BasicFilterDropdown from './Basic/BasicFilterDropdown';
@@ -71,6 +72,7 @@ const WIDGETS = [
     BasicScreenResolution,
     BasicSpeechToText,
     BasicIFrame,
+    BasicIFrame8,
     BasicImage,
     BasicImage8,