Useful core Javascript modules: Difference between revisions
Ryan Wyllie (talk | contribs) No edit summary |
|||
Line 61: | Line 61: | ||
== URL module (core/url) == | == URL module (core/url) == | ||
Useful Functions: | |||
<code javascript> | <code javascript> | ||
// Generate an absolute URL by using the relative path to a file and optionally slash arguments | |||
url.fileUrl(relativeScript, slashArgs) | |||
// Generate an absolute URL from the given relative path, include the URL parameters and possibly the current session key | |||
url.relativeUrl(relativePath, params, includeSessionKey) | |||
// Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found | |||
url.imageUrl(imagename, component) | |||
</code> | |||
Example: | |||
<code javascript> | |||
// Prerequisites: | |||
// - A Javascript file is present under $CFG->wwwroot."/path/to/file.js" | |||
require(['core/url'], function(url) { | require(['core/url'], function(url) { | ||
url.fileUrl( | url.fileUrl("/path/to/file.js", ""); | ||
console.log("Generated URL: " + url); | |||
}); | }); | ||
</code> | </code> |
Revision as of 13:23, 10 May 2017
Moodle 2.9
Configuration settings (core/config)
Example of using config module:
require(['core/config’], function(mdlcfg) {
console.log(mdlcfg.wwwroot); // outputs the wwwroot of moodle to console
});
Language strings (core/str)
Example of using language strings module (retrieved via ajax, if the string is not yet loaded)
require([‘core/str’], function(str) {
str.get_string('edita', 'core', stringargument).done(function(s) {
console.log(s);
}).fail(console.log(e));
});
The string will be retrieved via AJAX request on the first use and cached in browser local storage until purge caches or site upgrade
IT IS NOT RECOMMENDED to call:
$PAGE->requires->string_for_js('edita', 'core'); // You do not need this!
Because:
- The list of strings used now needs to be maintained in 2 places
- The strings are always sent, and bloat the page size even if they are not used
- All strings fetched via the AJAX method above are cached in browser local storage anyway, so these strings will never be used 99% of the time
Notifications (core/notification)
Examples:
require(['core/notification’], function(notification) {
notification.alert('Hello', 'Welcome to my site!', 'Continue');
});
Strings and notifications:
require(['core/str', 'core/notification’], function(str, notification) {
str.get_strings([
{'key' : 'delete'},
{'key' : 'confirmdeletetag', component : 'tag'},
{'key' : 'yes'},
{'key' : 'no'},
]).done(function(s) {
notification.confirm(s[0], s[1], s[2], s[3], function() {
window.location.href = href;
});
}
).fail(notification.exception);
});
URL module (core/url)
Useful Functions:
// Generate an absolute URL by using the relative path to a file and optionally slash arguments
url.fileUrl(relativeScript, slashArgs)
// Generate an absolute URL from the given relative path, include the URL parameters and possibly the current session key
url.relativeUrl(relativePath, params, includeSessionKey)
// Generates an image url using the filename of the image and the Moodle component (core, plugin, etc.) where it can be found
url.imageUrl(imagename, component)
Example:
// Prerequisites:
// - A Javascript file is present under $CFG->wwwroot."/path/to/file.js"
require(['core/url'], function(url) {
url.fileUrl("/path/to/file.js", "");
console.log("Generated URL: " + url);
});
Tree (core/tree)
Moodle 3.1
If you want to add a hierarchical interface, you should use the tree module. It will handle user interaction and accessibility for you.
define(['jquery', 'core/tree'], function($, Tree) {
return {
init: function() {
new Tree("css/jquery selector of the tree container");
}
};
});
Read more about the Tree module
Modal (core/modal)
If you'd like to add a modal to your page the modal modules will handle all of the magic for you, all you need to bring is your content!
require(['jquery', 'core/modal_factory'], function($, ModalFactory) {
var trigger = $('#create-modal');
ModalFactory.create({
title: 'test title',
body: '
test body content
',
footer: 'test footer content',
}, trigger)
.done(function(modal) {
// Do what you want with your new modal.
});
});
Read more about the AMD_Modal module