update

microweber · Mar 21, 2023 · 46c6a06 · 46c6a06
1 parent 5931cb2
commit 46c6a06
Show file tree

Hide file tree

Showing 13 changed files with 1,236 additions and 99 deletions.
diff --git a/public/build/assets/app-254fa92c.js b/public/build/assets/app-254fa92c.js
diff --git a/public/build/assets/app-81af35f4.js b/public/build/assets/app-81af35f4.js
diff --git a/public/build/assets/app-9745de16.css b/public/build/assets/app-9745de16.css
diff --git a/public/build/assets/app-a1413273.css b/public/build/assets/app-a1413273.css
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -5,14 +5,14 @@
     "src": "resources/css/microweber-admin-filament.css"
   },
   "userfiles/modules/microweber/api/live-edit-app/app.css": {
-    "file": "assets/app-9745de16.css",
+    "file": "assets/app-a1413273.css",
     "src": "userfiles/modules/microweber/api/live-edit-app/app.css"
   },
   "userfiles/modules/microweber/api/live-edit-app/app.tsx": {
     "css": [
-      "assets/app-9745de16.css"
+      "assets/app-a1413273.css"
     ],
-    "file": "assets/app-81af35f4.js",
+    "file": "assets/app-254fa92c.js",
     "isEntry": true,
     "src": "userfiles/modules/microweber/api/live-edit-app/app.tsx"
   }

diff --git a/src/MicroweberPackages/Admin/resources/views/live_edit/iframe.blade.php b/src/MicroweberPackages/Admin/resources/views/live_edit/iframe.blade.php
@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html prefix="og: http://ogp.me/ns#" <?php print lang_attributes(); ?>>
 <head>
-    <title></title>
+    <title>Live edit</title>
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
-    @viteReactRefresh
+     @viteReactRefresh
     @vite('userfiles/modules/microweber/api/live-edit-app/app.tsx')
     <?php print \MicroweberPackages\LiveEdit\Facades\LiveEditManager::headTags(); ?>
 
 </head>
 <body>
 <div id="live-edit-root"></div>
+<script>
+    mw.quickSettings = {}
+</script>
 </body>
diff --git a/userfiles/modules/microweber/api/api_settings.js b/userfiles/modules/microweber/api/api_settings.js
@@ -2,6 +2,7 @@
 
     if (window.mw) {
         console.log('%c !!! mw already defined !!! ', 'background: #009cff; color: #fff; font-size:16px;');
+        console.log(window.mw);
         return;
     }
 

diff --git a/userfiles/modules/microweber/api/live-edit-app/app.tsx b/userfiles/modules/microweber/api/live-edit-app/app.tsx
@@ -1,12 +1,22 @@
 
-import React from 'react';
+import React, { useEffect, useRef , useContext} from 'react';
 import { createRoot } from 'react-dom/client'
 import  Game from './test'
+import  ServiceContainer from './components/ServiceContainer'
+import  LiveEditorFrame from './components/LiveEditorFrame'
+import  Test from './components/Test'
+
 import  './style.css'
+import LiveEditor from "./components/LiveEditorFrame";
 
 export default function LiveEditApp(){
+
     return(
-        <Game />
+        <>
+        <LiveEditor />
+
+        <Test />
+        </>
     );
 }
 

diff --git a/userfiles/modules/microweber/api/live-edit-app/components/LiveEditorFrame.tsx b/userfiles/modules/microweber/api/live-edit-app/components/LiveEditorFrame.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useRef,useState,createContext,useContext} from 'react';
+
+import  LiveEdit from '../../liveedit2/@live.js'
+
+
+function LiveEditor() {
+    const frameRef = useRef(null);
+    const frameUrl = useRef(null);
+    const frameHolderRef = useRef(null);
+    const [frameSrc, setFrameSrc] = useState(null);
+
+    useEffect(() => {
+        const frame = frameRef.current;
+        const frameHolder = frameHolderRef.current;
+
+        setFrameSrc(mw.settings.site_url + '/?editmode=n');
+        mw.spinner({
+            element: frameHolder,
+            size: 52,
+            decorate: true
+        });
+
+        frame.addEventListener('load', function () {
+            const doc = frame.contentWindow.document;
+            const link = doc.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = mw.settings.site_url + '/userfiles/modules/microweber/api/liveedit2/css/dist.css';
+            doc.head.prepend(link);
+
+            var liveEdit = new LiveEdit({
+                root: frame.contentWindow.document.body,
+                strict: false,
+                mode: 'auto',
+                document: frame.contentWindow.document
+            });
+
+            liveEdit.moduleHandle.on('targetChange', function (target) {
+
+            });
+            const LiveEditContext = createContext(liveEdit);
+
+
+           // const theme = useContext(LiveEditContext);
+
+            liveEdit.name = 'liveEdit';
+            mw.spinner({
+                element: frameHolder
+            }).remove();
+
+         //window.liveEditApp.register(liveEdit);
+            mw.trigger('LiveEdit::ready', liveEdit);
+        });
+
+        // Clean up event listener
+        return () => {
+            frame.removeEventListener('load', () => {
+            });
+        }
+    }, []);
+
+    return (
+        <div>
+            <div ref={frameHolderRef}></div>
+            <iframe id="live-editor-frame" ref={frameRef} src={frameSrc}></iframe>
+        </div>
+);
+}
+
+export default LiveEditor;
diff --git a/userfiles/modules/microweber/api/live-edit-app/components/ServiceContainer.tsx b/userfiles/modules/microweber/api/live-edit-app/components/ServiceContainer.tsx
@@ -0,0 +1,46 @@
+class ServiceContainer {
+    private id: string;
+    private modules: [];
+
+    constructor(id: string) {
+        this.id = id;
+        this.modules = [];
+    }
+
+    public register(classInstance: any): void {
+        // @ts-ignore
+        this.modules.push(classInstance);
+        if (typeof classInstance.init === 'function') {
+            classInstance.init();
+        }
+    }
+
+    public getInstance(moduleName: string): any {
+        return this.modules.find((module) => module.name === moduleName);
+    }
+
+    public call(moduleName: string, methodName: string, params: any): void {
+        const module = this.getInstance(moduleName);
+        if (module && module[methodName]) {
+            module[methodName](params);
+        }
+    }
+
+    public has(moduleName: string): boolean {
+        if (this.getInstance(moduleName)) {
+            return true;
+        }
+        return false;
+    }
+
+    public get(moduleName: string): any {
+        const module = this.getInstance(moduleName);
+        if (module) {
+            return module;
+        }
+        return null;
+    }
+}
+
+
+export default ServiceContainer;
diff --git a/userfiles/modules/microweber/api/live-edit-app/components/Test.tsx b/userfiles/modules/microweber/api/live-edit-app/components/Test.tsx
@@ -0,0 +1,22 @@
+import React, { useEffect, useRef,useState,createContext,useContext} from 'react';
+
+const LiveEditContext = createContext();
+
+function Test() {
+    const frameRef = useRef(null);
+    const frameUrl = useRef(null);
+    const frameHolderRef = useRef(null);
+    const [frameSrc, setFrameSrc] = useState(null);
+    const theme = useContext(LiveEditContext);
+    useEffect(() => {
+
+    },[]);
+
+    return (
+        <div>
+          aaaa
+        </div>
+    );
+}
+
+export default Test;