Add event descriptions in modal box
This commit is contained in:
André Menrath
parent
5647642cb7
commit
b1243737f6
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
136
src/init.php
136
src/init.php
|
|
@ -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,12 +92,27 @@ function block_render_callback($attributes, $content) {
|
|||
url,
|
||||
beginsOn,
|
||||
endsOn,
|
||||
physicalAddress {
|
||||
description,
|
||||
locality
|
||||
}
|
||||
description,
|
||||
attributedTo {
|
||||
name,
|
||||
url
|
||||
},
|
||||
total
|
||||
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
|
||||
url
|
||||
},
|
||||
physicalAddress {
|
||||
id,
|
||||
description,
|
||||
locality
|
||||
postalCode,
|
||||
description,
|
||||
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>';
|
||||
|
|
|
|||
Loading…
Reference in New Issue