view/theme/frio/js/mod_events.js

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