Merge pull request #2863 from rabuzarus/0510-update_fullcalendar

frio: some improvements for displaying events

view/theme/frio/js/mod_events.js

@@ -38,7 +38,6 @@ $(document).ready(function() {
 		aspectRatio: 1,
 		eventRender: function(event, element, view) {
 			//console.log(view.name);
-			if (event.item['author-name'] == null) return;
 			switch(view.name){
 				case "month":
 					element.find(".fc-title").html(
@@ -51,21 +50,23 @@ $(document).ready(function() {
 					));
 					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,
-						formatEventLocationText(event.item.location)
+							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,
-						formatEventLocationText(event.item.location)
+							htmlToText(event.item.location)
 					));
 					break;
 				case "listMonth":
@@ -130,16 +131,14 @@ function eventHoverBodyTemplate() {
 				<div class="hover-card-header left-align">\
 					<div class="event-hover-left-date left-align">\
 						<span class="event-date-wrapper medium">\
-							<span class="event-hover-short-month">{6}</span>\
+							<span class="event-hover-short-month">{5}</span>\
-							<span class="event-hover-short-date">{7}</span>\
+							<span class="event-hover-short-date">{6}</span>\
 						</span>\
 					</div>\
 					<div class="event-card-content media-body">\
-						<div class="event-hover-title">{3}</div>\
+						<div class="event-hover-title">{2}</div>\
-						<div class="event-property"><span class="event-hover-date">{5}</span>{4}\
+						<div class="event-property"><span class="event-hover-date">{4}</span>{3}\
-						<div class="event-hover-profile-name profile-entry-name">\
+						{1}\
-							<span class="left-align1"><a href="{1}" class="userinfo">{2}</a></span>\
-						</div>\
 					</div>\
 				</div>\
 				<div class="clearfix"></div>\
@@ -155,9 +154,17 @@ function eventHoverLocationTemplate() {
 	return template;
 }
 
+function eventHoverProfileNameTemplate() {
+	var template = '\
+			<div class="event-hover-profile-name profile-entry-name">\
+				<span class="left-align1"><a href="{0}" class="userinfo">{1}</a></span>\
+			</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 = '';
@@ -175,7 +182,7 @@ function eventHoverHtmlContent(event) {
 	var endTime = moment(event.item.finish).format('HH:mm');
 	var monthNumber;
 
-	var formattedDate = startDate
+	var formattedDate = startDate;
 
 	// We only need the to format the end date if the event does have
 	// a finish date. 
@@ -194,9 +201,9 @@ function eventHoverHtmlContent(event) {
 	// Get the html template
 	data = eventHoverBodyTemplate();
 
-	// Get only template data if there exist location data
+	// Get only template data if there exists location data
-	if (event.item.location != '') {
+	if (event.item.location) {
-		var eventLocationText = formatEventLocationText(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
@@ -206,11 +213,21 @@ function eventHoverHtmlContent(event) {
 		);
 	}
 
+	// 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
-				event.item['author-link'],
+				eventProfileName,
-				event.item['author-name'],
 				event.title,
 				eventLocation,
 				formattedDate,
@@ -235,18 +252,3 @@ function formatListViewEvent(event) {
 
 	return formatted;
 }
-
-// Format event location in pure text
-function formatEventLocationText(location) {
-	// Friendica can store the event location as text or as html
-	// We need to check if the location is html. In this case we need
-	// to transform it into clean text
-	if (location.startsWith("<div")) {
-		var locationHtml = $.parseHTML( location );
-		var eventLocationText = locationHtml[0]['innerText'];
-	} else {
-		var eventLocationText = location.replace("<br>", " ");
-	};
-
-	return eventLocationText;
-}

view/theme/frio/js/theme.js

@@ -570,3 +570,13 @@ function scrollToItem(itemID) {
 		$(elm).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
 	});
 }
+
+// format a html string to pure text
+function htmlToText(htmlString) {
+	// Replace line breaks with spaces
+	var text = htmlString.replace(/<br>/g, ' ');
+	// Strip the text out of the html string
+	text = text.replace(/<[^>]*>/g, '');
+
+	return text;
+}