+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
/**
* @file view/theme/frio/js/mod_events.js
- * @brief Initialization of the fullCalendar and format the output.
+ * Initialization of the fullCalendar and format the output.
*/
-$(document).ready(function() {
+$(document).ready(function () {
+ let $body = $("body");
+
// start the fullCalendar
- $('#events-calendar').fullCalendar({
+ $("#events-calendar").fullCalendar({
firstDay: aStr.firstDay,
- monthNames: aStr['monthNames'],
- monthNamesShort: aStr['monthNamesShort'],
- dayNames: aStr['dayNames'],
- dayNamesShort: aStr['dayNamesShort'],
+ monthNames: aStr["monthNames"],
+ monthNamesShort: aStr["monthNamesShort"],
+ dayNames: aStr["dayNames"],
+ dayNamesShort: aStr["dayNamesShort"],
allDayText: aStr.allday,
noEventsMessage: aStr.noevent,
buttonText: {
today: aStr.today,
month: aStr.month,
week: aStr.week,
- day: aStr.day
+ day: aStr.day,
},
- events: baseurl + moduleUrl + '/json/',
+ events: calendar_api,
header: {
- left: '',
- // center: 'title',
- right: ''
- },
- timeFormat: 'H:mm',
- eventClick: function(calEvent, jsEvent, view) {
+ left: "",
+ // center: 'title',
+ right: "",
+ },
+ timeFormat: "H:mm",
+ eventClick: function (calEvent, jsEvent, view) {
showEvent(calEvent.id);
},
- loading: function(isLoading, view) {
- if(!isLoading) {
- $('td.fc-day').dblclick(function() { addToModal('/events/new?start='+$(this).data('date')); });
+ loading: function (isLoading, view) {
+ if (!isLoading) {
+ $("td.fc-day").dblclick(function () {
+ addToModal("calendar/event/new?start=" + $(this).data("date"));
+ });
}
},
- defaultView: 'month',
+ defaultView: aStr.defaultView,
aspectRatio: 1,
- eventRender: function(event, element, view) {
- //console.log(view.name);
- switch(view.name){
+ eventRender: function (event, element, view) {
+ switch (view.name) {
case "month":
- element.find(".fc-title").html(
- "<span class='item-desc'>{2}</span>".format(
- event.item['author-avatar'],
- event.item['author-name'],
- event.title,
- event.item.desc,
- event.item.location
- ));
+ element
+ .find(".fc-title")
+ .html(
+ "<span class='item-desc'>{2}</span>".format(
+ event.item["author-avatar"],
+ event.item["author-name"],
+ event.title,
+ event.desc,
+ event.location,
+ ),
+ );
break;
case "agendaWeek":
- if (event.item['author-name'] == null) return;
- element.find(".fc-title").html(
- "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
- event.item['author-avatar'],
- event.item['author-name'],
- event.item.desc,
- htmlToText(event.item.location)
- ));
- break;
+ if (event.item["author-name"] == null) return;
+ element
+ .find(".fc-title")
+ .html(
+ "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
+ event.item["author-avatar"],
+ event.item["author-name"],
+ event.desc,
+ htmlToText(event.location),
+ ),
+ );
+ break;
case "agendaDay":
- if (event.item['author-name'] == null) return;
- element.find(".fc-title").html(
- "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
- event.item['author-avatar'],
- event.item['author-name'],
- event.item.desc,
- htmlToText(event.item.location)
- ));
+ if (event.item["author-name"] == null) return;
+ element
+ .find(".fc-title")
+ .html(
+ "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
+ event.item["author-avatar"],
+ event.item["author-name"],
+ event.desc,
+ htmlToText(event.location),
+ ),
+ );
break;
case "listMonth":
element.find(".fc-list-item-title").html(formatListViewEvent(event));
- break;
+ break;
}
},
eventAfterRender: function (event, element) {
html: true,
trigger: "hover",
placement: "auto",
- template: '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
+ template:
+ '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
sanitizeFn: function (content) {
- return DOMPurify.sanitize(content)
+ return DOMPurify.sanitize(content);
},
});
+ },
+ });
- }
+ // echo the title
+ var view = $("#events-calendar").fullCalendar("getView");
+ $("#fc-title").text(view.title);
- })
+ // show event popup
+ var hash = location.hash.split("-");
+ if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
- // center on date
- var args=location.href.replace(baseurl,"").split("/");
- if (modparams == 2) {
- if (args.length>=5) {
- $("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1);
- }
- } else {
- if (args.length>=4) {
- $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
- }
- }
+ // event_edit
- // echo the title
- var view = $('#events-calendar').fullCalendar('getView');
- $('#fc-title').text(view.title);
+ // Go to the permissions tab if the checkbox is checked.
+ $body
+ .on("click", "#id_share", function () {
+ if ($("#id_share").is(":checked") && !$("#id_share").attr("disabled")) {
+ $("#acl-wrapper").show();
+ $("a#event-perms-lnk").parent("li").show();
+ toggleEventNav("a#event-perms-lnk");
+ eventAclActive();
+ } else {
+ $("#acl-wrapper").hide();
+ $("a#event-perms-lnk").parent("li").hide();
+ }
+ })
+ .trigger("change");
- // show event popup
- var hash = location.hash.split("-")
- if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
+ // Disable the finish time input if the user disable it.
+ $body
+ .on("change", "#id_nofinish", function () {
+ enableDisableFinishDate();
+ })
+ .trigger("change");
+
+ // JS for the permission section.
+ $("#contact_allow, #contact_deny, #group_allow, #group_deny")
+ .change(function () {
+ var selstr;
+ $(
+ "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
+ ).each(function () {
+ selstr = $(this).html();
+ $("#jot-public").hide();
+ });
+ if (selstr == null) {
+ $("#jot-public").show();
+ }
+ })
+ .trigger("change");
+
+ // Change the event nav menu.tabs on click.
+ $body.on("click", "#event-nav > li > a", function (e) {
+ e.preventDefault();
+ toggleEventNav(this);
+ });
+
+ // This is experimental. We maybe can make use of it to inject
+ // some js code while the event modal opens.
+ //$body.on('show.bs.modal', function () {
+ // enableDisableFinishDate();
+ //});
+
+ // Clear some elements (e.g. the event-preview container) when
+ // selecting a event nav link so it don't appear more than once.
+ $body.on("click", "#event-nav a", function (e) {
+ $("#event-preview").empty();
+ e.preventDefault();
+ });
});
// loads the event into a modal
function showEvent(eventid) {
- addToModal(baseurl + moduleUrl + '/?id=' + eventid);
+ addToModal(event_api + '/' + eventid);
}
function changeView(action, viewName) {
- $('#events-calendar').fullCalendar(action, viewName);
- var view = $('#events-calendar').fullCalendar('getView');
- $('#fc-title').text(view.title);
+ $("#events-calendar").fullCalendar(action, viewName);
+ var view = $("#events-calendar").fullCalendar("getView");
+ $("#fc-title").text(view.title);
}
// The template for the bootstrap popover for displaying the event title and
// author (it's the nearly the same template we use in frio for the contact
// hover cards. So be careful when changing the css)
function eventHoverBodyTemplate() {
- var template = '\
+ var template =
+ '\
<div class="event-card-basic-content media">\
<div class="event-card-details">\
<div class="event-card-header">\
// The template for presenting the event location in the event hover-card
function eventHoverLocationTemplate() {
- var template = '<span role="presentation" aria-hidden="true"> · </span>\
+ var template =
+ '<span role="presentation" aria-hidden="true"> · </span>\
<span class="event-card-location"> {0}</span></div>';
return template;
}
function eventHoverProfileNameTemplate() {
- var template = '\
+ var template =
+ '\
<div class="event-card-profile-name profile-entry-name">\
<a href="{0}" class="userinfo">{1}</a>\
</div>';
return template;
}
-// transform the event data to html so we can use it in the event hover-card
+// transform the event data to html so we can use it in the event hover-card
function eventHoverHtmlContent(event) {
- var eventLocation = '';
- var eventProfileName = '';
+ var eventLocation = "";
+ var eventProfileName = "";
// Get the Browser language
var locale = window.navigator.userLanguage || window.navigator.language;
- var data = '';
+ var data = "";
// Use the browser language for date formatting
moment.locale(locale);
// format dates to different styles
- var startDate = moment(event.item.start).format('dd HH:mm');
- var endDate = moment(event.item.finsih).format('dd HH:mm');
- var monthShort = moment(event.item.start).format('MMM');
- var dayNumberStart = moment(event.item.start).format('DD');
- var dayNumberEnd = moment(event.item.finish).format('DD');
- var startTime = moment(event.item.start).format('HH:mm');
- var endTime = moment(event.item.finish).format('HH:mm');
- var monthNumber;
+ var startDate = event.start.format('dd HH:mm');
+ var monthShort = event.start.format('MMM');
+ var dayNumberStart = event.start.format('DD');
var formattedDate = startDate;
// We only need the to format the end date if the event does have
- // a finish date.
- if (event.item.nofinish == 0) {
- formattedDate = startDate + ' - ' + endTime;
+ // a finish date.
+ if (event.nofinish === 0 && event.end !== null) {
+ var dayNumberEnd = event.end.format('DD');
+ var endTime = event.end.format('HH:mm');
+
+ formattedDate = startDate + " - " + endTime;
// use a different Format (15. Feb - 18. Feb) if the events end date
// is not the start date
- if ( dayNumberStart != dayNumberEnd) {
- formattedDate = moment(event.item.start).format('Do MMM') +
- ' - ' +
- moment(event.item.finish).format('Do MMM');
+ if (dayNumberStart !== dayNumberEnd) {
+ formattedDate = event.start.format('Do MMM') + ' - ' + event.end.format('Do MMM');
}
}
data = eventHoverBodyTemplate();
// Get only template data if there exists location data
- if (event.item.location) {
- var eventLocationText = htmlToText(event.item.location);
+ if (event.location) {
+ var eventLocationText = htmlToText(event.location);
// Get the the html template for formatting the location
var eventLocationTemplate = eventHoverLocationTemplate();
// Format the event location data according to the the event location
// template
- eventLocation = eventLocationTemplate.format(
- eventLocationText
- );
+ eventLocation = eventLocationTemplate.format(eventLocationText);
}
// Get only template data if there exists a profile name
- if (event.item['author-name']) {
+ if (event.item["author-name"]) {
// Get the template
var eventProfileNameTemplate = eventHoverProfileNameTemplate();
// Insert the data into the template
- eventProfileName = eventProfileNameTemplate.format(
- event.item['author-link'],
- event.item['author-name']
- );
+ eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]);
}
// Format the event data according to the event hover template
var formatted = data.format(
- event.item['author-avatar'], // this isn't used at the present time
- eventProfileName,
- event.title,
- eventLocation,
- formattedDate,
- monthShort.replace('.', ''), // Get rid of possible dots in the string
- dayNumberStart
- );
+ event.item["author-avatar"], // this isn't used at the present time
+ eventProfileName,
+ event.title,
+ eventLocation,
+ formattedDate,
+ monthShort.replace(".", ""), // Get rid of possible dots in the string
+ dayNumberStart,
+ );
return formatted;
}
// transform the the list view event element into formatted html
function formatListViewEvent(event) {
// The basic template for list view
- var template = '<td class="fc-list-item-title fc-widget-content">\
- <hr class="seperator"></hr>\
+ var template =
+ '<td class="fc-list-item-title fc-widget-content">\
+ <hr class="separator"></hr>\
<div class="event-card">\
<div class="popover-content hovercard-content">{0}</div>\
</div>\
return formatted;
}
+
+// event_edit
+
+// Load the html of the actual event and incect the output to the
+// event-edit section.
+function doEventPreview() {
+ $("#event-edit-preview").val(1);
+ $.post("calendar/api/create", $("#event-edit-form").serialize(), function (data) {
+ $("#event-preview").append(data);
+ });
+ $("#event-edit-preview").val(0);
+}
+
+// The following functions show/hide the specific event-edit content
+// in dependence of the selected nav.
+function eventAclActive() {
+ $("#event-edit-wrapper, #event-preview, #event-desc-wrapper").hide();
+ $("#event-acl-wrapper").show();
+}
+
+function eventPreviewActive() {
+ $("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
+ $("#event-preview").show();
+ doEventPreview();
+}
+
+function eventEditActive() {
+ $("#event-acl-wrapper, #event-preview, #event-desc-wrapper").hide();
+ $("#event-edit-wrapper").show();
+
+ // Make sure jot text does have really the active class (we do this because there are some
+ // other events which trigger jot text.
+ toggleEventNav($("#event-edit-lnk"));
+}
+
+function eventDescActive() {
+ $("#event-edit-wrapper, #event-preview, #event-acl-wrapper").hide();
+ $("#event-desc-wrapper").show();
+}
+
+// Give the active "event-nav" list element the class "active".
+function toggleEventNav(elm) {
+ // Select all li of #event-nav and remove the active class.
+ $(elm).closest("#event-nav").children("li").removeClass("active");
+ // Add the active class to the parent of the link which was selected.
+ $(elm).parent("li").addClass("active");
+}
+
+// Disable the input for the finish date if it is not available.
+function enableDisableFinishDate() {
+ if ($("#id_nofinish").is(":checked")) $("#id_finish_text").prop("disabled", true);
+ else $("#id_finish_text").prop("disabled", false);
+}
+
+// @license-end
projects / friendica.git / blobdiff