chore: optimized feature lock notice rendering

classes/Visualizer/Module/Admin.php

@@ -1019,13 +1019,7 @@ public function renderLibraryPage() {
 		}
 		// enqueue charts array
 		$ajaxurl = admin_url( 'admin-ajax.php' );
-		$license = get_option( 'visualizer_pro_license_data', 'free' );
-		$license_key = '';
-		$download_id = '';
-		if ( ! empty( $license ) && is_object( $license ) ) {
-			$license_key = $license->key;
-			$download_id = $license->download_id;
-		}
+
 		wp_localize_script(
 			'visualizer-library',
 			'visualizer',
@@ -1065,8 +1059,6 @@ public function renderLibraryPage() {
 					'conflict' => __( 'We have detected a potential conflict with another component that prevents Visualizer from functioning properly. Please disable any of the following components if they are activated on your instance: Modern Events Calendar plugin, Acronix plugin. In case the aforementioned components are not activated or you continue to see this error message, please disable all other plugins and enable them one by one to find out the component that is causing the conflict.', 'visualizer' ),
 				),
 				'is_pro_user' => Visualizer_Module::is_pro(),
-				'admin_license_url' => admin_url('options-general.php#visualizer_pro_license'),
-				'renew_license_url' => tsdk_utmify( Visualizer_Plugin::STORE_URL . '?edd_license_key=' . $license_key . '&download_id=' .$download_id, 'visualizer_license_block' ),
 			)
 		);
 		// render library page

classes/Visualizer/Render/Library.php

@@ -215,10 +215,48 @@ private function getDisplayForm() {
 	 * @access private
 	 */
 	private function _renderLibrary() {
+		$license = get_option( 'visualizer_pro_license_data', 'free' );
+		$license_key = '';
+		$download_id = '';
+		if ( ! empty( $license ) && is_object( $license ) ) {
+			$license_key = $license->key;
+			$download_id = $license->download_id;
+		}
+		$admin_license_url = admin_url('options-general.php#visualizer_pro_license');
+		$renew_license_url = tsdk_utmify( Visualizer_Plugin::STORE_URL . '?edd_license_key=' . $license_key . '&download_id=' .$download_id, 'visualizer_license_block' );
 		// Added by Ash/Upwork
 		$filterBy = ! empty( $_GET['s'] ) ? sanitize_text_field( wp_unslash( $_GET['s'] ) ) : null; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 		// Added by Ash/Upwork
 		echo $this->custom_css;
+		if ( ! Visualizer_Module::is_pro() ) {
+			echo '
+				<div class="vizualizer-renew-notice-overlay" id="overlay-visualizer"></div>
+				<div class="vizualizer-renew-notice-popup">
+					<h1 class="vizualizer-renew-notice-heading">Alert!</h1>
+					<p class="vizualizer-renew-notice-message">' . esc_html__( 'In order to edit premium charts, benefit from updates and support for Visualizer Premium plugin, please renew your license code or activate it.', 'visualizer' ) . '	</p>
+					<div class="vizualizer-renew-notice-buttons-container">
+						<a href="' . esc_url($renew_license_url) . '" target="_blank">
+							<button class="vizualizer-renew-notice-button vizualizer-renew-notice-renew-button">
+								<span class="dashicons dashicons-cart"></span>' . esc_html__( 'Renew License', 'visualizer' ) . ' 
+							</button>
+						</a>
+						<a href="' . esc_url($admin_license_url) . '">
+							<button class="vizualizer-renew-notice-button vizualizer-renew-notice-activate-button">
+								<span class="dashicons dashicons-unlock"></span> ' . esc_html__( 'Activate License', 'visualizer' ) . ' 
+							</button>
+						</a>
+					</div>
+					<i class="dashicons dashicons-no vizualizer-renew-notice-close-icon"></i>
+				</div>
+				<script>
+				jQuery(document).ready(function($) {
+					$(".vizualizer-renew-notice-close-icon").on("click", function() {
+						$("#overlay-visualizer").css("display", "none");
+						$(".vizualizer-renew-notice-popup").css("display", "none");
+					});
+				});
+				</script>';
+		}
 		echo '<div id="visualizer-types" class="visualizer-clearfix">';
 		echo '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="list-icon" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM7.385 12.66H6.045L2.805 8.12L4.146 6.87L6.715 9.27L11.856 3.339L13.196 4.279L7.385 12.66Z"/></symbol></svg>';
 		$this->getDisplayForm();
@@ -251,6 +289,26 @@ private function _renderLibrary() {
 				$this->_renderSidebar();
 			}
 			echo '</div>';
+
+//            echo '
+//
+//            <h1 class="vizualizer-renew-notice-heading">Alert!</h1>
+//                <p class="vizualizer-renew-notice-message">
+//                    In order to edit premium charts, benefit from updates and support for Visualizer Premium plugin, please renew your license code or activate it.
+//                </p>
+//                <div class="vizualizer-renew-notice-buttons-container">
+//                    <a href="${visualizer.renew_license_url}" target="_blank">
+//                        <button class="vizualizer-renew-notice-button vizualizer-renew-notice-renew-button">
+//                            <span class="dashicons dashicons-cart"></span> Renew License
+//                    </button>
+//                    </a>
+//                    <a href="${visualizer.admin_license_url}">
+//                        <button class="vizualizer-renew-notice-button vizualizer-renew-notice-activate-button">
+//                            <span class="dashicons dashicons-unlock"></span> Activate License
+//                    </button>
+//                    </a>
+//                </div>
+//                <i class="dashicons dashicons-no vizualizer-renew-notice-close-icon"></i> ';
 		} else {
 			echo '<div id="visualizer-library" class="visualizer-clearfix">';
 			echo '<div class="items"><div class="visualizer-chart">';

css/library.css

@@ -522,6 +522,7 @@ div#visualizer-types ul, div#visualizer-types form p {
 
 
 .vizualizer-renew-notice-overlay {
+	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -532,7 +533,7 @@ div#visualizer-types ul, div#visualizer-types form p {
 }
 
 .vizualizer-renew-notice-popup {
-	display: block;
+	display: none;
 	position: fixed;
 	top: 50%;
 	left: 50%;

js/library.js

@@ -33,61 +33,13 @@
     });
 })(wp.media.view);
 
