Using Source Loader
API Quick Reference
JavaScript is required to use the quick reference
What is Source Loader?
The srcLoader function provides a convenient way to include unbuilt
versions of Glow on a page. This is useful if you want to test your work
without needing to build Glow each time.
srcLoader is provided by srcloader/srcloader.js
in the Glow source code repository.
Getting Started
Here is the most basic use of srcLoader:
<script type="text/javascript" src="/path/to/master/srcloader/srcloader.js"></script>
<script type="text/javascript">srcLoader();</script>
<script type="text/javascript">
// use glow here
glow.dom.get("body").append("<p>Hello world</p>");
</script>
This will include all Glow modules and CSS files onto the current
page. Glow will exist as window.glow.
Note: Change /path/to/master/
to point to the location of Glow on your web server.
What else can Source Loader do?
Load from a specific branch, tag or other location
srcLoader is included in Glow version 1.5 onwards.
Simply point to a specific copy of srcLoader to
load the version of Glow it is included in.
<script type="text/javascript" src="/path/to/tags/1.5.0/srcloader/srcloader.js"></script>
<script type="text/javascript">srcLoader();</script>
<script type="text/javascript">
// use glow 1.5.0 here
</script>
Note: Change /path/to/tags/1.5.0/
to point to the version of Glow you wish to load.
If you're not including srcloader.js using a standard script tag,
srcLoader may not be able to reliably detect it's
own path. Should this happen, you can use the "path" option to
help it out.
<script type="text/javascript">
srcLoader({
path: "/path/to/branch/1.5/"
});
</script>Load specific modules
By default, srcLoader will load all Glow source files,
but you can restrict this to particular modules using the "modules"
option.
<script type="text/javascript">
srcLoader({
modules: ["glow", "glow.dom", "glow.events"]
});
</script>If you have Gloader included on the page, it will ensure files are loaded in the correct order and any dependencies are also loaded.
Without gloader, you'll need to list all required modules in the correct order. View the source of srcloader.js to see the correct order of modules.
Load asynchronously & stay out of the global scope
You can load Glow asynchronously and prevent it entering the global scope.
<script type="text/javascript">
srcLoader({
loadMethod: "gloaderAsync",
onLoad: function(glow) {
// use glow here
}
});
</script>Note: Gloader must be included on the page to use this load method. Read more about Gloader.
Once all script files have loaded, the onLoad handler is called
and the glow object is passed in as a parameter.
Because Glow is loaded asynchronously, it may load before or
after the DOM is ready to manipulate. Use glow.ready to ensure the DOM is also ready.
Because it never hits the global scope, this method can be used to include an unbuilt version of Glow on a page that already includes a built version, without affecting other scripts relying on the built version.
Load synchronously & stay out of the global scope
Similar to above, but loads synchronously.
<script type="text/javascript">
srcLoader({
loadMethod: "gloaderSyncCallback",
onLoad: function(glow) {
// use glow here
}
});
</script>Note: Gloader must be included on the page to use this load method. Read more about Gloader.
Once all script files have loaded, the onLoad handler is called
and the glow object is passed in as a parameter.
Because it never hits the global scope, this method can also be used to include an unbuilt version of Glow on a page that already includes a built version.
