1 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
3 * @file view/theme/frio/js/mod_events.js
4 * Initialization of the fullCalendar and format the output.
7 $(document).ready(function () {
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,
25 events: baseurl + moduleUrl + "/json/",
32 eventClick: function (calEvent, jsEvent, view) {
33 showEvent(calEvent.id);
35 loading: function (isLoading, view) {
37 $("td.fc-day").dblclick(function () {
38 addToModal("/events/new?start=" + $(this).data("date"));
44 eventRender: function (event, element, view) {
45 //console.log(view.name);
51 "<span class='item-desc'>{2}</span>".format(
52 event.item["author-avatar"],
53 event.item["author-name"],
61 if (event.item["author-name"] == null) return;
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"],
69 htmlToText(event.item.location),
74 if (event.item["author-name"] == null) return;
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"],
82 htmlToText(event.item.location),
87 element.find(".fc-list-item-title").html(formatListViewEvent(event));
91 eventAfterRender: function (event, element) {
93 content: eventHoverHtmlContent(event),
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);
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);
114 if (args.length >= 4) {
115 $("#events-calendar").fullCalendar("gotoDate", args[2], args[3] - 1);
120 var view = $("#events-calendar").fullCalendar("getView");
121 $("#fc-title").text(view.title);
124 var hash = location.hash.split("-");
125 if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
129 // Go to the permissions tab if the checkbox is checked.
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");
138 $("#acl-wrapper").hide();
139 $("a#event-perms-lnk").parent("li").hide();
144 // Disable the finish time input if the user disable it.
146 .on("change", "#id_nofinish", function () {
147 enableDisableFinishDate();
151 // JS for the permission section.
152 $("#contact_allow, #contact_deny, #group_allow, #group_deny")
153 .change(function () {
156 "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
158 selstr = $(this).html();
159 $("#jot-public").hide();
161 if (selstr == null) {
162 $("#jot-public").show();
167 // Change the event nav menu.tabs on click.
168 $body.on("click", "#event-nav > li > a", function (e) {
170 toggleEventNav(this);
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();
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();
188 // loads the event into a modal
189 function showEvent(eventid) {
190 addToModal(baseurl + moduleUrl + "/?id=" + eventid);
193 function changeView(action, viewName) {
194 $("#events-calendar").fullCalendar(action, viewName);
195 var view = $("#events-calendar").fullCalendar("getView");
196 $("#fc-title").text(view.title);
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() {
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>\
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}\
220 <div class="clearfix"></div>\
227 // The template for presenting the event location in the event hover-card
228 function eventHoverLocationTemplate() {
230 '<span role="presentation" aria-hidden="true"> ยท </span>\
231 <span class="event-card-location"> {0}</span></div>';
235 function eventHoverProfileNameTemplate() {
238 <div class="event-card-profile-name profile-entry-name">\
239 <a href="{0}" class="userinfo">{1}</a>\
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;
251 // Use the browser language for date formatting
252 moment.locale(locale);
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");
264 var formattedDate = startDate;
266 // We only need the to format the end date if the event does have
268 if (event.item.nofinish == 0) {
269 formattedDate = startDate + " - " + endTime;
271 // use a different Format (15. Feb - 18. Feb) if the events end date
272 // is not the start date
273 if (dayNumberStart != dayNumberEnd) {
275 moment(event.item.start).format("Do MMM") + " - " + moment(event.item.finish).format("Do MMM");
279 // Get the html template
280 data = eventHoverBodyTemplate();
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
289 eventLocation = eventLocationTemplate.format(eventLocationText);
292 // Get only template data if there exists a profile name
293 if (event.item["author-name"]) {
295 var eventProfileNameTemplate = eventHoverProfileNameTemplate();
296 // Insert the data into the template
297 eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]);
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
307 monthShort.replace(".", ""), // Get rid of possible dots in the string
314 // transform the the list view event element into formatted html
315 function formatListViewEvent(event) {
316 // The basic template for list view
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>\
324 // Use the formation of the event hover and insert it in the base list view template
325 var formatted = template.format(eventHoverHtmlContent(event));
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);
339 $("#event-edit-preview").val(0);
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();
349 function eventPreviewActive() {
350 $("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
351 $("#event-preview").show();
355 function eventEditActive() {
356 $("#event-acl-wrapper, #event-preview, #event-desc-wrapper").hide();
357 $("#event-edit-wrapper").show();
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"));
364 function eventDescActive() {
365 $("#event-edit-wrapper, #event-preview, #event-acl-wrapper").hide();
366 $("#event-desc-wrapper").show();
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");
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);