Skip to content

Commit a51d9ac

Browse files
Mte90Mte90
committed
bump
1 parent 10fda56 commit a51d9ac

File tree

3 files changed

+57
-132
lines changed

3 files changed

+57
-132
lines changed

‎README.txt‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,17 @@
22
Contributors: codeat, mte90
33
Donate link: http://codeat.it/
44
Tags: debug, hook, flowchart, developer, tool, core
5-
Requires at least: 4.2
6-
Tested up to: 4.4
7-
Stable tag: 1.0.0
5+
Requires at least: 4.7
6+
Tested up to: 4.9
7+
Stable tag: 2.0.0
88
License: GPLv2 or later
99
License URI: http://www.gnu.org/licenses/gpl-2.0.html
1010

1111
In every WordPress page there are many different hooks, but what is the direct relationship among them?
1212

1313
== Description ==
1414

15-
This plugin generates a flowchart for every parent hook that is running under your actual page.
16-
In Firefox, the flowcharts are JavaScript generated and downloadable in .png format.
15+
This plugin generates a flowchart for every parent hook that is running under your actual page.
1716

1817
From the Setting Page you can choose which parent hook to exlude from the chart.
1918

@@ -52,5 +51,9 @@ PS: The download feature is not supported in Webkit-based browsers like Safari o
5251

5352
== Changelog ==
5453

54+
= 2.0 =
55+
* New interface
56+
* Code updated
57+
5558
= 1.0 =
5659
* First Release

‎public/assets/js/popupcode.js‎

