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

// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
/**
 * @file view/theme/frio/js/mod_events.js
 * Initialization of the fullCalendar and format the output.
 */

$(document).ready(function () {
	// start the fullCalendar
	$("#events-calendar").fullCalendar({
		firstDay: aStr.firstDay,
		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,
		},
		events: baseurl + moduleUrl + "/json/",
		header: {
			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"));
				});
			}
		},
		defaultView: "month",
		aspectRatio: 1,
		eventRender: function (event, element, view) {
			//console.log(view.name);
			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,
							),
						);
					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;
				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),
							),
						);
					break;
				case "listMonth":
					element.find(".fc-list-item-title").html(formatListViewEvent(event));
					break;
			}
		},
		eventAfterRender: function (event, element) {
			$(element).popover({
				content: eventHoverHtmlContent(event),
				container: "body",
				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>',
				sanitizeFn: function (content) {
					return DOMPurify.sanitize(content);
				},
			});
		},
	});

	// 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);
		}
	}

	// 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]);
});

// loads the event into a modal
function showEvent(eventid) {
	addToModal(baseurl + moduleUrl + "/?id=" + eventid);
}

function changeView(action, viewName) {
	$("#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 =
		'\
		<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() {
	var template =
		'<span role="presentation" aria-hidden="true"> · </span>\
			<span class="event-card-location"> {0}</span></div>';
	return template;
}

function eventHoverProfileNameTemplate() {
	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
function eventHoverHtmlContent(event) {
	var eventLocation = "";
	var eventProfileName = "";
	// Get the Browser language
	var locale = window.navigator.userLanguage || window.navigator.language;
	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 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;

		// 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");
		}
	}

	// Get the html template
	data = eventHoverBodyTemplate();

	// Get only template data if there exists location data
	if (event.item.location) {
		var eventLocationText = htmlToText(event.item.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);
	}

	// Get only template data if there exists a profile 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"]);
	}

	// 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,
	);

	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>\
				<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;
}
// @license-end