Adding in the modal JS and CSS #368

assets/css/scss/_modals.scss

@@ -0,0 +1,47 @@
+/* The Modal (background) */
+
+
+.lsx-modal {
+	display: none; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 1; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100%; /* Full width */
+	height: 100%; /* Full height */
+	overflow: auto; /* Enable scroll if needed */
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+	&.open {
+		display: block;
+	}
+
+	/* Modal Content/Box */
+	.modal-content {
+		background-color: #fefefe;
+		margin: 15% auto; /* 15% from the top and centered */
+		padding: 20px;
+		border: 1px solid #888;
+		width: var(--wp--style--global--content-size); /* Could be more or less, depending on screen size */
+	}
+
+	/* The Close Button */
+	.close {
+		color: #aaa;
+		float: right;
+		font-size: 28px;
+		font-weight: bold;
+		line-height: 0;
+		height: auto;
+		padding-top: 5px;
+
+		&:hover,
+		&:focus {
+			color: black;
+			text-decoration: none;
+			cursor: pointer;
+		}
+	}
+}
+

assets/css/style.scss

@@ -6,6 +6,7 @@
 @import 'scss/additional';
 @import 'scss/slider';
 @import 'scss/collapse';
+@import 'scss/modals';
 
 .lsx-itinerary-wrapper,
 .lsx-units-wrapper {

assets/js/src/custom.js

@@ -112,25 +112,23 @@ if ( window.location.hash ) {
 	lsx_to.readMoreTIText = '';
 
 	lsx_to.set_read_more_travel_info = function() {
-
-		/*$( '.single-tour-operator .additional-info .lsx-to-more-link' ).each( function() {
-			lsx_to.readMoreTIText = $(this).find('a').text();
-			lsx_to.removeEmptyParagraphs($(this).closest( '.additional-info' ).find('.content'));
-			lsx_to.readMoreSet( $(this).find('a'), $(this).closest( '.additional-info' ).find('.content'), 1 );
-		} );
-
 		$( '.single-tour-operator .additional-info .lsx-to-more-link' ).on( 'click', function( event ) {
 			event.preventDefault();
-			$( this ).hide();
 
-			if ( $( this ).find('a').hasClass( 'less-link' ) ) {
-				lsx_to.readMoreSet( $(this).find('a'), $(this).closest( '.additional-info' ).find('.content'), 1 );
-			} else {
-				lsx_to.readMoreOpen( $(this).find('a'), $(this).closest( '.additional-info' ).find('.content') );
+			let classes = $(this).closest( '.additional-info' ).attr('class');
+
+			const regex = /lsx-(.*?)-wrapper/;
+			const match = classes.match(regex);
+			const result = match ? match[1] : null;
+
+			if ( null !== result ) {
+				$('.modal-' + result).toggleClass('open');
 			}
+		} );
 
-			$( this ).show();
-		} );*/
+		$( '.lsx-modal .close' ).on( 'click', function( event ) {
+			$(this).parents('.lsx-modal').removeClass('open');
+		});
 	};
 
 	lsx_to.removeEmptyParagraphs = function( contentWrapper ) {

includes/classes/legacy/class-destination.php

@@ -43,6 +43,8 @@ class Destination {
 	 */
 	protected $plugin_screen_hook_suffix = null;
 
+	public $modals = [];
+
 	/**
 	 * Initialize the plugin by setting localization, filters, and
 	 * administration functions.
@@ -58,6 +60,8 @@ private function __construct() {
 		add_filter( 'lsx_to_parents_only', array( $this, 'filter_countries' ) );
 
 		add_filter( 'lsx_to_custom_field_query', array( $this, 'travel_information_excerpt' ), 5, 10 );
+
+		add_action( 'wp_footer', array( $this, 'output_modals' ) );
 	}
 
 	/**
@@ -129,6 +133,8 @@ public function travel_information_excerpt( $html = '', $meta_key = false, $valu
 		];
 
 		if ( get_post_type() === 'destination' && in_array( $meta_key, $ti_keys )  ) {
+			$this->modals[ $meta_key ] = $html;
+
 			$value = str_replace( '</p><p>', ' ', $html );
 			$value = str_replace( array( '</p>', '<p>' ), '', $value );
 			$value = str_replace( '<br>', ' ', $value );
@@ -141,9 +147,18 @@ public function travel_information_excerpt( $html = '', $meta_key = false, $valu
 			}
 
 			$value = trim( force_balance_tags( $value ) );
-
-			$html = apply_filters( 'the_content', $value );
+			$html  = apply_filters( 'the_content', $value );
 		}
 		return $html;
 	}
+
+	public function output_modals() {
+		if ( ! empty( $this->modals ) ) {
+			foreach ( $this->modals as $key => $content ) {
+				$heading = '<p class="has-small-font-size" style="padding-top:0;"><strong>' . ucwords( $key ) . '</strong></p>';
+				$modal   = '<div class="lsx-modal modal-' . $key . '"><div class="modal-content"><span class="close">&times;</span>' . $heading . $content . '</div></div>';
+				echo wp_kses_post( $modal );
+			}
+		}
+	}
 }