Lines changed: 44 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,46 @@
1-
document.addEventListener('DOMContentLoaded', function () {
2-
var i = 0;
3-
//The download as png doesn't work on WebKit
4-
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
5-
//Prepare mermaid
6-
mermaid.initialize({
7-
flowchart: {
8-
useMaxWidth: false
9-
}});
10-
//Parse every hook
11-
[].forEach.call(document.querySelectorAll('.mermaid-noise'), function (el) {
12-
i++;
13-
//Get the markdown text
14-
var convert = el.innerHTML;
15-
convert = convert.replace(/\[n\]/g, "\n");
16-
//Get the hook name
17-
var hook = convert.slice(15).split(']');
18-
hook = hook[0];
19-
20-
document.querySelector('.body').innerHTML += "<h3 id='" + hook + "'>Hook " + hook + "</h3>";
21-
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'/>";
22-
if (!isWebkit) {
23-
document.querySelector('.body').innerHTML += "<button class='button button-primary mermaid-download' data-id='" + i + "'>Download</button>";
24-
}
25-
document.querySelector('.body').innerHTML += "<div class='mermaid-" + i + "'>" + convert + "</div><hr data-id='" + i + "'>";
26-
//Generate the flowchart
27-
mermaid.init(".mermaid-" + i);
28-
});
29-
//Go to top
30-
document.querySelector('button.gotop').addEventListener('click', function () {
31-
document.body.scrollTop = document.documentElement.scrollTop = 0;
32-
});
33-
//Hide system for hooks
34-
[].forEach.call(document.querySelectorAll('.hide-hook'), function (e) {
35-
e.addEventListener('click', function () {
36-
if (e.checked) {
37-
document.querySelector(".mermaid-" + e.dataset.id).style.display = 'none';
38-
document.querySelector("#" + e.dataset.hook).style.display = 'none';
39-
document.querySelector(".mermaid-download[data-id='" + e.dataset.id + "']").style.display = 'none';
40-
document.querySelector("hr[data-id='" + e.dataset.id + "']").style.display = 'none';
41-
} else {
42-
document.querySelector(".mermaid-" + e.dataset.id).style.display = 'block';
43-
document.querySelector("#" + e.dataset.hook).style.display = 'block';
44-
document.querySelector("hr[data-id='" + e.dataset.id + "']").style.display = 'block';
45-
}
46-
});
47-
});
48-
//Download system
49-
if (!isWebkit) {
50-
[].forEach.call(document.querySelectorAll('button.mermaid-download'), function (e) {
51-
e.addEventListener('click', function () {
52-
svgToPng(document.querySelector(".mermaid-" + e.dataset.id + ' svg'));
53-
});
54-
});
55-
56-
function svgToPng(source) {
57-
//Prepare the canvas
58-
var canvas = document.createElement("canvas");
59-
canvas.setAttribute('width', source.getBBox().width);
60-
canvas.setAttribute('height', source.getBBox().height);
61-
var ctx = canvas.getContext("2d");
62-
//Prepare the image
63-
var img = new Image();
64-
//this doesn't work but maybe enalbe the support for webkit
65-
img.setAttribute('crossOrigin', 'anonymous');
66-
img.crossOrigin = "Anonymous";
67-
//Get the hook name
68-
var name = source.querySelector('#a div').innerHTML;
69-
var svgString = new XMLSerializer().serializeToString(source);
70-
//Hack for Mermaid to replace div to text object
71-
svgString = svgString.replace(/div/g, "text");
72-
//Convert the svg string in a blob
73-
var svg = new Blob([svgString], {
74-
type: "image/svg+xml;charset=utf-8"
75-
});
76-
//Convert as an URL
77-
var url = window.URL.createObjectURL(svg);
78-
img.onload = function () {
79-
ctx.drawImage(img, 0, 0);
80-
var png = canvas.toDataURL("image/png");
81-
//Generate a img tag
82-
var target = document.createElement('img');
83-
target.className = "on-the-fly";
84-
//We pass the empty canvas
85-
target.src = png;
86-
document.body.appendChild(target);
87-
window.URL.revokeObjectURL(png);
88-
};
89-
//Add the URL in the img
90-
img.src = url;
91-
//Little timeout to get the image
92-
var timeout = window.setTimeout(function () {
93-
var a = document.createElement('a');
94-
a.download = name + '.png';
95-
a.href = document.querySelector('.on-the-fly').src;
96-
document.body.appendChild(a);
97-
a.addEventListener("click", function () {
98-
//Cleaning
99-
a.parentNode.removeChild(a);
100-
document.querySelector('.on-the-fly').parentNode.removeChild(document.querySelector('.on-the-fly'));
101-
});
102-
a.click();
103-
window.clearTimeout(timeout);
104-
}, 200);
105-
}
106-
}
1+
jQuery(document).ready(function () {
2+
jQuery("#wp-admin-bar-hook-flowchart a").click(function () {
3+
jQuery(".hookr-flowchart").show();
4+
var i = 0;
5+
//Parse every hook
6+
[].forEach.call(document.querySelectorAll('.mermaid-noise'), function (el) {
7+
i++;
8+
//Get the markdown text
9+
var convert = el.innerHTML;
10+
convert = convert.replace(/\[n\]/g, "\n");
11+
//Get the hook name
12+
var hook = convert.slice(15).split(']');
13+
hook = hook[0];
10714

15+
document.querySelector('.hookr-flowchart').innerHTML += "<h3 id='" + hook + "'>Hook " + hook + "</h3>";
16+
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'/>";
17+
document.querySelector('.hookr-flowchart').innerHTML += "<div class='mermaid-" + i + "'>" + convert + "</div><hr data-id='" + i + "'>";
18+
//Generate the flowchart
19+
mermaid.init({
20+
logLevel: 0,
21+
flowchart: {
22+
useMaxWidth: false
23+
}}, ".mermaid-" + i);
24+
});
25+
//Go to top
26+
document.querySelector('button.gotop').addEventListener('click', function () {
27+
document.body.scrollTop = document.documentElement.scrollTop = 0;
28+
});
29+
//Hide system for hooks
30+
[].forEach.call(document.querySelectorAll('.hide-hook'), function (e) {
31+
e.addEventListener('click', function () {
32+
if (e.checked) {
33+
document.querySelector(".mermaid-" + e.dataset.id).style.display = 'none';
34+
document.querySelector("#" + e.dataset.hook).style.display = 'none';
35+
document.querySelector(".mermaid-download[data-id='" + e.dataset.id + "']").style.display = 'none';
36+
document.querySelector("hr[data-id='" + e.dataset.id + "']").style.display = 'none';
37+
} else {
38+
document.querySelector(".mermaid-" + e.dataset.id).style.display = 'block';
39+
document.querySelector("#" + e.dataset.hook).style.display = 'block';
40+
document.querySelector("hr[data-id='" + e.dataset.id + "']").style.display = 'block';
41+
}
42+
});
43+
});
44+
jQuery("#wpbody,#wpfooter").hide();
45+
});
10846
});

‎public/class-hook-flowchart.php‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ private function __construct() {
8989
add_action( 'shutdown', array( $this, 'print_hookr_flowchart' ), 9999 );
9090
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_stuff' ) );
9191
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_stuff' ) );
92-
add_action( 'init', array( $this, 'show_flowchart' ), 9999 );
9392
}
9493

9594
/**
@@ -264,28 +263,13 @@ function print_hookr_flowchart() {
264263
}
265264
}
266265

267-
echo '<div class="hookr-flowchart" style="display:none;z-index:9999;">'
268-
. '<div class="body" style="padding-left:20px"><h1>Hook Flowchart</h1><h3>' . "\n"
266+
echo '<style>.hookr-flowchart {z-index: 9999;position: absolute;}.wp-admin .hookr-flowchart{margin-left: 160px;top:30px;}</style>'
267+
. '<div class="hookr-flowchart" style="padding-left:20px;display:none;z-index:9999;">'
268+
. '<h1>Hook Flowchart</h1><h3>' . "\n"
269269
. __( 'Use ctrl + f to use your browser search function or click on that buttons to jump to the parent hook, check the hook to hide', $this->get_plugin_slug() ) . '</h3><span class="buttons"></span>' . "\n"
270270
. $this->array_to_mermaid( $this->hooks ) . "\n"
271-
. '<button class="button button-primary gotop" style="float:right;position:fixed;bottom:10px;right:10px;">' . __( 'Go Top', $this->get_plugin_slug() ) . '</button></div>'
272-
. '</div><style>.hookr-flowchart {z-index: 9999;position: absolute;}.wp-admin .hookr-flowchart{margin-left: 160px;}</style><script>'
273-
. 'jQuery(document).ready(function() {'
274-
. 'jQuery( "#wp-admin-bar-hook-flowchart a" ).click(function() {
275-
jQuery(".hookr-flowchart").show();
276-
});'
277-
. '});'
278-
. '</script>';
279-
}
280-
}
281-
282-
public function show_flowchart() {
283-
if ( is_user_logged_in() ) {
284-
if ( isset( $_GET[ 'hookr-flowchart' ] ) ) {
285-
$hooks = str_replace( '\"', '"', $_GET[ 'hookr-flowchart' ] );
286-
;
287-
die();
288-
}
271+
. '<button class="button button-primary gotop" style="float:right;position:fixed;bottom:10px;right:10px;">' . __( 'Go Top', $this->get_plugin_slug() ) . '</button>'
272+
. '</div>';
289273
}
290274
}
291275

0 commit comments

Comments
 (0)