mirror of
https://github.com/TradeMe/bootup.js.git
synced 2026-01-08 06:03:50 -05:00
124 lines
4.0 KiB
Markdown
124 lines
4.0 KiB
Markdown
# bootup.js
|
|
|
|
Cache and load static files from local storage. This makes it easier to manage Javascript and other files for offline use, or just to improve the startup time of your web app.
|
|
|
|
## How to use
|
|
|
|
Simply instantiate a new BootUp object with an array of files to load.
|
|
|
|
new BootUp(files, options);
|
|
|
|
Where:
|
|
|
|
* files: an array of URLs to load,
|
|
* options: an object literal (optional)
|
|
|
|
### Options
|
|
|
|
#### success: function(Object BootUp)
|
|
A callback for when all files have loaded successfully.
|
|
|
|
#### error: function(Object BootUp)
|
|
A callback for when at least one file has failed.
|
|
|
|
#### loaded: function(Object BootUp, Number downloadedCount, Number fileCount, String path, String data)
|
|
This callback will fired after a file has successfully downloaded.
|
|
* downloadedCount returns the number of items that have successfully downloaded so far.
|
|
* fileCount returns the number of files remaining.
|
|
* path is the path of the file.
|
|
* data is the contents of the file.
|
|
|
|
#### threads: Number
|
|
The maximum number of files to download at the same time. The default is 8.
|
|
|
|
#### debug: Boolean
|
|
Set to true to have logged console output.
|
|
|
|
#### refresh: Boolean
|
|
Set to true to delete the local storage cache and redownload everything.
|
|
|
|
### Functions
|
|
|
|
#### getFile(string)
|
|
Get the contents of the file with the specified file name.
|
|
|
|
## Examples
|
|
|
|
### Simple Example
|
|
|
|
The simplest way to use BootUp is to just specify an array of files to download.
|
|
|
|
new BootUp(["jquery.js", "backbone.js", "site.js"]);
|
|
|
|
This will load in jQuery, Backbone and your site code (in the order that they are specified) and load them into `localStorage` (if available). On the next visit, it will just load them from `localStorage` directly.
|
|
|
|
### Callbacks
|
|
|
|
There are three callbacks that you can use and are specified in the `options` object.
|
|
|
|
`success` is called when all the files specified in the array have been downloaded. It works similar to the `window.onload` event handler.
|
|
|
|
new BootUp(
|
|
["jquery.js", "backbone.js", "site.js"],
|
|
{
|
|
success: function() {
|
|
init();
|
|
// call the init function if specified somewhere
|
|
}
|
|
}
|
|
);
|
|
|
|
`error` is called if there is an issue downloading any of the files. Note, this is not called if `localStorage` is unavailable, or has become corrupt (these are handled silently by BootUp and in most cases would act like nothing happened).
|
|
|
|
new BootUp(
|
|
["jquery.js", "backbone.js", "site.js"],
|
|
{
|
|
error: function() {
|
|
alert("There was an error loading the files. Please try again later.");
|
|
}
|
|
}
|
|
);
|
|
|
|
`loaded` can be used to indicate the download progress of all the files, and is called whenever a file has finished downloading. It provides you with the number of files already downloaded, the total number of files, and even the contents of the last downloaded file if necessary.
|
|
|
|
<div id="Progress"></div>
|
|
<script>
|
|
new BootUp(
|
|
["jquery.js", "backbone.js", "site.js"],
|
|
{
|
|
loaded: function(obj, current, maximum) {
|
|
document.getElementById("Progress").innerText = current + " of " + maximum + " downloaded...";
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
### Advanced File Loading
|
|
|
|
BootUp isn't just limited to loading Javascript files - it can load any file and store it in `localStorage`. While it automatically injects Javascript onto the page, you must use the `getFile` function to get to any other files.
|
|
|
|
var cachedFiles = new BootUp(
|
|
["jquery.js", "main_template.html"],
|
|
{
|
|
success: function() {
|
|
init();
|
|
}
|
|
}
|
|
);
|
|
|
|
function init() {
|
|
|
|
// we have a reference to the BootUp object in cachedFiles
|
|
var source = cachedFiles.getFile("main_template.html");
|
|
// you must use the exact file name that you used to get the file
|
|
// otherwise it will return null
|
|
|
|
// we now have the contents of main_template.html in our source variable
|
|
if (source) {
|
|
$("body").append(source);
|
|
}
|
|
|
|
}
|
|
|
|
## License
|
|
This project is licensed under the MIT License, see the LICENSE.TXT file for more information. |