we want comments in code and better text

Author: Mte90

README.txt

@@ -13,7 +13,7 @@ See a flowchart of the hooks of the page!
 == Description ==
 
 All the hooks will showed in different flowchart in SVG format that you can download as PNG to study!  
-In the settings page is possible set the parent hook to exclude.
+In the settings page is possible set the parent hooks to exclude.
 
 The support for download as PNG not works on WebKit based browser.  
 
@@ -42,20 +42,11 @@ Check the screenshots!
 2. Extract the `hook-flowchart` directory to your computer
 3. Upload the `hook-flowchart` directory to the `/wp-content/plugins/` directory
 4. Activate the plugin in the Plugin dashboard
-== Frequently Asked Questions ==
-
-= A question that someone might have =
-
-An answer to that question.
-
-= What about foo bar? =
-
-Answer to foo bar dilemma.
 
 == Screenshots ==
 
 1. The window opened with all the flowcharts.
-2. The flowchart download for a specific parent hook
+2. The hook flowchart downloaded for a specific parent hook
 
 == Changelog ==
 

assets/screenshot-1.png

@@ -81,8 +81,8 @@ text.actor {
 .noteText {
   fill: black;
   stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
+  font-family: "Open Sans",sans-serif;
+  font-size: 13px;
 }
 /** Section styling */
 .section {
@@ -251,7 +251,7 @@ text.actor {
 
 */
 text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
+  font-family: "Open Sans",sans-serif;
+  font-size: 13px;
 }
 

assets/screenshot-2.png

@@ -1,27 +1,36 @@
 document.addEventListener('DOMContentLoaded', function () {
   var i = 0;
+  //The download as png doesn't work on WebKit
   var isWebkit = 'WebkitAppearance' in document.documentElement.style;
+  //Prepare mermaid
   mermaid.initialize({
     flowchart: {
       useMaxWidth: false
     }});
+  //Parse every hook
   [].forEach.call(document.querySelectorAll('.mermaid-noise'), function (el) {
     i++;
+    //Get the markdown text
     var convert = el.innerHTML;
     convert = convert.replace(/\[n\]/g, "\n");
+    //Get the hook name
     var hook = convert.slice(15).split(']');
     hook = hook[0];
+    
     document.querySelector('.body').innerHTML += "<h3 id='" + hook + "'>Hook " + hook + "</h3>";
     document.querySelector('.buttons').innerHTML += "<a href='#" + hook + "' class='button'>" + hook + "</a><input type='checkbox' data-hook='" + hook + "' data-id='" + i + "' alt='Hide' title='Hide' class='hide-hook' style='margin-top:3px'/>";
     if (!isWebkit) {
       document.querySelector('.body').innerHTML += "<button class='button button-primary mermaid-download' data-id='" + i + "'>Download</button>";
     }
     document.querySelector('.body').innerHTML += "<div class='mermaid-" + i + "'>" + convert + "</div><hr data-id='" + i + "'>";
+    //Generate the flowchart
     mermaid.init(".mermaid-" + i);
   });
+  //Go to top
   document.querySelector('button.gotop').addEventListener('click', function () {
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   });
+  //Hide system for hooks
   [].forEach.call(document.querySelectorAll('.hide-hook'), function (e) {
     e.addEventListener('click', function () {
       if (e.checked) {
@@ -36,6 +45,7 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     });
   });
+  //Download system
   if (!isWebkit) {
     [].forEach.call(document.querySelectorAll('button.mermaid-download'), function (e) {
       e.addEventListener('click', function () {
@@ -44,39 +54,48 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     function svgToPng(source) {
-      var name = source.querySelector('#a div').innerHTML;
+      //Prepare the canvas
       var canvas = document.createElement("canvas");
       canvas.setAttribute('width', source.getBBox().width);
       canvas.setAttribute('height', source.getBBox().height);
       var ctx = canvas.getContext("2d");
+      //Prepare the image
       var img = new Image();
+      //this doesn't work but maybe enalbe the support for webkit
       img.setAttribute('crossOrigin', 'anonymous');
       img.crossOrigin = "Anonymous";
+      //Get the hook name 
+      var name = source.querySelector('#a div').innerHTML;
       var svgString = new XMLSerializer().serializeToString(source);
       //Hack for Mermaid to replace div to text object
       svgString = svgString.replace(/div/g, "text");
-      //Hack for mermaid for text alignment
-      svgString = svgString.replace(/translate\(0\,0\)/g, 'translate(-2,0)');
+      //Convert the svg string in a blob
       var svg = new Blob([svgString], {
         type: "image/svg+xml;charset=utf-8"
       });
+      //Convert as an URL
       var url = window.URL.createObjectURL(svg);
       img.onload = function () {
         ctx.drawImage(img, 0, 0);
         var png = canvas.toDataURL("image/png");
+        //Generate a img tag
         var target = document.createElement('img');
         target.className = "on-the-fly";
+        //We pass the empty canvas
         target.src = png;
         document.body.appendChild(target);
         window.URL.revokeObjectURL(png);
       };
+      //Add the URL in the img
       img.src = url;
+      //Little timeout to get the image
       var timeout = window.setTimeout(function () {
         var a = document.createElement('a');
         a.download = name + '.png';
         a.href = document.querySelector('.on-the-fly').src;
         document.body.appendChild(a);
-        a.addEventListener("click", function (e) {
+        a.addEventListener("click", function () {
+          //Cleaning
           a.parentNode.removeChild(a);
           document.querySelector('.on-the-fly').parentNode.removeChild(document.querySelector('.on-the-fly'));
         });

public/assets/css/mermaid.css

@@ -68,6 +68,15 @@ class Hook_Flowchart {
 	 */
 	protected static $instance = null;
 
+	/**
+	 * Hooks
+	 *
+	 * @since    1.0.0
+	 *
+	 * @var      array
+	 */
+	protected $hooks = null;
+
 	/**
 	 * Initialize the plugin by loading admin scripts & styles and adding a
 	 * settings page and menu.
@@ -211,33 +220,42 @@ private static function single_activate() {
 		}
 	}
 
+	/**
+	 * Fired for each hook
+	 *
+	 * @since    1.0.0
+	 */
 	function parent_hook() {
-		global $wp_parent_hook, $wp_current_filter;
+		global $wp_current_filter;
 		foreach ( $wp_current_filter as $child => $hook_name ) {
-			if ( $child === 0 && !isset( $wp_parent_hook[ $hook_name ] ) ) {
-				$wp_parent_hook[ $hook_name ] = array();
-			} elseif ( $child === 1 && !isset( $wp_parent_hook[ $wp_current_filter[ 0 ] ][ $hook_name ] ) ) {
-				$wp_parent_hook[ $wp_current_filter[ 0 ] ][ $hook_name ] = array();
-			} elseif ( $child === 2 && !isset( $wp_parent_hook[ $wp_current_filter[ 0 ] ][ $wp_current_filter[ 1 ] ][ $hook_name ] ) ) {
-				$wp_parent_hook[ $wp_current_filter[ 0 ] ][ $wp_current_filter[ 1 ] ][ $hook_name ] = array();
+			if ( $child === 0 && !isset( $this->hooks[ $hook_name ] ) ) {
+				$this->hooks[ $hook_name ] = array();
+			} elseif ( $child === 1 && !isset( $this->hooks[ $wp_current_filter[ 0 ] ][ $hook_name ] ) ) {
+				$this->hooks[ $wp_current_filter[ 0 ] ][ $hook_name ] = array();
+			} elseif ( $child === 2 && !isset( $this->hooks[ $wp_current_filter[ 0 ] ][ $wp_current_filter[ 1 ] ][ $hook_name ] ) ) {
+				$this->hooks[ $wp_current_filter[ 0 ] ][ $wp_current_filter[ 1 ] ][ $hook_name ] = [ ];
 			} elseif ( $child === 3 ) {
-				$wp_parent_hook[ $wp_current_filter[ 0 ] ][ $wp_current_filter[ 1 ] ][ $wp_current_filter[ 2 ] ][ $hook_name ] = 1;
+				$this->hooks[ $wp_current_filter[ 0 ] ][ $wp_current_filter[ 1 ] ][ $wp_current_filter[ 2 ] ][ $hook_name ] = 1;
 			}
 		}
 	}
 
+	/**
+	 * Generate the window
+	 *
+	 * @since    1.0.0
+	 */
 	function print_hookr_flowchart() {
-		global $wp_parent_hook;
 		$html = '';
-		ksort( $wp_parent_hook );
+		ksort( $this->hooks );
 		$exclude = get_option( $this->get_plugin_slug() );
 		$exclude = explode( ',', $exclude[ 'excluded' ] );
 		foreach ( $exclude as $key => $value ) {
-			if ( isset( $wp_parent_hook[ $value ] ) ) {
-				unset( $wp_parent_hook[ $value ] );
+			if ( isset( $this->hooks[ $value ] ) ) {
+				unset( $this->hooks[ $value ] );
 			}
 		}
-		foreach ( $wp_parent_hook as $hook_father => $hook_son ) {
+		foreach ( $this->hooks as $hook_father => $hook_son ) {
 			if ( is_array( $hook_son ) && count( $hook_son ) > 1 ) {
 				$html .= '<div class="mermaid-noise" style="display:none">';
 				$html .= '[n]graph LR' . "[n]";