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