Add event descriptions in modal box

This commit is contained in:
André Menrath 2021-08-04 15:31:04 +02:00
parent 5647642cb7
commit b1243737f6
5 changed files with 293 additions and 20 deletions

View File

@ -1 +1 @@
.wp-block-cgb-block-mobilizon{margin:0 auto;max-width:600px;padding:0.5rem 0;list-style:none}.wp-block-cgb-block-mobilizon time{font-size:1rem}.wp-block-cgb-block-mobilizon h2{margin:0.5rem 0}.wp-block-cgb-block-mobilizon li{margin-bottom:2.5rem}.wp-block-cgb-block-mobilizon img{width:100%}
.wp-block-cgb-block-mobilizon{margin:0 auto;max-width:600px;padding:0.5rem 0;list-style:none}.wp-block-cgb-block-mobilizon time{font-size:1rem}.wp-block-cgb-block-mobilizon h2{margin:0.5rem 0}.wp-block-cgb-block-mobilizon li{margin-bottom:3rem}.wp-block-cgb-block-mobilizon a,.wp-block-cgb-block-mobilizon a:hover{text-decoration:none}.wp-block-cgb-block-mobilizon img{width:100%}.modal{-ms-flex-align:center;align-items:center;background:var(--global--color-background);bottom:0;display:none;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal:target,.modal.active{display:-ms-flexbox;display:flex;opacity:1;z-index:400}.modal:target .modal-overlay,.modal.active .modal-overlay{bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal:target .modal-container,.modal.active .modal-container{-webkit-animation:slide-down .2s ease 1;animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:inherit}.modal.modal-lg .modal-container{max-width:960px}.modal-container{-webkit-box-shadow:0 .2rem .5rem rgba(0,0,0,0.3);box-shadow:0 .2rem .5rem rgba(0,0,0,0.3);background:inherit;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:inherit;padding:.8rem}.modal-container .modal-header .btn-clear{background:0 0;border:0;color:currentColor;height:1rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:.1rem;text-decoration:none;width:1rem;cursor:pointer;border-radius:.1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;font-size:1.5rem;text-align:center;-webkit-transition:background .2s,border .2s,color .2s,-webkit-box-shadow .2s;transition:background .2s,border .2s,color .2s,-webkit-box-shadow .2s;-o-transition:background .2s,border .2s,box-shadow .2s,color .2s;transition:background .2s,border .2s,box-shadow .2s,color .2s;transition:background .2s,border .2s,box-shadow .2s,color .2s,-webkit-box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.modal-container .modal-header .btn-clear::before{content:"\2715"}.modal-container .modal-header .float-right{float:right !important}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-body .event-description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-wrap:wrap;flex-wrap:wrap}.modal-container .modal-body .event-description-wrapper .event-metadata{min-width:20rem;-ms-flex:1;flex:1;padding-left:1rem;margin:2rem auto;display:block}.modal-container .modal-body .event-description-wrapper .event-metadata .eventMetaDataBlock{margin-bottom:1rem}.modal-container .modal-body .event-description-wrapper .event-description{min-width:20rem;padding:1rem;-ms-flex:2;flex:2}.modal-container .modal-footer{padding:.8rem;text-align:right}.modal-container .modal-footer a:hover{text-decoration:underline}

View File

@ -5,7 +5,7 @@
* Description: Mobilizon Block is a Gutenberg Block which can display events from Mobilizon.
* Author: André Menrath
* Author URI: https://graz.social/@linos
* Version: 0.2
* Version: 0.3
* License: GPLv3
* License URI: https://www.gnu.org/licenses/gpl-3.0.txt
*

View File

@ -1,4 +1,5 @@
# About
This Plugin is beta-state. Use it carefully! But you are welcome to report bugs or feature wishes.
This Wordpress-Plugin is inspired by https://github.com/wordpress-connector-for-mobilizon/connector-mobilizon/.
## Differences to connector-mobilizon
@ -6,6 +7,9 @@ This Wordpress-Plugin is inspired by https://github.com/wordpress-connector-for-
- Fetches the events on the server side (php), not on the client side (JavaSkript), which is out-of-the-box GDPR-compatible.
# Changelog
## v0.3 - 04. August 2021
- Add event descriptions in modal box (not optional yet)
## v0.2 - 04. August 2021
- Enhance backend design
- Make setup more fail-proof

View File

@ -4,6 +4,28 @@
* CSS for both Frontend+Backend.
*/
$zindex-0: 1 !default;
$zindex-1: 100 !default;
$zindex-2: 200 !default;
$zindex-3: 300 !default;
$zindex-4: 400 !default;
$control-width-xs: 180px !default;
$control-width-sm: 320px !default;
$control-width-md: 640px !default;
$control-width-lg: 960px !default;
$unit-h: .1rem !default;
$unit-1: .2rem !default;
$unit-2: .4rem !default;
$unit-3: .6rem !default;
$unit-4: .8rem !default;
$border-radius: $unit-h !default;
$layout-spacing: $unit-2 !default;
$layout-spacing-sm: $unit-1 !default;
@mixin shadow-variant($offset) {
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba(black, .3);
}
.wp-block-cgb-block-mobilizon {
margin: 0 auto;
max-width: 600px;
@ -16,9 +38,154 @@
margin: 0.5rem 0;
}
li {
margin-bottom: 2.5rem;
margin-bottom: 3rem;
}
a, a:hover {
text-decoration: none;
}
img {
width: 100%;
}
}
// Modals
.modal {
align-items: center;
background: var(--global--color-background);
bottom: 0;
display: none;
justify-content: center;
left: 0;
opacity: 0;
overflow: hidden;
padding: $layout-spacing;
position: fixed;
right: 0;
top: 0;
&:target,
&.active {
display: flex;
opacity: 1;
z-index: $zindex-4;
.modal-overlay {
//background: rgba($bg-color, .75);
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal-container {
animation: slide-down .2s ease 1;
z-index: $zindex-0;
}
}
&.modal-sm {
.modal-container {
max-width: $control-width-sm;
padding: 0 $unit-2;
}
}
&.modal-lg {
.modal-overlay {
background: inherit;
}
.modal-container {
//box-shadow: none;
max-width: $control-width-lg;
}
}
}
.modal-container {
@include shadow-variant(.2rem);
background: inherit;
border-radius: $border-radius;
display: flex;
flex-direction: column;
max-height: 75vh;
max-width: $control-width-md;
padding: 0 $unit-4;
width: 100%;
&.modal-fullheight {
max-height: 100vh;
}
.modal-header {
color: inherit;
padding: $unit-4;
.btn-clear {
background: 0 0;
border: 0;
color: currentColor;
height: 1rem;
line-height: .8rem;
margin-left: .2rem;
margin-right: -2px;
opacity: 1;
padding: .1rem;
text-decoration: none;
width: 1rem;
cursor: pointer;
border-radius: .1rem;
appearance: none;
outline: 0;
font-size: 1.5rem;
text-align: center;
transition: background .2s,border .2s,box-shadow .2s,color .2s;
user-select: none;
white-space: nowrap;
}
.btn-clear::before {
content: "\2715";
}
.float-right {
float: right !important;
}
}
.modal-body {
overflow-y: auto;
padding: $unit-4;
position: relative;
.event-description-wrapper {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
.event-metadata {
min-width: 20rem;
flex: 1;
padding-left: 1rem;
margin: 2rem auto;
display: block;
.eventMetaDataBlock {
margin-bottom: 1rem;
}
}
.event-description {
min-width: 20rem;
padding: 1rem;
flex: 2;
}
}
}
.modal-footer {
padding: $unit-4;
text-align: right;
a:hover {
text-decoration: underline;
}
}
}

View File

@ -56,11 +56,6 @@ function mobilizon_query($baseURL, $query) {
return(wp_remote_post($endpoint, $args));
}
ob_start();
function block_render_callback($attributes, $content) {
// var_dump($attributes); // Debugging only
@ -97,9 +92,24 @@ function block_render_callback($attributes, $content) {
url,
beginsOn,
endsOn,
physicalAddress {
description,
locality
attributedTo {
name,
url
},
organizerActor {
name,
url
},
onlineAddress,
picture {
url
},
physicalAddress {
postalCode,
description,
locality,
street
}
},
total
@ -119,13 +129,24 @@ function block_render_callback($attributes, $content) {
beginsOn,
endsOn,
status,
description,
attributedTo {
name,
url
},
organizerActor {
name,
url
},
onlineAddress,
picture {
url
},
physicalAddress {
id,
postalCode,
description,
locality
locality,
street
}
},
total
@ -153,14 +174,19 @@ function block_render_callback($attributes, $content) {
// Display the event-array in as html list
echo '<ul class="wp-block-cgb-block-mobilizon">';
// Loop through each event
$event_index = 0;
foreach ($events as $event) {
$event_index = $event_index + 1;
echo '<li>';
// start of modal with the description
echo '<a href="#modal-'.$event_index.'">';
echo '<time>';
echo date_i18n( 'D, d. M. Y, G:i', strtotime($event['beginsOn']) );
$start_datetime = strtotime($event['beginsOn']);
echo date_i18n( 'D, d. M. Y, G:i', $start_datetime );
echo '</time>';
echo '<h2>';
echo '<h3>';
echo $event['title'];
echo '</h2>';
echo '</h3>';
if ( !isset( $attributes['mobilizonShowHeaderImage'] ) ) {
if ( isset( $event['picture']['url'] ) ){
$response = wp_remote_get( $event['picture']['url'] );
@ -171,6 +197,82 @@ function block_render_callback($attributes, $content) {
}
}
}
// Get Details if present
if (isset($event['physicalAddress'])) {
$locality_description = $event['physicalAddress']['description'];
$locality_street = $event['physicalAddress']['street'];
$locality_city = $event['physicalAddress']['postalCode'] . $event['physicalAddress']['locality'];;
}
else {
$locality_street = "";
$locality_description = "No location set";
$locality_city = "";
}
$locality = join("<br>",array_filter(array($locality_description,$locality_street,$locality_city)));
if (isset($event['onlineAddress'])) {
$online_adress = $event['onlineAddress'];
$online_addres_host = parse_url($online_adress, PHP_URL_HOST);
}
else {
$online_adress = "";
$online_addres_host = "";
}
if (isset($event['attributedTo'])) {
$organizer_name = $event['attributedTo']['name'];
$organizer_url = $event['attributedTo']['url'];
}
else {
$organizer_name = $event['organizerActor']['name'];
$organizer_url = $event['organizerActor']['url'];
}
$date = date_i18n( 'D, d. M. Y', $start_datetime);
$start = date_i18n(' G:i ', $start_datetime);
$end = date_i18n('G:i', strtotime($event['endsOn']));
$description = $event['description'];
$description_modal = '<div class="modal modal-lg" id="modal-'.$event_index.'">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#close" class="btn-clear float-right" aria-label="Close"></a>
<div class="modal-title h3">'.$event['title'].'</div>
</div>
<div class="modal-body">
<div class="event-description-wrapper">
<aside class="event-metadata">
<h4>Place</h4>
<div class="eventMetaDataBlock">
'.$locality.'
</div>
<h4>Date and Time</h4>
<div class="eventMetaDataBlock">
'.$date.' from '.$start.' to '.$end.'
</div>
<h4>Organised by</h4>
<div class="eventMetaDataBlock">
<a href="'.$organizer_url.'" target="blank">'.$organizer_name.' </a>
</div>
<h4>Website</h4>
<div class="eventMetaDataBlock">
<a href="'.$online_adress.' target="blank">'.$online_addres_host.'</a>
</div>
</aside>
<div class="event-description">
'.$event['description'].'
</div>
</div>
</div>
<div class="modal-footer">
<a href="'.$event['url'].'" target=blank">Go to original Mobilizon-Event</a>
</div>
</div>
</div>
';
echo $description_modal;
echo '</a>'; // end of the description modal
echo '</li>';
}
echo '</ul>';