Merge pull request #152 from sGerli/master

Finish Native implementation

src/components/Home.vue

@@ -38,6 +38,7 @@ export default {
     get_data: function (routeParams) {
       var that = this
       this.type = routeParams.type
+      this.setTitle(this.type === 'faces' || this.type === 'watchfaces' ? 'Watchfaces' : 'Apps')
       this.$http.get(`${this.$store.state.backendUrl}/home/${this.type}?platform=${this.$store.state.storeParameters.platform}&hardware=${this.$store.state.storeParameters.hardware}&filter_hardware=true`).then(response => {
         that.page = response.body
         this.build_collections()

src/components/PageFooter.vue

@@ -4,8 +4,8 @@
         Rebble Store&nbsp;<small>for&nbsp;pebble</small>
     </div>
     <div class="main">
-        <p>© {{ new Date().getFullYear() }} Rebble · <a :href="$store.state.contactLink" target="_blank">Contact Us</a> · <a :href="$store.state.tosLink" target="_blank">Terms</a></p>
-        <a class="pull-right" href="#" target="_blank">Developer Portal</a>
+        <p>© {{ new Date().getFullYear() }} Rebble · <a v-on:click="openExternal($store.state.contactLink)">Contact Us</a> · <a  v-on:click="openExternal($store.state.tosLink)">Terms</a></p>
+        <a class="pull-right" v-on:click="openExternal('#')">Developer Portal</a>
     </div>
   </footer>
 </template>

src/components/pages/AppDetails.vue

@@ -31,7 +31,7 @@
           Version Information <i class="fa fa-angle-right float-right" aria-hidden="true"></i>
         </div>
       </router-link>
-      <a v-if="app.website != ''" v-bind:href="app.website" class="app-button" target="_blank">
+      <a v-if="app.website != ''" v-on:click="openExternal(app.website)" class="app-button">
         <div>
           Website Link <i class="fa fa-angle-right float-right" aria-hidden="true"></i>
         </div>
@@ -40,14 +40,14 @@
         <div>Support <i class="fa fa-angle-right float-right" aria-hidden="true"></i>
         </div>
       </a-->
-      <a v-if="app.source != null" v-bind:href="app.source" class="app-button" target="_blank">
+      <a v-if="app.source != null" v-on:click="openExternal(app.source)" class="app-button" >
         <div>Source code <i class="fa fa-angle-right float-right" aria-hidden="true"></i></div>
       </a>
       <router-link v-bind:to="'/author/' + app.developer_id" class="app-button">
         <div>More From This Developer<i class="fa fa-angle-right float-right" aria-hidden="true"></i>
         </div>
       </router-link>
-      <a v-if="app.latest_release && app.latest_release.pbw_file != '' && $store.state.devMode" v-bind:href="app.latest_release.pbw_file" class="app-button" target="_blank">
+      <a v-if="app.latest_release && app.latest_release.pbw_file != '' && $store.state.devMode" v-on:click="openExternal(app.latest_release.pbw_file)" class="app-button">
         <div>Download .pbw<i class="fa fa-angle-right float-right" aria-hidden="true"></i>
         </div>
       </a>
@@ -70,6 +70,16 @@ export default {
     clientWatchPlatform: {
       default: null
     }
+  },
+  watch: {
+    'app' (to, from) {
+      this.setTitle(this.app.title)
+    }
+  },
+  beforeMount: function () {
+    if (this.app.title !== undefined) {
+      this.setTitle(this.app.title)
+    }
   }
 }
 </script>

src/components/pages/AppVersions.vue

@@ -26,6 +26,14 @@ export default {
     }
   },
   beforeMount: function () {
+    if (this.app.title !== undefined) {
+      this.setTitle(`${this.app.title} Versions`)
+    }
+  },
+  watch: {
+    'app' (to, from) {
+      this.setTitle(`${this.app.title} Versions`)
+    }
   }
 }
 </script>

src/components/pages/AppView.vue

@@ -13,6 +13,7 @@
 import AppTitleBar from './widgets/AppTitleBar'
 import Slider from './widgets/AppSlider'
 import ScreenshotList from './widgets/ScreenshotList'
+import { Native } from '../../services'
 
 export default {
   name: 'app-view',
@@ -28,9 +29,11 @@ export default {
   },
   methods: {
     get_app: function (id) {
-      var that = this
       this.$http.get(this.buildResourceUrl(`apps/id/${id}`)).then(response => {
-        that.app = response.body.data[0]
+        this.app = response.body.data[0]
+        if (this.$store.state.inApp) {
+          Native.send('setVisibleApp', this.app)
+        }
       }, response => {
         console.error(response)
       })

src/components/pages/Author.vue

@@ -36,10 +36,10 @@ export default {
   },
   methods: {
     get_author: function (id, offsetPage) {
-      var that = this
       var offset = this.pageLimit * (offsetPage - 1)
       this.$http.get(`${this.buildResourceUrl(`apps/dev/${id}`)}&offset=${offset}&limit=${this.pageLimit}`).then(response => {
-        that.page = response.body
+        this.page = response.body
+        this.setTitle(this.page.data[0].author)
       }, response => {
         console.error(response)
       })

src/components/pages/Category.vue

@@ -2,7 +2,7 @@
   <div>
     <header class="main">
         <div class="title-card">
-            <h3>{{id | capitalize}}</h3>
+            <h3>{{id | readable-name}}</h3>
         </div>
     </header>
     <main class="apps container text-center">
@@ -58,6 +58,7 @@ export default {
       this.sort = routeParams.sort
       this.offsetPage = routeParams.page
 
+      this.setTitle(this.$options.filters['readable-name'](this.id))
       this.get_category()
     }
   },

src/components/pages/Collection.vue

@@ -2,7 +2,7 @@
   <div>
     <header class="main">
         <div class="title-card">
-            <h3>Collection: {{slug | capitalize}}</h3>
+            <h3>Collection: {{slug | readable-name}}</h3>
         </div>
     </header>
     <main class="apps container text-center">
@@ -41,10 +41,9 @@ export default {
   },
   methods: {
     get_collection: function () {
-      var that = this
       var offset = this.pageLimit * (this.offsetPage - 1)
       this.$http.get(`${this.buildResourceUrl(`apps/collection/${this.slug}/${this.type}`)}&offset=${offset}&limit=${this.pageLimit}`).then(response => {
-        that.page = response.body
+        this.page = response.body
       }, response => {
         console.error(response)
       })
@@ -54,6 +53,7 @@ export default {
       this.offsetPage = routeParams.page
       this.type = routeParams.type
 
+      this.setTitle(this.$options.filters['readable-name'](this.slug))
       this.get_collection()
     }
   },

src/components/pages/Error.vue

@@ -51,7 +51,7 @@ export default {
     }
   },
   beforeMount: function () {
-
+    this.setTitle('404 Page not found')
   }
 }
 </script>

src/components/pages/Search.vue

@@ -4,8 +4,8 @@
     <div>
       <header class="main">
         <div class="title-card search">
-          <ais-search-box autofocus>
-            <input placeholder="Search" type="search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" slot-scope="{ currentRefinement, refine }" :value="currentRefinement" @input="refine($event.currentTarget.value)">
+          <ais-search-box>
+            <input autofocus placeholder="Search" type="search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" slot-scope="{ currentRefinement, refine }" :value="currentRefinement" @input="refine($event.currentTarget.value)">
           </ais-search-box>
         </div>
       </header>
@@ -75,6 +75,9 @@ export default {
       }
       return filterList.join(',')
     }
+  },
+  beforeMount: function () {
+    this.setTitle('Search')
   }
 
 }
@@ -87,15 +90,21 @@ export default {
 
 .search {
   input {
+    margin: -20px;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
-    width: 100%;
+    width: calc(100% + 40px);
     height: 70px;
     font-size: 1.75rem;
     padding: 20px;
     border: 0;
     background: none;
     color: #373a3c;
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration { display: none; }
+
     &:focus {
       outline: none;
     }

src/components/pages/Settings.vue

@@ -36,7 +36,7 @@ export default {
     }
   },
   beforeMount: function () {
-
+    this.setTitle('Settings')
   }
 }
 </script>

src/components/pages/widgets/GetAppButton.vue

@@ -74,13 +74,7 @@ export default {
       })
     },
     get_companion () {
-      if (this.$store.state.inApp) {
-        Native.send('openURL', {
-          url: this.app.companions[this.$store.state.storeParameters.platform].url
-        })
-      } else {
-        window.open(this.app.companions[this.$store.state.storeParameters.platform].url, '_blank')
-      }
+      this.openExternal(this.app.companions[this.$store.state.storeParameters.platform].url)
     },
     check_app () {
       if (!this.hardwareSupported || !this.platformSupported || this.added === true || this.loading) return

src/main.js

@@ -28,9 +28,17 @@ Vue.filter('capitalize', function (value) {
   return value.charAt(0).toUpperCase() + value.slice(1)
 })
 
+Vue.filter('readable-name', function (value) {
+  if (!value) return ''
+  value = value.toString()
+  return value[0].toUpperCase() + value.replace(new RegExp('-', 'g'), ' ').substring(1)
+})
+
 Vue.mixin({
   methods: {
-    buildResourceUrl: mixin
+    buildResourceUrl: mixin.buildResourceUrl,
+    setTitle: mixin.setTitle,
+    openExternal: mixin.openExternal
   }
 })
 

src/mixin/index.js

@@ -1,3 +1,23 @@
-export default function buildResourceUrl (resource) {
-  return `${this.$store.state.backendUrl}/${resource}?platform=${this.$store.state.storeParameters.platform}&hardware=${this.$store.state.storeParameters.hardware}&filter_hardware=true`
+import { Native } from '../services'
+
+const mixins = {
+  buildResourceUrl (resource) {
+    return `${this.$store.state.backendUrl}/${resource}?platform=${this.$store.state.storeParameters.platform}&hardware=${this.$store.state.storeParameters.hardware}&filter_hardware=true`
+  },
+  setTitle (title = '') {
+    document.title = title === '' ? 'Rebble Store' : `${title} | Rebble Store`
+    if (this.$store.state.inApp === true) {
+      Native.send('setNavBarTitle', { title: title })
+    }
+  },
+  openExternal (url) {
+    if (this.$store.state.inApp === true) {
+      Native.send('openURL', {
+        url: url
+      })
+    } else {
+      window.open(url, '_blank')
+    }
+  }
 }
+export default mixins