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         let $body = $("body");
   9
  10         // start the fullCalendar
  11         $("#events-calendar").fullCalendar({
  12                 firstDay: aStr.firstDay,
  13                 monthNames: aStr["monthNames"],
  14                 monthNamesShort: aStr["monthNamesShort"],
  15                 dayNames: aStr["dayNames"],
  16                 dayNamesShort: aStr["dayNamesShort"],
  17                 allDayText: aStr.allday,
  18                 noEventsMessage: aStr.noevent,
  19                 buttonText: {
  20                         today: aStr.today,
  21                         month: aStr.month,
  22                         week: aStr.week,
  23                         day: aStr.day,
  24                 },
  25                 events: calendar_api,
  26                 header: {
  27                         left: "",
  28                         //      center: 'title',
  29                         right: "",
  30                 },
  31                 timeFormat: "H:mm",
  32                 eventClick: function (calEvent, jsEvent, view) {
  33                         showEvent(calEvent.id);
  34                 },
  35                 loading: function (isLoading, view) {
  36                         if (!isLoading) {
  37                                 $("td.fc-day").dblclick(function () {
  38                                         addToModal("calendar/event/new?start=" + $(this).data("date"));
  39                                 });
  40                         }
  41                 },
  42                 defaultView: aStr.defaultView,
  43                 aspectRatio: 1,
  44                 eventRender: function (event, element, view) {
  45                         switch (view.name) {
  46                                 case "month":
  47                                         element
  48                                                 .find(".fc-title")
  49                                                 .html(
  50                                                         "<span class='item-desc'>{2}</span>".format(
  51                                                                 event.item["author-avatar"],
  52                                                                 event.item["author-name"],
  53                                                                 event.title,
  54                                                                 event.desc,
  55                                                                 event.location,
  56                                                         ),
  57                                                 );
  58                                         break;
  59                                 case "agendaWeek":
  60                                         if (event.item["author-name"] == null) return;
  61                                         element
  62                                                 .find(".fc-title")
  63                                                 .html(
  64                                                         "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
  65                                                                 event.item["author-avatar"],
  66                                                                 event.item["author-name"],
  67                                                                 event.desc,
  68                                                                 htmlToText(event.location),
  69                                                         ),
  70                                                 );
  71                                         break;
  72                                 case "agendaDay":
  73                                         if (event.item["author-name"] == null) return;
  74                                         element
  75                                                 .find(".fc-title")
  76                                                 .html(
  77                                                         "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
  78                                                                 event.item["author-avatar"],
  79                                                                 event.item["author-name"],
  80                                                                 event.desc,
  81                                                                 htmlToText(event.location),
  82                                                         ),
  83                                                 );
  84                                         break;
  85                                 case "listMonth":
  86                                         element.find(".fc-list-item-title").html(formatListViewEvent(event));
  87                                         break;
  88                         }
  89                 },
  90                 eventAfterRender: function (event, element) {
  91                         $(element).popover({
  92                                 content: eventHoverHtmlContent(event),
  93                                 container: "body",
  94                                 html: true,
  95                                 trigger: "hover",
  96                                 placement: "auto",
  97                                 template:
  98                                         '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
  99                                 sanitizeFn: function (content) {
 100                                         return DOMPurify.sanitize(content);
 101                                 },
 102                         });
 103                 },
 104         });
 105
 106         // echo the title
 107         var view = $("#events-calendar").fullCalendar("getView");
 108         $("#fc-title").text(view.title);
 109
 110         // show event popup
 111         var hash = location.hash.split("-");
 112         if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
 113
 114         // event_edit
 115
 116         // Go to the permissions tab if the checkbox is checked.
 117         $body
 118                 .on("click", "#id_share", function () {
 119                         if ($("#id_share").is(":checked") && !$("#id_share").attr("disabled")) {
 120                                 $("#acl-wrapper").show();
 121                                 $("a#event-perms-lnk").parent("li").show();
 122                                 toggleEventNav("a#event-perms-lnk");
 123                                 eventAclActive();
 124                         } else {
 125                                 $("#acl-wrapper").hide();
 126                                 $("a#event-perms-lnk").parent("li").hide();
 127                         }
 128                 })
 129                 .trigger("change");
 130
 131         // Disable the finish time input if the user disable it.
 132         $body
 133                 .on("change", "#id_nofinish", function () {
 134                         enableDisableFinishDate();
 135                 })
 136                 .trigger("change");
 137
 138         // JS for the permission section.
 139         $("#contact_allow, #contact_deny, #group_allow, #group_deny")
 140                 .change(function () {
 141                         var selstr;
 142                         $(
 143                                 "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
 144                         ).each(function () {
 145                                 selstr = $(this).html();
 146                                 $("#jot-public").hide();
 147                         });
 148                         if (selstr == null) {
 149                                 $("#jot-public").show();
 150                         }
 151                 })
 152                 .trigger("change");
 153
 154         // Change the event nav menu.tabs on click.
 155         $body.on("click", "#event-nav > li > a", function (e) {
 156                 e.preventDefault();
 157                 toggleEventNav(this);
 158         });
 159
 160         // This is experimental. We maybe can make use of it to inject
 161         // some js code while the event modal opens.
 162         //$body.on('show.bs.modal', function () {
 163         //      enableDisableFinishDate();
 164         //});
 165
 166         // Clear some elements (e.g. the event-preview container) when
 167         // selecting a event nav link so it don't appear more than once.
 168         $body.on("click", "#event-nav a", function (e) {
 169                 $("#event-preview").empty();
 170                 e.preventDefault();
 171         });
 172
 173 });
 174
 175 // loads the event into a modal
 176 function showEvent(eventid) {
 177         addToModal(event_api + '/' + eventid);
 178 }
 179
 180 function changeView(action, viewName) {
 181         $("#events-calendar").fullCalendar(action, viewName);
 182         var view = $("#events-calendar").fullCalendar("getView");
 183         $("#fc-title").text(view.title);
 184 }
 185
 186 // The template for the bootstrap popover for displaying the event title and
 187 // author (it's the nearly the same template we use in frio for the contact
 188 // hover cards. So be careful when changing the css)
 189 function eventHoverBodyTemplate() {
 190         var template =
 191                 '\
 192                 <div class="event-card-basic-content media">\
 193                         <div class="event-card-details">\
 194                                 <div class="event-card-header">\
 195                                         <div class="event-card-left-date">\
 196                                                 <span class="event-date-wrapper medium">\
 197                                                         <span class="event-card-short-month">{5}</span>\
 198                                                         <span class="event-card-short-date">{6}</span>\
 199                                                 </span>\
 200                                         </div>\
 201                                         <div class="event-card-content media-body">\
 202                                                 <div class="event-card-title">{2}</div>\
 203                                                 <div class="event-property"><span class="event-card-date">{4}</span>{3}\
 204                                                 {1}\
 205                                         </div>\
 206                                 </div>\
 207                                 <div class="clearfix"></div>\
 208                         </div>\
 209                 </div>';
 210
 211         return template;
 212 }
 213
 214 // The template for presenting the event location in the event hover-card
 215 function eventHoverLocationTemplate() {
 216         var template =
 217                 '<span role="presentation" aria-hidden="true"> · </span>\
 218                         <span class="event-card-location"> {0}</span></div>';
 219         return template;
 220 }
 221
 222 function eventHoverProfileNameTemplate() {
 223         var template =
 224                 '\
 225                         <div class="event-card-profile-name profile-entry-name">\
 226                                 <a href="{0}" class="userinfo">{1}</a>\
 227                         </div>';
 228         return template;
 229 }
 230 // transform the event data to html so we can use it in the event hover-card
 231 function eventHoverHtmlContent(event) {
 232         var eventLocation = "";
 233         var eventProfileName = "";
 234         // Get the Browser language
 235         var locale = window.navigator.userLanguage || window.navigator.language;
 236         var data = "";
 237
 238         // Use the browser language for date formatting
 239         moment.locale(locale);
 240
 241         // format dates to different styles
 242         var startDate = event.start.format('dd HH:mm');
 243         var monthShort = event.start.format('MMM');
 244         var dayNumberStart = event.start.format('DD');
 245
 246         var formattedDate = startDate;
 247
 248         // We only need the to format the end date if the event does have
 249         // a finish date.
 250         if (event.nofinish === 0 && event.end !== null) {
 251                 var dayNumberEnd = event.end.format('DD');
 252                 var endTime = event.end.format('HH:mm');
 253
 254                 formattedDate = startDate + " - " + endTime;
 255
 256                 // use a different Format (15. Feb - 18. Feb) if the events end date
 257                 // is not the start date
 258                 if (dayNumberStart !== dayNumberEnd) {
 259                         formattedDate = event.start.format('Do MMM') + ' - ' + event.end.format('Do MMM');
 260                 }
 261         }
 262
 263         // Get the html template
 264         data = eventHoverBodyTemplate();
 265
 266         // Get only template data if there exists location data
 267         if (event.location) {
 268                 var eventLocationText = htmlToText(event.location);
 269                 // Get the html template for formatting the location
 270                 var eventLocationTemplate = eventHoverLocationTemplate();
 271                 // Format the event location data according to the event location
 272                 // template
 273                 eventLocation = eventLocationTemplate.format(eventLocationText);
 274         }
 275
 276         // Get only template data if there exists a profile name
 277         if (event.item["author-name"]) {
 278                 // Get the template
 279                 var eventProfileNameTemplate = eventHoverProfileNameTemplate();
 280                 // Insert the data into the template
 281                 eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]);
 282         }
 283
 284         // Format the event data according to the event hover template
 285         var formatted = data.format(
 286                 event.item["author-avatar"], // this isn't used at the present time
 287                 eventProfileName,
 288                 event.title,
 289                 eventLocation,
 290                 formattedDate,
 291                 monthShort.replace(".", ""), // Get rid of possible dots in the string
 292                 dayNumberStart,
 293         );
 294
 295         return formatted;
 296 }
 297
 298 // transform the list view event element into formatted html
 299 function formatListViewEvent(event) {
 300         // The basic template for list view
 301         var template =
 302                 '<td class="fc-list-item-title fc-widget-content">\
 303                                 <hr class="separator"></hr>\
 304                                 <div class="event-card">\
 305                                         <div class="popover-content hovercard-content">{0}</div>\
 306                                 </div>\
 307                         </td>';
 308         // Use the formation of the event hover and insert it in the base list view template
 309         var formatted = template.format(eventHoverHtmlContent(event));
 310
 311         return formatted;
 312 }
 313
 314 // event_edit
 315
 316 // Load the html of the actual event and incect the output to the
 317 // event-edit section.
 318 function doEventPreview() {
 319         $("#event-edit-preview").val(1);
 320         $.post("calendar/api/create", $("#event-edit-form").serialize(), function (data) {
 321                 $("#event-preview").append(data);
 322         });
 323         $("#event-edit-preview").val(0);
 324 }
 325
 326 // The following functions show/hide the specific event-edit content
 327 // in dependence of the selected nav.
 328 function eventAclActive() {
 329         $("#event-edit-wrapper, #event-preview, #event-desc-wrapper").hide();
 330         $("#event-acl-wrapper").show();
 331 }
 332
 333 function eventPreviewActive() {
 334         $("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
 335         $("#event-preview").show();
 336         doEventPreview();
 337 }
 338
 339 function eventEditActive() {
 340         $("#event-acl-wrapper, #event-preview, #event-desc-wrapper").hide();
 341         $("#event-edit-wrapper").show();
 342
 343         // Make sure jot text does have really the active class (we do this because there are some
 344         // other events which trigger jot text.
 345         toggleEventNav($("#event-edit-lnk"));
 346 }
 347
 348 function eventDescActive() {
 349         $("#event-edit-wrapper, #event-preview, #event-acl-wrapper").hide();
 350         $("#event-desc-wrapper").show();
 351 }
 352
 353 // Give the active "event-nav" list element the class "active".
 354 function toggleEventNav(elm) {
 355         // Select all li of #event-nav and remove the active class.
 356         $(elm).closest("#event-nav").children("li").removeClass("active");
 357         // Add the active class to the parent of the link which was selected.
 358         $(elm).parent("li").addClass("active");
 359 }
 360
 361 // Disable the input for the finish date if it is not available.
 362 function enableDisableFinishDate() {
 363         if ($("#id_nofinish").is(":checked")) $("#id_finish_text").prop("disabled", true);
 364         else $("#id_finish_text").prop("disabled", false);
 365 }
 366
 367 // @license-end