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