1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Confirm"
|
|
|
4 |
description: "A reusable confirmation modal component"
|
|
|
5 |
date: 2021-12-09T14:48:00+08:00
|
|
|
6 |
draft: false
|
|
|
7 |
tags:
|
|
|
8 |
- MDL-71963
|
|
|
9 |
- "4.0"
|
|
|
10 |
---
|
|
|
11 |
|
|
|
12 |
## How it works
|
|
|
13 |
|
|
|
14 |
The confirm module is automatically invoked on page load, you just need to add some specific data attributes
|
|
|
15 |
to the element that will trigger the confirmation modal.
|
|
|
16 |
|
|
|
17 |
## Source files
|
|
|
18 |
|
|
|
19 |
* `lib/amd/src/utility.js` ({{< jsdoc module="core/utility" >}})
|
|
|
20 |
* `lib/templates/modal.mustache`
|
|
|
21 |
|
|
|
22 |
## Usage
|
|
|
23 |
The confirmation AMD module is loaded automatically, so the only thing you need to do is to add some specific data attributes
|
|
|
24 |
to the target element:
|
|
|
25 |
{{< highlight html >}}
|
|
|
26 |
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["delete", "core"]'
|
|
|
27 |
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["delete", "core"]'>Show confirmation modal</button>
|
|
|
28 |
{{< /highlight >}}
|
|
|
29 |
|
|
|
30 |
You can also use it on PHP, you just need to set the attributes parameter to any moodle output component that takes attributes:
|
|
|
31 |
{{< php >}}
|
|
|
32 |
echo $OUTPUT->single_button('#', get_string('delete'), 'get', [
|
|
|
33 |
'data-confirmation' => 'modal',
|
|
|
34 |
'data-confirmation-title-str' => json_encode(['delete', 'core']),
|
|
|
35 |
'data-confirmation-content-str' => json_encode(['areyousure']),
|
|
|
36 |
'data-confirmation-yes-button-str' => json_encode(['delete', 'core'])
|
|
|
37 |
]);
|
|
|
38 |
{{< / php >}}
|
|
|
39 |
|
|
|
40 |
## Attributes
|
|
|
41 |
|
|
|
42 |
<table class="table">
|
|
|
43 |
<thead>
|
|
|
44 |
<tr>
|
|
|
45 |
<th style="width: 250px;">Data attribute</th>
|
|
|
46 |
<th>Description</th>
|
|
|
47 |
</tr>
|
|
|
48 |
</thead>
|
|
|
49 |
<tbody>
|
|
|
50 |
<tr>
|
|
|
51 |
<td>data-confirmation</td>
|
|
|
52 |
<td>The identifier value must be "modal" so the module can find and register an event listener for that element.</td>
|
|
|
53 |
</tr>
|
|
|
54 |
<tr>
|
|
|
55 |
<td>data-confirmation-title-str</td>
|
|
|
56 |
<td>The modal title language string identifier, must be provided in JSON encoded format.</td>
|
|
|
57 |
</tr>
|
|
|
58 |
<tr>
|
|
|
59 |
<td>data-confirmation-content-str</td>
|
|
|
60 |
<td>The modal main content language string identifier, must be provided in JSON encoded format.</td>
|
|
|
61 |
</tr>
|
|
|
62 |
<tr>
|
|
|
63 |
<td>data-confirmation-yes-button-str</td>
|
|
|
64 |
<td>The language string identifier for the "Yes" button, must be provided in JSON encoded format.</td>
|
|
|
65 |
</tr>
|
|
|
66 |
<tr>
|
|
|
67 |
<td>data-confirmation-toast</td>
|
|
|
68 |
<td>If set to "true" it will display a confirmation toast in the end.</td>
|
|
|
69 |
</tr>
|
|
|
70 |
<tr>
|
|
|
71 |
<td>data-confirmation-toast-confirmation-str</td>
|
|
|
72 |
<td>The confirmation toast language string identifier, must be provided in JSON encoded format.</td>
|
|
|
73 |
</tr>
|
|
|
74 |
<tr>
|
|
|
75 |
<td>data-confirmation-destination</td>
|
|
|
76 |
<td>An url to redirect the user to.</td>
|
|
|
77 |
</tr>
|
|
|
78 |
</tbody>
|
|
|
79 |
</table>
|
|
|
80 |
|
|
|
81 |
## Examples
|
|
|
82 |
|
|
|
83 |
### Basic confirmation modal
|
|
|
84 |
|
|
|
85 |
#### Simple Modal
|
|
|
86 |
|
|
|
87 |
{{< example >}}
|
|
|
88 |
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["ok", "core"]'
|
|
|
89 |
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["ok", "core"]'>Show confirmation modal</button>
|
|
|
90 |
{{< /example >}}
|
|
|
91 |
|
|
|
92 |
#### Delete Modal
|
|
|
93 |
|
|
|
94 |
{{< example >}}
|
|
|
95 |
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-type="delete" data-confirmation-title-str='["delete", "core"]'
|
|
|
96 |
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["delete", "core"]'>Show delete modal</button>
|
|
|
97 |
{{< /example >}}
|
|
|
98 |
|
|
|
99 |
|
|
|
100 |
### Confirmation modal with a toast
|
|
|
101 |
|
|
|
102 |
{{< example >}}
|
|
|
103 |
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["save", "core"]'
|
|
|
104 |
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["save", "core"]' data-confirmation-toast="true"
|
|
|
105 |
data-confirmation-toast-confirmation-str='["saved", "core_question", "My question"]'>Show confirmation modal</button>
|
|
|
106 |
{{< /example >}}
|
|
|
107 |
|
|
|
108 |
### Confirmation modal with redirect
|
|
|
109 |
|
|
|
110 |
{{< example >}}
|
|
|
111 |
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["save", "core"]'
|
|
|
112 |
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["save", "core"]'
|
|
|
113 |
data-confirmation-destination="http://moodle.com">Show confirmation modal</button>
|
|
|
114 |
{{< /example >}}
|