Merge pull request #2863 from rabuzarus/0510-update_fullcalendar
frio: some improvements for displaying events
This commit is contained in:
Michael Vogel
GitHub
commit
1218e2f885
|
|
@ -38,38 +38,39 @@ $(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(
|
||||
"<span class='item-desc'>{2}</span>".format(
|
||||
event.item['author-avatar'],
|
||||
event.item['author-name'],
|
||||
event.title,
|
||||
event.item.desc,
|
||||
event.item.location
|
||||
));
|
||||
break;
|
||||
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":
|
||||
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)
|
||||
));
|
||||
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":
|
||||
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)
|
||||
));
|
||||
break;
|
||||
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));
|
||||
element.find(".fc-list-item-title").html(formatListViewEvent(event));
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
@ -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-date">{7}</span>\
|
||||
<span class="event-hover-short-month">{5}</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-property"><span class="event-hover-date">{5}</span>{4}\
|
||||
<div class="event-hover-profile-name profile-entry-name">\
|
||||
<span class="left-align1"><a href="{1}" class="userinfo">{2}</a></span>\
|
||||
</div>\
|
||||
<div class="event-hover-title">{2}</div>\
|
||||
<div class="event-property"><span class="event-hover-date">{4}</span>{3}\
|
||||
{1}\
|
||||
</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
|
||||
if (event.item.location != '') {
|
||||
var eventLocationText = formatEventLocationText(event.item.location);
|
||||
// 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
|
||||
|
|
@ -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'],
|
||||
event.item['author-name'],
|
||||
eventProfileName,
|
||||
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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user