Fixed websql init async,cleanup options,add tested browsers
This commit is contained in:
Willem
parent
ec4e9a0dae
commit
e5e2dfc56f
34
README.md
34
README.md
|
|
@ -13,29 +13,23 @@ A javascript library providing server defined loading of resources for a single
|
|||
|
||||
Single index.html
|
||||
|
||||
FFSpaLoader.options.debug = true;
|
||||
FFSpaLoader.options.debug.enable = true;
|
||||
FFSpaLoader.options.boot.angular.modules.push('exampleUI');
|
||||
FFSpaLoader.options.server.url = 'http://myserver';
|
||||
FFSpaLoader.options.server.urlPath = '/api/path/to/spa/client/resources';
|
||||
FFSpaLoader.bootDevice(function() {
|
||||
FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();// need deviceready via bootDevice for sqllite.
|
||||
FFSpaLoader.start(function() {
|
||||
console.log('FFExample.bootstrap angular');
|
||||
angular.bootstrap( $('body'), ['exampleUI']);
|
||||
});
|
||||
});
|
||||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||||
FFSpaLoader.start();
|
||||
|
||||
|
||||
## Usage Web
|
||||
|
||||
Single index.html
|
||||
|
||||
FFSpaLoader.options.debug = true;
|
||||
FFSpaLoader.options.server.url = '';
|
||||
FFSpaLoader.options.server.urlPath = '/api/path/to/spa/client/resources';
|
||||
FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();
|
||||
FFSpaLoader.options.debug.enable = true;
|
||||
FFSpaLoader.options.boot.angular.modules.push('exampleUI');
|
||||
FFSpaLoader.options.server.url = 'http://myserver';
|
||||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||||
FFSpaLoader.start(function() {
|
||||
console.log('FFExample.bootstrap angular');
|
||||
angular.bootstrap( $('body'), ['exampleUI']);
|
||||
console.log('FFExample.boot done');
|
||||
});
|
||||
|
||||
## Usage Multi Server
|
||||
|
|
@ -45,12 +39,20 @@ A javascript library providing server defined loading of resources for a single
|
|||
|
||||
## Options
|
||||
|
||||
* options.debug = Enable console debug output.
|
||||
* options.debug.enable = Enable console debug output.
|
||||
* TODO
|
||||
|
||||
## Example Application
|
||||
|
||||
There is a fully working express example application in the example folder.
|
||||
|
||||
## Tested Browsers
|
||||
|
||||
* Chromium 46
|
||||
* Iceweasel 43
|
||||
* Opera 12 Presto
|
||||
* Android 5 in Cordova
|
||||
|
||||
## Contributing
|
||||
|
||||
In lieu of a formal styleguide, take care to maintain the existing coding style.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
// TODO:
|
||||
// set tag.media = 'only you';
|
||||
// add media in resouces
|
||||
// check supported browsers
|
||||
|
||||
/**
|
||||
* FFSpaLoader is an assets loader for single page applications.
|
||||
|
|
@ -38,40 +37,57 @@
|
|||
* - Assets hashing for fast syncing.
|
||||
* - Assets types: js,css,cssData
|
||||
* - Caching backends: null,localStorage,webSqlDB,sqllite
|
||||
* - Optional ask and cache server assets url.
|
||||
* - Cordova deviceready event booting.
|
||||
* - Server url question ui.
|
||||
* - Loader error ui.
|
||||
* - Build-in Cordova booting.
|
||||
* - Build-in AngularJS booting.
|
||||
*
|
||||
* @module FFSpaLoader
|
||||
*/
|
||||
var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
||||
|
||||
var options = {
|
||||
debug: false,
|
||||
errorHandler: null,
|
||||
bootDevice: {
|
||||
timeout: 4096,
|
||||
windowFlag: 'FFCordovaDevice'
|
||||
debug: {
|
||||
enable: false,
|
||||
handler: null, // auto filled
|
||||
prefix: 'FFSpaLoader.'
|
||||
},
|
||||
error: {
|
||||
handler: null, // auto filled
|
||||
title: 'Loader Error',
|
||||
style: '.ffError { margin: auto;width: 90%;border: 3px solid red;padding-left: 1em;padding-bottom: 1em;}'
|
||||
},
|
||||
boot: {
|
||||
cordova: {
|
||||
enable: true,
|
||||
timeout: 4096, // FIXME: Test really slow devices -> increase ? or add support -1 for disable or ?
|
||||
flag: 'FFCordovaDevice'
|
||||
},
|
||||
angular: {
|
||||
enable: true,
|
||||
modules: []
|
||||
},
|
||||
askUrl: {
|
||||
urlTransport: 'http://',
|
||||
questionText: 'Please provide the server name;',
|
||||
cssText: '.ffAskUrl { font-size: 1em;margin: auto;width: 50%;border: 3px solid #73AD21;padding: 1em;} .ffAskUrl > div {font-size: 0.8em;color: #ccc;} .ffAskUrl > div > * {} .ffAskUrl > div > input {} .ffAskUrlError{ color: red}',
|
||||
},
|
||||
server: {
|
||||
url: null,
|
||||
urlPath: null,
|
||||
assets: null,
|
||||
timeout: 4096,
|
||||
windowFlag: 'FFServerUrl',
|
||||
flag: 'FFServerUrl',
|
||||
header: {
|
||||
request: {
|
||||
request: { // TODO: add header support
|
||||
'X-FFSpaLoader': '42'
|
||||
},
|
||||
response: {
|
||||
}
|
||||
},
|
||||
question: {
|
||||
transport: 'http://',
|
||||
title: 'Server',
|
||||
text: 'Please provide the server name;', // TODO: rename .ffAskUrl
|
||||
style: '.ffAskUrl { font-size: 1em;margin: auto;width: 90%;border: 3px solid #73AD21;padding-left: 1em;padding-bottom: 1em;} .ffAskUrl > div {font-size: 0.8em;color: #ccc;} .ffAskUrl > div > * {} .ffAskUrl > div > input {} .ffAskUrlError{ color: red}',
|
||||
}
|
||||
},
|
||||
cache: {
|
||||
factory: null,
|
||||
meta: null,
|
||||
js: null,
|
||||
css: null,
|
||||
|
|
@ -79,17 +95,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Prints debug message to the console if options.debug is true.
|
||||
* @param {String} message The message to log.
|
||||
* @private
|
||||
*/
|
||||
var utilDebug = function (message) {
|
||||
if (options.debug !== true) {
|
||||
return;
|
||||
}
|
||||
console.log('FFSpaLoader.'+message);
|
||||
};
|
||||
var cacheDB = null; // single instance for websql
|
||||
|
||||
var factory = {
|
||||
detect: {
|
||||
|
|
@ -113,7 +119,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
return 'cordova' in window;
|
||||
},
|
||||
cordovaDevice: function() {
|
||||
return options.bootDevice.windowFlag in window;
|
||||
return options.boot.cordova.flag in window;
|
||||
},
|
||||
mobileAgent: function() {
|
||||
return navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/);
|
||||
|
|
@ -165,25 +171,38 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
cb(err.message+' code: '+err.code);
|
||||
};
|
||||
};
|
||||
var cacheDB = window.openDatabase(opt.name, opt.version, opt.name, opt.size);
|
||||
var cacheDBInit = function(cb) {
|
||||
cacheDB.transaction(function(tx) {
|
||||
var query = 'SELECT value FROM cache_store WHERE key = \"test-for-table\"';
|
||||
utilDebug('websql.init query: '+query);
|
||||
tx.executeSql(query, [], function(tx,res) {}, function(tx,errorNoTable) {
|
||||
var query = 'CREATE TABLE cache_store(id INTEGER PRIMARY KEY AUTOINCREMENT, key TEXT NOT NULL, value TEXT NOT NULL)';
|
||||
utilDebug('websql.init query: '+query);
|
||||
utilDebug('websql.init query '+query);
|
||||
tx.executeSql(query, [], function(tx,res) {
|
||||
var query = 'CREATE UNIQUE INDEX cache_store__key__udx ON cache_store (key)';
|
||||
utilDebug('websql.init query: '+query);
|
||||
tx.executeSql(query, [], function(tx,res) {}, sqlErrorHandler(options.errorHandler)); // FIX<E: asyns error ?
|
||||
}, sqlErrorHandler(options.errorHandler));
|
||||
});
|
||||
utilDebug('websql.init query '+query);
|
||||
tx.executeSql(query, [], function(tx,res) {cb(null)}, sqlErrorHandler(cb));
|
||||
}, sqlErrorHandler(cb));
|
||||
});
|
||||
}
|
||||
return {
|
||||
cacheOpen: function(cb) {
|
||||
if (cacheDB !== null) {
|
||||
cb(null); // open once.
|
||||
return;
|
||||
}
|
||||
cacheDB = window.openDatabase(opt.name, opt.version, opt.name, opt.size);
|
||||
cacheDB.transaction(function(tx) {
|
||||
var query = 'SELECT value FROM cache_store WHERE key = \"test-for-table\"';
|
||||
utilDebug('websql.cacheOpen query '+query);
|
||||
tx.executeSql(query, [], function(tx,res) {
|
||||
cb(null);
|
||||
}, function(tx,errorNoTable) {
|
||||
cacheDBInit(cb);
|
||||
});
|
||||
});
|
||||
},
|
||||
cacheGetValue: function(key, cb) {
|
||||
cacheDB.transaction(function(tx) {
|
||||
var query = 'SELECT value FROM cache_store WHERE key = ?';
|
||||
utilDebug('websql.cacheGetValue query: '+query);
|
||||
utilDebug('websql.cacheGetValue query '+query);
|
||||
tx.executeSql(query,[key], function(tx, res) {
|
||||
if (res.rows.length === 0) {
|
||||
cb(null, null);
|
||||
|
|
@ -197,15 +216,15 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
cacheSetValue: function(key, value, cb) {
|
||||
cacheDB.transaction(function(tx) {
|
||||
var query = 'SELECT value FROM cache_store WHERE key = ?';
|
||||
utilDebug('websql.cacheSetValue query: '+query);
|
||||
utilDebug('websql.cacheSetValue query '+query);
|
||||
tx.executeSql(query,[key], function(tx, res) {
|
||||
if (res.rows.length === 0) {
|
||||
var query = 'INSERT INTO cache_store (key,value) VALUES (?,?)';
|
||||
utilDebug('websql.cacheSetValue query: '+query);
|
||||
utilDebug('websql.cacheSetValue query '+query);
|
||||
tx.executeSql(query, [key,JSON.stringify(value)], nullDataHandler(cb), sqlErrorHandler(cb));
|
||||
} else {
|
||||
var query = 'UPDATE cache_store SET value = ? WHERE key = ?';
|
||||
utilDebug('websql.cacheSetValue query: '+query);
|
||||
utilDebug('websql.cacheSetValue query '+query);
|
||||
tx.executeSql(query, [JSON.stringify(value),key], nullDataHandler(cb), sqlErrorHandler(cb));
|
||||
}
|
||||
}, sqlErrorHandler(cb));
|
||||
|
|
@ -214,8 +233,10 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
cacheDeleteValue: function(key, cb) {
|
||||
cacheDB.transaction(function(tx) {
|
||||
var query = 'DELETE FROM cache_store WHERE key = ?';
|
||||
utilDebug('websql.cacheDeleteValue query: '+query);
|
||||
tx.executeSql(query, [key], nullDataHandler(cb), sqlErrorHandler(cb));
|
||||
utilDebug('websql.cacheDeleteValue query '+query);
|
||||
tx.executeSql(query, [key], function (tx, res) {
|
||||
setTimeout(function() {cb(null);}); // return next tick so transaction is flushed before location.reload
|
||||
}, sqlErrorHandler(cb));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -223,24 +244,36 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Prints the debug message with prefix to the options.debug.handler if options.debug.enable is true.
|
||||
* @param {String} message The message to log.
|
||||
* @private
|
||||
*/
|
||||
var utilDebug = function (message) {
|
||||
if (options.debug.enable !== true) {
|
||||
return;
|
||||
}
|
||||
options.debug.handler(options.debug.prefix+message);
|
||||
};
|
||||
|
||||
/**
|
||||
* The default error handler which renders the error in the browser.
|
||||
* @param {String|Error} err The error message.
|
||||
* @private
|
||||
*/
|
||||
var utilErrorHandler = function(err) {
|
||||
utilDebug('utilErrorHandler error: '+err);
|
||||
utilDebug('utilErrorHandler error '+err); // TODO: Add Error object support
|
||||
|
||||
var rootTag = document.createElement('div');
|
||||
rootTag.setAttribute('class','ffError');
|
||||
|
||||
var cssTag = document.createElement("style");
|
||||
cssTag.type = "text/css";
|
||||
cssTag.innerHTML = '.ffError { margin: auto;width: 50%;border: 3px solid red;padding: 1em;} .ffAskUrl > div {font-size: 0.8em;color: red;}';
|
||||
cssTag.innerHTML = options.error.style;
|
||||
rootTag.appendChild(cssTag);
|
||||
|
||||
var titleTag = document.createElement('h1');
|
||||
titleTag.appendChild(document.createTextNode('Error'));
|
||||
titleTag.appendChild(document.createTextNode(options.error.title));
|
||||
rootTag.appendChild(titleTag);
|
||||
|
||||
var questionTag = document.createElement('p');
|
||||
|
|
@ -249,7 +282,6 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
|
||||
document.getElementsByTagName('body')[0].appendChild(rootTag);
|
||||
};
|
||||
options.errorHandler = utilErrorHandler;
|
||||
|
||||
/**
|
||||
* Fetches an url resource with a XMLHttpRequest.
|
||||
|
|
@ -262,16 +294,16 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
var httpRequest = new XMLHttpRequest();
|
||||
httpRequest.onreadystatechange = function() {
|
||||
if (httpRequest.readyState == 4 && httpRequest.status === 200) {
|
||||
utilDebug('utilHttpFetch url: '+url+' done in '+(new Date().getTime()-startTime)+' ms.');
|
||||
utilDebug('utilHttpFetch url \"'+url+'\" done in '+(new Date().getTime()-startTime)+' ms.');
|
||||
cb(null, httpRequest);
|
||||
} else if (httpRequest.readyState == 4) {
|
||||
cb('Wrong status: '+httpRequest.status);
|
||||
cb('Wrong status '+httpRequest.status);
|
||||
}
|
||||
}
|
||||
httpRequest.open('GET', url, true);
|
||||
httpRequest.timeout = options.server.timeout; // ieX: after open()
|
||||
httpRequest.ontimeout = function() {
|
||||
cb('timeout after '+options.server.timeout+' of url: '+url);
|
||||
cb('timeout after '+options.server.timeout+' of url '+url);
|
||||
};
|
||||
httpRequest.send();
|
||||
};
|
||||
|
|
@ -280,9 +312,6 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
if (options.cache[type]) {
|
||||
return options.cache[type];
|
||||
}
|
||||
if (options.cache['factory']) {
|
||||
return options.cache['factory'];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
|
|
@ -291,13 +320,13 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
};
|
||||
|
||||
var cacheCheckType = function (type, cb, action) {
|
||||
cacheHasService(type)?action():cb('No caching for: '+type);
|
||||
cacheHasService(type)?action():cb('No caching for '+type);
|
||||
};
|
||||
|
||||
var cacheGetValue = function(type, key , cb) {
|
||||
cacheCheckType(type, cb, function() {
|
||||
var cacheKey = type+'_'+key;
|
||||
utilDebug('cacheGetValue key: '+cacheKey);
|
||||
utilDebug('cacheGetValue key '+cacheKey);
|
||||
cacheGetService(type).cacheGetValue(cacheKey,cb);
|
||||
});
|
||||
};
|
||||
|
|
@ -305,7 +334,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
var cacheSetValue = function(type, key, value, cb) {
|
||||
cacheCheckType(type, cb, function() {
|
||||
var cacheKey = type+'_'+key;
|
||||
utilDebug('cacheSetValue key: '+cacheKey);
|
||||
utilDebug('cacheSetValue key '+cacheKey);
|
||||
cacheGetService(type).cacheSetValue(cacheKey,value,cb);
|
||||
});
|
||||
};
|
||||
|
|
@ -313,20 +342,20 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
var cacheDeleteValue = function(type, key, cb) {
|
||||
cacheCheckType(type, cb, function() {
|
||||
var cacheKey = type+'_'+key;
|
||||
utilDebug('cacheDeleteValue key: '+cacheKey);
|
||||
utilDebug('cacheDeleteValue key '+cacheKey);
|
||||
cacheGetService(type).cacheDeleteValue(cacheKey,cb);
|
||||
});
|
||||
};
|
||||
|
||||
var cleanupCache = function (resources, cb) {
|
||||
utilDebug('cleanupCache TODO cacheList: '+0+' resources: '+resources.length);
|
||||
utilDebug('cleanupCache TODO cacheList '+0+' resources '+resources.length);
|
||||
|
||||
// TODO: impl for removes in resource lists
|
||||
cb(null);
|
||||
};
|
||||
|
||||
var injectResourceData = function(resource, data, cb) {
|
||||
utilDebug('injectResourceData resource: '+JSON.stringify(resource)+' data: '+data.length);
|
||||
utilDebug('injectResourceData resource '+JSON.stringify(resource)+' data '+data.length);
|
||||
var tag = null;
|
||||
if (resource.type === 'css' || resource.type === 'cssData') {
|
||||
tag = document.createElement('style');
|
||||
|
|
@ -347,7 +376,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
var storeResourceKey = function (resource, cb) {
|
||||
// Add all cache keys in central list so we can clear the cache item if resources are removed.
|
||||
var cacheKey = resource.type+'_keys';
|
||||
cacheGetValue('meta',cacheKey,function (err,value) {
|
||||
cacheGetValue('meta',cacheKey,function (err,value) { // TODO: move to resource.type
|
||||
if (err !== null) {
|
||||
cb(err);
|
||||
return;
|
||||
|
|
@ -361,7 +390,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
}
|
||||
|
||||
var storeResource = function (resource, httpRequest, cb) {
|
||||
utilDebug('storeResource url: '+resource.url+' hash: '+resource.hash);
|
||||
utilDebug('storeResource url '+resource.url+' hash '+resource.hash);
|
||||
var item = {
|
||||
resource: resource,
|
||||
data: httpRequest.responseText
|
||||
|
|
@ -388,11 +417,9 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
return;
|
||||
}
|
||||
if (value === null) {
|
||||
utilDebug('loadResource cache miss');
|
||||
utilDebug('loadResource cache miss'); // + hash mismatch as its the key
|
||||
} else if (value.resource === undefined) {
|
||||
utilDebug('loadResource cache wrong obj');
|
||||
} else if (value.resource.hash !== resource.hash) {
|
||||
utilDebug('loadResource cache hash mismatch');
|
||||
} else {
|
||||
utilDebug('loadResource cache hit');
|
||||
injectResourceData(value.resource,value.data,cb);
|
||||
|
|
@ -456,7 +483,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
tag = document.createElement('script');
|
||||
tag.type = 'text/javascript';
|
||||
}
|
||||
utilDebug('injectResources resource: '+JSON.stringify(resource));
|
||||
utilDebug('injectResources from '+JSON.stringify(resource));
|
||||
|
||||
tag.appendChild(document.createTextNode(item.data));
|
||||
|
||||
|
|
@ -481,29 +508,29 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
cb('Missing options.server.url');
|
||||
return;
|
||||
}
|
||||
if (options.server.urlPath === null) {
|
||||
cb('Missing options.server.urlPath');
|
||||
if (options.server.assets === null) {
|
||||
cb('Missing options.server.assets');
|
||||
return;
|
||||
}
|
||||
window[options.server.windowFlag] = options.server.url;
|
||||
window[options.server.flag] = options.server.url;
|
||||
|
||||
var resourcesUrl = options.server.url + options.server.urlPath;
|
||||
utilDebug('startLoader serverUrl: '+resourcesUrl);
|
||||
var resourcesUrl = options.server.url + options.server.assets;
|
||||
utilDebug('startLoader assets \"'+resourcesUrl+'\"');
|
||||
utilHttpFetch(resourcesUrl, function(err, httpRequest) {
|
||||
if (err !== null) {
|
||||
utilDebug('startLoader fetch error: '+err);
|
||||
utilDebug('startLoader fetch error '+err);
|
||||
if (cacheHasService('meta')) {
|
||||
cacheGetValue('meta','server_resources',function(err, value) {
|
||||
if (err !== null) {
|
||||
cb(err);
|
||||
} else if (value === null) {
|
||||
cb('Have no cache of server resouces from: '+options.server.url);
|
||||
cb('Have no cache of server resouces from '+options.server.url);
|
||||
} else {
|
||||
injectResources(value, cb);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
cb('Could not fetch server resouces from: '+options.server.url);
|
||||
cb('Could not fetch server resouces from '+options.server.url);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -511,7 +538,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
JSON.parse(httpRequest.responseText).data.resources.forEach(function (r) {
|
||||
resources.push(r);
|
||||
});
|
||||
utilDebug('startLoader resources: '+resources.length);
|
||||
utilDebug('startLoader resources '+resources.length);
|
||||
if (cacheHasService('meta')) {
|
||||
cacheSetValue('meta','server_resources',resources, function (err) {
|
||||
if (err !== null) {
|
||||
|
|
@ -542,13 +569,13 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
}
|
||||
|
||||
options.server.url = '';
|
||||
if (options.askUrl.urlTransport !== undefined) {
|
||||
options.server.url += options.askUrl.urlTransport;
|
||||
if (options.server.question.transport !== undefined) {
|
||||
options.server.url += options.server.question.transport;
|
||||
}
|
||||
options.server.url += inputTag.value;
|
||||
|
||||
var resourcesUrl = options.server.url + options.server.urlPath;
|
||||
utilDebug('askUrlStart check url: '+resourcesUrl);
|
||||
var resourcesUrl = options.server.url + options.server.assets;
|
||||
utilDebug('askUrlStart check assets '+resourcesUrl);
|
||||
|
||||
// TODO: add+check headers
|
||||
utilHttpFetch(resourcesUrl,function(err, req) {
|
||||
|
|
@ -585,20 +612,24 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
|
||||
var cssTag = document.createElement("style");
|
||||
cssTag.type = "text/css";
|
||||
cssTag.innerHTML = options.askUrl.cssText;
|
||||
cssTag.innerHTML = options.server.question.style;
|
||||
rootTag.appendChild(cssTag);
|
||||
|
||||
var titleTag = document.createElement('h1');
|
||||
titleTag.appendChild(document.createTextNode(options.server.question.title));
|
||||
rootTag.appendChild(titleTag);
|
||||
|
||||
var questionTag = document.createElement('p');
|
||||
questionTag.appendChild(document.createTextNode(options.askUrl.questionText));
|
||||
questionTag.appendChild(document.createTextNode(options.server.question.text));
|
||||
rootTag.appendChild(questionTag);
|
||||
|
||||
var formTag = document.createElement('div');
|
||||
rootTag.appendChild(formTag);
|
||||
|
||||
if (options.askUrl.urlTransport !== undefined) {
|
||||
if (options.server.question.transport !== undefined) {
|
||||
var transportTag = document.createElement('label');
|
||||
rootTag.setAttribute('for','serverInput');
|
||||
transportTag.appendChild(document.createTextNode(options.askUrl.urlTransport));
|
||||
transportTag.appendChild(document.createTextNode(options.server.question.transport));
|
||||
formTag.appendChild(transportTag);
|
||||
}
|
||||
var inputTag = document.createElement('input');
|
||||
|
|
@ -626,6 +657,46 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
document.getElementsByTagName('body')[0].appendChild(rootTag);
|
||||
};
|
||||
|
||||
var startCacheType = function (type,cb) {
|
||||
if (options.cache[type] !== null && options.cache[type] === false) {
|
||||
utilDebug('startCacheType '+type+' disabled');
|
||||
options.cache[type] = null;
|
||||
return cb(null);
|
||||
}
|
||||
if (options.cache[type] === null) {
|
||||
if (factory.detect.cordovaDevice() && factory.detect.sqlitePlugin()) {
|
||||
utilDebug('startCacheType auto sqlitePlugin for '+type);
|
||||
options.cache[type] = factory.cache.websql({openDatabase: window.sqlitePlugin});
|
||||
} else if (factory.detect.openDatabase()) {
|
||||
utilDebug('startCacheType auto openDatabase for '+type);
|
||||
options.cache[type] = factory.cache.websql();
|
||||
} else if (factory.detect.localStorage()) {
|
||||
utilDebug('startCacheType auto localStorage for '+type);
|
||||
options.cache[type] = factory.cache.localStorage();
|
||||
} else {
|
||||
utilDebug('startCacheType '+type+' none');
|
||||
}
|
||||
}
|
||||
if (options.cache[type] !== null && typeof options.cache[type]['cacheOpen'] === "function") {
|
||||
options.cache[type].cacheOpen(cb);
|
||||
} else {
|
||||
cb(null);
|
||||
}
|
||||
};
|
||||
|
||||
var startCache = function (cb) {
|
||||
startCacheType('meta', function(err) {
|
||||
if (err !== null) { return cb(err); }
|
||||
startCacheType('js', function(err) {
|
||||
if (err !== null) { return cb(err); }
|
||||
startCacheType('css', function(err) {
|
||||
if (err !== null) { return cb(err); }
|
||||
startCacheType('cssData', cb);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Starts the loader.
|
||||
*
|
||||
|
|
@ -635,15 +706,28 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
var startTime = new Date().getTime();
|
||||
var cb = function(err) {
|
||||
if (err !== null) {
|
||||
options.errorHandler(err);
|
||||
options.error.handler(err);
|
||||
} else {
|
||||
utilDebug('start done in '+(new Date().getTime()-startTime)+' ms.');
|
||||
bootAngular(function(err) {
|
||||
if (err !== null) { return options.error.handler(err); }
|
||||
if (typeof cbArgu === "function") {
|
||||
cbArgu();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
utilDebug('start serverUrl: '+options.server.url);
|
||||
if (options.debug.enable === true) {
|
||||
var optionsKeys = Object.keys(options);
|
||||
for (var keyId in optionsKeys) {
|
||||
var key = optionsKeys[keyId];
|
||||
utilDebug('start config '+key+' '+JSON.stringify(options[key]));
|
||||
}
|
||||
}
|
||||
bootCordova(function(err) {
|
||||
if (err !== null) { return cb(err); }
|
||||
startCache(function(err) {
|
||||
if (err !== null) { return cb(err); }
|
||||
if (options.server.url !== null) {
|
||||
startLoader(cb);
|
||||
return;
|
||||
|
|
@ -662,45 +746,33 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
} else {
|
||||
askUrl(cb);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var clearServer = function(cb) {
|
||||
var clearServerUrl = function(cb) {
|
||||
if (cb === undefined) {
|
||||
cb = function() {};
|
||||
}
|
||||
if (cacheHasService('meta')) {
|
||||
cacheDeleteValue('meta','server_url',function(err) {
|
||||
if (err !== null) {
|
||||
cb(err);
|
||||
} else {
|
||||
cb(null);
|
||||
}
|
||||
});
|
||||
cacheDeleteValue('meta','server_url',cb);
|
||||
} else {
|
||||
cb(null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper for automatic selecting the best to none cache backend option.
|
||||
*
|
||||
* Order of detection; sqllite,openDatabase,localStorage,none.
|
||||
*/
|
||||
var autoSelectCache = function() {
|
||||
if (factory.detect.cordovaDevice() && factory.detect.sqlitePlugin()) {
|
||||
utilDebug('autoSelectCache sqlitePlugin');
|
||||
return factory.cache.websql({openDatabase: window.sqlitePlugin});
|
||||
var bootAngular = function(cb) {
|
||||
if (options.boot.angular.enable !== true) {
|
||||
utilDebug('bootAngular disabled by options');
|
||||
return cb(null);
|
||||
}
|
||||
if (factory.detect.openDatabase()) {
|
||||
utilDebug('autoSelectCache openDatabase');
|
||||
return factory.cache.websql();
|
||||
if (options.boot.angular.modules.length === 0) {
|
||||
utilDebug('bootAngular disabled by no modules');
|
||||
return cb(null);
|
||||
}
|
||||
if (factory.detect.localStorage()) {
|
||||
utilDebug('autoSelectCache localStorage');
|
||||
return factory.cache.localStorage();
|
||||
}
|
||||
utilDebug('autoSelectCache none');
|
||||
return null; // no caching
|
||||
utilDebug('bootAngular start '+options.boot.angular.modules);
|
||||
angular.bootstrap(document, options.boot.angular.modules);
|
||||
cb(null);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -709,40 +781,43 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
|
|||
* Note: On none cordova device page is will timeout.
|
||||
*
|
||||
* @param {function} cb Callback gets called device is ready to use.
|
||||
* @private
|
||||
*/
|
||||
var bootDevice = function(cb) {
|
||||
var bootCordova = function(cb) {
|
||||
if (options.boot.cordova.enable !== true) {
|
||||
utilDebug('bootCordova disabled by options');
|
||||
return cb(null);
|
||||
}
|
||||
if (factory.detect.cordova() !== true) {
|
||||
utilDebug('bootCordova disabled by detect');
|
||||
return cb(null);
|
||||
}
|
||||
var startTime = new Date().getTime();
|
||||
var bootOnce = function() {
|
||||
if (typeof cb === "function") {
|
||||
var callback = cb;
|
||||
cb = null;
|
||||
utilDebug('bootDevice done in '+(new Date().getTime()-startTime)+' ms.');
|
||||
utilDebug('bootCordova done in '+(new Date().getTime()-startTime)+' ms.');
|
||||
callback();
|
||||
}
|
||||
};
|
||||
if (!factory.detect.cordova()) {
|
||||
utilDebug('bootDevice webapp');
|
||||
bootOnce();
|
||||
return;
|
||||
}
|
||||
utilDebug('bootDevice timeout: '+options.bootDeviceTimeout);
|
||||
utilDebug('bootCordova timeout '+options.boot.cordova.timeout);
|
||||
setTimeout ( function () {
|
||||
utilDebug('bootDevice timeout');
|
||||
utilDebug('bootCordova timeout');
|
||||
bootOnce();
|
||||
}, options.bootDevice.timeout);
|
||||
}, options.boot.cordova.timeout);
|
||||
document.addEventListener("deviceready", function () {
|
||||
window[options.bootDevice.windowFlag] = true;
|
||||
utilDebug('bootDevice '+options.bootDevice.windowFlag);
|
||||
window[options.boot.cordova.flag] = true;
|
||||
utilDebug('bootCordova '+options.boot.cordova.flag);
|
||||
bootOnce();
|
||||
}, false);
|
||||
};
|
||||
|
||||
// Auto fill handlers and return public object.
|
||||
options.debug.handler = function(msg) {console.log(msg);};
|
||||
options.error.handler = utilErrorHandler;
|
||||
return {
|
||||
options: options,
|
||||
factory: factory,
|
||||
start: start,
|
||||
bootDevice: bootDevice,
|
||||
autoSelectCache: autoSelectCache,
|
||||
clearServer: clearServer
|
||||
clearServerUrl: clearServerUrl
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
var tpl = '<div><h2>Foo</h2><p>Welcome to the foo.</p></div>';
|
||||
tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doReboot()\" value=\"Reboot\"></input>';
|
||||
tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doClearServer()\" value=\"Clear Server\"></input>';
|
||||
tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doClearServerUrl()\" value=\"Clear Server\"></input>';
|
||||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui/foo', {
|
||||
|
|
@ -15,8 +15,13 @@ function PageFoo($scope) {
|
|||
window.location.reload(true);
|
||||
};
|
||||
|
||||
$scope.doClearServer = function ( path ) {
|
||||
FFSpaLoader.clearServer();
|
||||
$scope.doClearServerUrl = function ( path ) {
|
||||
FFSpaLoader.clearServerUrl(function(err) {
|
||||
if (err) {
|
||||
window.alert(err);
|
||||
} else {
|
||||
window.location.reload(true);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
'use strict';
|
||||
document.title = 'FF-Spa-Loader Example';
|
||||
document.title = 'FFSpaLoader Example';
|
||||
|
||||
var serverUrl = window.FFServerUrl;
|
||||
console.log('FF provided serverUrl: '+serverUrl);
|
||||
console.log('FFExample provided serverUrl \"'+serverUrl+'\"');
|
||||
|
||||
$(document.createElement('div')).attr('id', 'wrapper').appendTo($('body'));
|
||||
$(document.createElement('div')).attr('ng-controller', 'ApplicationController').attr('ng-include', '\''+serverUrl+'/example-ui/thtml/header\'').appendTo($('#wrapper'));
|
||||
|
|
|
|||
|
|
@ -6,13 +6,10 @@
|
|||
</head>
|
||||
<body><%- inline %>
|
||||
<script>
|
||||
FFSpaLoader.options.debug = true;
|
||||
FFSpaLoader.options.server.urlPath = '/static/spa-client-resources';
|
||||
FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();
|
||||
FFSpaLoader.start(function() {
|
||||
console.log('FFExample.bootstrap angular');
|
||||
angular.bootstrap( $('body'), ['exampleUI']);
|
||||
});
|
||||
FFSpaLoader.options.debug.enable = true;
|
||||
FFSpaLoader.options.boot.angular.modules.push('exampleUI');
|
||||
FFSpaLoader.options.server.assets = '/static/spa-client-resources';
|
||||
FFSpaLoader.start();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue