lib/templates/time_element.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   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.
   8
   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.
  13
  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/time_element
  19
  20     Template to display an HTML time element.
  21
  22     Classes required for JS:
  23     * none
  24
  25     Data attributes required for JS:
  26     * data-timestamp Number - The timestamp for the element.
  27     * data-datetimeformat String - A valid format for the datetime attribute.
  28
  29     Context variables required for this template:
  30     * timestamp Number - The timestamp for the element.
  31     * userdateformat String - The user-facing date format
  32     * datetimeformat String - A valid format for the datetime attribute. Defaults to the ISO-8601 format of '%Y-%m-%dT%H:%M%z'.
  33     Example context (json):
  34     {
  35         "timestamp": 0,
  36         "userdateformat": "%d %b %Y",
  37         "datetimeformat": "%Y-%m-%dT%H:%M%z"
  38     }
  39 }}
  40 <time id="time-{{$elementid}}{{uniqid}}{{/elementid}}" class="{{$elementclass}}{{timeclass}}{{/elementclass}}" datetime="{{$datetimeval}}{{datetime}}{{/datetimeval}}"
  41       data-timestamp="{{$timestampval}}{{timestamp}}{{/timestampval}}"
  42       data-datetimeformat="{{$datetimeformatval}}{{#datetimeformat}}{{.}}{{/datetimeformat}}{{^datetimeformat}}%Y-%m-%dT%H:%M%z{{/datetimeformat}}{{/datetimeformatval}}">
  43     {{$datedisplay}}
  44         {{#userdate}} {{$timestampval}}{{timestamp}}{{/timestampval}}, {{$userdateformatval}}{{userdateformat}}{{/userdateformatval}} {{/userdate}}
  45     {{/datedisplay}}
  46 </time>
  47 {{#js}}
  48     /** Fetches the formatted date/time for the time element's datetime attribute. */
  49     require(['core/user_date'], function(UserDate) {
  50         var root = document.getElementById('time-{{$elementid}}{{uniqid}}{{/elementid}}');
  51         // Fetch value for the datetime attribute using core/user_date, if it's not available.
  52         if (!root.getAttribute('datetime')) {
  53             var dateTimeFormat = root.getAttribute('data-datetimeformat');
  54             var timestamp = root.getAttribute('data-timestamp');
  55
  56             if (!dateTimeFormat.match(/%(?![YmdHMSzZ])./g)) {
  57                 var zeroPad = function(nNum, nPad) {
  58                     return ((Math.pow(10, nPad) + nNum) + '').slice(1);
  59                 };
  60
  61                 var date = new Date(timestamp * 1000);
  62
  63                 var datetime = dateTimeFormat.replace(/%./g, function(sMatch) {
  64                     return (({
  65                         '%Y': date.getFullYear(),
  66                         '%m': zeroPad(date.getMonth() + 1, 2),
  67                         '%d': zeroPad(date.getDate(), 2),
  68                         '%H': zeroPad(date.getHours(), 2),
  69                         '%M': zeroPad(date.getMinutes(), 2),
  70                         '%S': zeroPad(date.getSeconds(), 2),
  71                         '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
  72                         '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
  73                     }[sMatch] || '') + '') || sMatch;
  74                 });
  75                 root.setAttribute('datetime', datetime);
  76             }  else {
  77                 // Otherwise, use core/user_date.
  78                 var timestamps = [{
  79                     timestamp: timestamp,
  80                     format: dateTimeFormat,
  81                     type: 'gregorian',
  82                     fixday: 0,
  83                     fixhour: 0
  84                 }];
  85                 UserDate.get(timestamps).done(function(dates) {
  86                     var datetime = dates.pop();
  87                     root.setAttribute('datetime', datetime);
  88                 });
  89             }
  90         }
  91     });
  92 {{/js}}