h5:implementation Navigation

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])
         }