🔥 NEW: FEATURES

- Added: Option to close modal when ESC key is pressed. - Added: Option to close modal when clicked outside. - Added: Opening & Exit animations.
addonify · Jul 21, 2023 · 6a7e81c · 6a7e81c
1 parent bf7fc4c
commit 6a7e81c
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 20 deletions.
diff --git a/admin/assets/js/main.js b/admin/assets/js/main.js
diff --git a/admin/src/components/inputs/Switch.vue b/admin/src/components/inputs/Switch.vue
@@ -16,6 +16,8 @@
 			emit("update:modelValue", newValue);
 		},
 	});
+
+	console.log(typeof props.modelValue);
 </script>
 <template>
 	<el-switch

diff --git a/includes/functions/fields/modal-box.php b/includes/functions/fields/modal-box.php
@@ -40,6 +40,49 @@ function addonify_quick_view_modal_box_content_settings_fields() {
                 'dependent'     => array('enable_quick_view'),
                 'type'          => 'switch'
             ),
+            'close_modal_when_esc_pressed' => array(
+                'label'         => __( 'Close modal if ESC key is pressed', 'addonify-quick-view' ),
+                'description'   => __( 'Enable to close modal if ESC key is pressed on keyboard.', 'addonify-quick-view' ),
+                'dependent'     => array('enable_quick_view'),
+                'type'          => 'switch'
+            ),
+            'close_modal_when_clicked_outside' => array(
+                'label'         => __( 'Close modal if clicked outside', 'addonify-quick-view' ),
+                'description'   => __( 'Enable to close modal if clicked outside of modal box.', 'addonify-quick-view' ),
+                'dependent'     => array('enable_quick_view'),
+                'type'          => 'switch'
+            ),
+            'modal_opening_animation' => array(
+                'label'         => __( 'Modal opening animation', 'addonify-quick-view' ),
+                'dependent'     => array('enable_quick_view'),
+                'type'          => 'select',
+                 'choices'      => array(
+                    'none'              => __( 'None', 'addonify-quick-view' ),
+                    'fade-in'           => __( 'Fade in', 'addonify-quick-view' ),
+                    'fade-in-up'        => __( 'Fade in from up', 'addonify-quick-view' ),
+                    'bounce-in'         => __( 'Bounce in', 'addonify-quick-view' ),
+                    'slide-in-left'     => __( 'Slide in from left', 'addonify-quick-view' ),
+                    'slide-in-right'    => __( 'Slide in from right', 'addonify-quick-view' ),
+                    'zoom-in'           => __( 'Zoom in', 'addonify-quick-view' ),
+                    'swing'             => __( 'Swing effect', 'addonify-quick-view' ),
+                    'jello'             => __( 'Jello effect', 'addonify-quick-view' ),
+                    'rubber-band'       => __( 'Rubber band effect', 'addonify-quick-view' ),
+                )
+            ),
+            'modal_closing_animation' => array(
+                'label'         => __( 'Modal closing animation', 'addonify-quick-view' ),
+                'dependent'     => array('enable_quick_view'),
+                'type'          => 'select',
+                 'choices'      => array(
+                    'none'              => __( 'None', 'addonify-quick-view' ),
+                    'fade-out'          => __( 'Fade out', 'addonify-quick-view' ),
+                    'fade-out-down'     => __( 'Fade out down', 'addonify-quick-view' ),
+                    'bounce-out'        => __( 'Bounce out', 'addonify-quick-view' ),
+                    'slide-out-left'    => __( 'Slide out to left', 'addonify-quick-view' ),
+                    'slide-out-right'   => __( 'Slide out to right', 'addonify-quick-view' ),
+                    'zoom-out'          => __( 'Zoom out', 'addonify-quick-view' ),
+                )
+            ),
             'display_read_more_button' => array(
                 'label'         => __( 'Display View Detail Button', 'addonify-quick-view' ), 
                 'description'   => __( 'Enable to display View Detail Button in quick view modal box.', 'addonify-quick-view' ),
@@ -48,7 +91,7 @@ function addonify_quick_view_modal_box_content_settings_fields() {
             ),
              'read_more_button_label' => array(
                 'label'         => __( 'View Detail Button Label', 'addonify-quick-view' ),
-                'placeholder'   => __('View Detail', 'addonify-quick-view'), 
+                'placeholder'   => __( 'View Detail', 'addonify-quick-view'), 
                 'type'          => 'text',
                 'dependent'     => array('enable_quick_view', 'display_read_more_button'),
             ),

diff --git a/includes/functions/settings.php b/includes/functions/settings.php
@@ -35,14 +35,19 @@ function addonify_quick_view_settings_fields_defaults() {
 			'addonify_quick_view_settings_fields_defaults',
 			array(
 				// Options.
-				'enable_quick_view'                   => true,
+				'enable_quick_view'                   => '1',
 				'disable_quick_view_on_mobile_device' => false,
 				'quick_view_btn_position'             => 'after_add_to_cart_button',
 				'quick_view_btn_label'                => __( 'Quick view', 'addonify-quick-view' ),
 				'modal_box_content'                   => serialize( array( 'image', 'title', 'price', 'add_to_cart', 'rating', 'excerpt' ) ), // phpcs:ignore
 				'product_thumbnail'                   => 'product_image_only',
 				'enable_lightbox'                     => false,
 				'display_read_more_button'            => false,
+				'modal_opening_animation'             => 'jello', // NEW
+				'modal_closing_animation'             => 'bounce-out', // NEW
+				'close_modal_when_esc_pressed'		  => '1', // NEW
+				'close_modal_when_clicked_outside'	  => false, // NEW
+
 				'read_more_button_label'              => __( 'View Detail', 'addonify-quick-view' ),
 				// Styles.
 				'enable_plugin_styles'                => false,

diff --git a/public/assets/build/css/addonify-quick-view.css.map b/public/assets/build/css/addonify-quick-view.css.map
diff --git a/public/assets/build/js/addonify-quick-view.min.js b/public/assets/build/js/addonify-quick-view.min.js
diff --git a/public/assets/src/js/custom/public-scripts.js b/public/assets/src/js/custom/public-scripts.js
@@ -2,9 +2,10 @@
 
     'use strict';
 
-    const animateModelOnClose = true; // NEW
-    const closeModalOnEscClicked = true; // NEW
-    const closeModelOnOutsideClicked = true; // NEW
+    const animateModelOnClose = addonifyQuickViewPublicScriptObject.animateModelOnClose; // NEW
+    const closeModalOnEscClicked = addonifyQuickViewPublicScriptObject.closeModalOnEscClicked; // NEW
+    const closeModelOnOutsideClicked = addonifyQuickViewPublicScriptObject.closeModelOnOutsideClicked; // NEW
+    const enableWcGalleryLightBox = addonifyQuickViewPublicScriptObject.enableWcGalleryLightBox;
 
     /**
      * Main object for addonify quick view modal.
@@ -104,7 +105,7 @@
             }
 
             // close quick view modal when outside modal is clicked.
-            if (closeModalOnEscClicked) {
+            if (closeModelOnOutsideClicked) {
 
                 // set cursor to pointer.
                 $('#addonify-quick-view-modal-wrapper').css('cursor', 'pointer');
@@ -227,7 +228,10 @@
                     complete: function () {
 
                         // render trigger icon for WooCommerce gallery.
-                        addonifyQuickView.renderWooCommerceGalleryTriggerIcon();
+                        if (enableWcGalleryLightBox) {
+
+                            addonifyQuickView.renderWooCommerceGalleryTriggerIcon();
+                        }
 
                         // hide loading state.
                         addonifyQuickView.setSpinner('hide');
@@ -285,12 +289,8 @@
 
             let triggerEle = $('#addonify-quick-view-modal .woocommerce-product-gallery__trigger');
 
-            console.log('renderWooCommerceGalleryTriggerIcon fn invoked!');
-
             if (triggerEle.length > 0) {
 
-                console.log('Found WooCommerce gallery trigger icon!');
-
                 triggerEle.html(" ");
                 triggerEle.html(icon);
             }

diff --git a/public/assets/src/scss/abstracts/_variables.scss b/public/assets/src/scss/abstracts/_variables.scss
@@ -11,7 +11,6 @@
     --addonify_qv_modal_inputs_background_color: rgba(255, 255, 255, 1);
     --addonify_qv_modal_inputs_text_color: rgba(51, 51, 51, 1);
 
-
     --addonify_qv_modal_border_radius: 10px; // NEW
     --addonify_qv_modal_zindex: 10000000000000000; // NEW
 

diff --git a/public/class-addonify-quick-view-public.php b/public/class-addonify-quick-view-public.php
@@ -227,8 +227,18 @@ public function enqueue_scripts() {
 			'addonify-quick-view-public',
 			'addonifyQuickViewPublicScriptObject',
 			array(
-				'ajaxURL'         => esc_url( admin_url( 'admin-ajax.php' ) ),
-				'quickViewAction' => 'get_quick_view_contents',
+				'ajaxURL'             => esc_url( admin_url( 'admin-ajax.php' ) ),
+
+				'quickViewAction' 	  => 'get_quick_view_contents',
+
+				'animateModelOnClose' => addonify_quick_view_get_settings_fields_values( 'modal_closing_animation' ) === 'none' ? false : true,
+
+				'closeModalOnEscClicked' => addonify_quick_view_get_settings_fields_values( 'close_modal_when_esc_pressed' ) === '1' ? true : false,
+
+				'closeModelOnOutsideClicked' => addonify_quick_view_get_settings_fields_values( 'close_modal_when_clicked_outside' ) === '1' ? true : false,
+
+				'enableWcGalleryLightBox' => (int) addonify_quick_view_get_settings_fields_values( 'enable_lightbox' ) === 1 ? true : false,
+
 				'nonce'           => wp_create_nonce( 'addonify_quick_view_nonce' ),
 			)
 		);

diff --git a/public/template-functions.php b/public/template-functions.php
@@ -164,6 +164,30 @@ function addonify_quick_view_content_template( $product_id ) {
 add_action( 'addonify_quick_view_content', 'addonify_quick_view_content_template' );
 
 
+/**
+ * Return the name of the modal animation.
+ *
+ * @since 1.2.8
+ * @param string action. Opening or closing.
+ */
+function addonify_quick_view_get_modal_animation( $action ) {
+
+	if ( $action === '') {
+
+		return 'none';
+	}
+
+	if ( $action === 'opening' ) {
+
+		return addonify_quick_view_get_settings_fields_values( 'modal_opening_animation' ) ? addonify_quick_view_get_settings_fields_values( 'modal_opening_animation' ) : 'jello';
+	}
+
+	if ( $action === 'closing' ) {
+
+		return addonify_quick_view_get_settings_fields_values( 'modal_closing_animation' ) ? addonify_quick_view_get_settings_fields_values( 'modal_closing_animation' ) : 'bounce-out';
+	}
+}
+
 
 
 

diff --git a/public/templates/addonify-quick-view-content-wrapper.php b/public/templates/addonify-quick-view-content-wrapper.php
@@ -21,9 +21,9 @@
 
 <aside id="addonify-quick-view-modal-wrapper" 
 	class="play-opening-animation"
-	data-open_animation="jello" 
-	data-close_animation="bounce-out">
-	<div id="addonify-quick-view-modal" id="addonify-quick-modal-scrollbar" data-layout="default">
+	data-open_animation="<?php echo esc_attr( addonify_quick_view_get_modal_animation('opening') ); ?>" 
+	data-close_animation="<?php echo esc_attr( addonify_quick_view_get_modal_animation('closing') ); ?>">
+	<div id="addonify-quick-view-modal" data-layout="default">
 		<div class="adfy-quick-view-model-inner" >
 			<header class="adfy-qvm-header">
 				<button id="addonify-qvm-close-button" class="adfy-qv-button">