Skip to content

Commit 1c675f6

Browse files
ve3ve3
committed
v1.1.4
* Rewrite JS to use class ES6. * Add more example testing that page always displaying footer at bottom. * Add JS method to set `body` class and set element height to `rundizProfilerElementHeight` JS variable. * `rundizProfilerScrollTo()` function is now becomes `RundizProfiler.scrollTo()` class.
1 parent de85021 commit 1c675f6

File tree

5 files changed

+192
-58
lines changed

5 files changed

+192
-58
lines changed

‎Rundiz/Profiler/views/display-MemoryUsage.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
echo rdProfilerIndent(7).'<div class="rdprofiler-log-matchkey-name">'."\n";
8686
echo rdProfilerIndent(8).'Match Key is: ';
8787
if (isset($section_to_id) && isset($section_matchKey_id)) {
88-
echo '<a href="#'.$section_matchKey_id.'" onclick="return rundizProfilerScrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
88+
echo '<a href="#'.$section_matchKey_id.'" onclick="return RundizProfiler.scrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
8989
}
9090
echo htmlspecialchars($data_values['matchKey'], ENT_QUOTES);// the match key name.
9191
if (isset($section_to_id) && isset($section_matchKey_id)) {

‎Rundiz/Profiler/views/display-TimeLoad.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
echo rdProfilerIndent(7).'<div class="rdprofiler-log-matchkey-name">'."\n";
7575
echo rdProfilerIndent(8).'Match Key is: ';
7676
if (isset($section_to_id) && isset($section_matchKey_id)) {
77-
echo '<a href="#'.$section_matchKey_id.'" onclick="return rundizProfilerScrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
77+
echo '<a href="#'.$section_matchKey_id.'" onclick="return RundizProfiler.scrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
7878
}
7979
echo htmlspecialchars($data_values['matchKey'], ENT_QUOTES);// the match key name.
8080
if (isset($section_to_id) && isset($section_matchKey_id)) {

‎Rundiz/Profiler/views/rdprofiler.js

Lines changed: 83 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,98 @@
11
/**
22
* Rundiz\Profiler JS.
3-
*
4-
* @author Vee W.
53
*/
64

75

8-
/**
9-
* Load CSS in the `rundizProfilerCss` variable into HTML head section by create `<style>` element and set content into it.
10-
*
11-
* @returns {undefined}
12-
*/
13-
function rundizProfilerLoadCSS() {
14-
if (typeof(rundizProfilerCss) !== 'undefined') {
15-
var sheet = document.createElement("style");
16-
sheet.setAttribute("type", "text/css");
17-
sheet.innerHTML = rundizProfilerCss;
18-
document.getElementsByTagName("head")[0].appendChild(sheet);
19-
}
20-
}// rundizProfilerLoadCSS
6+
class RundizProfiler {
7+
8+
/**
9+
* Load CSS in the `rundizProfilerCss` variable into HTML head section by create `<style>` element and set content into it.
10+
*
11+
* @returns {undefined}
12+
*/
13+
loadCss() {
14+
// rundizProfilerCss variable is defined in Rundiz/Profiler/views/functions.php.
15+
if (typeof(rundizProfilerCss) !== 'undefined') {
16+
var sheet = document.createElement("style");
17+
sheet.setAttribute("type", "text/css");
18+
sheet.innerHTML = rundizProfilerCss;
19+
document.getElementsByTagName("head")[0].appendChild(sheet);
20+
}
21+
}// loadCss
22+
23+
24+
/**
25+
* Scroll to each class in `matchKey` argument.
26+
*
27+
* To use, use in a link with return. Example: `<a href="#" onclick="return RundizProfiler.scrollTo('#section', '.matchKey', jQuery(this));">link</a>`
28+
*
29+
* @param {string} section The section id.
30+
* @param {string} matchKey The matchKey class.
31+
* @param {object} thisobj jQuery(this) object.
32+
* @returns {Boolean} Always return false to prevent any click link action.
33+
*/
34+
static scrollTo(section, matchKey, thisobj) {
35+
let $ = jQuery.noConflict();
36+
let $Container = $(section);
37+
let $CurrentElement = thisobj.parents('li');
38+
let $ScrollTo;
39+
40+
if ($CurrentElement.prevAll(matchKey).length) {
41+
// if previous matchKey exists, use that one.
42+
$ScrollTo = $CurrentElement.prevAll(matchKey).offset().top;
43+
//console.log('use previous matchKey.');
44+
//console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
45+
} else if ($CurrentElement.nextAll(matchKey).length) {
46+
// if next matchKey exists, use that one.
47+
$ScrollTo = $CurrentElement.nextAll(matchKey).offset().top;
48+
//console.log('use next matchKey.');
49+
//console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
50+
}
51+
52+
if (typeof($ScrollTo) !== 'undefined') {
53+
$Container.scroll();
54+
$Container.animate({
55+
scrollTop: ($ScrollTo - $Container.offset().top + $Container.scrollTop())
56+
}, 'fast');
57+
}
58+
59+
return false;
60+
}// scrollTo
2161

2262

63+
/**
64+
* Set class to body and element height value to global vairable.
65+
*
66+
* @returns {undefined}
67+
*/
68+
setClassAndValue() {
69+
if (document.body) {
70+
document.body.classList.add('body-contain-rdprofiler');
71+
}
72+
73+
if (document.querySelector('.rdprofiler')) {
74+
rundizProfilerElementHeight = document.querySelector('.rdprofiler').offsetHeight;
75+
}
76+
}// setClassAndValue
77+
78+
79+
}// RundizProfiler
80+
81+
82+
// Run on page loaded ---------------------------------------------------------------------
2383
/**
24-
* Scroll to each class in `matchKey` argument.
25-
*
26-
* To use, use in a link with return. Example: `<a href="#" onclick="return rundizProfilerScrollTo('#section', '.matchKey', jQuery(this));">link</a>`
27-
*
28-
* @param {string} section The section id.
29-
* @param {string} matchKey The matchKey class.
30-
* @param {object} thisobj jQuery(this) object.
31-
* @returns {Boolean} Always return false to prevent any click link action.
84+
* @type Integer rundizProfilerElementHeight The rundiz profiler element height.
3285
*/
33-
function rundizProfilerScrollTo(section, matchKey, thisobj) {
34-
$ = jQuery.noConflict();
35-
$Container = $(section);
36-
$CurrentElement = thisobj.parents('li');
37-
38-
if ($CurrentElement.prevAll(matchKey).length) {
39-
// if previous matchKey exists, use that one.
40-
$ScrollTo = $CurrentElement.prevAll(matchKey).offset().top;
41-
//console.log('use previous matchKey.');
42-
//console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
43-
} else if ($CurrentElement.nextAll(matchKey).length) {
44-
// if next matchKey exists, use that one.
45-
$ScrollTo = $CurrentElement.nextAll(matchKey).offset().top;
46-
//console.log('use next matchKey.');
47-
//console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
48-
}
49-
50-
if (typeof($ScrollTo) !== 'undefined') {
51-
$Container.scroll();
52-
$Container.animate({
53-
scrollTop: ($ScrollTo - $Container.offset().top + $Container.scrollTop())
54-
}, 'fast');
55-
}
56-
57-
delete $Container;
58-
delete $CurrentElement;
59-
delete $ScrollTo;
60-
61-
return false;
62-
}// rundizProfilerScrollTo
86+
var rundizProfilerElementHeight;
6387

6488

65-
// Run on page loaded ---------------------------------------------------------------------
66-
jQuery.noConflict();
6789
jQuery(document).ready(function($) {
68-
rundizProfilerLoadCSS();
90+
let rundizProfiler = new RundizProfiler();
91+
92+
// load CSS into HTML > head
93+
rundizProfiler.loadCss();
94+
// set class to body and element height value to var.
95+
rundizProfiler.setClassAndValue();
6996

7097
// set active class to show details panel on click, unset active on click again.
7198
$('.rdprofiler-see-details').on('click', 'a.see-details', function() {

‎tests/via-http/extra-design/test-exists-footer.php

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<?php
2+
3+
// require the class files. you may no need these if you install via composer.
4+
require dirname(dirname(dirname(__DIR__))).'/Rundiz/Profiler/ProfilerBase.php';
5+
require dirname(dirname(dirname(__DIR__))).'/Rundiz/Profiler/Profiler.php';
6+
7+
$profiler = new \Rundiz\Profiler\Profiler();
8+
$profiler->Console->registerLogSections(['Logs', 'Time Load', 'Memory Usage', 'Files']);
9+
10+
// -----------------------------------------------------------------------------------------------------
11+
// lazy to write same test on every page, use common test functions
12+
// you can change this to other coding style in your real project.
13+
require dirname(__DIR__).'/common-test-functions.php';
14+
15+
?>
16+
<!DOCTYPE html>
17+
<html>
18+
<head>
19+
<meta charset="utf-8">
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21+
<title>Rundiz\Profiler test</title>
22+
23+
<link rel="stylesheet" href="../reset.css">
24+
<link rel="stylesheet" href="../main.css">
25+
<style>
26+
html {
27+
box-sizing: border-box;
28+
height: 100%;
29+
}
30+
body {
31+
box-sizing: border-box;
32+
}
33+
.page-footer {
34+
background-color: #ffffcc;
35+
box-sizing: border-box;
36+
display: flex;
37+
grid-column-start: 2;
38+
grid-row-end: 3;
39+
grid-row-start: 2;
40+
}
41+
.page-wrapper {
42+
box-sizing: border-box;
43+
display: grid;
44+
grid-template-columns: auto;
45+
grid-template-rows: auto 1.656rem;
46+
min-height: calc(100vh - 52px);/* 52 is (20 on top + 32 on bottom) */
47+
position: relative;
48+
}
49+
.page-wrapper > main {
50+
grid-column-start: 1;
51+
grid-row-start: 1;
52+
}
53+
.page-wrapper > .page-footer {
54+
grid-column-start: 1;
55+
grid-row-start: 2;
56+
}
57+
</style>
58+
</head>
59+
<body>
60+
<div class="page-wrapper">
61+
<main>
62+
<h1>Rundiz\Profiler test</h1>
63+
<p>This page test followings:</p>
64+
<ul>
65+
<li>Log</li>
66+
<li>Time Load</li>
67+
<li>Memory usage</li>
68+
<li>Files</li>
69+
</ul>
70+
71+
<?php
72+
rdpBasicLogs($profiler);
73+
rdpTimeLoadLogs($profiler);
74+
rdpMemoryUsage($profiler);
75+
76+
$profiler->gatherAll();
77+
78+
// just checking.
79+
echo '<pre class="profiler-data-dump-test">'.htmlspecialchars(print_r($profiler->dumptest(), true)).'</pre>';
80+
echo "\n\n\n";
81+
?>
82+
<div id="toggle-height-element">
83+
Toggle this <button type="button" onclick="return rdprofilerDemoFooterToggleHeight();">button</button> to make this element very height.
84+
</div>
85+
</main>
86+
<footer class="page-footer">
87+
This page footer should be always appear at the bottom.
88+
</footer>
89+
</div><!--.page-wrapper-->
90+
<?php
91+
// display profiler window.
92+
echo $profiler->display();
93+
?>
94+
<script>
95+
function rdprofilerDemoFooterToggleHeight() {
96+
let $ = jQuery.noConflict();
97+
var active = $('#toggle-height-element').toggleClass('active').hasClass('active');
98+
$('#toggle-height-element').css('height', !active ? 'auto' : '900px');
99+
}// rdprofilerDemoFooterToggleHeight
100+
</script>
101+
</body>
102+
</html>

‎tests/via-http/index.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,10 @@
3030
<li><a href="styles/basic-bulma0.php">Bulma 0</a></li>
3131
<li><a href="styles/basic-pure1.php">Pure 1</a></li>
3232
</ul>
33+
34+
<h2 style="margin-top: 40px;">Some more special design</h2>
35+
<ul>
36+
<li><a href="extra-design/test-exists-footer.php">Page that footer always appear.</a></li>
37+
</ul>
3338
</body>
3439
</html>

0 commit comments

Comments
 (0)