h5:implementation Navigation

doric-h5/dist/index.js

@@ -3760,6 +3760,7 @@ return __module.exports;
             return ((_a = this.border) === null || _a === void 0 ? void 0 : _a.width) || 0;
         }
         blend(props) {
+            this.view.id = `${this.viewId}`;
             for (let key in props) {
                 this.blendProps(this.view, key, props[key]);
             }
@@ -4537,9 +4538,31 @@ return __module.exports;
     }
 
     class NavigatorPlugin extends DoricPlugin {
+        constructor() {
+            super(...arguments);
+            this.navigation = document.getElementsByTagName('doric-navigation')[0];
+        }
         push(args) {
+            var _a;
+            if (this.navigation) {
+                const div = new DoricElement;
+                div.src = args.scheme;
+                div.alias = ((_a = args.config) === null || _a === void 0 ? void 0 : _a.alias) || args.scheme;
+                this.navigation.push(div);
+                return Promise.resolve();
+            }
+            else {
+                return Promise.reject('Not implemented');
+            }
         }
         pop() {
+            if (this.navigation) {
+                this.navigation.pop();
+                return Promise.resolve();
+            }
+            else {
+                return Promise.reject('Not implemented');
+            }
         }
     }
 
@@ -4734,15 +4757,36 @@ ${content}
     class DoricElement extends HTMLElement {
         constructor() {
             super();
-            this.source = this.getAttribute('src') || "";
-            this.alias = this.getAttribute('alias') || this.source;
-            axios.get(this.source).then(result => {
-                this.load(result.data);
-            });
+        }
+        get src() {
+            return this.getAttribute('src');
+        }
+        get alias() {
+            return this.getAttribute('alias');
+        }
+        set src(v) {
+            this.setAttribute('src', v);
+        }
+        set alias(v) {
+            this.setAttribute('alias', v);
+        }
+        connectedCallback() {
+            if (this.src && this.context === undefined) {
+                axios.get(this.src).then(result => {
+                    this.load(result.data);
+                });
+            }
+        }
+        disconnectedCallback() {
+        }
+        adoptedCallback() {
+        }
+        attributeChangedCallback() {
         }
         load(content) {
             this.context = new DoricContext(content);
             const divElement = document.createElement('div');
+            divElement.style.position = 'relative';
             divElement.style.height = '100%';
             this.append(divElement);
             this.context.rootNode.view = divElement;
@@ -4753,7 +4797,43 @@ ${content}
         }
     }
 
+    class NavigationElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this.elementStack = [];
+        }
+        get currentNode() {
+            for (let i = 0; i < this.childNodes.length; i++) {
+                if (this.childNodes[i] instanceof DoricElement) {
+                    return this.childNodes[i];
+                }
+            }
+            return undefined;
+        }
+        push(element) {
+            const currentNode = this.currentNode;
+            if (currentNode) {
+                this.elementStack.push(currentNode);
+                this.replaceChild(element, currentNode);
+            }
+            else {
+                this.appendChild(element);
+            }
+        }
+        pop() {
+            const lastElement = this.elementStack.pop();
+            const currentNode = this.currentNode;
+            if (lastElement && currentNode) {
+                this.replaceChild(lastElement, currentNode);
+            }
+            else {
+                window.history.back();
+            }
+        }
+    }
+
     window.customElements.define('doric-div', DoricElement);
+    window.customElements.define('doric-navigation', NavigationElement);
 
 }(axios, doric));
 //# sourceMappingURL=index.js.map

doric-h5/index.ts

@@ -1,3 +1,4 @@
 import { DoricElement } from './src/DoricElement'
-
+import { NavigationElement } from './src/navigate/navigation'
 window.customElements.define('doric-div', DoricElement);
+window.customElements.define('doric-navigation', NavigationElement);

doric-h5/src/DoricElement.ts

