From 24c69be1aec8ff463bf8521cb57b65d0009277a0 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Thu, 9 May 2024 21:02:58 +0300 Subject: [PATCH 01/11] build: added renew/activate license notice --- js/library.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 75 insertions(+), 1 deletion(-) diff --git a/js/library.js b/js/library.js index 5164dbb6..9f34be3d 100644 --- a/js/library.js +++ b/js/library.js @@ -33,6 +33,79 @@ }); })(wp.media.view); +function createPopup() { + if ( visualizer.is_pro ) { + return; + } + + var popup = document.createElement('div'); + + + popup.style.display = 'none'; + popup.style.position = 'fixed'; + popup.style.top = '50%'; + popup.style.left = '50%'; + popup.style.transform = 'translate(-50%, -50%)'; + popup.style.backgroundColor = '#fff'; + popup.style.padding = '20px'; + popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)'; + popup.style.zIndex = '1000'; + + + var heading = document.createElement('h2'); + heading.textContent = 'Alert'; + heading.style.color = 'red'; + heading.style.textAlign = 'left'; + heading.style.marginBottom = '10px'; + 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.style.wordWrap = 'break-word'; + message.style.width = '250px'; + popup.appendChild(message); + + + var buttonsContainer = document.createElement('div'); + buttonsContainer.style.display = 'grid'; + buttonsContainer.style.gridTemplateColumns = '1fr'; // Single column layout + buttonsContainer.style.gap = '10px'; + buttonsContainer.style.textAlign = 'center'; + buttonsContainer.style.marginTop = '20px'; + + + var link1 = document.createElement('a'); + link1.href = 'https://store.themeisle.com/'; + link1.target = '_blank'; + var button1 = document.createElement('button'); + button1.textContent = 'Renew License'; + button1.style.padding = '10px 20px'; + button1.style.cursor = 'pointer'; + button1.style.backgroundColor = 'blue'; + button1.style.color = 'white'; + link1.appendChild(button1); + buttonsContainer.appendChild(link1); + + + var link2 = document.createElement('a'); + link2.href = '/wp-admin/options-general.php#visualizer_pro_license'; + var button2 = document.createElement('button'); + button2.textContent = 'Activate License'; + button2.style.padding = '10px 20px'; + button2.style.cursor = 'pointer'; + button2.style.backgroundColor = 'green'; + button2.style.color = 'white'; + link2.appendChild(button2); + buttonsContainer.appendChild(link2); + + popup.appendChild(buttonsContainer); + + document.body.appendChild(popup); + + popup.style.display = 'block'; +} + (function ($, vmv, vu) { var resizeTimeout; @@ -164,6 +237,7 @@ }); $(".visualizer-chart-image").on("click", function () { + createPopup(); $('body').trigger('visualizer:action:specificchart', {action: 'image', id: $(this).attr("data-chart"), data: null, dataObj: {name: $(this).attr("data-chart-title")}}); return false; }); @@ -185,4 +259,4 @@ }); $('.visualizer-chart:not(.visualizer-chart-display), .visualizer-library-pagination').fadeIn(500); }); -})(jQuery, visualizer.media.view, visualizer.urls); \ No newline at end of file +})(jQuery, visualizer.media.view, visualizer.urls); From 4743e29f88cdcda0b57bd9be31bc76434b9d9fbe Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 14:00:58 +0300 Subject: [PATCH 02/11] chore: style changes for renew notice --- js/library.js | 98 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 85 insertions(+), 13 deletions(-) diff --git a/js/library.js b/js/library.js index 9f34be3d..133bf18a 100644 --- a/js/library.js +++ b/js/library.js @@ -34,27 +34,48 @@ })(wp.media.view); function createPopup() { - if ( visualizer.is_pro ) { - return; - } + + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'; + document.head.appendChild(link); var popup = document.createElement('div'); + var closeIcon = document.createElement('i'); + closeIcon.classList.add('dashicons', 'dashicons-no', 'close-icon'); + closeIcon.addEventListener('click', function() { + popup.style.display = 'none'; + }); + closeIcon.style.position = 'absolute'; + closeIcon.style.top = '10px'; + closeIcon.style.right = '10px'; + closeIcon.style.cursor = 'pointer'; + closeIcon.style.color = '#333'; + closeIcon.classList.add('fas', 'fa-times', 'close-icon'); + popup.appendChild(closeIcon); popup.style.display = 'none'; + popup.style.position = 'fixed'; popup.style.top = '50%'; popup.style.left = '50%'; popup.style.transform = 'translate(-50%, -50%)'; popup.style.backgroundColor = '#fff'; + popup.style.zIndex = '1000'; + popup.style.backgroundColor = '#fff'; popup.style.padding = '20px'; - popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)'; + popup.style.border = '1px solid #ccc'; + popup.style.borderRadius = '8px'; + popup.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; popup.style.zIndex = '1000'; + popup.style.maxWidth = '400px'; + popup.style.fontWeight = 'bold'; + popup.style.marginBottom = '20px'; - - var heading = document.createElement('h2'); - heading.textContent = 'Alert'; - heading.style.color = 'red'; + var heading = document.createElement('h1'); + heading.textContent = 'Alert!'; + heading.style.color = '#d32f2f'; heading.style.textAlign = 'left'; heading.style.marginBottom = '10px'; popup.appendChild(heading); @@ -79,11 +100,22 @@ function createPopup() { link1.href = 'https://store.themeisle.com/'; link1.target = '_blank'; var button1 = document.createElement('button'); - button1.textContent = 'Renew License'; + button1.innerHTML = ' Renew License'; // Add shopping cart icon button1.style.padding = '10px 20px'; button1.style.cursor = 'pointer'; - button1.style.backgroundColor = 'blue'; + button1.style.backgroundColor = '#008CBA'; button1.style.color = 'white'; + button1.style.border = 'none'; + button1.style.textAlign = 'center'; + button1.style.textDecoration = 'none'; + button1.style.display = 'inline-block'; + button1.style.fontSize = '16px'; + button1.style.width = '200px'; + button1.style.height = '50px'; + button1.style.borderRadius = '4px'; + button1.style.transition = 'background-color 0.3s'; + button1.style.fontWeight = 'bold'; + button1.style.marginTop = '10px'; link1.appendChild(button1); buttonsContainer.appendChild(link1); @@ -91,11 +123,22 @@ function createPopup() { var link2 = document.createElement('a'); link2.href = '/wp-admin/options-general.php#visualizer_pro_license'; var button2 = document.createElement('button'); - button2.textContent = 'Activate License'; + button2.innerHTML = ' Activate License'; button2.style.padding = '10px 20px'; button2.style.cursor = 'pointer'; - button2.style.backgroundColor = 'green'; + button2.style.backgroundColor = '#4CAF50'; button2.style.color = 'white'; + button2.style.border = 'none'; + button2.style.textAlign = 'center'; + button2.style.textDecoration = 'none'; + button2.style.display = 'inline-block'; + button2.style.fontSize = '16px'; + button2.style.width = '200px'; + button2.style.height = '50px'; + button2.style.borderRadius = '4px'; + button2.style.transition = 'background-color 0.3s'; + button2.style.fontWeight = 'bold'; + button2.style.marginTop = '10px'; link2.appendChild(button2); buttonsContainer.appendChild(link2); @@ -150,6 +193,14 @@ function createPopup() { }); $('.visualizer-chart-shortcode').click(function (e) { + + if ( ! visualizer.is_pro ) { + createPopup(); + e.preventDefault(); + e.stopPropagation(); + return; + } + var range, selection; if (window.getSelection && document.createRange) { @@ -200,6 +251,12 @@ function createPopup() { }); $('.visualizer-chart-edit').click(function () { + + if ( ! visualizer.is_pro ) { + createPopup(); + return; + } + var wnd = window; var view = new vmv.Chart( { action: vu.edit.indexOf('&chart') != -1 ? vu.edit : vu.edit + '&chart=' + $(this).attr('data-chart') @@ -214,8 +271,20 @@ function createPopup() { return false; }); + $(".visualizer-chart-clone").on("click", function ( event ) { + if ( ! visualizer.is_pro ) { + createPopup(); + event.preventDefault(); + } + }); $(".visualizer-chart-export").on("click", function () { + + if ( ! visualizer.is_pro ) { + createPopup(); + return; + } + $.ajax({ url: $(this).attr("data-chart"), method: "get", @@ -237,7 +306,10 @@ function createPopup() { }); $(".visualizer-chart-image").on("click", function () { - createPopup(); + if ( ! visualizer.is_pro ) { + createPopup(); + return; + } $('body').trigger('visualizer:action:specificchart', {action: 'image', id: $(this).attr("data-chart"), data: null, dataObj: {name: $(this).attr("data-chart-title")}}); return false; }); From 6cee5e5f9b21f1232df409fca80fa8958dead6cb Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 14:16:12 +0300 Subject: [PATCH 03/11] chore: added pro_user variable to charts backend page --- classes/Visualizer/Module/Admin.php | 1 + js/library.js | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/classes/Visualizer/Module/Admin.php b/classes/Visualizer/Module/Admin.php index 5b09cc56..b50bd3d8 100644 --- a/classes/Visualizer/Module/Admin.php +++ b/classes/Visualizer/Module/Admin.php @@ -1037,6 +1037,7 @@ public function renderLibraryPage() { 'copied' => __( 'The shortcode has been copied to your clipboard. Hit Ctrl-V/Cmd-V to paste it.', 'visualizer' ), '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(), ) ); // render library page diff --git a/js/library.js b/js/library.js index 133bf18a..29cdb900 100644 --- a/js/library.js +++ b/js/library.js @@ -194,7 +194,7 @@ function createPopup() { $('.visualizer-chart-shortcode').click(function (e) { - if ( ! visualizer.is_pro ) { + if ( ! visualizer.is_pro_user ) { createPopup(); e.preventDefault(); e.stopPropagation(); @@ -252,7 +252,7 @@ function createPopup() { $('.visualizer-chart-edit').click(function () { - if ( ! visualizer.is_pro ) { + if ( ! visualizer.is_pro_user ) { createPopup(); return; } @@ -272,7 +272,7 @@ function createPopup() { return false; }); $(".visualizer-chart-clone").on("click", function ( event ) { - if ( ! visualizer.is_pro ) { + if ( ! visualizer.is_pro_user ) { createPopup(); event.preventDefault(); } @@ -280,7 +280,7 @@ function createPopup() { $(".visualizer-chart-export").on("click", function () { - if ( ! visualizer.is_pro ) { + if ( ! visualizer.is_pro_user ) { createPopup(); return; } @@ -306,7 +306,7 @@ function createPopup() { }); $(".visualizer-chart-image").on("click", function () { - if ( ! visualizer.is_pro ) { + if ( ! visualizer.is_pro_user ) { createPopup(); return; } From 971dc95228b37236c6f0fce34bc0dee369784407 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 14:34:37 +0300 Subject: [PATCH 04/11] chore: added overlay for renew notice --- js/library.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/js/library.js b/js/library.js index 29cdb900..c0d00f09 100644 --- a/js/library.js +++ b/js/library.js @@ -35,6 +35,17 @@ function createPopup() { + var overlay = document.createElement('div'); + overlay.id = 'overlay-visualizer'; + overlay.style.position = 'fixed'; + overlay.style.top = '0'; + overlay.style.left = '0'; + overlay.style.width = '100%'; + overlay.style.height = '100%'; + overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; + overlay.style.zIndex = '999'; + document.body.appendChild(overlay); + var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'; @@ -45,6 +56,7 @@ function createPopup() { var closeIcon = document.createElement('i'); closeIcon.classList.add('dashicons', 'dashicons-no', 'close-icon'); closeIcon.addEventListener('click', function() { + document.body.removeChild(overlay); popup.style.display = 'none'; }); closeIcon.style.position = 'absolute'; From 666ba8b60f526cd1d89444071aa70366ca2a5083 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 15:09:23 +0300 Subject: [PATCH 05/11] restrict renew notice to pro charts --- classes/Visualizer/Render/Library.php | 19 ++++++++++++++----- js/library.js | 10 +++++----- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php index 70d7a429..5ea25eea 100644 --- a/classes/Visualizer/Render/Library.php +++ b/classes/Visualizer/Render/Library.php @@ -337,6 +337,15 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal admin_url( 'admin-ajax.php' ) ) ); + $chart_type = get_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_TYPE, true ); + + $types = apply_filters( 'visualizer_pro_chart_types', [] ); + + $pro_class =''; + + if ( ! empty( $chart_type ) && isset( $types[ $chart_type ] ) ) { + $pro_class = 'is_pro'; + } $chart_status = array( 'date' => get_the_modified_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $chart_id ), 'error' => get_post_meta( $chart_id, Visualizer_Plugin::CF_ERROR, true ), 'icon' => 'dashicons-yes-alt', 'title' => 'A-OK!' ); if ( ! empty( $chart_status['error'] ) ) { @@ -358,13 +367,13 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal echo '
'; echo '
'; echo '' . esc_attr__( 'Delete', 'visualizer' ) . ''; - echo '' . esc_attr__( 'Copy Shortcode', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Copy Shortcode', 'visualizer' ) . ''; if ( $this->can_chart_have_action( 'image', $chart_id ) ) { - echo '' . esc_attr__( 'Download PNG', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Download PNG', 'visualizer' ) . ''; } - echo '' . esc_attr__( 'Export CSV', 'visualizer' ) . ''; - echo '' . esc_attr__( 'Duplicate', 'visualizer' ) . ''; - echo '' . esc_attr__( 'Edit', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Export CSV', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Duplicate', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Edit', 'visualizer' ) . ''; echo '
'; do_action( 'visualizer_chart_languages', $chart_id ); echo '
(' . $chart_id . '): ' . $chart_status['date'] . '
'; diff --git a/js/library.js b/js/library.js index c0d00f09..28dd38a2 100644 --- a/js/library.js +++ b/js/library.js @@ -206,7 +206,7 @@ function createPopup() { $('.visualizer-chart-shortcode').click(function (e) { - if ( ! visualizer.is_pro_user ) { + if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { createPopup(); e.preventDefault(); e.stopPropagation(); @@ -264,7 +264,7 @@ function createPopup() { $('.visualizer-chart-edit').click(function () { - if ( ! visualizer.is_pro_user ) { + if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { createPopup(); return; } @@ -284,7 +284,7 @@ function createPopup() { return false; }); $(".visualizer-chart-clone").on("click", function ( event ) { - if ( ! visualizer.is_pro_user ) { + if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { createPopup(); event.preventDefault(); } @@ -292,7 +292,7 @@ function createPopup() { $(".visualizer-chart-export").on("click", function () { - if ( ! visualizer.is_pro_user ) { + if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { createPopup(); return; } @@ -318,7 +318,7 @@ function createPopup() { }); $(".visualizer-chart-image").on("click", function () { - if ( ! visualizer.is_pro_user ) { + if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { createPopup(); return; } From b0fb0dea61bbfda98f7fe22de8a8c51d120c95b3 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 15:12:45 +0300 Subject: [PATCH 06/11] chore: fix small typo --- js/library.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/library.js b/js/library.js index 28dd38a2..19f10384 100644 --- a/js/library.js +++ b/js/library.js @@ -206,7 +206,7 @@ function createPopup() { $('.visualizer-chart-shortcode').click(function (e) { - if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && e.target.classList.contains('is_pro') ) { createPopup(); e.preventDefault(); e.stopPropagation(); @@ -262,9 +262,9 @@ function createPopup() { return false; }); - $('.visualizer-chart-edit').click(function () { + $('.visualizer-chart-edit').click(function (event) { - if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { createPopup(); return; } @@ -284,15 +284,15 @@ function createPopup() { return false; }); $(".visualizer-chart-clone").on("click", function ( event ) { - if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { createPopup(); event.preventDefault(); } }); - $(".visualizer-chart-export").on("click", function () { + $(".visualizer-chart-export").on("click", function (event) { - if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { createPopup(); return; } @@ -317,8 +317,8 @@ function createPopup() { return false; }); - $(".visualizer-chart-image").on("click", function () { - if ( ! visualizer.is_pro_user && element.classList.contains('is_pro') ) { + $(".visualizer-chart-image").on("click", function (event) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { createPopup(); return; } From 797064cd5c63ebf0897714cadbbbeae0f5171d3c Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 15:15:14 +0300 Subject: [PATCH 07/11] lint code --- classes/Visualizer/Render/Library.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php index 5ea25eea..8808fcc2 100644 --- a/classes/Visualizer/Render/Library.php +++ b/classes/Visualizer/Render/Library.php @@ -341,7 +341,7 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal $types = apply_filters( 'visualizer_pro_chart_types', [] ); - $pro_class =''; + $pro_class = ''; if ( ! empty( $chart_type ) && isset( $types[ $chart_type ] ) ) { $pro_class = 'is_pro'; @@ -367,13 +367,13 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal echo '
'; echo '
'; echo '' . esc_attr__( 'Delete', 'visualizer' ) . ''; - echo '' . esc_attr__( 'Copy Shortcode', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Copy Shortcode', 'visualizer' ) . ''; if ( $this->can_chart_have_action( 'image', $chart_id ) ) { - echo '' . esc_attr__( 'Download PNG', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Download PNG', 'visualizer' ) . ''; } - echo '' . esc_attr__( 'Export CSV', 'visualizer' ) . ''; - echo '' . esc_attr__( 'Duplicate', 'visualizer' ) . ''; - echo '' . esc_attr__( 'Edit', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Export CSV', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Duplicate', 'visualizer' ) . ''; + echo '' . esc_attr__( 'Edit', 'visualizer' ) . ''; echo '
'; do_action( 'visualizer_chart_languages', $chart_id ); echo '
(' . $chart_id . '): ' . $chart_status['date'] . '
'; From 08c206e39881827773a61c72b7129426fb21c235 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 19:41:50 +0300 Subject: [PATCH 08/11] created css classes for renew notice --- css/library.css | 89 ++++++++++++++++++++++++++++++++++++-- js/library.js | 111 +++++++++--------------------------------------- 2 files changed, 106 insertions(+), 94 deletions(-) diff --git a/css/library.css b/css/library.css index eefff96d..5fdd3c07 100644 --- a/css/library.css +++ b/css/library.css @@ -138,8 +138,8 @@ .visualizer-chart-action .tooltip-text::before { content: ''; position: absolute; - display: block; - width: 0px; + display: block; + width: 0px; left: 50%; top: 0; border: 10px solid transparent; @@ -253,8 +253,8 @@ justify-content: center; } .visualizer-sidebar-box .we-offer{ - background-color: transparent; - color: #007CBA; + background-color: transparent; + color: #007CBA; font-weight: 400; padding: 0px; font-size: 14px; @@ -518,3 +518,84 @@ div#visualizer-types ul, div#visualizer-types form p { height: calc(100% - 24px); } } + + + +.vizualizer-renew-notice-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 999; +} + +.vizualizer-renew-notice-popup { + display: block; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + z-index: 1000; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + max-width: 400px; + font-weight: bold; + margin-bottom: 20px; +} + +.vizualizer-renew-notice-heading { + color: #d32f2f; + text-align: left; + margin-bottom: 10px; +} + +.vizualizer-renew-notice-message { + word-wrap: break-word; + width: 250px; +} + +.vizualizer-renew-notice-buttons-container { + display: grid; + grid-template-columns: 1fr; + gap: 10px; + text-align: center; + margin-top: 20px; +} + +.vizualizer-renew-notice-button { + padding: 10px 20px; + cursor: pointer; + color: white; + border: none; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + width: 200px; + height: 50px; + border-radius: 4px; + transition: background-color 0.3s; + font-weight: bold; + margin-top: 10px; +} + +.vizualizer-renew-notice-renew-button { + background-color: #008CBA; +} + +.vizualizer-renew-notice-activate-button { + background-color: #4CAF50; +} + +.vizualizer-renew-notice-close-icon { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + color: #333; +} diff --git a/js/library.js b/js/library.js index ff271179..c57b2080 100644 --- a/js/library.js +++ b/js/library.js @@ -33,132 +33,63 @@ }); })(wp.media.view); -function createPopup() { - - var overlay = document.createElement('div'); - overlay.id = 'overlay-visualizer'; - overlay.style.position = 'fixed'; - overlay.style.top = '0'; - overlay.style.left = '0'; - overlay.style.width = '100%'; - overlay.style.height = '100%'; - overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; - overlay.style.zIndex = '999'; - document.body.appendChild(overlay); +function createPopupProBlocker() { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'; document.head.appendChild(link); + 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 closeIcon = document.createElement('i'); - closeIcon.classList.add('dashicons', 'dashicons-no', 'close-icon'); + closeIcon.classList.add('fas', 'fa-times', 'vizualizer-renew-notice-close-icon'); closeIcon.addEventListener('click', function() { document.body.removeChild(overlay); popup.style.display = 'none'; }); - closeIcon.style.position = 'absolute'; - closeIcon.style.top = '10px'; - closeIcon.style.right = '10px'; - closeIcon.style.cursor = 'pointer'; - closeIcon.style.color = '#333'; - closeIcon.classList.add('fas', 'fa-times', 'close-icon'); popup.appendChild(closeIcon); - popup.style.display = 'none'; - - popup.style.position = 'fixed'; - popup.style.top = '50%'; - popup.style.left = '50%'; - popup.style.transform = 'translate(-50%, -50%)'; - popup.style.backgroundColor = '#fff'; - popup.style.zIndex = '1000'; - popup.style.backgroundColor = '#fff'; - popup.style.padding = '20px'; - popup.style.border = '1px solid #ccc'; - popup.style.borderRadius = '8px'; - popup.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; - popup.style.zIndex = '1000'; - popup.style.maxWidth = '400px'; - popup.style.fontWeight = 'bold'; - popup.style.marginBottom = '20px'; - var heading = document.createElement('h1'); heading.textContent = 'Alert!'; - heading.style.color = '#d32f2f'; - heading.style.textAlign = 'left'; - heading.style.marginBottom = '10px'; + 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.style.wordWrap = 'break-word'; - message.style.width = '250px'; + message.classList.add('vizualizer-renew-notice-message'); popup.appendChild(message); - var buttonsContainer = document.createElement('div'); - buttonsContainer.style.display = 'grid'; - buttonsContainer.style.gridTemplateColumns = '1fr'; // Single column layout - buttonsContainer.style.gap = '10px'; - buttonsContainer.style.textAlign = 'center'; - buttonsContainer.style.marginTop = '20px'; - + buttonsContainer.classList.add('vizualizer-renew-notice-buttons-container'); var link1 = document.createElement('a'); link1.href = 'https://store.themeisle.com/'; link1.target = '_blank'; var button1 = document.createElement('button'); - button1.innerHTML = ' Renew License'; // Add shopping cart icon - button1.style.padding = '10px 20px'; - button1.style.cursor = 'pointer'; - button1.style.backgroundColor = '#008CBA'; - button1.style.color = 'white'; - button1.style.border = 'none'; - button1.style.textAlign = 'center'; - button1.style.textDecoration = 'none'; - button1.style.display = 'inline-block'; - button1.style.fontSize = '16px'; - button1.style.width = '200px'; - button1.style.height = '50px'; - button1.style.borderRadius = '4px'; - button1.style.transition = 'background-color 0.3s'; - button1.style.fontWeight = 'bold'; - button1.style.marginTop = '10px'; + button1.innerHTML = ' 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 = '/wp-admin/options-general.php#visualizer_pro_license'; var button2 = document.createElement('button'); - button2.innerHTML = ' Activate License'; - button2.style.padding = '10px 20px'; - button2.style.cursor = 'pointer'; - button2.style.backgroundColor = '#4CAF50'; - button2.style.color = 'white'; - button2.style.border = 'none'; - button2.style.textAlign = 'center'; - button2.style.textDecoration = 'none'; - button2.style.display = 'inline-block'; - button2.style.fontSize = '16px'; - button2.style.width = '200px'; - button2.style.height = '50px'; - button2.style.borderRadius = '4px'; - button2.style.transition = 'background-color 0.3s'; - button2.style.fontWeight = 'bold'; - button2.style.marginTop = '10px'; + button2.innerHTML = ' Activate License'; + button2.classList.add('vizualizer-renew-notice-button', 'vizualizer-renew-notice-activate-button'); link2.appendChild(button2); buttonsContainer.appendChild(link2); - popup.appendChild(buttonsContainer); + popup.appendChild(buttonsContainer); document.body.appendChild(popup); - popup.style.display = 'block'; } (function ($, vmv, vu) { @@ -207,7 +138,7 @@ function createPopup() { $('.visualizer-chart-shortcode').click(function (e) { if ( ! visualizer.is_pro_user && e.target.classList.contains('is_pro') ) { - createPopup(); + createPopupProBlocker(); e.preventDefault(); e.stopPropagation(); return; @@ -265,7 +196,7 @@ function createPopup() { $('.visualizer-chart-edit').click(function (event) { if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { - createPopup(); + createPopupProBlocker(); return; } @@ -285,7 +216,7 @@ function createPopup() { }); $(".visualizer-chart-clone").on("click", function ( event ) { if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { - createPopup(); + createPopupProBlocker(); event.preventDefault(); } }); @@ -293,7 +224,7 @@ function createPopup() { $(".visualizer-chart-export").on("click", function (event) { if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { - createPopup(); + createPopupProBlocker(); return; } @@ -319,7 +250,7 @@ function createPopup() { $(".visualizer-chart-image").on("click", function (event) { if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { - createPopup(); + createPopupProBlocker(); return; } $('body').trigger('visualizer:action:specificchart', {action: 'image', id: $(this).attr("data-chart"), data: null, dataObj: {name: $(this).attr("data-chart-title")}}); From c7ff58a719c4689b52c19d8e98d771c13ebeb4d7 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 19:48:07 +0300 Subject: [PATCH 09/11] small rename --- classes/Visualizer/Render/Library.php | 2 +- js/library.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php index a8cedd16..f6e33698 100644 --- a/classes/Visualizer/Render/Library.php +++ b/classes/Visualizer/Render/Library.php @@ -347,7 +347,7 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal $pro_class = ''; if ( ! empty( $chart_type ) && isset( $types[ $chart_type ] ) ) { - $pro_class = 'is_pro'; + $pro_class = 'viz-is-pro-chart'; } $chart_status = array( 'date' => get_the_modified_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $chart_id ), 'error' => get_post_meta( $chart_id, Visualizer_Plugin::CF_ERROR, true ), 'icon' => 'dashicons-yes-alt', 'title' => 'A-OK!' ); diff --git a/js/library.js b/js/library.js index c57b2080..bb270225 100644 --- a/js/library.js +++ b/js/library.js @@ -137,7 +137,7 @@ function createPopupProBlocker() { $('.visualizer-chart-shortcode').click(function (e) { - if ( ! visualizer.is_pro_user && e.target.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && e.target.classList.contains('viz-is-pro-chart') ) { createPopupProBlocker(); e.preventDefault(); e.stopPropagation(); @@ -195,7 +195,7 @@ function createPopupProBlocker() { $('.visualizer-chart-edit').click(function (event) { - if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) { createPopupProBlocker(); return; } @@ -215,7 +215,7 @@ function createPopupProBlocker() { return false; }); $(".visualizer-chart-clone").on("click", function ( event ) { - if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) { createPopupProBlocker(); event.preventDefault(); } @@ -223,7 +223,7 @@ function createPopupProBlocker() { $(".visualizer-chart-export").on("click", function (event) { - if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) { createPopupProBlocker(); return; } @@ -249,7 +249,7 @@ function createPopupProBlocker() { }); $(".visualizer-chart-image").on("click", function (event) { - if ( ! visualizer.is_pro_user && event.target.classList.contains('is_pro') ) { + if ( ! visualizer.is_pro_user && event.target.classList.contains('viz-is-pro-chart') ) { createPopupProBlocker(); return; } From 6eae947e2261e7a3c88997d964948969e24e8fc6 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 21:42:41 +0300 Subject: [PATCH 10/11] chore: added pro charts list --- classes/Visualizer/Render/Library.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php index f6e33698..dcfe2079 100644 --- a/classes/Visualizer/Render/Library.php +++ b/classes/Visualizer/Render/Library.php @@ -342,11 +342,11 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal ); $chart_type = get_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_TYPE, true ); - $types = apply_filters( 'visualizer_pro_chart_types', [] ); + $types = ['area', 'geo', 'column', 'bubble', 'scatter', 'gauge', 'candlestick', 'timeline', 'combo', 'polarArea', 'radar' ]; $pro_class = ''; - if ( ! empty( $chart_type ) && isset( $types[ $chart_type ] ) ) { + if ( ! empty( $chart_type ) && in_array( $chart_type, $types) ) { $pro_class = 'viz-is-pro-chart'; } @@ -378,6 +378,7 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal echo '' . esc_attr__( 'Duplicate', 'visualizer' ) . ''; echo '' . esc_attr__( 'Edit', 'visualizer' ) . ''; echo '
'; + error_log($chart_id); do_action( 'visualizer_chart_languages', $chart_id ); echo '
(' . $chart_id . '): ' . $chart_status['date'] . '
'; echo '
'; From 71437dcce721f210565a60ccf9541088227cdf21 Mon Sep 17 00:00:00 2001 From: GrigoreMihai Date: Fri, 10 May 2024 21:45:02 +0300 Subject: [PATCH 11/11] lint code --- classes/Visualizer/Render/Library.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php index dcfe2079..84bf5b18 100644 --- a/classes/Visualizer/Render/Library.php +++ b/classes/Visualizer/Render/Library.php @@ -346,7 +346,7 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal $pro_class = ''; - if ( ! empty( $chart_type ) && in_array( $chart_type, $types) ) { + if ( ! empty( $chart_type ) && in_array( $chart_type, $types, true ) ) { $pro_class = 'viz-is-pro-chart'; } @@ -378,7 +378,6 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal echo '' . esc_attr__( 'Duplicate', 'visualizer' ) . ''; echo '' . esc_attr__( 'Edit', 'visualizer' ) . ''; echo ''; - error_log($chart_id); do_action( 'visualizer_chart_languages', $chart_id ); echo '
(' . $chart_id . '): ' . $chart_status['date'] . '
'; echo '';