view/theme/frio/js/mod_events.js

   1 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
   2 /**
   3  * @file view/theme/frio/js/mod_events.js
   4  * Initialization of the fullCalendar and format the output.
   5  */
   6
   7 $(document).ready(function() {
   8         // start the fullCalendar
   9         $('#events-calendar').fullCalendar({
  10                 firstDay: aStr.firstDay,
  11                 monthNames: aStr['monthNames'],
  12                 monthNamesShort: aStr['monthNamesShort'],
  13                 dayNames: aStr['dayNames'],
  14                 dayNamesShort: aStr['dayNamesShort'],
  15                 allDayText: aStr.allday,
  16                 noEventsMessage: aStr.noevent,
  17                 buttonText: {
  18                         today: aStr.today,
  19                         month: aStr.month,
  20                         week: aStr.week,
  21                         day: aStr.day
  22                 },
  23                 events: baseurl + moduleUrl + '/json/',
  24                 header: {
  25                         left: '',
  26                 //      center: 'title',
  27                         right: ''
  28                 },
  29                 timeFormat: 'H:mm',
  30                 eventClick: function(calEvent, jsEvent, view) {
  31                         showEvent(calEvent.id);
  32                 },
  33                 loading: function(isLoading, view) {
  34                         if(!isLoading) {
  35                                 $('td.fc-day').dblclick(function() { addToModal('/events/new?start='+$(this).data('date')); });
  36                         }
  37                 },
  38                 defaultView: 'month',
  39                 aspectRatio: 1,
  40                 eventRender: function(event, element, view) {
  41                         //console.log(view.name);
  42                         switch(view.name){
  43                                 case "month":
  44                                         element.find(".fc-title").html(
  45                                                 "<span class='item-desc'>{2}</span>".format(
  46                                                         event.item['author-avatar'],
  47                                                         event.item['author-name'],
  48                                                         event.title,
  49                                                         event.item.desc,
  50                                                         event.item.location
  51                                         ));
  52                                         break;
  53                                 case "agendaWeek":
  54                                         if (event.item['author-name'] == null) return;
  55                                         element.find(".fc-title").html(
  56                                                 "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
  57                                                         event.item['author-avatar'],
  58                                                         event.item['author-name'],
  59                                                         event.item.desc,
  60                                                         htmlToText(event.item.location)
  61                                         ));
  62                                 break;
  63                                 case "agendaDay":
  64                                         if (event.item['author-name'] == null) return;
  65                                         element.find(".fc-title").html(
  66                                                 "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
  67                                                         event.item['author-avatar'],
  68                                                         event.item['author-name'],
  69                                                         event.item.desc,
  70                                                         htmlToText(event.item.location)
  71                                         ));
  72                                         break;
  73                                 case "listMonth":
  74                                         element.find(".fc-list-item-title").html(formatListViewEvent(event));
  75                                 break;
  76                         }
  77                 },
  78                 eventAfterRender: function (event, element) {
  79                         $(element).popover({
  80                                 content: eventHoverHtmlContent(event),
  81                                 container: "body",
  82                                 html: true,
  83                                 trigger: "hover",
  84                                 placement: "auto",
  85                                 template: '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
  86                                 sanitizeFn: function (content) {
  87                                         return DOMPurify.sanitize(content)
  88                                 },
  89                         });
  90
  91                 }
  92
  93         })
  94
  95         // center on date
  96         var args=location.href.replace(baseurl,"").split("/");
  97         if (modparams == 2) {
  98                 if (args.length>=5) {
  99                         $("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1);
 100                 }
 101         } else {
 102                 if (args.length>=4) {
 103                         $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
 104                 }
 105         }
 106
 107         // echo the title
 108         var view = $('#events-calendar').fullCalendar('getView');
 109         $('#fc-title').text(view.title);
 110
 111         // show event popup
 112         var hash = location.hash.split("-")
 113         if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
 114
 115 });
 116
 117 // loads the event into a modal
 118 function showEvent(eventid) {
 119                 addToModal(baseurl + moduleUrl + '/?id=' + eventid);
 120 }
 121
 122 function changeView(action, viewName) {
 123         $('#events-calendar').fullCalendar(action, viewName);
 124         var view = $('#events-calendar').fullCalendar('getView');
 125         $('#fc-title').text(view.title);
 126 }
 127
 128 // The template for the bootstrap popover for displaying the event title and
 129 // author (it's the nearly the same template we use in frio for the contact
 130 // hover cards. So be careful when changing the css)
 131 function eventHoverBodyTemplate() {
 132         var template = '\
 133                 <div class="event-card-basic-content media">\
 134                         <div class="event-card-details">\
 135                                 <div class="event-card-header">\
 136                                         <div class="event-card-left-date">\
 137                                                 <span class="event-date-wrapper medium">\
 138                                                         <span class="event-card-short-month">{5}</span>\
 139                                                         <span class="event-card-short-date">{6}</span>\
 140                                                 </span>\
 141                                         </div>\
 142                                         <div class="event-card-content media-body">\
 143                                                 <div class="event-card-title">{2}</div>\
 144                                                 <div class="event-property"><span class="event-card-date">{4}</span>{3}\
 145                                                 {1}\
 146                                         </div>\
 147                                 </div>\
 148                                 <div class="clearfix"></div>\
 149                         </div>\
 150                 </div>';
 151
 152         return template;
 153 }
 154
 155 // The template for presenting the event location in the event hover-card
 156 function eventHoverLocationTemplate() {
 157         var template = '<span role="presentation" aria-hidden="true"> · </span>\
 158                         <span class="event-card-location"> {0}</span></div>';
 159         return template;
 160 }
 161
 162 function eventHoverProfileNameTemplate() {
 163         var template = '\
 164                         <div class="event-card-profile-name profile-entry-name">\
 165                                 <a href="{0}" class="userinfo">{1}</a>\
 166                         </div>';
 167         return template;
 168 }
 169 // transform the event data to html so we can use it in the event hover-card
 170 function eventHoverHtmlContent(event) {
 171         var eventLocation = '';
 172         var eventProfileName = '';
 173         // Get the Browser language
 174         var locale = window.navigator.userLanguage || window.navigator.language;
 175         var data = '';
 176
 177         // Use the browser language for date formatting
 178         moment.locale(locale);
 179
 180         // format dates to different styles
 181         var startDate = moment(event.item.start).format('dd HH:mm');
 182         var endDate = moment(event.item.finsih).format('dd HH:mm');
 183         var monthShort = moment(event.item.start).format('MMM');
 184         var dayNumberStart = moment(event.item.start).format('DD');
 185         var dayNumberEnd = moment(event.item.finish).format('DD');
 186         var startTime = moment(event.item.start).format('HH:mm');
 187         var endTime = moment(event.item.finish).format('HH:mm');
 188         var monthNumber;
 189
 190         var formattedDate = startDate;
 191
 192         // We only need the to format the end date if the event does have
 193         // a finish date.
 194         if (event.item.nofinish == 0) {
 195                 formattedDate = startDate + ' - ' + endTime;
 196
 197                 // use a different Format (15. Feb - 18. Feb) if the events end date
 198                 // is not the start date
 199                 if ( dayNumberStart != dayNumberEnd) {
 200                         formattedDate = moment(event.item.start).format('Do MMM') +
 201                                         ' - ' +
 202                                         moment(event.item.finish).format('Do MMM');
 203                 }
 204         }
 205
 206         // Get the html template
 207         data = eventHoverBodyTemplate();
 208
 209         // Get only template data if there exists location data
 210         if (event.item.location) {
 211                 var eventLocationText = htmlToText(event.item.location);
 212                 // Get the the html template for formatting the location
 213                 var eventLocationTemplate = eventHoverLocationTemplate();
 214                 // Format the event location data according to the the event location
 215                 // template
 216                 eventLocation = eventLocationTemplate.format(
 217                                         eventLocationText
 218                 );
 219         }
 220
 221         // Get only template data if there exists a profile name
 222         if (event.item['author-name']) {
 223                 // Get the template
 224                 var eventProfileNameTemplate = eventHoverProfileNameTemplate();
 225                 // Insert the data into the template
 226                 eventProfileName = eventProfileNameTemplate.format(
 227                                         event.item['author-link'],
 228                                         event.item['author-name']
 229                 );
 230         }
 231
 232         // Format the event data according to the event hover template
 233         var formatted = data.format(
 234                                 event.item['author-avatar'], // this isn't used at the present time
 235                                 eventProfileName,
 236                                 event.title,
 237                                 eventLocation,
 238                                 formattedDate,
 239                                 monthShort.replace('.', ''), // Get rid of possible dots in the string
 240                                 dayNumberStart
 241                         );
 242
 243         return formatted;
 244 }
 245
 246 // transform the the list view event element into formatted html
 247 function formatListViewEvent(event) {
 248         // The basic template for list view
 249         var template = '<td class="fc-list-item-title fc-widget-content">\
 250                                 <hr class="seperator"></hr>\
 251                                 <div class="event-card">\
 252                                         <div class="popover-content hovercard-content">{0}</div>\
 253                                 </div>\
 254                         </td>';
 255         // Use the formation of the event hover and insert it in the base list view template
 256         var formatted = template.format(eventHoverHtmlContent(event));
 257
 258         return formatted;
 259 }
 260 // @license-end