-function createPopupProBlocker() {
-
-    var overlay = document.createElement('div');
-    overlay.classList.add('vizualizer-renew-notice-overlay');
-    overlay.id = 'overlay-visualizer';
-    document.body.appendChild(overlay);
-
-    var popup = document.createElement('div');
-    popup.classList.add('vizualizer-renew-notice-popup');
-
-    var heading = document.createElement('h1');
-    heading.textContent = 'Alert!';
-    heading.classList.add('vizualizer-renew-notice-heading');
-    popup.appendChild(heading);
-
-    var message = document.createElement('p');
-    message.textContent = 'In order to edit premium charts, benefit from updates and support for Visualizer Premium plugin, please renew your license code or activate it.';
-    message.classList.add('vizualizer-renew-notice-message');
-    popup.appendChild(message);
-
-    var buttonsContainer = document.createElement('div');
-    buttonsContainer.classList.add('vizualizer-renew-notice-buttons-container');
-
-    var link1 = document.createElement('a');
-    link1.href = visualizer.renew_license_url;
-    link1.target = '_blank';
-    var button1 = document.createElement('button');
-    button1.innerHTML = '<span class="dashicons dashicons-cart"></span> Renew License';
-    button1.classList.add('vizualizer-renew-notice-button', 'vizualizer-renew-notice-renew-button');
-    link1.appendChild(button1);
-    buttonsContainer.appendChild(link1);
-
-    var link2 = document.createElement('a');
-    link2.href = visualizer.admin_license_url;
-    var button2 = document.createElement('button');
-    button2.innerHTML = '<span class="dashicons dashicons-unlock"></span> Activate License';
-    button2.classList.add('vizualizer-renew-notice-button', 'vizualizer-renew-notice-activate-button');
-    link2.appendChild(button2);
-    buttonsContainer.appendChild(link2);
-
-    popup.appendChild(buttonsContainer);
-
-    var closeIcon = document.createElement('i');
-
-    closeIcon.classList.add('dashicons', 'dashicons-no', 'vizualizer-renew-notice-close-icon');
-
-    closeIcon.addEventListener('click', function() {
-        document.body.removeChild(overlay);
-        document.body.removeChild(popup);
-    });
-
-    popup.appendChild(closeIcon);
-
-    document.body.appendChild(popup);
-
+function createPopupProBlocker( $ , e ) {
+    if ( ! visualizer.is_pro_user && e.target.classList.contains('viz-is-pro-chart') ) {
+        $("#overlay-visualizer").css("display", "block");
+        $(".vizualizer-renew-notice-popup").css("display", "block");
+        return true;
+    }
+    return false;
 }
 
 (function ($, vmv, vu) {
@@ -135,8 +87,7 @@ function createPopupProBlocker() {
 
         $('.visualizer-chart-shortcode').click(function (e) {
 
-            if ( ! visualizer.is_pro_user && e.target.classList.contains('viz-is-pro-chart') ) {
-                createPopupProBlocker();
+            if ( createPopupProBlocker( $, e ) ) {
                 e.preventDefault();
                 e.stopPropagation();
                 return;
@@ -193,8 +144,7 @@ function createPopupProBlocker() {
 
         $('.visualizer-chart-edit').click(function (event) {
 
-            if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) {
-                createPopupProBlocker();
+            if ( createPopupProBlocker( $, event ) ) {
                 return;
             }
 
@@ -213,16 +163,14 @@ function createPopupProBlocker() {
             return false;
         });
         $(".visualizer-chart-clone").on("click", function ( event ) {
-            if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) {
-                createPopupProBlocker();
+            if ( createPopupProBlocker( $, event ) ) {
                 event.preventDefault();
             }
         });
 
         $(".visualizer-chart-export").on("click", function (event) {
 
-            if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) {
-                createPopupProBlocker();
+            if ( createPopupProBlocker( $, event ) ) {
                 return;
             }
 
@@ -247,8 +195,7 @@ function createPopupProBlocker() {
         });
 
         $(".visualizer-chart-image").on("click", function (event) {
-            if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) {
-                createPopupProBlocker();
+            if ( createPopupProBlocker( $, event ) ) {
                 return;
             }
             $('body').trigger('visualizer:action:specificchart', {action: 'image', id: $(this).attr("data-chart"), data: null, dataObj: {name: $(this).attr("data-chart-title")}});