Added animation on action buttons

* 1.4.1 Added animation on action buttons * Update data file button shows animated icon on download action * Run the scan button shows animated icon on run action * cleaned up some javascript on the buttons, now using jquery
herbie4 · May 30, 2024 · 8619161 · 8619161
1 parent da29587
commit 8619161
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 **MainWP check vulnerability extension**
 
 **Changelog:**
+* 1.4.1 Added animation on action buttons
+  * Update data file button shows animated icon on download action
+  * Run the scan button shows animated icon on run action
+  * cleaned up some javascript on the buttons, now using jquery
 * 1.4.0 New plugin updater
   * added: plugin updater
   * removed: updater class

diff --git a/class/class-dashboard.php b/class/class-dashboard.php
@@ -1,6 +1,6 @@
 <?php
 // mwpcpv dashboard
-// version: 1.2.1
+// version: 1.2.2
 // ---------------------
 
  class MainWPCheckPluginVulnerability extends MainWPCheckPluginVulnerabilityActivator {
@@ -122,9 +122,10 @@ public static function hhdev_mwpcpv_render_page() {
               } ?></p>
            <p><input name="mwpcpv-get-data-file" type="hidden" value="1" /></p>
 
-           <p><a class="ui button green" href="#" onclick="javascript:document.getElementById('data-update').submit();"><?php _e('Update data file','hhdev-mwpcpv'); ?></a></p>
+           <p><a id="dl-button" class="ui button green" href="#"><?php _e('Update data file','hhdev-mwpcpv'); ?></a>&nbsp;&nbsp;<span class="loader dl-loader" style="display:none;"></span></p>
           </form>
 
+
         </div>
         </div>
 
@@ -148,6 +149,14 @@ public static function hhdev_mwpcpv_render_page() {
               $('#toggle-novuln').removeClass('active').css("background-color","#7FB100");
             }
            });
+           $( "#dl-button" ).on( "click", function() {
+             $('.dl-loader').css('display','inline-block');
+             $('#data-update').submit();
+           });
+           $( "#run-button" ).on( "click", function() {
+             $('.run-loader').css('display','inline-block');
+             $('#run-scan').submit();
+           });
          });
          </script>
          <style>
@@ -158,6 +167,8 @@ public static function hhdev_mwpcpv_render_page() {
          #mainwp-page-navigation-wrapper, .mainwp-page-navigation {display: none !important;min-width: 0px;}
          .mainwp-individual-site-view #mainwp-site-mode-wrap { width: 100%; float: none;}
          #mainwp_custom_dashboard_extension .ui.segment.website { margin-bottom: 10px; max-width: 680px; margin-left: 10px; border: 1px solid #ccc; border-radius: 0.28571429rem;}
+         /* loader icon */
+         .loader { width: 28px; height: 28px; border: 5px solid #FFF; border-bottom-color: transparent; border-radius: 50%; vertical-align: middle; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
          -->
          </style>
          <div class='ui segment'>
@@ -177,7 +188,7 @@ public static function hhdev_mwpcpv_render_page() {
             echo '&nbsp;'.$MainWPCheckPluginVulnerabilityActivator->hhdev_get_groups_dropdown($selected_group);
             echo '</div>';
           ?>
-          <div class="sub header"><a class="ui button green" href="#" onclick="javascript:document.getElementById('run-scan').submit();"><?php _e('Run the scan!','hhdev-mwpcpv'); ?></a></div>
+          <div class="sub header"><a id="run-button" class="ui button green" href="#"><?php _e('Run the scan!','hhdev-mwpcpv'); ?></a> &nbsp;&nbsp;<span class="loader run-loader" style="display:none;"></span></div>
         <?php } // end if file exist ?>
 
          </form>

diff --git a/hhdev-mwpcpv.php b/hhdev-mwpcpv.php
@@ -3,7 +3,7 @@
  * Plugin Name: MainWP Check Plugins Vulnerability Extension
  * Plugin URI: https://haha.nl
  * Description: MainWP Extension: Use this extension to check the installed child site plugins for vulnerabilities using data from the wordfence vulnerability data feed api.
- * Version: 1.4.0
+ * Version: 1.4.1
  * Author: herbert hoekstra - haha!
  * Author URI: https://haha.nl
  * Documentation URI: https://haha.nl/voorbeelden/mainwp-check-plugins-vulnerability-extension/
@@ -42,7 +42,7 @@ class MainWPCheckPluginVulnerabilityActivator
     protected $childFile;
    	protected $plugin_handle = 'mainwp-check-plugins-vulnerability';
     protected $product_id = 'MainWP Check Plugins Vulnerability Extension';
-  	protected $software_version = '1.4.0';  // used for mwp update notice
+  	protected $software_version = '1.4.1';  // used for mwp update notice
 
     // set custom plugin vars
     // -------------------