Add event descriptions in modal box

dist/blocks.style.build.css

@@ -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}

plugin.php

@@ -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
  *

readme.md

@@ -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

src/block/style.scss

@@ -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;
+    }
+  }
+}
+

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,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>';