view/theme/frio/js/mod_events.js

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