Merge pull request #2863 from rabuzarus/0510-update_fullcalendar

frio: some improvements for displaying events
This commit is contained in:
Michael Vogel 2016-10-18 00:37:45 +02:00 committed by GitHub
commit 1218e2f885
2 changed files with 66 additions and 54 deletions

View File

@ -38,38 +38,39 @@ $(document).ready(function() {
aspectRatio: 1, aspectRatio: 1,
eventRender: function(event, element, view) { eventRender: function(event, element, view) {
//console.log(view.name); //console.log(view.name);
if (event.item['author-name'] == null) return;
switch(view.name){ switch(view.name){
case "month": case "month":
element.find(".fc-title").html( element.find(".fc-title").html(
"<span class='item-desc'>{2}</span>".format( "<span class='item-desc'>{2}</span>".format(
event.item['author-avatar'], event.item['author-avatar'],
event.item['author-name'], event.item['author-name'],
event.title, event.title,
event.item.desc, event.item.desc,
event.item.location event.item.location
)); ));
break; break;
case "agendaWeek": case "agendaWeek":
element.find(".fc-title").html( if (event.item['author-name'] == null) return;
"<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format( element.find(".fc-title").html(
event.item['author-avatar'], "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item['author-name'], event.item['author-avatar'],
event.item.desc, event.item['author-name'],
formatEventLocationText(event.item.location) event.item.desc,
)); htmlToText(event.item.location)
));
break; break;
case "agendaDay": case "agendaDay":
element.find(".fc-title").html( if (event.item['author-name'] == null) return;
"<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format( element.find(".fc-title").html(
event.item['author-avatar'], "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item['author-name'], event.item['author-avatar'],
event.item.desc, event.item['author-name'],
formatEventLocationText(event.item.location) event.item.desc,
)); htmlToText(event.item.location)
break; ));
break;
case "listMonth": case "listMonth":
element.find(".fc-list-item-title").html(formatListViewEvent(event)); element.find(".fc-list-item-title").html(formatListViewEvent(event));
break; break;
} }
}, },
@ -130,16 +131,14 @@ function eventHoverBodyTemplate() {
<div class="hover-card-header left-align">\ <div class="hover-card-header left-align">\
<div class="event-hover-left-date left-align">\ <div class="event-hover-left-date left-align">\
<span class="event-date-wrapper medium">\ <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>\ </span>\
</div>\ </div>\
<div class="event-card-content media-body">\ <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>\ </div>\
<div class="clearfix"></div>\ <div class="clearfix"></div>\
@ -155,9 +154,17 @@ function eventHoverLocationTemplate() {
return template; 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 // transform the event data to html so we can use it in the event hover-card
function eventHoverHtmlContent(event) { function eventHoverHtmlContent(event) {
var eventLocation = ''; var eventLocation = '';
var eventProfileName = '';
// Get the Browser language // Get the Browser language
var locale = window.navigator.userLanguage || window.navigator.language; var locale = window.navigator.userLanguage || window.navigator.language;
var data = ''; var data = '';
@ -175,7 +182,7 @@ function eventHoverHtmlContent(event) {
var endTime = moment(event.item.finish).format('HH:mm'); var endTime = moment(event.item.finish).format('HH:mm');
var monthNumber; var monthNumber;
var formattedDate = startDate var formattedDate = startDate;
// We only need the to format the end date if the event does have // We only need the to format the end date if the event does have
// a finish date. // a finish date.
@ -194,9 +201,9 @@ function eventHoverHtmlContent(event) {
// Get the html template // Get the html template
data = eventHoverBodyTemplate(); 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 // Get the the html template for formatting the location
var eventLocationTemplate = eventHoverLocationTemplate(); var eventLocationTemplate = eventHoverLocationTemplate();
// Format the event location data according to the the event location // 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 // Format the event data according to the event hover template
var formatted = data.format( var formatted = data.format(
event.item['author-avatar'], // this isn't used at the present time event.item['author-avatar'], // this isn't used at the present time
event.item['author-link'], eventProfileName,
event.item['author-name'],
event.title, event.title,
eventLocation, eventLocation,
formattedDate, formattedDate,
@ -235,18 +252,3 @@ function formatListViewEvent(event) {
return formatted; 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 File

@ -570,3 +570,13 @@ function scrollToItem(itemID) {
$(elm).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600); $(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;
}