Load some .js and .css into the page header. This is mainly used in development mode, when the library is not yet bundled and minified
Methods
# async static loadLibrary(config)
Load KissJS library dynamically from all its source files.
- In development, KissJS is a collection of javascript and css files that must loaded separately
- Ui eXtensions (UX) always need to be loaded manually and separately
- In production, KissJS is bundled and doesn't require to load modules dynamically
Please note that dynamic loading of libraries is a bit tricky and hacky:
- Because a librariy can depend on another one, they must be loaded in the right order
- KissJS uses this technic because the native browser module system doesn't support file:// path (and KissJS does)
- We couldn't use external dependencies (like requirejs, systemjs...) which don't work with file path (file://)
Parameters:
Name | Type | Description |
---|---|---|
config |
object
|
|
libraryPath |
object
|
The path to the library root folder |
useDb |
object
|
If false, load the library without the db/data related scripts |
# static loadScript(path, optionsopt, paramsopt)
Load a script file asynchronously into the page.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
path |
string
|
Provide the path to the javascript file, without the extension .js |
||
options |
object
|
<optional> |
Optional object to pass any custom attributes |
|
params |
object
|
<optional> |
Optional object to change loader behavior |
|
autoAddExtension |
string
|
<optional> |
'.js' | The extension to auto append to the path url. |
Example
kiss.loader
.loadScript("views/common/topbar")
.then(() => {
console.log("Javascript file loaded!")
})
// With options. This is equivalent to:
// <script async type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="2tkajpbphy1m8dj"></script>
kiss.loader.loadScript("https://www.dropbox.com/static/api/2/dropins.js", {
id: "dropboxjs",
"data-app-key": "2tkajpbphy1m8dj"
})
# static loadScripts(paths)
Load many scripts asynchronously and resolve Promise when all scripts are loaded
Parameters:
Name | Type | Description |
---|---|---|
paths |
Array.<string>
|
Array of javascript file paths to load, without .js extension |
Example
kiss.loader
.loadScripts([
"views/common/topbar",
"views/common/logo",
"views/common/buy"
]).then(() => {
console.log("All javascript files are loaded!")
})
# static loadStyle(path)
Load a CSS file asynchronously into the page
Parameters:
Name | Type | Description |
---|---|---|
path |
string
|
Provide the path to the CSS files, without the extension .css |
Example
kiss.loader
.loadStyle("views/common/topbar")
.then(() => {
console.log("CSS file loaded!")
})
# static loadStyles(paths)
Load many styles asynchronously and resolve Promise when all styles are loaded
Parameters:
Name | Type | Description |
---|---|---|
paths |
Array.<string>
|
Array of CSS file paths to load, without .cess extension |
Example
kiss.loader
.loadStyles([
"views/common/topbar",
"views/common/logo",
"views/common/buy"
]).then(() => {
console.log("All CSS files are loaded!")
})