6 |
7 | ## Supported Platforms
8 |
9 | - Android
10 |
11 | ## Installation
12 |
13 | Cordova:
14 |
15 | cordova plugin add https://github.com/tomloprod/cordova-plugin-headercolor
16 |
17 | ## Usage
18 |
19 | This plugin exports an object with one method called "tint":
20 |
21 | ```javascript
22 | window.plugins.headerColor.tint("#becb29");
23 | ```
24 |
25 | You can also specify the header color in your `config.xml`:
26 |
27 | ```xml
28 |
3 |
6 |
7 |
9 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
35 |
--------------------------------------------------------------------------------
/src/components/Loader.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 | {{ $t("title") }}
10 |
11 |
12 |
13 |
14 |
43 |
--------------------------------------------------------------------------------
/src/i18n.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueI18n from 'vue-i18n'
3 |
4 | Vue.use(VueI18n)
5 |
6 | function loadLocaleMessages () {
7 | const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
8 | const messages = {}
9 | locales.keys().forEach(key => {
10 | const matched = key.match(/([a-z0-9]+)\./i)
11 | if (matched && matched.length > 1) {
12 | const locale = matched[1]
13 | messages[locale] = locales(key)
14 | }
15 | })
16 | return messages
17 | }
18 |
19 | export default new VueI18n({
20 | locale: process.env.VUE_APP_I18N_LOCALE || 'en',
21 | fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
22 | messages: loadLocaleMessages()
23 | })
24 |
--------------------------------------------------------------------------------
/src/libs/index.js:
--------------------------------------------------------------------------------
1 | export const nativeAlert = (message, title) => {
2 | if(navigator.notification) {
3 | navigator.notification.alert(message, () => {}, title, 'Ok');
4 | }else{
5 | alert(message);
6 | }
7 | };
8 |
--------------------------------------------------------------------------------
/src/locales/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "VueJS Cordova Sample",
3 | "showSample": "Show code samples",
4 | "drawer": {
5 | "home": "Home",
6 | "vibration": "Vibration",
7 | "camera": "Camera",
8 | "flash": "Flash",
9 | "localisation": "Localisation",
10 | "nfc": "Nfc"
11 | },
12 | "see_on_github": "See On Github",
13 | "getPosition": "Obtaining Position",
14 | "positionNotAvailable": "Can’t get your position",
15 | "startVibration": "Start vibration",
16 | "flashlight": {
17 | "start": "Start flashlight",
18 | "stop": "Stop flashlight",
19 | "notAvailable": "Plugin not installed"
20 | },
21 | "nfcText": {
22 | "waitingTag": "Scan a tag…",
23 | "tagSerial": "Serial number",
24 | "notAvailable": "Your mobile is not compatible.",
25 | "showSettings": "Enable NFC",
26 | "history": "History",
27 | "noHistory": "Empty"
28 | },
29 | "takePhoto": "Take a picture",
30 | "error": "Not available"
31 | }
--------------------------------------------------------------------------------
/src/locales/fr.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Exemples VueJS + Cordova",
3 | "showSample": "Afficher les examples",
4 | "drawer": {
5 | "home": "Accueil",
6 | "vibration": "Vibreur",
7 | "camera": "Camera",
8 | "flash": "Flash",
9 | "localisation": "Localisation",
10 | "nfc": "Nfc"
11 | },
12 | "see_on_github": "Voir sur Github",
13 | "getPosition": "Localisation en cours",
14 | "positionNotAvailable": "Localisation impossible",
15 | "startVibration": "Démarrer la vibration",
16 | "flashlight": {
17 | "start": "Allumer la lampe torche",
18 | "stop": "Éteindre la lampe torche",
19 | "notAvailable": "Plugin Cordova non installé"
20 | },
21 | "nfcText": {
22 | "waitingTag": "En attente d’un tag…",
23 | "tagSerial": "Numéro de série",
24 | "notAvailable": "Votre mobile est incompatible.",
25 | "showSettings": "Activer le NFC",
26 | "history": "Historique",
27 | "noHistory": "Aucun historique"
28 | },
29 | "takePhoto": "Prendre une photo",
30 | "error": "Non disponible"
31 | }
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill';
2 | import Vue from 'vue';
3 | import vuetify from './plugins/vuetify';
4 | import './plugins/vuetify-extra';
5 | import App from './App.vue';
6 | import router from './router/index';
7 | import i18n from './i18n';
8 |
9 | Vue.config.productionTip = false
10 |
11 | const init = () => {
12 | new Vue({
13 | vuetify,
14 | router,
15 | i18n,
16 | render: h => h(App)
17 | }).$mount('#app')
18 | };
19 |
20 | // Wait for the deviceready event to start the render
21 | document.addEventListener("deviceready", () => {
22 | // eslint-disable-next-line
23 | console.log("Ready, Render the App");
24 | init();
25 | });
26 |
27 | // If we are not in Cordova, manually trigger the deviceready event
28 | const isCordovaApp = (typeof window.cordova !== "undefined");
29 | if (!isCordovaApp){
30 | document.dispatchEvent(new CustomEvent("deviceready", {}));
31 | }
--------------------------------------------------------------------------------
/src/plugins/vuetify-extra.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import messageDialog from 'vuetify-vuejs-messagedialog';
3 |
4 | Vue.use(messageDialog);
--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify'
3 | import '@mdi/font/css/materialdesignicons.css'
4 | import 'vuetify/dist/vuetify.min.css'
5 | import 'roboto-fontface/css/roboto/roboto-fontface.css';
6 | import 'material-design-icons-iconfont/dist/material-design-icons.css';
7 |
8 | const vuetify = new Vuetify({ icons: {iconfont: 'mdi'}});
9 | Vue.use(Vuetify, vuetify);
10 |
11 | export default vuetify;
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import Home from '@/views/Home'
4 | import Vibration from '@/views/Vibration'
5 | import Flash from '@/views/Flash'
6 | import Camera from '@/views/Camera'
7 | import Nfc from '@/views/Nfc'
8 | import Localisation from '@/views/Localisation'
9 |
10 | Vue.use(Router);
11 |
12 | export default new Router({
13 | routes: [
14 | {
15 | path: '/',
16 | name: 'Home',
17 | component: Home
18 | },{
19 | path: '/vibration',
20 | name: 'Vibration',
21 | component: Vibration
22 | },{
23 | path: '/flash',
24 | name: 'Flash',
25 | component: Flash
26 | },{
27 | path: '/camera',
28 | name: 'Camera',
29 | component: Camera
30 | },{
31 | path: '/nfc',
32 | name: 'Nfc',
33 | component: Nfc
34 | },{
35 | path: '/localisation',
36 | name: 'Localisation',
37 | component: Localisation
38 | }
39 | ]
40 | })
--------------------------------------------------------------------------------
/src/views/Camera.vue:
--------------------------------------------------------------------------------
1 | // Require Cordova plugin : cordova-plugin-camera
2 |
3 |
4 |
4 | 
5 | 
6 | {{$t("showSample")}}
8 |
9 |
5 |
6 |