@@ -3,22 +3,48 @@ import { DoricContext } from './DoricContext'
 
 
 export class DoricElement extends HTMLElement {
-    source: string
-    alias: string
     context?: DoricContext
     constructor() {
         super()
-        this.source = this.getAttribute('src') || ""
-        this.alias = this.getAttribute('alias') || this.source
-        axios.get<string>(this.source).then(result => {
-            this.load(result.data)
-        })
+    }
+    get src() {
+        return this.getAttribute('src') as string
+    }
+
+    get alias() {
+        return this.getAttribute('alias') as string
+    }
+    set src(v: string) {
+        this.setAttribute('src', v)
+    }
+    set alias(v: string) {
+        this.setAttribute('alias', v)
+    }
+
+    connectedCallback() {
+        if (this.src && this.context === undefined) {
+            axios.get<string>(this.src).then(result => {
+                this.load(result.data)
+            })
+        }
+    }
+
+    disconnectedCallback() {
+
+    }
+
+    adoptedCallback() {
+
+    }
+
+    attributeChangedCallback() {
+
     }
 
     load(content: string) {
         this.context = new DoricContext(content)
-
         const divElement = document.createElement('div')
+        divElement.style.position = 'relative'
         divElement.style.height = '100%'
         this.append(divElement)
         this.context.rootNode.view = divElement

doric-h5/src/DoricRegistry.ts

@@ -9,7 +9,7 @@ import { DoricImageNode } from "./shader/DoricImageNode"
 import { DoricScrollerNode } from "./shader/DoricScrollerNode"
 import { ModalPlugin } from './plugins/ModalPlugin'
 import { StoragePlugin } from "./plugins/StoragePlugin"
-import { NavigatorPlugin } from "./plugins/NavigatorPlugin"
+import { NavigatorPlugin } from "./navigate/NavigatorPlugin"
 
 const bundles: Map<string, string> = new Map
 

doric-h5/src/navigate/NavigatorPlugin.ts

@@ -0,0 +1,34 @@
+import { DoricPlugin } from "../DoricPlugin";
+import { DoricElement } from "../DoricElement";
+import { NavigationElement } from "./navigation";
+
+export class NavigatorPlugin extends DoricPlugin {
+    navigation: NavigationElement | undefined = document.getElementsByTagName('doric-navigation')[0] as (NavigationElement | undefined)
+
+    push(args: {
+        scheme: string,
+        config?: {
+            alias?: string,
+            extra?: string,
+        }
+    }) {
+        if (this.navigation) {
+            const div = new DoricElement
+            div.src = args.scheme
+            div.alias = args.config?.alias || args.scheme
+            this.navigation.push(div)
+            return Promise.resolve()
+        } else {
+            return Promise.reject('Not implemented')
+        }
+    }
+
+    pop() {
+        if (this.navigation) {
+            this.navigation.pop()
+            return Promise.resolve()
+        } else {
+            return Promise.reject('Not implemented')
+        }
+    }
+}

doric-h5/src/navigate/navigation.ts

@@ -0,0 +1,35 @@
+import { DoricElement } from "../DoricElement"
+
+export class NavigationElement extends HTMLElement {
+
+    elementStack: DoricElement[] = []
+
+    get currentNode() {
+        for (let i = 0; i < this.childNodes.length; i++) {
+            if (this.childNodes[i] instanceof DoricElement) {
+                return this.childNodes[i] as DoricElement
+            }
+        }
+        return undefined
+    }
+
+    push(element: DoricElement) {
+        const currentNode = this.currentNode
+        if (currentNode) {
+            this.elementStack.push(currentNode)
+            this.replaceChild(element, currentNode)
+        } else {
+            this.appendChild(element)
+        }
+    }
+
+    pop() {
+        const lastElement = this.elementStack.pop()
+        const currentNode = this.currentNode
+        if (lastElement && currentNode) {
+            this.replaceChild(lastElement, currentNode)
+        } else {
+            window.history.back()
+        }
+    }
+}

doric-h5/src/plugins/NavigatorPlugin.ts

@@ -1,17 +0,0 @@
-import { DoricPlugin } from "../DoricPlugin";
-
-export class NavigatorPlugin extends DoricPlugin {
-    push(args: {
-        scheme: string,
-        config?: {
-            alias?: string,
-            extra?: string,
-        }
-    }) {
-
-    }
-
-    pop() {
-
-    }
-}

doric-h5/src/shader/DoricViewNode.ts

@@ -136,6 +136,7 @@ export abstract class DoricViewNode {
     }
 
     blend(props: { [index: string]: any }) {
+        this.view.id = `${this.viewId}`
         for (let key in props) {
             this.blendProps(this.view, key, props[key])
         }