Merge pull request #961 from WPChill/2.8.4

Release v2.8.4

.gitignore

@@ -6,4 +6,5 @@ node_modules/*
 .vscode/
 vendor
 assets/.DS_Store
-.php-cs-fixer.cache
+.php-cs-fixer.cache
+.wp-env.json

Modula.php

@@ -4,7 +4,7 @@
 * Plugin URI:               https://wp-modula.com/
 * Description:              Modula is the most powerful, user-friendly WordPress gallery plugin. Add galleries, masonry grids and more in a few clicks.
 * Author:                   WPChill
-* Version:                  2.8.3
+* Version:                  2.8.4
 * Author URI:               https://www.wpchill.com/
 * License:                  GPLv3 or later
 * License URI:              http://www.gnu.org/licenses/gpl-3.0.html
@@ -47,7 +47,7 @@
  * @since    2.0.2
  */
 
-define( 'MODULA_LITE_VERSION', '2.8.3' );
+define( 'MODULA_LITE_VERSION', '2.8.4' );
 define( 'MODULA_PATH', plugin_dir_path( __FILE__ ) );
 define( 'MODULA_URL', plugin_dir_url( __FILE__ ) );
 defined( 'MODULA_PRO_STORE_URL' ) || define( 'MODULA_PRO_STORE_URL', 'https://wp-modula.com' );

assets/css/front/modula.css

@@ -1,7 +1,7 @@
 html body .modula .modula-items .modula-item {
     position: absolute;
-    overflow: hidden;
     box-sizing: border-box;
+    overflow: hidden;
 }
 
 html body .modula .modula-items .modula-item .modula-item-content {
@@ -312,7 +312,7 @@ html body .modula .modula-items .modula-item > a.modula-no-follow {
 /**
 Fix for admin bar overfloating
  */
-html body .modula-fancybox-container.modula-fancybox-is-open {
+html body .modula-fancybox-container {
     z-index: 99999999;
 }
 
@@ -599,4 +599,80 @@ html body div.modula-powered svg.modula-logo {
 }
 .modula-fancybox-container button.f-button.is-close-btn{
     display:none;
-}
+}
+html body .modula-items .modula-item .jtg-social-mobile {
+    display: none;
+}
+@media (max-width: 992px ) {
+    html body .modula-items .modula-item .jtg-social-mobile-icons {
+        padding: 10px 15px;
+        background-color: #000;
+        border-radius: 20px;
+        position: absolute;
+        top: calc(-100% - 15px);
+        display: flex;
+        z-index: 99;
+        right: 0;
+    }
+    html body .modula-items .modula-item .modula-socials-right .jtg-social-mobile-icons {
+        left: 0;
+        right: unset;
+    }
+
+    html body .modula-items .modula-item .jtg-social-mobile-icons::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid #000;
+        bottom: -8px;
+        right: 10px;
+    }
+    html body .modula-items .modula-item .modula-socials-right .jtg-social-mobile-icons::before {
+        right: unset;
+        left: 10px;
+    }
+
+    html body .modula-items .modula-item .jtg-social-mobile {
+        padding: 10px;
+        background-color: #000;
+        border-radius: 50%;
+        cursor: pointer;
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+        z-index: 999;
+        display: block;
+    }
+    html body .modula .modula-items .jtg-social-mobile a.modula-icon-share {
+        pointer-events: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        text-decoration: none;
+    }
+    html body .modula-item .jtg-social-mobile .jtg-social-mobile-icons a{
+        justify-content: center;
+        align-items: center;
+        display: flex;
+    }
+
+    html body .modula-items .modula-item .jtg-social-mobile:not(.modula-show-socials) .jtg-social-mobile-icons{
+        display: none;
+    }
+
+    html body .modula-items .modula-item .jtg-social{
+        display: none;
+    }
+}
+
+.modula-fancybox-container .fancybox-image {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+}
+

assets/js/admin/wp-modula-conditions.js

@@ -244,10 +244,7 @@ var modulaGalleryConditions = Backbone.Model.extend({
 			} else if (0 == value) {
 				child.hide();
 			} else {
-				child.css('opacity', '1');
-				child
-					.find('input, textarea, select, button')
-					.removeAttr('disabled');
+				child.setting_state( this, 'on');
 				child.show();
 			}
 		});

