Skip to content

Instantly share code, notes, and snippets.

@ericrallen
Last active August 29, 2015 13:56
Show Gist options
  • Save ericrallen/8798131 to your computer and use it in GitHub Desktop.
Save ericrallen/8798131 to your computer and use it in GitHub Desktop.
phonegap app javascript module for jQuery 2
'use strict';
(function($) {
//toggle this between true and false to allow/disallow testing the app in the browser
window.localApp = true;
window.app = (function() {
//this object will store methods and variables that will be accessible outside of the window.app module
var pub = {};
//store our window variables like height and width
var win = {};
//array to store images that need preloading
var preload = [
//store images in here as just the filename, like: 'back.svg'
];
//this will store the device Operating System
var devOS = '';
pub.defaultConfig = {
connectionRequired : false,
useStorage : false,
showTutorial : false
};
//flags for various app states
pub.online = false; //is the app online or not
pub.noAccessSent = false; //have we sent a message about the lack of network access
pub.useLocalStorage = false; //are we able to use localStorage
pub.firstUse = true; //is this the first use of the app
//this runs when the $(document).ready() event is fired by jQuery
pub.initialize = function initialize(config) {
pub.config = $.extend({}, pub.defaultConfig, config);
getWindowVars();
bindEvents();
preloadImages();
};
//this runs when the deviceready event is fired by PhoneGap
pub.ready = function ready() {
if(app.config.useStorage) {
//if local storage is available
if(checkStorage()) {
//store DB reference as app.lib
app.lib = new localStorageDB('library', localStorage);
//if the DB doesn't exist
if(app.lib.isNew()) {
//create it
buildDB();
} else {
var checkFirst = app.lib.query(
'settings',
{
'key' : 'first_use'
}
);
if(checkFirst[0]['val'] !== 1) {
app.firstUse = false;
}
}
}
}
//if this is the first use
if(app.firstUse) {
app.$tutorial.fadeIn();
app.$tutorial.on('tap, click', function(e) {
if(e.preventDefault) {
e.preventDefault();
}
app.$tutorial.fadeOut();
app.$tutorial.off('tap').off('click');
app.lib.update(
'settings',
{
'key' : 'first_use'
},
function(row) {
row['val'] = 0;
return row;
}
);
app.lib.commit();
startUp();
});
} else {
startUp();
}
};
//get sceen vars and cache selectors
function getWindowVars() {
//window height and width
win.width = $(window).width();
win.height = $(window).height();
app.$body = $('body');
app.$tutorial = $('#tutorial');
}
//preload any images in the preload array
function preloadImages() {
for(var i = 0, total = preload.length; i < total; i++) {
var img = new Image();
img.src = 'assets/img/' + preload[i];
}
}
//bind your events here
function bindEvents() {
//online/offline event toggle
document.addEventListener('online', toggleConnection, false);
document.addEventListener('offline', toggleConnection, false);
//on resume/pause from active/inactive status
document.addEventListener('resume', appResumed, false);
document.addEventListener('pause', appPaused, false);
//software/hardware back button on Android devices
document.addEventListener('backbutton', backSoftButton, false);
//bind other events below
}
//perform device-dependent start up tasks here
function startUp() {
checkOS();
checkConnection();
}
//triggered when the Android software back button is tapped
function backSoftButton() {
}
//triggered when the app is resumed from the background
function appResumed() {
}
//triggered when the app is sent to the background
function appPaused() {
}
//find the operating system of the device
function checkOS() {
//if we aren't testing the app locally
if(!window.localApp) {
devOS = device.platform;
//if we are testing locally
} else {
//default to iOS
devOS = 'iOS';
}
}
//check online status
function checkConnection() {
if(window.localApp) {
app.online = true;
} else {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
if(states[networkState] == 'Unknown connection' || states[networkState] == 'No network conneciton') {
app.online = false;
} else {
app.online = true;
}
}
}
//let user know there is no network connection
function noAccess() {
if(!app.noAccessSent && app.config.connectionRequired) {
app.msgAlert('Cannot access network connection. You will not be able to use this app offline', 'Connection Error');
app.noAccessSent = true;
}
}
//network connection status
function toggleConnection(e) {
//if the app went offline, remove the online flag
if(e.type == 'offline') {
app.online = false;
triggerOfflineEvents();
//if the app came online
} else {
app.online = true;
triggerOnlineEvents();
}
}
//any actions to perform when app loses network connection
function triggerOfflineEvents() {
//offline logic here
noAccess();
}
//any actions to perform when app gains network connection
function triggerOnlineEvents() {
//online logic here
app.noAccessSent = false;
}
//set up database
function buildDB() {
app.lib.createTable(
'settings',
[
'key',
'val'
]
);
app.lib.commit();
app.lib.insert(
'settings',
{
'key' : 'first_use',
'val' : 1
}
);
app.lib.commit();
}
function checkStorage() {
//if we can use local storage
if(window.localStorage) {
app.useLocalStorage = true;
//if we can't
} else {
app.useLocalStorage = false;
}
return app.useLocalStorage;
}
//store data in local storage
function storeData(key, val, obj) {
//if we are using local storage
if(app.useLocalStorage) {
//if this is a JSON object, stringify it
if(obj) {
val = JSON.stringify(val);
}
//store the value
localStorage.setItem(key, val);
}
}
//retrieve data from local storage
function getData(key, obj) {
//if we are using local storage
if(app.useLocalStorage) {
//get the value
var get = localStorage.getItem(key);
//if this is a JSON string, parse it to an object
if(obj && get) {
get = JSON.parse(get);
}
return get;
} else {
return false;
}
}
//use native notifications, if possible
pub.msgAlert = function msgAlert(message, title) {
//if the notification method exists
if(navigator.notification) {
//use notification style
navigator.notification.alert(message, null, title, 'OK');
//if it doesn't
} else {
//if we weren't sent a title
if(typeof title === 'undefined') {
title = '';
//if we were, add a : and a space to it
} else {
title = title + ': ';
}
window.alert(title + message);
}
};
//return the pub object so we can access variables and methods using dot notation, like app.initialize()
return pub;
}());
$(document).ready(function() {
//config object to pass to our app module
var config = {
connectionRequired : true,
useStorage : true,
showTutorial : true
};
app.initialize(config);
if(!window.localApp) {
document.addEventListener('deviceready', app.ready, false);
} else {
app.ready();
}
});
})(window.jQuery);