Bas Brands
3de68ad434
- This tool is only available for admins - Before using this tool the hosting admin will need to have NPM installed and be able to run grunt - To create the docs pages for the library run "grunt componentlibrary" - After the pages are created the Library is available in Site adminstration > Development > UI Component Library
44 lines
1.2 KiB
Markdown
44 lines
1.2 KiB
Markdown
---
|
|
layout: docs
|
|
title: "Moodle JavaScript"
|
|
date: 2020-01-14T13:38:37+01:00
|
|
group: moodle-components
|
|
draft: false
|
|
menu: "main"
|
|
---
|
|
|
|
## Running AMD modules
|
|
|
|
When using this (shortcode) syntax you can showcase your HTML and add some RequireJS style Javascript that will call core AMD modules.
|
|
|
|
In order for this to work you need to use the JavaScript syntax used in core Mustache templates. See the ```{{js}}``` tags in this example below:
|
|
|
|
{{< example >}}
|
|
<div id="toasttest" role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
|
|
<div class="toast-header">
|
|
<img src="http://placekitten.com/50/50" class="rounded mr-2" alt="PlaceKitten">
|
|
<strong class="mr-auto">Bootstrap</strong>
|
|
<small>11 mins ago</small>
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
</div>
|
|
{{#js}}
|
|
require(
|
|
[
|
|
'jquery',
|
|
'theme_boost/toast',
|
|
],
|
|
function(
|
|
$,
|
|
Toast
|
|
) {
|
|
var root = $('#toasttest');
|
|
root.toast('show');
|
|
});
|
|
{{/js}}
|
|
{{< /example >}} |