friendica/view/theme/frio/js/mod_events.js

380 lines
11 KiB
JavaScript
Raw Normal View History

// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
/**
* @file view/theme/frio/js/mod_events.js
2020-01-19 01:05:23 -05:00
* Initialization of the fullCalendar and format the output.
*/
2021-01-22 08:38:44 -05:00
$(document).ready(function () {
let $body = $("body");
// start the fullCalendar
2021-01-22 08:38:44 -05:00
$("#events-calendar").fullCalendar({
firstDay: aStr.firstDay,
2021-01-22 08:38:44 -05:00
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,
2021-01-22 08:38:44 -05:00
day: aStr.day,
},
2021-01-22 08:38:44 -05:00
events: baseurl + moduleUrl + "/json/",
header: {
2021-01-22 08:38:44 -05:00
left: "",
// center: 'title',
right: "",
},
timeFormat: "H:mm",
eventClick: function (calEvent, jsEvent, view) {
showEvent(calEvent.id);
},
2021-01-22 08:38:44 -05:00
loading: function (isLoading, view) {
if (!isLoading) {
$("td.fc-day").dblclick(function () {
addToModal("/events/new?start=" + $(this).data("date"));
});
}
},
2021-01-22 08:38:44 -05:00
defaultView: "month",
aspectRatio: 1,
2021-01-22 08:38:44 -05:00
eventRender: function (event, element, view) {
switch (view.name) {
case "month":
2021-01-22 08:38:44 -05:00
element
.find(".fc-title")
.html(
"<span class='item-desc'>{2}</span>".format(
event.item["author-avatar"],
event.item["author-name"],
event.title,
2021-10-03 13:29:28 -04:00
event.desc,
event.location,
2021-01-22 08:38:44 -05:00
),
);
break;
case "agendaWeek":
2021-01-22 08:38:44 -05:00
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"],
2021-10-03 13:29:28 -04:00
event.desc,
htmlToText(event.location),
2021-01-22 08:38:44 -05:00
),
);
break;
case "agendaDay":
2021-01-22 08:38:44 -05:00
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"],
2021-10-03 13:29:28 -04:00
event.desc,
htmlToText(event.location),
2021-01-22 08:38:44 -05:00
),
);
break;
case "listMonth":
element.find(".fc-list-item-title").html(formatListViewEvent(event));
2021-01-22 08:38:44 -05:00
break;
}
},
eventAfterRender: function (event, element) {
$(element).popover({
content: eventHoverHtmlContent(event),
container: "body",
html: true,
trigger: "hover",
placement: "auto",
2021-01-22 08:38:44 -05:00
template:
'<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
2019-05-26 15:42:49 -04:00
sanitizeFn: function (content) {
2021-01-22 08:38:44 -05:00
return DOMPurify.sanitize(content);
2019-05-26 15:42:49 -04:00
},
});
2021-01-22 08:38:44 -05:00
},
});
// center on date
2021-01-22 08:38:44 -05:00
var args = location.href.replace(baseurl, "").split("/");
if (modparams == 2) {
2021-01-22 08:38:44 -05:00
if (args.length >= 5) {
$("#events-calendar").fullCalendar("gotoDate", args[3], args[4] - 1);
}
} else {
2021-01-22 08:38:44 -05:00
if (args.length >= 4) {
$("#events-calendar").fullCalendar("gotoDate", args[2], args[3] - 1);
}
}
// echo the title
2021-01-22 08:38:44 -05:00
var view = $("#events-calendar").fullCalendar("getView");
$("#fc-title").text(view.title);
// show event popup
2021-01-22 08:38:44 -05:00
var hash = location.hash.split("-");
if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
// event_edit
// 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");
// 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) {
2021-01-22 08:38:44 -05:00
addToModal(baseurl + moduleUrl + "/?id=" + eventid);
}
function changeView(action, viewName) {
2021-01-22 08:38:44 -05:00
$("#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() {
2021-01-22 08:38:44 -05:00
var template =
'\
<div class="event-card-basic-content media">\
<div class="event-card-details">\
<div class="event-card-header">\
<div class="event-card-left-date">\
<span class="event-date-wrapper medium">\
<span class="event-card-short-month">{5}</span>\
<span class="event-card-short-date">{6}</span>\
</span>\
</div>\
<div class="event-card-content media-body">\
<div class="event-card-title">{2}</div>\
<div class="event-property"><span class="event-card-date">{4}</span>{3}\
{1}\
</div>\
</div>\
<div class="clearfix"></div>\
</div>\
</div>';
return template;
}
// The template for presenting the event location in the event hover-card
function eventHoverLocationTemplate() {
2021-01-22 08:38:44 -05:00
var template =
'<span role="presentation" aria-hidden="true"> · </span>\
<span class="event-card-location"> {0}</span></div>';
return template;
}
function eventHoverProfileNameTemplate() {
2021-01-22 08:38:44 -05:00
var template =
'\
<div class="event-card-profile-name profile-entry-name">\
<a href="{0}" class="userinfo">{1}</a>\
</div>';
return template;
}
2021-01-22 08:38:44 -05:00
// transform the event data to html so we can use it in the event hover-card
function eventHoverHtmlContent(event) {
2021-01-22 08:38:44 -05:00
var eventLocation = "";
var eventProfileName = "";
// Get the Browser language
var locale = window.navigator.userLanguage || window.navigator.language;
2021-01-22 08:38:44 -05:00
var data = "";
// Use the browser language for date formatting
moment.locale(locale);
// format dates to different styles
2021-10-03 13:29:28 -04:00
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
2021-01-22 08:38:44 -05:00
// a finish date.
2021-10-03 13:29:28 -04:00
if (event.nofinish === 0 && event.end !== null) {
var dayNumberEnd = event.end.format('DD');
var endTime = event.end.format('HH:mm');
2021-01-22 08:38:44 -05:00
formattedDate = startDate + " - " + endTime;
// use a different Format (15. Feb - 18. Feb) if the events end date
// is not the start date
2021-10-03 13:29:28 -04:00
if (dayNumberStart !== dayNumberEnd) {
formattedDate = event.start.format('Do MMM') + ' - ' + event.end.format('Do MMM');
}
}
// Get the html template
data = eventHoverBodyTemplate();
// Get only template data if there exists location data
2021-10-03 13:29:28 -04:00
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
2021-01-22 08:38:44 -05:00
eventLocation = eventLocationTemplate.format(eventLocationText);
}
// Get only template data if there exists a profile name
2021-01-22 08:38:44 -05:00
if (event.item["author-name"]) {
// Get the template
var eventProfileNameTemplate = eventHoverProfileNameTemplate();
// Insert the data into the template
2021-01-22 08:38:44 -05:00
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(
2021-01-22 08:38:44 -05:00
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
2021-01-22 08:38:44 -05:00
var template =
'<td class="fc-list-item-title fc-widget-content">\
<hr class="seperator"></hr>\
<div class="event-card">\
<div class="popover-content hovercard-content">{0}</div>\
</div>\
</td>';
// Use the formation of the event hover and insert it in the base list view template
var formatted = template.format(eventHoverHtmlContent(event));
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("events", $("#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