feat(frame and page): added frame and page component wrappers

MisterBrownRSA · MisterBrownRSA · commit d2856b97d5c8 · 2018-06-01T17:42:02.000+02:00
This change should allow a frame which is not topmost to still navigate a child page
diff --git a/platform/nativescript/element-registry.js b/platform/nativescript/element-registry.js
@@ -127,9 +127,11 @@ registerElement(
   'NativeNavigationButton',
   () => require('tns-core-modules/ui/action-bar').NavigationButton
 )
-registerElement('Page', () => require('tns-core-modules/ui/page').Page, {
+
+registerElement('NativePage', () => require('tns-core-modules/ui/page').Page, {
   skipAddToDom: true
 })
+
 registerElement(
   'Placeholder',
   () => require('tns-core-modules/ui/placeholder').Placeholder
@@ -271,10 +273,14 @@ registerElement(
   }
 )
 
-registerElement('Frame', () => require('tns-core-modules/ui/frame').Frame, {
-  insertChild(parentNode, childNode, atIndex) {
-    if (childNode.tagName === 'page') {
-      parentNode.nativeView.navigate({ create: () => childNode.nativeView })
-    }
+registerElement(
+  'NativeFrame',
+  () => require('tns-core-modules/ui/frame').Frame,
+  {
+    // insertChild(parentNode, childNode, atIndex) {
+    //   if (childNode.tagName === 'page' || childNode.tagName === 'nativepage') {
+    //     parentNode.nativeView.navigate({ create: () => childNode.nativeView })
+    //   }
+    // }
   }
-})
+)
diff --git a/platform/nativescript/runtime/components/frame.js b/platform/nativescript/runtime/components/frame.js
@@ -0,0 +1,30 @@
+export default {
+  template: `<NativeFrame :ref="reference" v-bind="$attrs" v-on="$listeners">>
+        <slot></slot>
+    </NativeFrame>`,
+  data() {
+    return {
+      reference: Math.random()
+        .toString(36)
+        .substring(2, 15),
+      context: ''
+    }
+  },
+  mounted() {
+    let THIS = this
+    this.context = this.$refs[this.reference]
+
+    this.$on('page_has_been_loaded', function(context) {
+      THIS.context.nativeView.navigate(
+        Object.assign(
+          {},
+          {
+            create() {
+              return context.nativeView // should be the page
+            }
+          }
+        )
+      )
+    })
+  }
+}
diff --git a/platform/nativescript/runtime/components/index.js b/platform/nativescript/runtime/components/index.js
@@ -8,6 +8,8 @@ import TabView from './tab-view'
 import TabViewItem from './tab-view-item'
 import transition from './transition'
 import VTemplate from './v-template'
+import Frame from './Frame'
+import Page from './Page'
 
 export default {
   ActionBar,
@@ -19,5 +21,7 @@ export default {
   TabView,
   TabViewItem,
   transition,
-  VTemplate
+  VTemplate,
+  Frame,
+  Page
 }
diff --git a/platform/nativescript/runtime/components/page.js b/platform/nativescript/runtime/components/page.js
@@ -0,0 +1,21 @@
+export default {
+  template: `<NativePage :ref="reference" v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </NativePage>`,
+  data() {
+    return {
+      reference: Math.random()
+        .toString(36)
+        .substring(2, 15),
+      context: null
+    }
+  },
+  mounted() {
+    let THIS = this
+    this.context = this.$refs[this.reference]
+
+    this.$nextTick(function() {
+      THIS.$parent.$parent.$emit('page_has_been_loaded', this.context)
+    })
+  }
+}
diff --git a/samples/app/app-with-android-ios.js b/samples/app/app-with-android-ios.js
@@ -15,4 +15,8 @@ new Vue({
     </StackLayout>
   </Page>
   `
-}).$start()
+}).$start({
+  getRootView(self) {
+    return self.$el.nativeView // frame
+  }
+})
diff --git a/samples/app/app-with-router-v2.js b/samples/app/app-with-router-v2.js
@@ -21,9 +21,9 @@ const Detail = {
     <Page>
         <GridLayout rows="*, *, *">
             <Label :text="'Detail for ' + $route.params.id" row="0"/>
-            <Button text="Tab 2" @tap="$router.replace($route.path + '/tab2')"/> 
+            <Button row="1" text="Tab 2" @tap="$router.replace($route.path + '/tab2')"/> 
             
-            <router-view row="1" />
+            <router-view row="2" />
         </GridLayout>
     </Page>
   `
diff --git a/samples/app/app-with-router.js b/samples/app/app-with-router.js
@@ -91,4 +91,8 @@ new Vue({
       router.replace(to)
     }
   }
-}).$start()
+}).$start({
+  getRootView(vm) {
+    return vm.$el.nativeView
+  }
+})
diff --git a/samples/app/package.json b/samples/app/package.json
@@ -1,5 +1,5 @@
 {
-  "main": "app-with-frames.js",
+  "main": "app-with-router-v2.js",
   "name": "nativescript-template-tutorial",
   "version": "1.0.1"
 }

Original file line number	Diff line number	Diff line change
`@@ -91,4 +91,8 @@ new Vue({`
`91`	`91`	`router.replace(to)`
`92`	`92`	`}`
`93`	`93`	`}`
`94`		`-}).$start()`
	`94`	`+}).$start({`
	`95`	`+ getRootView(vm) {`
	`96`	`+ return vm.$el.nativeView`
	`97`	`+ }`
	`98`	`+})`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "main": "app-with-frames.js",`
	`2`	`+ "main": "app-with-router-v2.js",`
`3`	`3`	`"name": "nativescript-template-tutorial",`
`4`	`4`	`"version": "1.0.1"`
`5`	`5`	`}`