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