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                         });
  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="event-card-details">\
 131                                 <div class="event-card-header">\
 132                                         <div class="event-card-left-date">\
 133                                                 <span class="event-date-wrapper medium">\
 134                                                         <span class="event-card-short-month">{5}</span>\
 135                                                         <span class="event-card-short-date">{6}</span>\
 136                                                 </span>\
 137                                         </div>\
 138                                         <div class="event-card-content media-body">\
 139                                                 <div class="event-card-title">{2}</div>\
 140                                                 <div class="event-property"><span class="event-card-date">{4}</span>{3}\
 141                                                 {1}\
 142                                         </div>\
 143                                 </div>\
 144                                 <div class="clearfix"></div>\
 145                         </div>\
 146                 </div>';
 147
 148         return template;
 149 }
 150
 151 // The template for presenting the event location in the event hover-card
 152 function eventHoverLocationTemplate() {
 153         var template = '<span role="presentation" aria-hidden="true"> · </span>\
 154                         <span class="event-card-location"> {0}</span></div>';
 155         return template;
 156 }
 157
 158 function eventHoverProfileNameTemplate() {
 159         var template = '\
 160                         <div class="event-card-profile-name profile-entry-name">\
 161                                 <a href="{0}" class="userinfo">{1}</a>\
 162                         </div>';
 163         return template;
 164 }
 165 // transform the event data to html so we can use it in the event hover-card
 166 function eventHoverHtmlContent(event) {
 167         var eventLocation = '';
 168         var eventProfileName = '';
 169         // Get the Browser language
 170         var locale = window.navigator.userLanguage || window.navigator.language;
 171         var data = '';
 172
 173         // Use the browser language for date formatting
 174         moment.locale(locale);
 175
 176         // format dates to different styles
 177         var startDate = moment(event.item.start).format('dd HH:mm');
 178         var endDate = moment(event.item.finsih).format('dd HH:mm');
 179         var monthShort = moment(event.item.start).format('MMM');
 180         var dayNumberStart = moment(event.item.start).format('DD');
 181         var dayNumberEnd = moment(event.item.finish).format('DD');
 182         var startTime = moment(event.item.start).format('HH:mm');
 183         var endTime = moment(event.item.finish).format('HH:mm');
 184         var monthNumber;
 185
 186         var formattedDate = startDate;
 187
 188         // We only need the to format the end date if the event does have
 189         // a finish date.
 190         if (event.item.nofinish == 0) {
 191                 formattedDate = startDate + ' - ' + endTime;
 192
 193                 // use a different Format (15. Feb - 18. Feb) if the events end date
 194                 // is not the start date
 195                 if ( dayNumberStart != dayNumberEnd) {
 196                         formattedDate = moment(event.item.start).format('Do MMM') +
 197                                         ' - ' +
 198                                         moment(event.item.finish).format('Do MMM');
 199                 }
 200         }
 201
 202         // Get the html template
 203         data = eventHoverBodyTemplate();
 204
 205         // Get only template data if there exists location data
 206         if (event.item.location) {
 207                 var eventLocationText = htmlToText(event.item.location);
 208                 // Get the the html template for formatting the location
 209                 var eventLocationTemplate = eventHoverLocationTemplate();
 210                 // Format the event location data according to the the event location
 211                 // template
 212                 eventLocation = eventLocationTemplate.format(
 213                                         eventLocationText
 214                 );
 215         }
 216
 217         // Get only template data if there exists a profile name
 218         if (event.item['author-name']) {
 219                 // Get the template
 220                 var eventProfileNameTemplate = eventHoverProfileNameTemplate();
 221                 // Insert the data into the template
 222                 eventProfileName = eventProfileNameTemplate.format(
 223                                         event.item['author-link'],
 224                                         event.item['author-name']
 225                 );
 226         }
 227
 228         // Format the event data according to the event hover template
 229         var formatted = data.format(
 230                                 event.item['author-avatar'], // this isn't used at the present time
 231                                 eventProfileName,
 232                                 event.title,
 233                                 eventLocation,
 234                                 formattedDate,
 235                                 monthShort.replace('.', ''), // Get rid of possible dots in the string
 236                                 dayNumberStart
 237                         );
 238
 239         return formatted;
 240 }
 241
 242 // transform the the list view event element into formatted html
 243 function formatListViewEvent(event) {
 244         // The basic template for list view
 245         var template = '<td class="fc-list-item-title fc-widget-content">\
 246                                 <hr class="seperator"></hr>\
 247                                 <div class="event-card">\
 248                                         <div class="popover-content hovercard-content">{0}</div>\
 249                                 </div>\
 250                         </td>';
 251         // Use the formation of the event hover and insert it in the base list view template
 252         var formatted = template.format(eventHoverHtmlContent(event));
 253
 254         return formatted;
 255 }