From 553428d1b197c73f845855cdfd46efe3614db032 Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Fri, 13 Oct 2017 19:42:27 +0200 Subject: [PATCH] event items are now more themeable in the networkstream. The event description stays the same - but the theme developer can provide an template how the other event data should be organized and look --- include/event.php | 299 ++++++++++++++---- include/text.php | 81 +++-- view/templates/event_stream_item.tpl | 29 ++ view/theme/frio/css/mod_events.css | 40 +-- view/theme/frio/css/style.css | 80 +++++ view/theme/frio/js/mod_events.js | 21 +- view/theme/frio/js/theme.js | 38 ++- .../frio/templates/event_stream_item.tpl | 44 +++ 8 files changed, 478 insertions(+), 154 deletions(-) create mode 100644 view/templates/event_stream_item.tpl create mode 100644 view/theme/frio/templates/event_stream_item.tpl diff --git a/include/event.php b/include/event.php index 7840032c7..e36aa4262 100644 --- a/include/event.php +++ b/include/event.php @@ -17,7 +17,7 @@ function format_event_html($ev, $simple = false) { return ''; } - $bd_format = t('l F d, Y \@ g:i A') ; // Friday January 18, 2011 @ 8 AM + $bd_format = t('l F d, Y \@ g:i A') ; // Friday January 18, 2011 @ 8 AM. $event_start = (($ev['adjust']) ? day_translate(datetime_convert('UTC', date_default_timezone_get(), $ev['start'] , $bd_format )) @@ -71,7 +71,7 @@ function format_event_html($ev, $simple = false) { . bbcode($ev['location']) . '
' . "\r\n"; - // Include a map of the location if the [map] BBCode is used + // Include a map of the location if the [map] BBCode is used. if (strpos($ev['location'], "[map") !== false) { $map = generate_named_map($ev['location']); if ($map !== $ev['location']) { @@ -84,6 +84,12 @@ function format_event_html($ev, $simple = false) { return $o; } +/** + * @brief Convert an array with event data to bbcode. + * + * @param array $ev Array which conains the event data. + * @return string The event as a bbcode formatted string. + */ function format_event_bbcode($ev) { $o = ''; @@ -115,6 +121,13 @@ function format_event_bbcode($ev) { return $o; } +/** + * @brief Extract bbcode formatted event data from a string + * and convert it to html. + * + * @params: string $s The string which should be parsed for event data. + * @return string The html output. + */ function bbtovcal($s) { $o = ''; $ev = bbtoevent($s); @@ -126,6 +139,12 @@ function bbtovcal($s) { return $o; } +/** + * @brief Extract bbcode formatted event data from a string. + * + * @params: string $s The string which should be parsed for event data. + * @return array The array with the event information. + */ function bbtoevent($s) { $ev = array(); @@ -165,7 +184,6 @@ function bbtoevent($s) { return $ev; } - function sort_by_date($a) { usort($a,'ev_compare'); @@ -184,6 +202,15 @@ function ev_compare($a,$b) { return strcmp($date_a, $date_b); } +/** + * @brief Delete an event from the event table. + * + * Note: This function does only delete the event from the event table not its + * related entry in the item table. + * + * @param int $event_id Event ID. + * @return void + */ function event_delete($event_id) { if ($event_id == 0) { return; @@ -193,6 +220,14 @@ function event_delete($event_id) { logger("Deleted event ".$event_id, LOGGER_DEBUG); } +/** + * @brief Store the event. + * + * Store the event in the event table and create an event item in the item table. + * + * @param array $arr Array with event data. + * @return int The event id. + */ function event_store($arr) { require_once 'include/datetime.php'; @@ -225,7 +260,7 @@ function event_store($arr) { } - // Existing event being modified + // Existing event being modified. if ($arr['id']) { @@ -298,7 +333,6 @@ function event_store($arr) { return $item_id; } else { - // New event. Store it. $r = q("INSERT INTO `event` (`uid`,`cid`,`guid`,`uri`,`created`,`edited`,`start`,`finish`,`summary`, `desc`,`location`,`type`, @@ -322,7 +356,6 @@ function event_store($arr) { dbesc($arr['allow_gid']), dbesc($arr['deny_cid']), dbesc($arr['deny_gid']) - ); $r = q("SELECT * FROM `event` WHERE `uri` = '%s' AND `uid` = %d LIMIT 1", @@ -396,9 +429,14 @@ function event_store($arr) { } } +/** + * @brief Create an array with translation strings used for events. + * + * @return array Array with translations strings. + */ function get_event_strings() { - // First day of the week (0 = Sunday) + // First day of the week (0 = Sunday). $firstDay = get_pconfig(local_user(), 'system', 'first_day_of_week'); if ($firstDay === false) { $firstDay = 0; @@ -466,17 +504,17 @@ function get_event_strings() { } /** - * @brief Removes duplicated birthday events + * @brief Removes duplicated birthday events. * - * @param array $dates Array of possibly duplicated events - * @return array Cleaned events + * @param array $dates Array of possibly duplicated events. + * @return array Cleaned events. * - * @todo We should replace this with a separate update function if there is some time left + * @todo We should replace this with a separate update function if there is some time left. */ function event_remove_duplicates($dates) { $dates2 = array(); - foreach ($dates AS $date) { + foreach ($dates as $date) { if ($date['type'] == 'birthday') { $dates2[$date['uid'] . "-" . $date['cid'] . "-" . $date['start']] = $date; } else { @@ -487,7 +525,7 @@ function event_remove_duplicates($dates) { } /** - * @brief Get an event by its event ID + * @brief Get an event by its event ID. * * @param type $owner_uid The User ID of the owner of the event * @param type $event_params An assoziative array with @@ -496,7 +534,7 @@ function event_remove_duplicates($dates) { * @return array Query result */ function event_by_id($owner_uid = 0, $event_params, $sql_extra = '') { - // ownly allow events if there is a valid owner_id + // Ownly allow events if there is a valid owner_id. if ($owner_uid == 0) { return; } @@ -516,26 +554,27 @@ function event_by_id($owner_uid = 0, $event_params, $sql_extra = '') { } /** - * @brief Get all events in a specific timeframe + * @brief Get all events in a specific timeframe. * - * @param int $owner_uid The User ID of the owner of the events + * @param int $owner_uid The User ID of the owner of the events. * @param array $event_params An assoziative array with - * int 'ignored' => - * string 'start' => Start time of the timeframe - * string 'finish' => Finish time of the timeframe - * string 'adjust_start' => + * int 'ignored' =>'; $s = str_replace(array('', '', ''), array($mailquote, $mailquote, $mailquote), $s); return $s; @@ -1375,7 +1392,7 @@ function prepare_body(&$item, $attach = false, $preview = false) { foreach ($arr as $r) { $matches = false; $icon = ''; - $cnt = preg_match_all('|\[attach\]href=\"(.*?)\" length=\"(.*?)\" type=\"(.*?)\" title=\"(.*?)\"|',$r,$matches, PREG_SET_ORDER); + $cnt = preg_match_all('|\[attach\]href=\"(.*?)\" length=\"(.*?)\" type=\"(.*?)\" title=\"(.*?)\"|',$r ,$matches, PREG_SET_ORDER); if ($cnt) { foreach ($matches as $mtch) { $mime = $mtch[3]; @@ -1408,9 +1425,9 @@ function prepare_body(&$item, $attach = false, $preview = false) { )); } - $filetype = strtolower(substr($mime, 0, strpos($mime,'/'))); + $filetype = strtolower(substr($mime, 0, strpos($mime, '/'))); if ($filetype) { - $filesubtype = strtolower(substr($mime, strpos($mime,'/') + 1)); + $filesubtype = strtolower(substr($mime, strpos($mime, '/') + 1)); $filesubtype = str_replace('.', '-', $filesubtype); } else { $filetype = 'unkn'; @@ -1430,19 +1447,19 @@ function prepare_body(&$item, $attach = false, $preview = false) { $s .= ''.$as.''; } - // map + // Map. if (strpos($s, '') !== false && x($item, 'coord')) { $x = generate_map(trim($item['coord'])); if ($x) { - $s = preg_replace('/\/','$0' . $x,$s); + $s = preg_replace('/\/', '$0' . $x, $s); } } - // Look for spoiler + // Look for spoiler. $spoilersearch = ''; - // Remove line breaks before the spoiler + // Remove line breaks before the spoiler. while ((strpos($s, "\n" . $spoilersearch) !== false)) { $s = str_replace("\n" . $spoilersearch, $spoilersearch, $s); } @@ -1458,7 +1475,7 @@ function prepare_body(&$item, $attach = false, $preview = false) { $s = substr($s, 0, $pos) . $spoilerreplace . substr($s, $pos + strlen($spoilersearch)); } - // Look for quote with author + // Look for quote with author. $authorsearch = ''; while ((strpos($s, $authorsearch) !== false)) { @@ -1469,7 +1486,7 @@ function prepare_body(&$item, $attach = false, $preview = false) { $s = substr($s, 0, $pos) . $authorreplace . substr($s, $pos + strlen($authorsearch)); } - // replace friendica image url size with theme preference + // Replace friendica image url size with theme preference. if (x($a->theme_info, 'item_image_size')){ $ps = $a->theme_info['item_image_size']; $s = preg_replace('|(]+src="[^"]+/photo/[0-9a-f]+)-[0-9]|', "$1-" . $ps, $s); @@ -1479,15 +1496,13 @@ function prepare_body(&$item, $attach = false, $preview = false) { call_hooks('prepare_body_final', $prep_arr); return $prep_arr['html']; -}} +} - -if (! function_exists('prepare_text')) { /** - * Given a text string, convert from bbcode to html and add smilie icons. + * @brief Given a text string, convert from bbcode to html and add smilie icons. * - * @param string $text - * @return string + * @param string $text String with bbcode. + * @return string Formattet HTML. */ function prepare_text($text) { @@ -1500,9 +1515,7 @@ function prepare_text($text) { } return trim($s); -}} - - +} /** * return array with details for categories and folders for an item diff --git a/view/templates/event_stream_item.tpl b/view/templates/event_stream_item.tpl new file mode 100644 index 000000000..16d122167 --- /dev/null +++ b/view/templates/event_stream_item.tpl @@ -0,0 +1,29 @@ + ++diff --git a/view/theme/frio/css/mod_events.css b/view/theme/frio/css/mod_events.css index 6932b1d50..65344ede9 100644 --- a/view/theme/frio/css/mod_events.css +++ b/view/theme/frio/css/mod_events.css @@ -97,13 +97,11 @@ width: 60px; } - - /** * The event-card */ .event-card { - width: auto; + width: auto; } .event-card .event-label, .event-card .location-label { @@ -114,41 +112,7 @@ padding: 9px; padding-left: 0px; } -.event-card .event-hover-left-date { - width: 60px; -} -.event-card .event-date-wrapper.medium > span { - display: block; - overflow: hidden; - text-align: center; - white-space: nowrap; -} -.event-card .event-date-wrapper.medium .event-hover-short-month { - font-size: 13px; - text-transform: uppercase; -} -.event-card .event-date-wrapper.medium .event-hover-short-date { - font-size: 24px; - line-height: 28px; - margin-top: 2px; -} - -.event-card .event-card-basic-content .event-card-content { - width: 100%; - padding: 0 5px 0 15px; - box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset; -} -.event-card .event-hover-title { - font-size: 14px; - color: #555; - line-height: 15px; - font-weight: bold; -} -.event-card .event-hover-location { - margin-top: 10px; - font-size: 13px; -} .event-card .event-hover-location .location { color: #777; font-size: 13px; -} \ No newline at end of file +} diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 91ca763a7..6bf57506c 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -2447,7 +2447,86 @@ ul li:hover .contact-wrapper .contact-action-link:hover { .event-buttons .plink-event-link { margin-left: 20px; } +.vevent .event-description { + padding: 10px 0; +} +/* Event Cards */ +.event-card-details, .event-card-header { + width: 100%; +} +.event-card-header, .event-card-left-date { + float: left; +} +.vevent .event-card-header { + display: table; +} +.event-card-left-date { + width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */ +} +.event-card .event-date-wrapper > span { + display: block; + overflow: hidden; + text-align: center; + white-space: nowrap; +} +.event-card .event-date-wrapper .event-card-short-month { + font-size: 13px; + text-transform: uppercase; +} +.event-card .event-date-wrapper.medium .event-card-short-date { + font-size: 24px; + line-height: 28px; + margin-top: 2px; +} +.event-card .event-card-content { + width: 100%; + padding: 0 5px 0 15px; + box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset; + color: #777; + position: relative; +} +.event-card .event-card-content .event-map-btn { + position: absolute; + right: 0; + top:0; + line-height: 15px; +} +.event-card .event-card-title { + font-size: 14px; + color: #555; + line-height: 15px; + font-weight: bold; +} +.event-card .event-card-location { + margin-top: 10px; + font-size: 13px; +} +.event-card .event-card-location br { + content: " "; +} +.event-card .event-card-location br::after { + content: " "; +} +.event-card-profile-name a { + color: $link_color; +} +.event-card-profile-name a:hover { + color: $link_hover_color; +} +.event-card .event-card-content .event-location-map { + position: absolute; + left: -9999px; + top: -9999px; +} +.event-card .event-card-content .event-location-map .map{ + margin-top: 10px; +} + +.event-card .event-description .seperator { + margin-top: 0; + box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset; +} /* Photos Pages */ #photo-photo { position: relative; @@ -2885,3 +2964,4 @@ body .tread-wrapper .hovercard:hover .hover-card-content a { section .profile-match-wrapper { float: left; } + diff --git a/view/theme/frio/js/mod_events.js b/view/theme/frio/js/mod_events.js index 5bd7c9449..9d10bbb8e 100644 --- a/view/theme/frio/js/mod_events.js +++ b/view/theme/frio/js/mod_events.js @@ -127,17 +127,17 @@ function changeView(action, viewName) { function eventHoverBodyTemplate() { var template = '\{{$title}}+ ++ {{$dtstart_label}} + {{$dtstart_dt}} ++ + {{if $finish}} ++ {{$dtstart_label}} + {{$dtend_dt}} ++ {{/if}} + +{{$description}}+ + {{if $location}} ++ {{$location_label}} + {{if $location.name}} + {{$location.name}} + {{/if}} + {{if $location.map}}{{$location.map}}{{/if}} + ++ {{/if}} +\ -\ -\ -\ +\ +\ +'; return template; } function eventHoverProfileNameTemplate() { var template = '\ -\ \ - {5}\ - {6}\ + {5}\ + {6}\ \\\ -'; + var template = ' \ + {0}{2}\ -{4}{3}\ +\ @@ -150,14 +150,15 @@ function eventHoverBodyTemplate() { // The template for presenting the event location in the event hover-card function eventHoverLocationTemplate() { - var template = ' {0}{2}\ +{4}{3}\ {1}\\\ - {1}\ +\ + {1}\'; return template; } diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 0329ae6c8..82cbace5c 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -353,6 +353,11 @@ $(document).ready(function(){ $("body").removeClass("aside-out"); }); + // Event listener for 'Show & hide event map' button in the network stream. + $("body").on("click", ".event-map-btn", function() { + showHideEventMap(this); + }); + }); function openClose(theID) { @@ -375,7 +380,6 @@ function showHide(theID) { } } - function showHideComments(id) { if( $('#collapsed-comments-' + id).is(':visible')) { $('#collapsed-comments-' + id).slideUp(); @@ -389,6 +393,37 @@ function showHideComments(id) { } } +// Show & hide event map in the network stream by button click. +function showHideEventMap(elm) { + // Get the id of the map element - it should be provided through + // the atribute "data-map-id". + var mapID = elm.getAttribute('data-map-id'); + + // Get translation labels. + var mapshow = elm.getAttribute('data-show-label'); + var maphide = elm.getAttribute('data-hide-label'); + + // Change the button labels. + if (elm.innerText == mapshow) { + $('#' + elm.id).text(maphide); + } else { + $('#' + elm.id).text(mapshow); + } + // Because maps are iframe elements, we cant hide it through css (display: none). + // We solve this issue by putting the map outside the screen with css. + // So the first time the 'Show map' button is pressed we move the map + // element into the screen area. + var mappos = $('#' + mapID).css('position'); + + if (mappos === 'absolute') { + $('#' + mapID).hide(); + $('#' + mapID).css({position: 'relative', left: 'auto', top: 'auto'}); + openClose(mapID); + } else { + openClose(mapID); + } + return false; +} function justifyPhotos() { justifiedGalleryActive = true; @@ -506,7 +541,6 @@ function filter_replace(item) { }; })( jQuery ); - // current time in milliseconds, to send each request to make sure // we 're not getting 304 response function timeNow() { diff --git a/view/theme/frio/templates/event_stream_item.tpl b/view/theme/frio/templates/event_stream_item.tpl new file mode 100644 index 000000000..2b367dcc6 --- /dev/null +++ b/view/theme/frio/templates/event_stream_item.tpl @@ -0,0 +1,44 @@ + ++++ + + {{if $description}} ++++++ + {{$month_short}} + {{$date_short}} + ++++ +{{$title}}+ {{if $location.map}}{{/if}} ++ + {{$start_short}} + {{if $finish}} - {{if $same_date}}{{$end_time}}{{else}}{{$end_short}}{{/if}}{{/if}} + + {{if $location.name}} + + {{$location.name}} + {{/if}} +++ {{$author_name}} ++ {{if $location.map}} +{{$location.map}}+ {{/if}} +++{{/if}} +
+ {{$description}} +