Skip to content

Commit e35c5f3

Browse files
cairincairin
committed
Allow the adding of cordova.js dynamically.
- Only adds cordova.js if app is being served through `file://` - Add cordova lifecycle event templates.
1 parent 9294b2f commit e35c5f3

File tree

5 files changed

+103
-40
lines changed

5 files changed

+103
-40
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
.DS_Store
33
docs/_book
4+
.idea/

‎template/.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ selenium-debug.log
1313
{{/e2e}}
1414

1515
# Editor directories and files
16-
.idea
16+
.idea/
1717
*.suo
1818
*.ntvs*
1919
*.njsproj

‎template/package.json

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,20 @@
1111
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{{/unit}}{{#e2e}},
1212
"e2e": "node test/e2e/runner.js"{{/e2e}}{{#if_or unit e2e}},
1313
"test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{/if_or}}{{#lint}},
14-
"lint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}"{{/lint}}
14+
"lint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}"{{/lint}},
15+
"cordova-build": "npm run build && cordova build",
16+
"cordova-browser": "npm run build && cordova run browser",
17+
"ios": "npm run build && cordova run ios",
18+
"android": "npm run build && cordova run android --device"
1519
},
1620
"dependencies": {
17-
"vue": "^2.3.3"{{#router}},
18-
"vue-router": "^2.3.1",{{/router}}
19-
"vuetify": "^0.14.11"
21+
"vue": "^2.3.3",
22+
{{#router}}
23+
"vue-router": "^2.3.1",
24+
{{/router}}
25+
"vuetify": "^1.0.0",
26+
"vue-cordova": "^0.1.2",
27+
"vue-head": "^2.0.12"
2028
},
2129
"devDependencies": {
2230
"autoprefixer": "^7.1.2",
@@ -30,6 +38,7 @@
3038
"babel-preset-env": "^1.3.2",
3139
"babel-preset-stage-2": "^6.22.0",
3240
"babel-register": "^6.22.0",
41+
"babel-polyfill": "^6.26.0",
3342
"chalk": "^2.0.1",
3443
"connect-history-api-fallback": "^1.3.0",
3544
"copy-webpack-plugin": "^4.0.1",
@@ -111,5 +120,11 @@
111120
"> 1%",
112121
"last 2 versions",
113122
"not ie <= 8"
114-
]
123+
],
124+
"cordova": {
125+
"plugins": {
126+
},
127+
"platforms": [
128+
]
129+
}
115130
}

‎template/src/App.vue

Lines changed: 59 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<template>
22
<v-app light>
33
<v-navigation-drawer
4-
persistent
4+
fixed
55
:mini-variant="miniVariant"
66
:clipped="clipped"
77
v-model="drawer"
8-
enable-resize-watcher
8+
app
99
>
1010
<v-list>
1111
<v-list-tile
1212
value="true"
1313
v-for="(item, i) in items"
1414
:key="i"
15+
exact
1516
>
1617
<v-list-tile-action>
1718
<v-icon light v-html="item.icon"></v-icon>
@@ -22,7 +23,7 @@
2223
</v-list-tile>
2324
</v-list>
2425
</v-navigation-drawer>
25-
<v-toolbar fixed>
26+
<v-toolbar fixed app :clipped-left="clipped">
2627
<v-toolbar-side-icon @click.stop="drawer = !drawer" light></v-toolbar-side-icon>
2728
<v-btn
2829
icon
@@ -55,27 +56,18 @@
5556
<v-icon>menu</v-icon>
5657
</v-btn>
5758
</v-toolbar>
58-
<main>
59-
<v-container fluid>
60-
<v-slide-y-transition mode="out-in">
61-
<v-layout column align-center>
62-
<img src="/static/img/v.png" alt="Vuetify.js" class="mb-5">
63-
<blockquote>
64-
&#8220;First, solve the problem. Then, write the code.&#8221;
65-
<footer>
66-
<small>
67-
<em>&mdash;John Johnson</em>
68-
</small>
69-
</footer>
70-
</blockquote>
71-
</v-layout>
72-
</v-slide-y-transition>
73-
</v-container>
74-
</main>
59+
<v-content>
60+
{{#router}}
61+
<router-view></router-view>
62+
{{else}}
63+
<hello></hello>
64+
{{/router}}
65+
</v-content>
7566
<v-navigation-drawer
7667
temporary
7768
:right="right"
7869
v-model="rightDrawer"
70+
fixed
7971
>
8072
<v-list>
8173
<v-list-tile @click="right = !right">
@@ -86,31 +78,64 @@
8678
</v-list-tile>
8779
</v-list>
8880
</v-navigation-drawer>
89-
<v-footer :fixed="fixed">
90-
<span>&copy; 2017</span>
91-
</v-footer>
9281
</v-app>
9382
</template>
9483

9584
<script>
85+
{{#unless router}}
86+
import Hello from '@/components/Hello'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
87+
{{/unless}}
88+
import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
9689
export default {
97-
data () {
90+
data{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
9891
return {
92+
cordova: Vue.cordova,
9993
clipped: false,
10094
drawer: true,
10195
fixed: false,
102-
items: [
103-
{ icon: 'bubble_chart', title: 'Inspire' }
104-
],
96+
items: [{
97+
icon: 'bubble_chart',
98+
title: 'Inspire'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
99+
}],
105100
miniVariant: false,
106101
right: true,
107102
rightDrawer: false,
108-
title: 'Vuetify.js'
103+
title: 'Vuetify.js'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
104+
}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
105+
}{{#unless router}},
106+
components: {
107+
Hello{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
108+
}{{/unless}},
109+
created () {
110+
var self = this{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
111+
this.cordova.on('deviceready', () => {
112+
self.onDeviceReady(){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
113+
}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
114+
},
115+
methods: {
116+
onDeviceReady: function () {
117+
// Handle the device ready event.
118+
this.cordova.on('pause', this.onPause, false){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
119+
this.cordova.on('resume', this.onResume, false){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
120+
if (this.cordova.device.platform === 'Android') {
121+
document.addEventListener('backbutton', this.onBackKeyDown, false){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
122+
}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
123+
},
124+
onPause () {
125+
// Handle the pause lifecycle event.
126+
console.log('pause'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
127+
},
128+
onResume () {
129+
// Handle the resume lifecycle event.
130+
// SetTimeout required for iOS.
131+
setTimeout(function () {
132+
console.log('resume'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
133+
}, 0){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
134+
},
135+
onBackKeyDown () {
136+
// Handle the back-button event on Android. By default it will exit the app.
137+
navigator.app.exitApp(){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
109138
}
110-
}
111-
}
139+
}{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
140+
}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
112141
</script>
113-
114-
<style lang="stylus">
115-
@import './stylus/main'
116-
</style>

‎template/src/main.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,27 @@
44
{{/if_eq}}
55
import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
66
import Vuetify from 'vuetify'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
7+
import 'vuetify/dist/vuetify.css'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
8+
import VueCordova from 'vue-cordova'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
9+
import VueHead from 'vue-head'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
10+
711
import App from './App'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
812
{{#router}}
913
import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
1014
{{/router}}
1115

1216
Vue.use(Vuetify){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
1317
Vue.config.productionTip = false{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
18+
Vue.use(VueCordova){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
19+
Vue.use(VueHead){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
20+
21+
// add cordova.js only if serving the app through file://
22+
if (window.location.protocol === 'file:' || window.location.port === '3000') {
23+
var cordovaScript = document.createElement('script'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
24+
cordovaScript.setAttribute('type', 'text/javascript'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
25+
cordovaScript.setAttribute('src', 'cordova.js'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
26+
document.body.appendChild(cordovaScript){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
27+
}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
1428

1529
/* eslint-disable no-new */
1630
new Vue({
@@ -24,5 +38,13 @@ new Vue({
2438
{{#if_eq build "standalone"}}
2539
template: '<App/>',
2640
components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
41+
head: {
42+
meta: [
43+
{
44+
name: 'viewport',
45+
content: 'width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
46+
}{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
47+
]{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
48+
}{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
2749
{{/if_eq}}
2850
}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}

0 commit comments

Comments
 (0)