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