Check If Device Is Ready


#1

Hello,

I would like to get help on a few things,

  1. Where exactly am I supposed to write cordova plugin code? I mean should I do this code in my-app.js or the phonegapindex.js? This is because I have a page that will require a user’s location on load, If the user denies permission, it should reload the page triggering a permission request again…
    I tried the geolocation plugin in my heloworld phonegap project and I got these…
    I am now not sure where it all fits in framework7… For example,

in phonegap

` var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// ‘load’, ‘deviceready’, ‘offline’, and ‘online’.
bindEvents: function() {
document.addEventListener(‘deviceready’, this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of ‘this’ is the event. In order to call the ‘receivedEvent’
// function, we must explicitly call ‘app.receivedEvent(…);’
onDeviceReady: function() {
var WatchID = navigator.geolocation.getCurrentPosition(onSuccess,OnError,{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}
};

var onSuccess = function(position) {
// Storing the lat and long values from navigator.gelocation object to variables
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var ExtraInfo = 'Longitude = '+longitude+' Latitude ='+latitude;

alert(ExtraInfo);

}

var OnError = function(error) {
alert('code: ’ + error.code + ‘\n’ +
'message: ’ + error.message + ‘\n’);
}`

How best do I do this kind of implementation on a page say:

in my-app.js

$$(document).on('page:init', '.page[data-name="my-location-page"]', function (e) { //check -if (deviceisready), **//then trigger the 'allowLocation' permission in a phone** // -if(userAllows) **//doSomething();** else **//alert user,reload page until user accepts** //else, DeviceIsNotReady, Alert user... })

Main question: Where does this code go? (index.js / myapp.js) How do I check if deviceisready in all instances it is important in an if---else situation? I need to know how cordova works clearly with F7… From there, we are good. I am sorry, I am teaching myself all these fro the documentation… I am new to hybrid app dev but I must get the job done… I am learning on work… I feel confortable writing all my code in one file my-app.js.

Once I now these, then it will be easy for me to check if there is connection, and several other things that require cordova… Thanks in advance, Thanks Vlad for this awesome framework!


#2

With standard cordova, I wrote the code in main.js but couldnt get it work yet as described in my post below


#3

Framework7 in cordova environment by default will be initialized after device ready event, so:

app = new Framework7({
  on: {
    init() {
      //device ready here
    },
  }
});

page:init events happens also after f7 init, so when device is ready


#4

@nolimits4web, thanks Mr. Vlad… So this means I don’t actually have to test the deviceready event since from your clarification above, framework7 has done the job for me already…

$$(document).on('deviceready',function(){ //logic }) is literally not important if framework7 initializes well?


#5

Right, but you can still use it $$(document).on('deviceready',function(){ //logic }) if you want


#6

@nolimits4web… Mr. Vlad, thanks so much!


#7

Hi everyone, i was having same problem but if you are running cordova component, index.html file must has to this code.

Check your index.html file :slight_smile: