Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
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 >}}