| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Moodle JavaScript"
|
|
|
4 |
date: 2020-01-14T13:38:37+01:00
|
|
|
5 |
group: moodle-components
|
|
|
6 |
draft: false
|
|
|
7 |
menu: "main"
|
|
|
8 |
---
|
|
|
9 |
|
|
|
10 |
## Running AMD modules
|
|
|
11 |
|
|
|
12 |
When using this (shortcode) syntax you can showcase your HTML and add some RequireJS style Javascript that will call core AMD modules.
|
|
|
13 |
|
|
|
14 |
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:
|
|
|
15 |
|
|
|
16 |
{{< example >}}
|
|
|
17 |
<div id="toasttest" role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
|
|
|
18 |
<div class="toast-header">
|
|
|
19 |
<img src="http://placekitten.com/50/50" class="rounded mr-2" alt="PlaceKitten">
|
|
|
20 |
<strong class="mr-auto">Bootstrap</strong>
|
|
|
21 |
<small>11 mins ago</small>
|
|
|
22 |
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
|
23 |
<span aria-hidden="true">×</span>
|
|
|
24 |
</button>
|
|
|
25 |
</div>
|
|
|
26 |
<div class="toast-body">
|
|
|
27 |
Hello, world! This is a toast message.
|
|
|
28 |
</div>
|
|
|
29 |
</div>
|
|
|
30 |
{{#js}}
|
|
|
31 |
require(
|
|
|
32 |
[
|
|
|
33 |
'jquery',
|
|
|
34 |
'theme_boost/toast',
|
|
|
35 |
],
|
|
|
36 |
function(
|
|
|
37 |
$,
|
|
|
38 |
Toast
|
|
|
39 |
) {
|
|
|
40 |
var root = $('#toasttest');
|
|
|
41 |
root.toast('show');
|
|
|
42 |
});
|
|
|
43 |
{{/js}}
|
|
|
44 |
{{< /example >}}
|