assets/js/front/jquery-modula.js

@@ -237,6 +237,7 @@ jQuery(window).on('elementor/frontend/init', function () {
 									caption : link.data('caption'),
 									alt     : image.attr('alt'),
 									image_id: link.attr('data-image-id'),
+									title   : image.attr('title'),
 								},
 								current: jQuery(o).is(
 									clickedLink.parents('.modula-item')
@@ -725,6 +726,9 @@ jQuery(window).on('elementor/frontend/init', function () {
 
 	// based on settings set the needed socials.
 	Plugin.prototype.setupSocial = function () {
+		if(this.options.enableTwitter || this.options.enableFacebook || this.options.enablePinterest || this.options.enableLinkedin || this.options.enableWhatsapp || this.options.enableEmail){
+			setupSocials(this.$items);
+		}
 		if (this.options.enableTwitter) {
 			setupTwitter(this.$items, this);
 		}
@@ -1170,6 +1174,28 @@ jQuery(window).on('elementor/frontend/init', function () {
 		});
 	};
 
+	// setup social button showing socials links
+	var setupSocials = function ($tiles) {
+		$tiles.find('.jtg-social-mobile').click(function (e) {		
+			e.preventDefault();
+			$('.jtg-social-mobile').not(this).removeClass('modula-show-socials');
+			$(this).toggleClass('modula-show-socials');
+			if( isElementOutOfHorizontalViewport( $(this).find('.jtg-social-mobile-icons') ) ){
+				$(this).addClass('modula-socials-right');
+			}
+		});
+	};
+
+	var  isElementOutOfHorizontalViewport = function (el) {
+		var rect = el[0].getBoundingClientRect();
+		var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
+
+		return (
+			rect.left < 0 || 
+			rect.right > windowWidth
+		);
+	}
+
 	$.fn[pluginName] = function (options) {
 		var args = arguments;
 

assets/js/front/modula-fancybox.js

@@ -112,8 +112,8 @@ function ModulaOpenShare() {
             .replace(/\%%gallery_link%%/g, window.location.href)
             .replace(/\%%image_link%%/g, url);
 
-        var text = (current.opts.$thumb.find('img').attr('title') !== undefined) ?
-            current.opts.$thumb.find('img').attr('title') :
+        var text = (current.opts.alt !== undefined) ?
+                   current.opts.alt :
             '';
 
         if (text === '' && current.caption && typeof current.caption !== 'undefined') {

changelog.txt

@@ -1,3 +1,12 @@
+= 2.8.4 - 31.05.2024 =
+Changed: Social icons buttons popup.
+Fixed: Thumbnail navigation showing at the bottom of the lightbox.
+Fixed: Social settings buttons getting stuck if disabled and enabled.
+Fixed: Removed extra comma triggering "Syntax error" on php < 7.3
+Fixed: Guttenberg galleries fatal error
+Added: fancybox-image element width and height
+Fixed: Divi Builder compatibility
+
 = 2.8.3 - 28.05.2024 =
 Fixed: Close button not showing in lightbox
 

includes/class-modula-backward-compatibility.php

@@ -380,7 +380,10 @@ public function modula_fancybox_5_settings_matcher( $options, $settings ){
 
 		if( isset( $options['buttons'] )){
 			// we have overruling options from addons, reset the toolbar.
-			$options['Toolbar']['display']['right'] = array();
+			if( ! isset( $options['toolbar'] ) || ! $options['toolbar'] ){
+				$options['Toolbar']['display']['right'] = array();
+			}
+
 			if( is_array( $options['buttons'] ) && isset( $options['toolbar'] ) && $options['toolbar'] ){
 				foreach( $options['buttons'] as $button ){
 					switch ( $button ) {

includes/helper/class-modula-helper.php

@@ -58,6 +58,9 @@ public static function get_icon( $icon ) {
 			case 'email':
 				return '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z" fill="currentColor"/></svg>';
 			break;
+			case 'share':
+				return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1" width="24" height="24"><path d="M2.55 19c1.4-8.4 9.1-9.8 11.9-9.8V5l7 7-7 6.3v-3.5c-2.8 0-10.5 2.1-11.9 4.2z"></path></svg>';
+			break;
 			default:
 				$return = apply_filters( 'modula_get_icon', '', $icon );
 				return $return;
@@ -183,6 +186,7 @@ public static function lightbox_default_options() {
 			'animated' => true,
 			'Thumbs'  => array(
 				'type' => 'modern',
+				'showOnStart' => false,
 			),
 			'Toolbar' => array(
 				'display' => array(

includes/migrate/tabs/modula-importer-tab.php

@@ -32,7 +32,7 @@
                 </th>
                 <td>
                     <select name="modula_select_gallery_source" id="modula_select_gallery_source">
-                        <option value="none"><?php echo ($sources && count($sources) > 0) ? esc_html('Select gallery source', 'modula-best-grid-gallery') : esc_html('No galleries detected', 'modula-best-grid-gallery'); ?></option>
+                        <option value="none"><?php echo ($sources && count($sources) > 0) ? esc_html__('Select gallery source', 'modula-best-grid-gallery') : esc_html__('No galleries detected', 'modula-best-grid-gallery'); ?></option>
                         <?php
                         if ($sources) {
                             foreach ($sources as $source => $label) {
@@ -97,7 +97,7 @@
                     <tbody>
                     <tr valign="top">
                         <th scope="row" valign="top">
-                            <?php echo esc_html('Galleries to import', 'modula-best-grid-gallery'); ?>
+                            <?php echo esc_html__('Galleries to import', 'modula-best-grid-gallery'); ?>
                         </th>
                         <td>
                             <div class="modula-importer-checkbox-wrapper">
@@ -125,4 +125,4 @@ class="modula-all-selection"><?php esc_html_e( 'Deselect all', 'modula-best-grid
         <?php
     }
 }
-?>
+?>

includes/public/class-modula-shortcode.php

@@ -33,6 +33,8 @@ function __construct() {
 
 		// Add js scripts
 		add_filter( 'modula_necessary_scripts', 'modula_add_scripts', 1, 2 );
+
+		add_action( 'modula_item_after_image', 'modula_mobile_share', 100);
 
 	}
 
@@ -207,7 +209,7 @@ public function gallery_shortcode_handler( $atts ) {
         }
 
 		/* Config for gallery script */
-		$js_config = $this->get_jsconfig( $settings, $type, $inView );
+		$js_config = Modula_Shortcode::get_jsconfig( $settings, $type, $inView );
 
 		$template_data['gallery_container']['data-config'] = json_encode( $js_config );
 		/**
@@ -229,7 +231,7 @@ public function gallery_shortcode_handler( $atts ) {
 
 	}
 
-	public function get_jsconfig( $settings, $type, $inView ) {
+	public static function get_jsconfig( $settings, $type, $inView ) {
 
 		$js_config = apply_filters( 'modula_gallery_settings', array(
 			'height'           => ( isset( $settings['height'][0] ) ) ? absint( $settings[ 'height' ][0] ): false,
@@ -253,7 +255,7 @@ public function get_jsconfig( $settings, $type, $inView ) {
 			'tabletColumns'    => isset( $settings[ 'tablet_columns' ] ) ? $settings[ 'tablet_columns' ] : 2,
 			'mobileColumns'    => isset( $settings[ 'mobile_columns' ] ) ? $settings[ 'mobile_columns' ] : 1,
 			'lazyLoad'         => isset( $settings[ 'lazy_load' ] ) ? $settings[ 'lazy_load' ] : 1,
-			'lightboxOpts'     => $this->fancybox_options( $settings ),
+			'lightboxOpts'     => apply_filters( 'modula_fancybox_options', Modula_Helper::lightbox_default_options(), $settings ),
 			'inView'           => $inView,
 			'email_subject'    => isset( $settings[ 'emailSubject' ] ) ? esc_html( $settings[ 'emailSubject' ] ) : esc_html__( 'Check out this awesome image !!', 'modula-best-grid-gallery' ),
 			'email_message'    => isset( $settings[ 'emailMessage' ] ) ? esc_html( $settings[ 'emailMessage' ] ) : esc_html__( 'Here is the link to the image : %%image_link%% and this is the link to the gallery : %%gallery_link%% ', 'modula-best-grid-gallery' ),
@@ -286,16 +288,18 @@ private function generate_gallery_css( $gallery_id, $settings ) {
 		}
 
 		if ( $settings['socialIconColor'] ) {
-			$css .= "#{$gallery_id} .modula-item .jtg-social a, .lightbox-socials.jtg-social a{ color: " . Modula_Helper::sanitize_rgba_colour( $settings['socialIconColor'] ) . " }";
+			$css .= "#{$gallery_id} .modula-item .jtg-social a, .lightbox-socials.jtg-social a{ fill: " . Modula_Helper::sanitize_rgba_colour( $settings['socialIconColor'] ) . "; color: " . Modula_Helper::sanitize_rgba_colour( $settings['socialIconColor'] ) . " }";
+			$css .= "#{$gallery_id} .modula-item .jtg-social-mobile a{ fill: " . Modula_Helper::sanitize_rgba_colour( $settings['socialIconColor'] ) . "; color: " . Modula_Helper::sanitize_rgba_colour( $settings['socialIconColor'] ) . " }";
 		}
 
 		if ( $settings['socialIconSize'] ) {
 			$css .= "#{$gallery_id} .modula-item .jtg-social svg, .lightbox-socials.jtg-social svg { height: " . absint( $settings['socialIconSize'] ) . "px; width: " . absint( $settings['socialIconSize'] ) . "px }";
-
+			$css .= "#{$gallery_id} .modula-item .jtg-social-mobile svg { height: " . absint( $settings['socialIconSize'] ) . "px; width: " . absint( $settings['socialIconSize'] ) . "px }";
 		}
 
 		if ( $settings['socialIconPadding'] ) {
 			$css .= "#{$gallery_id} .modula-item .jtg-social a:not(:last-child), .lightbox-socials.jtg-social a:not(:last-child) { margin-right: " . absint( $settings['socialIconPadding'] ) . 'px' . " }";
+			$css .= "#{$gallery_id} .modula-item .jtg-social-mobile .jtg-social-mobile-icons a:not(:last-child){ margin-right: " . absint( $settings['socialIconPadding'] ) . 'px' . " }";
 		}
 
 		if ( '' != $settings['captionColor'] || '' != $settings['captionFontSize'] ) {

includes/public/meta/class-modula-meta.php

@@ -145,7 +145,7 @@ public function add_metas() {
 				'published_date' => $date_published,
 				'img_width'      => ! empty( $image_sizes[1] ) ? $image_sizes[1] : '640',
 				'img_height'     => ! empty( $image_sizes[2] ) ? $image_sizes[2] : '480',
-			),
+			)
 		);
 		include __DIR__ . '/social_meta.php';
 	}

includes/public/modula-helper-functions.php

@@ -436,3 +436,42 @@ function modula_href_required() {
 
 	return true;
 }
+
+function modula_mobile_share( $data ){
+	if ( $data->hide_socials ){
+		return;
+	}
+
+	?>
+	<div class="jtg-social-mobile">
+		<?php if( $data->enableTwitter || $data->enableFacebook || $data->enableWhatsapp || $data->enablePinterest || $data->enableLinkedin || $data->enableEmail ) : ?>
+				<a class="modula-icon-share" aria-label="<?php echo esc_html__( 'Click to share', 'modula-best-grid-gallery' ); ?>" href="#"><?php echo Modula_Helper::get_icon( 'share' ) ?></a>
+		<?php endif ?>
+		<div class="jtg-social-mobile-icons">
+			<?php if ( $data->enableTwitter ): ?>
+				<a class="modula-icon-twitter" aria-label="<?php echo esc_html__( 'Share on Twitter', 'modula-best-grid-gallery' ); ?>" <?php echo ( ! empty( $data->social_attributes ) ) ?  Modula_Helper::generate_attributes( $data->social_attributes ) : ''; ?> href="#"><?php echo Modula_Helper::get_icon( 'twitter' ) ?></a>
+			<?php endif ?>
+			<?php if ( $data->enableFacebook ): ?>
+				<a class="modula-icon-facebook" aria-label="<?php echo esc_html__( 'Share on Facebook', 'modula-best-grid-gallery' ); ?>" <?php echo ( ! empty( $data->social_attributes ) ) ?  Modula_Helper::generate_attributes( $data->social_attributes ) : ''; ?>
+				href="#"><?php echo Modula_Helper::get_icon( 'facebook' ) ?></a>
+			<?php endif ?>
+			<?php if ( $data->enableWhatsapp ): ?>
+				<a class="modula-icon-whatsapp" aria-label="<?php echo esc_html__( 'Share on Whatsapp', 'modula-best-grid-gallery' ); ?>" <?php echo ( ! empty( $data->social_attributes ) ) ?  Modula_Helper::generate_attributes( $data->social_attributes ) : ''; ?>
+				href="#"><?php echo Modula_Helper::get_icon( 'whatsapp' ) ?></a>
+			<?php endif ?>
+			<?php if ( $data->enablePinterest ): ?>
+				<a class="modula-icon-pinterest" aria-label="<?php echo esc_html__( 'Share on Pinterest', 'modula-best-grid-gallery' ); ?>" <?php echo ( ! empty( $data->social_attributes ) ) ?  Modula_Helper::generate_attributes( $data->social_attributes ) : ''; ?>
+				href="#"><?php echo Modula_Helper::get_icon( 'pinterest' ) ?></a>
+			<?php endif ?>
+			<?php if ( $data->enableLinkedin ): ?>
+				<a class="modula-icon-linkedin" aria-label="<?php echo esc_html__( 'Share on LinkedIn', 'modula-best-grid-gallery' ); ?>" <?php echo ( ! empty( $data->social_attributes ) ) ?  Modula_Helper::generate_attributes( $data->social_attributes ) : ''; ?>
+				href="#"><?php echo Modula_Helper::get_icon( 'linkedin' ) ?></a>
+			<?php endif ?>
+			<?php if ( $data->enableEmail ): ?>
+				<a class="modula-icon-email" aria-label="<?php echo esc_html__( 'Share by Email', 'modula-best-grid-gallery' ); ?>" <?php echo ( ! empty( $data->social_attributes ) ) ?  Modula_Helper::generate_attributes( $data->social_attributes ) : ''; ?> href="#"><?php echo Modula_Helper::get_icon( 'email' ) ?></a>
+			<?php endif ?>
+			<?php do_action('modula_extra_socials',$data); ?>
+		</div>
+	</div>
+	<?php
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "modula-best-grid-gallery",
-	"version": "2.8.3",
+	"version": "2.8.4",
 	"description": "Modula Image Gallery build tools",
 	"author": "WPChill",
 	"license": "GPL-2.0-or-later",