MDL-68076 core: Introduced \core\notification::cta()
[moodle.git] / lib / templates / local / notification / cta.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template core/local/notification/cta
20     Moodle cta notification template.
22     The purpose of this template is to render a call to action notification.
24     Classes required for JS:
25     * none
27     Data attributes required for JS:
28     * none
30     Context variables required for this template:
31     * message A cleaned string (use clean_text()) to display.
32     * extraclasses Additional classes to apply to the notification.
33     * actions List of action links.
34     * icon An icon.pix and icon.componrnt for the icon to be displauyed as the icon of CTA notification.
36     Example context (json):
37     {
38         "message": "What do you think about Moodle?",
39         "actions": [
40             {
41                 "title": "Give feedback",
42                 "url": "#",
43                 "data": [
44                     {"name": "action", "value": "give"},
45                     {"name": "contextid", "value": "3"}
46                 ]
47             }
48         ]
49     }
50 }}
52 <div class="cta alert alert-primary alert-block fade in {{ extraclasses }}" {{# region }}data-region="{{ region }}"{{/ region}}>
53     <div class="media">
54         <div class="mr-2 icon-size-5">
55             {{# pix }} {{ icon.pix }}, {{ icon.component }} {{/ pix }}
56         </div>
57         <div class="media-body align-self-center">
58             {{{ message }}}<br>
59             {{# actions }}
60                 <a href="{{ url }}" class="link-underline aalink"
61                     {{# data }}
62                    data-{{ name }}="{{ value }}"
63                     {{/ data }}
64                 >{{ title }}</a>
65             {{/ actions }}
66         </div>
67     </div>
68 </div>