feat(frame): fire frame events from the frame wrapper

rigor789 · rigor789 · commit f723d42e93df · 2018-06-20T18:34:48.000+02:00
diff --git a/platform/nativescript/runtime/components/frame.js b/platform/nativescript/runtime/components/frame.js
@@ -1,6 +1,3 @@
-import Vue from '../../framework'
-//const Frame = require('tns-core-modules/ui/frame').Frame
-
 export default {
   name: 'frame',
   created() {
@@ -18,27 +15,54 @@ export default {
   },
   methods: {
     _getFrame() {
-      return this.$el.nativeView // as Frame
+      return this.$el.nativeView
     },
 
     notifyPageMounted(pageVm) {
       this.$nextTick(() => {
-        console.log('notifyPageMounted')
         this.navigate({
           create: _ => pageVm.$el.nativeView
         })
       })
     },
 
-    goBack() {
-      this._getFrame()
-    },
-    navigate(entry) {
+    navigate(entry, back = false) {
       const frame = this._getFrame()
 
-      console.log(frame.backStack)
+      if (back) {
+        return frame.goBack(entry)
+      }
+
+      entry.clearHistory && this.$emit('beforeReplace', entry)
+      !entry.clearHistory && this.$emit('beforePush', entry)
+
+      // resolve the page from the entry and attach a navigatedTo listener
+      // to fire the frame events
+      const page = entry.create()
+      page.once('navigatedTo', () => {
+        entry.clearHistory && this.$emit('replace', entry)
+        !entry.clearHistory && this.$emit('push', entry)
+      })
+      page.on('navigatedFrom', ({ isBackNavigation }) => {
+        if (isBackNavigation) {
+          page.off('navigatedFrom')
+          this.$emit('back', entry)
+        }
+      })
+      entry.create = () => page
       frame.navigate(entry)
-      console.log(frame.backStack)
+    },
+
+    back(backstackEntry = null) {
+      this.navigate(backstackEntry, true)
+    },
+    push(entry) {
+      this.navigate(entry)
+    },
+    replace(entry) {
+      entry.clearHistory = true
+
+      this.navigate(entry)
     }
   }
 }
diff --git a/platform/nativescript/runtime/components/page.js b/platform/nativescript/runtime/components/page.js
@@ -11,12 +11,25 @@ export default {
     )
   },
   mounted() {
-    this._findParentFrame().notifyPageMounted(this)
+    const frame = this._findParentFrame()
+    if (frame) {
+      frame.notifyPageMounted(this)
+    }
+
+    this.$nextTick(() => {
+      const handler = e => {
+        if (e.isBackNavigation) {
+          this.$el.nativeView.off('navigatedFrom', handler)
+          this.$destroy()
+        }
+      }
+      this.$el.nativeView.on('navigatedFrom', handler)
+    })
   },
   methods: {
     _findParentFrame() {
       let parentFrame = this.$parent
-      while (parentFrame.$options.name !== 'frame') {
+      while (parentFrame && parentFrame.$options.name !== 'frame') {
         parentFrame = parentFrame.$parent
       }
 
diff --git a/samples/app/app-with-frame.js b/samples/app/app-with-frame.js
@@ -0,0 +1,51 @@
+const Vue = require('./nativescript-vue')
+
+Vue.config.silent = false
+Vue.config.debug = true
+
+const createPage = title =>
+  new Vue({
+    template: `<Page><Foo/></Page>`,
+    components: {
+      Foo: {
+        template: `<Label text="${title}"/>`,
+        created() {
+          this.intv = setInterval(
+            () => console.log(`[${title}] INTERVAL FIRED.`),
+            1000
+          )
+        },
+        destroyed() {
+          clearInterval(this.intv)
+        }
+      }
+    }
+  }).$mount().$el.nativeView
+
+new Vue({
+  template: `
+    <Frame ref="frame" 
+        @beforePush="log('beforePush')"
+        @beforeReplace="log('beforeReplace')"
+        @beforeBack="log('beforeBack')"
+        @push="log('push')"
+        @replace="log('replace')"
+        @back="log('back')"
+    >
+      <Page><Button text="Page" @tap="replace" /></Page>
+    </Frame>
+  `,
+
+  methods: {
+    replace() {
+      this.$refs.frame.push({
+        create() {
+          return createPage('test')
+        }
+      })
+    },
+    log(name) {
+      console.log('FRAME EVENT: ' + name)
+    }
+  }
+}).$start()
