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                         if (event.item['author-name'] == null) return;
  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                                 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                                                 formatEventLocationText(event.item.location)
  60                                 ));
  61                                 break;
  62                                 case "agendaDay":
  63                                 element.find(".fc-title").html(
  64                                         "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
  65                                                 event.item['author-avatar'],
  66                                                 event.item['author-name'],
  67                                                 event.item.desc,
  68                                                 formatEventLocationText(event.item.location)
  69                                 ));
  70                                 break;
  71                                 case "listMonth":
  72                                 element.find(".fc-list-item-title").html(formatListViewEvent(event));
  73                                 break;
  74                         }
  75                 },
  76                 eventAfterRender: function (event, element) {
  77                         $(element).popover({
  78                                 content: eventHoverHtmlContent(event),
  79                                 container: "body",
  80                                 html: true,
  81                                 trigger: "hover",
  82                                 placement: "auto",
  83                                 template: '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
  84                         });
  85
  86                 }
  87
  88         })
  89
  90         // center on date
  91         var args=location.href.replace(baseurl,"").split("/");
  92         if (modparams == 2) {
  93                 if (args.length>=5) {
  94                         $("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1);
  95                 }
  96         } else {
  97                 if (args.length>=4) {
  98                         $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
  99                 }
 100         }
 101
 102         // echo the title
 103         var view = $('#events-calendar').fullCalendar('getView');
 104         $('#fc-title').text(view.title);
 105
 106         // show event popup
 107         var hash = location.hash.split("-")
 108         if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
 109
 110 });
 111
 112 // loads the event into a modal
 113 function showEvent(eventid) {
 114                 addToModal(baseurl + moduleUrl + '/?id=' + eventid);
 115 }
 116
 117 function changeView(action, viewName) {
 118         $('#events-calendar').fullCalendar(action, viewName);
 119         var view = $('#events-calendar').fullCalendar('getView');
 120         $('#fc-title').text(view.title);
 121 }
 122
 123 // The template for the bootstrap popover for displaying the event title and
 124 // author (it's the nearly the same template we use in frio for the contact
 125 // hover cards. So be careful when changing the css)
 126 function eventHoverBodyTemplate() {
 127         var template = '\
 128                 <div class="event-card-basic-content media">\
 129                         <div class="hover-card-details">\
 130                                 <div class="hover-card-header left-align">\
 131                                         <div class="event-hover-left-date left-align">\
 132                                                 <span class="event-date-wrapper medium">\
 133                                                         <span class="event-hover-short-month">{6}</span>\
 134                                                         <span class="event-hover-short-date">{7}</span>\
 135                                                 </span>\
 136                                         </div>\
 137                                         <div class="event-card-content media-body">\
 138                                                 <div class="event-hover-title">{3}</div>\
 139                                                 <div class="event-property"><span class="event-hover-date">{5}</span>{4}\
 140                                                 <div class="event-hover-profile-name profile-entry-name">\
 141                                                         <span class="left-align1"><a href="{1}" class="userinfo">{2}</a></span>\
 142                                                 </div>\
 143                                         </div>\
 144                                 </div>\
 145                                 <div class="clearfix"></div>\
 146                         </div>\
 147                 </div>';
 148
 149         return template;
 150 }
 151
 152 // The template for presenting the event location in the event hover-card
 153 function eventHoverLocationTemplate() {
 154         var template = '<span class="event-hover-location"> {0}</span></div>';
 155         return template;
 156 }
 157
 158 // transform the event data to html so we can use it in the event hover-card
 159 function eventHoverHtmlContent(event) {
 160         var eventLocation = '';
 161         // Get the Browser language
 162         var locale = window.navigator.userLanguage || window.navigator.language;
 163         var data = '';
 164
 165         // Use the browser language for date formatting
 166         moment.locale(locale);
 167
 168         // format dates to different styles
 169         var startDate = moment(event.item.start).format('dd HH:mm');
 170         var endDate = moment(event.item.finsih).format('dd HH:mm');
 171         var monthShort = moment(event.item.start).format('MMM');
 172         var dayNumberStart = moment(event.item.start).format('DD');
 173         var dayNumberEnd = moment(event.item.finish).format('DD');
 174         var startTime = moment(event.item.start).format('HH:mm');
 175         var endTime = moment(event.item.finish).format('HH:mm');
 176         var monthNumber;
 177
 178         var formattedDate = startDate
 179
 180         // We only need the to format the end date if the event does have
 181         // a finish date.
 182         if (event.item.nofinish == 0) {
 183                 formattedDate = startDate + ' - ' + endTime;
 184
 185                 // use a different Format (15. Feb - 18. Feb) if the events end date
 186                 // is not the start date
 187                 if ( dayNumberStart != dayNumberEnd) {
 188                         formattedDate = moment(event.item.start).format('Do MMM') +
 189                                         ' - ' +
 190                                         moment(event.item.finish).format('Do MMM');
 191                 }
 192         }
 193
 194         // Get the html template
 195         data = eventHoverBodyTemplate();
 196
 197         // Get only template data if there exist location data
 198         if (event.item.location != '') {
 199                 var eventLocationText = formatEventLocationText(event.item.location);
 200                 // Get the the html template for formatting the location
 201                 var eventLocationTemplate = eventHoverLocationTemplate();
 202                 // Format the event location data according to the the event location
 203                 // template
 204                 eventLocation = eventLocationTemplate.format(
 205                                         eventLocationText
 206                 );
 207         }
 208
 209         // Format the event data according to the event hover template
 210         var formatted = data.format(
 211                                 event.item['author-avatar'], // this isn't used at the present time
 212                                 event.item['author-link'],
 213                                 event.item['author-name'],
 214                                 event.title,
 215                                 eventLocation,
 216                                 formattedDate,
 217                                 monthShort.replace('.', ''), // Get rid of possible dots in the string
 218                                 dayNumberStart
 219                         );
 220
 221         return formatted;
 222 }
 223
 224 // transform the the list view event element into formatted html
 225 function formatListViewEvent(event) {
 226         // The basic template for list view
 227         var template = '<td class="fc-list-item-title fc-widget-content">\
 228                                 <hr class="seperator"></hr>\
 229                                 <div class="event-card">\
 230                                         <div class="popover-content hovercard-content">{0}</div>\
 231                                 </div>\
 232                         </td>';
 233         // Use the formation of the event hover and insert it in the base list view template
 234         var formatted = template.format(eventHoverHtmlContent(event));
 235
 236         return formatted;
 237 }
 238
 239 // Format event location in pure text
 240 function formatEventLocationText(location) {
 241         // Friendica can store the event location as text or as html
 242         // We need to check if the location is html. In this case we need
 243         // to transform it into clean text
 244         if (location.startsWith("<div")) {
 245                 var locationHtml = $.parseHTML( location );
 246                 var eventLocationText = locationHtml[0]['innerText'];
 247         } else {
 248                 var eventLocationText = location.replace("<br>", " ");
 249         };
 250
 251         return eventLocationText;
 252 }