Merge branch 'MDL-69089-39' of git://github.com/aanabit/moodle into MOODLE_39_STABLE
[moodle.git] / calendar / templates / month_detailed.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 calendar/month_detailed
20     Calendar month view.
22     The purpose of this template is to render the month view.
24     Classes required for JS:
25     * none
27     Data attributes required for JS:
28     * none
30     Example context (json):
31     {
32     }
33 }}
34 <div{{!
35     }} class="calendarwrapper"{{!
36     }}{{#courseid}} data-courseid="{{courseid}}"{{/courseid}}{{!
37     }}{{#categoryid}} data-categoryid="{{categoryid}}"{{/categoryid}}{{!
38     }} data-context-id="{{defaulteventcontext}}"{{!
39     }} data-month="{{date.mon}}"{{!
40     }} data-year="{{date.year}}"{{!
41     }} data-view="month"{{!
42     }}>
43     {{> core_calendar/month_navigation }}
44     {{> core/overlay_loading}}
45     <table id="month-detailed-{{uniqid}}" class="calendarmonth calendartable mb-0">
46         <thead>
47             <tr>
48                 {{# daynames }}
49                 <th class="header text-xs-center">
50                     <span class="sr-only">{{fullname}}</span>
51                     <span aria-hidden="true">{{shortname}}</span>
52                 </th>
53                 {{/ daynames }}
54             </tr>
55         </thead>
56         <tbody>
57     {{#weeks}}
58             <tr data-region="month-view-week">
59                 {{#prepadding}}
60                     <td class="dayblank">&nbsp;</td>
61                 {{/prepadding}}
62                 {{#days}}
63                     <td class="day text-sm-center text-md-left{{!
64                             }}{{#istoday}} today{{/istoday}}{{!
65                             }}{{#isweekend}} weekend{{/isweekend}}{{!
66                             }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
67                             }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
68                             }}{{#defaulteventcontext}} clickable{{/defaulteventcontext}}{{!
69                         }}"
70                         data-day-timestamp="{{timestamp}}"
71                         data-drop-zone="month-view-day"
72                         data-region="day"
73                         data-new-event-timestamp="{{neweventtimestamp}}">
74                         <div class="d-none d-md-block hidden-phone text-xs-center">
75                             <span class="sr-only">{{daytitle}}</span>
76                             {{#hasevents}}
77                                 <a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}"
78                                     data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
79                                     data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
80                                     data-timestamp="{{timestamp}}">{{mday}}</a>
81                             {{/hasevents}}
82                             {{^hasevents}}
83                                 <span aria-hidden="true">{{mday}}</span>
84                             {{/hasevents}}
85                             {{#hasevents}}
86                                 <div data-region="day-content">
87                                     <ul>
88                                         {{#events}}
89                                         {{#underway}}
90                                             <li class="events-underway">[{{{name}}}]</li>
91                                         {{/underway}}
92                                         {{^underway}}
93                                             <li data-region="event-item"
94                                                 dava-event-component="{{component}}"
95                                                 data-event-eventtype="{{eventtype}}"
96                                                 data-eventtype-{{normalisedeventtype}}="1"
97                                                 {{#draggable}}
98                                                     draggable="true"
99                                                     data-drag-type="move"
100                                                     {{#mindaytimestamp}}
101                                                         data-min-day-timestamp="{{.}}"
102                                                     {{/mindaytimestamp}}
103                                                     {{#mindayerror}}
104                                                         data-min-day-error="{{.}}"
105                                                     {{/mindayerror}}
106                                                     {{#maxdaytimestamp}}
107                                                         data-max-day-timestamp="{{.}}"
108                                                     {{/maxdaytimestamp}}
109                                                     {{#maxdayerror}}
110                                                         data-max-day-error="{{.}}"
111                                                     {{/maxdayerror}}
112                                                 {{/draggable}}>
114                                                 <a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
115                                                     <span class="badge badge-circle calendar_event_{{normalisedeventtype}}">
116                                                         &nbsp;
117                                                     </span>
118                                                     {{> core_calendar/event_icon}}
119                                                     <span class="eventname">{{{name}}}</span>
120                                                 </a>
121                                             </li>
122                                         {{/underway}}
123                                         {{/events}}
124                                     </ul>
125                                 </div>
126                             {{/hasevents}}
127                         </div>
128                         <div class="d-md-none hidden-desktop hidden-tablet">
129                             <span class="sr-only">{{daytitle}}</span>
130                             {{#hasevents}}
131                                 <a data-action="view-day-link" href="#" class="day aalink" aria-label="{{viewdaylinktitle}}"
132                                     data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
133                                     data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
134                                     data-timestamp="{{timestamp}}">{{mday}}</a>
135                             {{/hasevents}}
136                             {{^hasevents}}
137                                 <span aria-hidden="true">{{mday}}</span>
138                             {{/hasevents}}
139                         </div>
140                     </td>
141                 {{/days}}
142                 {{#postpadding}}
143                     <td class="dayblank">&nbsp;</td>
144                 {{/postpadding}}
145             </tr>
146     {{/weeks}}
147         </tbody>
148     </table>
149 </div>
150 {{#js}}
151 require([
152     'jquery',
153     'core_calendar/month_view_drag_drop',
154     'core_calendar/selectors',
155     'core_calendar/events',
156 ], function(
157     $,
158     DragDrop,
159     CalendarSelectors,
160     CalendarEvents
161 ) {
162     var root = $('#month-detailed-{{uniqid}}');
163     DragDrop.init(root);
165     $('body').on(CalendarEvents.filterChanged, function(e, data) {
166         M.util.js_pending("month-detailed-{{uniqid}}-filterChanged");
167         // A filter value has been changed.
168         // Find all matching cells in the popover data, and hide them.
169         var target = $("#month-detailed-{{uniqid}}").find(CalendarSelectors.eventType[data.type]);
171         var transitionPromise = $.Deferred();
172         if (data.hidden) {
173             transitionPromise.then(function() {
174                 return target.slideUp('fast').promise();
175             });
176         } else {
177             transitionPromise.then(function() {
178                 return target.slideDown('fast').promise();
179             });
180         }
182         transitionPromise.then(function() {
183             M.util.js_complete("month-detailed-{{uniqid}}-filterChanged");
185             return;
186         });
188         transitionPromise.resolve();
189     });
190 });
191 {{/js}}