X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fjs%2Fmod_events.js;h=1edba87afb95992b9abe7d361fc15a08e2cbe026;hb=65d6e2f80f861b2aa3bced53e132ff0d2ddb25a4;hp=5bd7c944986b3fe8db4481b91775ee4416a81ecd;hpb=b067a1114679ebc3dc6132759c511c3ac8b73e49;p=friendica.git diff --git a/view/theme/frio/js/mod_events.js b/view/theme/frio/js/mod_events.js index 5bd7c94498..1edba87afb 100644 --- a/view/theme/frio/js/mod_events.js +++ b/view/theme/frio/js/mod_events.js @@ -1,77 +1,90 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later /** * @file view/theme/frio/js/mod_events.js - * @brief Initialization of the fullCalendar and format the output. + * Initialization of the fullCalendar and format the output. */ -$(document).ready(function() { +$(document).ready(function () { + let $body = $("body"); + // start the fullCalendar - $('#events-calendar').fullCalendar({ + $("#events-calendar").fullCalendar({ firstDay: aStr.firstDay, - monthNames: aStr['monthNames'], - monthNamesShort: aStr['monthNamesShort'], - dayNames: aStr['dayNames'], - dayNamesShort: aStr['dayNamesShort'], + 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 + day: aStr.day, }, - events: baseurl + moduleUrl + '/json/', + events: calendar_api, header: { - left: '', - // center: 'title', - right: '' - }, - timeFormat: 'H:mm', - eventClick: function(calEvent, jsEvent, view) { + 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')); }); + loading: function (isLoading, view) { + if (!isLoading) { + $("td.fc-day").dblclick(function () { + addToModal("calendar/event/new?start=" + $(this).data("date")); + }); } }, - defaultView: 'month', + defaultView: aStr.defaultView, aspectRatio: 1, - eventRender: function(event, element, view) { - //console.log(view.name); - switch(view.name){ + eventRender: function (event, element, view) { + switch (view.name) { case "month": - element.find(".fc-title").html( - "{2}".format( - event.item['author-avatar'], - event.item['author-name'], - event.title, - event.item.desc, - event.item.location - )); + element + .find(".fc-title") + .html( + "{2}".format( + event.item["author-avatar"], + event.item["author-name"], + event.title, + event.desc, + event.location, + ), + ); break; case "agendaWeek": - if (event.item['author-name'] == null) return; - element.find(".fc-title").html( - "{1}

{2}

{3}

".format( - event.item['author-avatar'], - event.item['author-name'], - event.item.desc, - htmlToText(event.item.location) - )); - break; + if (event.item["author-name"] == null) return; + element + .find(".fc-title") + .html( + "{1}

{2}

{3}

".format( + event.item["author-avatar"], + event.item["author-name"], + event.desc, + htmlToText(event.location), + ), + ); + break; case "agendaDay": - if (event.item['author-name'] == null) return; - element.find(".fc-title").html( - "{1}

{2}

{3}

".format( - event.item['author-avatar'], - event.item['author-name'], - event.item.desc, - htmlToText(event.item.location) - )); + if (event.item["author-name"] == null) return; + element + .find(".fc-title") + .html( + "{1}

{2}

{3}

".format( + event.item["author-avatar"], + event.item["author-name"], + event.desc, + htmlToText(event.location), + ), + ); break; case "listMonth": element.find(".fc-list-item-title").html(formatListViewEvent(event)); - break; + break; } }, eventAfterRender: function (event, element) { @@ -81,63 +94,113 @@ $(document).ready(function() { html: true, trigger: "hover", placement: "auto", - template: '
', + template: + '
', + sanitizeFn: function (content) { + return DOMPurify.sanitize(content); + }, }); + }, + }); - } + // 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]); - // 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); - } - } + // event_edit - // echo the title - var view = $('#events-calendar').fullCalendar('getView'); - $('#fc-title').text(view.title); + // 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"); - // show event popup - var hash = location.hash.split("-") - if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]); + // 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) { - addToModal(baseurl + moduleUrl + '/?id=' + eventid); + addToModal(event_api + '/' + eventid); } function changeView(action, viewName) { - $('#events-calendar').fullCalendar(action, viewName); - var view = $('#events-calendar').fullCalendar('getView'); - $('#fc-title').text(view.title); + $("#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 = '\ + var template = + '\
\ -
\ -
\ -
\ +
\ +
\ +
\ \ - {5}\ - {6}\ + {5}\ + {6}\ \
\
\ -
{2}
\ -
{4}{3}\ +
{2}
\ +
{4}{3}\ {1}\
\
\ @@ -150,51 +213,50 @@ function eventHoverBodyTemplate() { // The template for presenting the event location in the event hover-card function eventHoverLocationTemplate() { - var template = ' {0}
'; + var template = + '\ + {0}
'; return template; } function eventHoverProfileNameTemplate() { - var template = '\ -
\ - {1}\ + var template = + '\ +
\ + {1}\
'; 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) { - var eventLocation = ''; - var eventProfileName = ''; + var eventLocation = ""; + var eventProfileName = ""; // Get the Browser language var locale = window.navigator.userLanguage || window.navigator.language; - var data = ''; + 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 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 - // a finish date. - if (event.item.nofinish == 0) { - formattedDate = startDate + ' - ' + endTime; + // a finish date. + if (event.nofinish === 0 && event.end !== null) { + var dayNumberEnd = event.end.format('DD'); + var endTime = event.end.format('HH:mm'); + + 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'); + if (dayNumberStart !== dayNumberEnd) { + formattedDate = event.start.format('Do MMM') + ' - ' + event.end.format('Do MMM'); } } @@ -202,38 +264,33 @@ function eventHoverHtmlContent(event) { data = eventHoverBodyTemplate(); // Get only template data if there exists location data - if (event.item.location) { - var eventLocationText = htmlToText(event.item.location); + 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 - eventLocation = eventLocationTemplate.format( - eventLocationText - ); + eventLocation = eventLocationTemplate.format(eventLocationText); } // Get only template data if there exists a profile name - if (event.item['author-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'] - ); + 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 - ); + 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; } @@ -241,8 +298,9 @@ function eventHoverHtmlContent(event) { // transform the the list view event element into formatted html function formatListViewEvent(event) { // The basic template for list view - var template = '\ -
\ + var template = + '\ +
\
\
{0}
\
\ @@ -252,3 +310,58 @@ function formatListViewEvent(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("calendar/api/create", $("#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