Created
April 10, 2012 20:11
-
-
Save mikechambers/2354134 to your computer and use it in GitHub Desktop.
main js file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
<!-- | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> | |
--> | |
<meta charset="utf-8"> | |
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> | |
<script src="js/libs/jquery-1.7.2.min.js"></script> | |
<script type="text/javascript"> | |
$(document).ready( | |
function(){ | |
document.addEventListener("deviceready", onDeviceReady, false); | |
//note: if running in phone gap, comment this line out. | |
init(); | |
} | |
); | |
function onDeviceReady() | |
{ | |
init(); | |
navigator.notification.alert("Cordova is working") | |
} | |
</script> | |
</head> | |
<body> | |
<header> | |
</header> | |
<div role="main"> | |
<ul id="card-list"> | |
<script id="card-list-template" type="text/x-handlebars-template"> | |
{{#each cards}} | |
<li>{{this.name}}</li> | |
{{/each}} | |
</script> | |
<ul> | |
</div> | |
<footer> | |
</footer> | |
<script src="js/libs/handlebars.js"></script> | |
<script src="js/SpectralKitten.js"></script> | |
<script src="js/main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//change port to test first time load | |
var spectralKitten; | |
var init = function(){ | |
spectralKitten = new SpectralKitten(); | |
spectralKitten.loadCards( | |
function(cards) | |
{ | |
console.log("Cards Loaded : " + spectralKitten.cards.length); | |
var source = $("#card-list-template").html(); | |
var template = Handlebars.compile(source); | |
var context = {cards:spectralKitten.cards}; | |
var html = template(context); | |
$("#card-list").html(html); | |
} | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//check version of data to see if we need to update it | |
//have to think about if we exceed storage quota, so we would need to check for how much space | |
//we need before we write, and then, if we need more, request more from the user before we write. | |
//of course, that is async, so somehow we have to save the state while we wait for the user to respond | |
;(function(){ | |
"use strict"; | |
function SpectralKitten() | |
{ | |
//check for new card data in the background | |
//if new data, load and cache | |
} | |
SpectralKitten.CARD_FILE_NAME = "cards.json"; | |
//private / hidden | |
//will this be shared across all instances of SpectralKitten? | |
var _cards; | |
Object.defineProperty( | |
SpectralKitten.prototype, | |
"cards", | |
{ | |
get:function(){ | |
return _cards; | |
} | |
} | |
); | |
SpectralKitten.prototype.loadCards = function(callback, errorCallback) | |
{ | |
//option to override cache / force update | |
//check if card data has been cached | |
//have to ache images, need to figure out | |
//phone gap can only write text files | |
//might need to write a plugin to cache binary files | |
//maybe from base64 string, or from a URL | |
var loadRemoteData = function(fs) | |
{ | |
$.ajax({ | |
url:"all_cards.json", | |
dataType:"json", | |
success:function(data, code, jqXHR ) | |
{ | |
_cards = data.cards; | |
var errorWritingData = false; | |
fs.root.getFile( | |
SpectralKitten.CARD_FILE_NAME, | |
{create: true}, | |
function(fileEntry) | |
{ | |
// Create a FileWriter object for our FileEntry (log.txt). | |
fileEntry.createWriter( | |
function(fileWriter) | |
{ | |
fileWriter.onwriteend = function(e) | |
{ | |
if(!errorWritingData) | |
{ | |
console.log('Write completed.'); | |
} | |
}; | |
fileWriter.onerror = function(e) | |
{ | |
errorWritingData = true; | |
console.log("Error caching data."); | |
}; | |
// Create a new Blob and write it to log.txt. | |
var bb = new WebKitBlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12. | |
bb.append(JSON.stringify(_cards)); | |
fileWriter.write(bb.getBlob('text/plain')); | |
//do we need to close this? | |
}, | |
function(e) | |
{ | |
console.log("a"); | |
errorHandler(e); | |
} | |
); | |
}, | |
function(e) | |
{ | |
console.log("b"); | |
errorHandler(e); | |
} | |
); | |
if(callback) | |
{ | |
callback(_cards); | |
} | |
}, | |
error:function(jqXHR, msg, e) | |
{ | |
console.log("c"); | |
errorCallback(msg, e); | |
} | |
}); | |
}; | |
var errorHandler = function(e /*FileError*/) | |
{ | |
var msg = ''; | |
switch (e.code) { | |
case FileError.QUOTA_EXCEEDED_ERR: | |
msg = 'QUOTA_EXCEEDED_ERR'; | |
break; | |
case FileError.NOT_FOUND_ERR: | |
msg = 'NOT_FOUND_ERR'; | |
break; | |
case FileError.SECURITY_ERR: | |
msg = 'SECURITY_ERR'; | |
break; | |
case FileError.INVALID_MODIFICATION_ERR: | |
msg = 'INVALID_MODIFICATION_ERR'; | |
break; | |
case FileError.INVALID_STATE_ERR: | |
msg = 'INVALID_STATE_ERR'; | |
break; | |
default: | |
msg = 'Unknown Error'; | |
break; | |
} | |
console.log(e); | |
console.log('Error: ' + msg); | |
}; | |
(window.requestFileSystem || window.webkitRequestFileSystem) | |
( | |
window.PERSISTENT, | |
1024 * 1024 * 10000 /*10 megs*/, | |
function(fs /*FileSystem*/) | |
{ | |
fs.root.getFile( | |
SpectralKitten.CARD_FILE_NAME, | |
{}, | |
function(fileEntry) | |
{ | |
// Get a File object representing the file, | |
// then use FileReader to read its contents. | |
fileEntry.file( | |
function(file) | |
{ | |
var reader = new FileReader(); | |
reader.onloadend = function(e) | |
{ | |
var data = this.result; | |
//data should be here | |
if(!data.length) | |
{ | |
console.log("cache file is empty"); | |
loadRemoteData(fs); | |
} | |
//todo: catch error here in case data is corrupted | |
//if it is, clear file, and then load data from the server | |
try | |
{ | |
_cards = JSON.parse(data); | |
if(callback) | |
{ | |
callback(_cards); | |
} | |
} | |
catch(e) | |
{ | |
console.log("cached json data is corrupt"); | |
loadRemoteData(fs); | |
} | |
}; | |
reader.readAsText(file); | |
}, | |
function(e) | |
{ | |
console.log("d"); | |
errorHandler(e); | |
loadRemoteData(fs); | |
} | |
); | |
}, | |
function(e) | |
{ | |
console.log("e"); | |
errorHandler(e); | |
loadRemoteData(fs); | |
} | |
); | |
}, | |
function(e) | |
{ | |
errorHandler(e); | |
loadRemoteData(fs); | |
} | |
); | |
} | |
window.SpectralKitten = SpectralKitten; | |
}()); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how do i do this?