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.
Rundiz · Dec 13, 2019 · 1c675f6 · 1c675f6
1 parent de85021
commit 1c675f6
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 58 deletions.
diff --git a/Rundiz/Profiler/views/display-MemoryUsage.php b/Rundiz/Profiler/views/display-MemoryUsage.php
@@ -85,7 +85,7 @@
                             echo rdProfilerIndent(7).'<div class="rdprofiler-log-matchkey-name">'."\n";
                             echo rdProfilerIndent(8).'Match Key is: ';
                             if (isset($section_to_id) && isset($section_matchKey_id)) {
-                                echo '<a href="#'.$section_matchKey_id.'" onclick="return rundizProfilerScrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
+                                echo '<a href="#'.$section_matchKey_id.'" onclick="return RundizProfiler.scrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
                             }
                             echo htmlspecialchars($data_values['matchKey'], ENT_QUOTES);// the match key name.
                             if (isset($section_to_id) && isset($section_matchKey_id)) {

diff --git a/Rundiz/Profiler/views/display-TimeLoad.php b/Rundiz/Profiler/views/display-TimeLoad.php
@@ -74,7 +74,7 @@
                             echo rdProfilerIndent(7).'<div class="rdprofiler-log-matchkey-name">'."\n";
                             echo rdProfilerIndent(8).'Match Key is: ';
                             if (isset($section_to_id) && isset($section_matchKey_id)) {
-                                echo '<a href="#'.$section_matchKey_id.'" onclick="return rundizProfilerScrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
+                                echo '<a href="#'.$section_matchKey_id.'" onclick="return RundizProfiler.scrollTo(\'#Section'.$section_to_id.' ul\', \'.'.$section_matchKey_id.'\', jQuery(this));">';
                             }
                             echo htmlspecialchars($data_values['matchKey'], ENT_QUOTES);// the match key name.
                             if (isset($section_to_id) && isset($section_matchKey_id)) {

diff --git a/Rundiz/Profiler/views/rdprofiler.js b/Rundiz/Profiler/views/rdprofiler.js
@@ -1,71 +1,98 @@
 /**
  * Rundiz\Profiler JS.
- * 
- * @author Vee W.
  */
 
 
-/**
- * Load CSS in the `rundizProfilerCss` variable into HTML head section by create `<style>` element and set content into it.
- * 
- * @returns {undefined}
- */
-function rundizProfilerLoadCSS() {
-    if (typeof(rundizProfilerCss) !== 'undefined') {
-        var sheet = document.createElement("style");
-        sheet.setAttribute("type", "text/css");
-        sheet.innerHTML = rundizProfilerCss;
-        document.getElementsByTagName("head")[0].appendChild(sheet);
-    }
-}// rundizProfilerLoadCSS
+class RundizProfiler {
+
+    /**
+     * Load CSS in the `rundizProfilerCss` variable into HTML head section by create `<style>` element and set content into it.
+     * 
+     * @returns {undefined}
+     */
+    loadCss() {
+        // rundizProfilerCss variable is defined in Rundiz/Profiler/views/functions.php.
+        if (typeof(rundizProfilerCss) !== 'undefined') {
+            var sheet = document.createElement("style");
+            sheet.setAttribute("type", "text/css");
+            sheet.innerHTML = rundizProfilerCss;
+            document.getElementsByTagName("head")[0].appendChild(sheet);
+        }
+    }// loadCss
+
+
+    /**
+     * Scroll to each class in `matchKey` argument.
+     * 
+     * To use, use in a link with return. Example: `<a href="#" onclick="return RundizProfiler.scrollTo('#section', '.matchKey', jQuery(this));">link</a>`
+     * 
+     * @param {string} section The section id.
+     * @param {string} matchKey The matchKey class.
+     * @param {object} thisobj jQuery(this) object.
+     * @returns {Boolean} Always return false to prevent any click link action.
+     */
+    static scrollTo(section, matchKey, thisobj) {
+        let $ = jQuery.noConflict();
+        let $Container = $(section);
+        let $CurrentElement = thisobj.parents('li');
+        let $ScrollTo;
+
+        if ($CurrentElement.prevAll(matchKey).length) {
+            // if previous matchKey exists, use that one.
+            $ScrollTo = $CurrentElement.prevAll(matchKey).offset().top;
+            //console.log('use previous matchKey.');
+            //console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
+        } else if ($CurrentElement.nextAll(matchKey).length) {
+            // if next matchKey exists, use that one.
+            $ScrollTo = $CurrentElement.nextAll(matchKey).offset().top;
+            //console.log('use next matchKey.');
+            //console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
+        }
+
+        if (typeof($ScrollTo) !== 'undefined') {
+            $Container.scroll();
+            $Container.animate({
+                scrollTop: ($ScrollTo - $Container.offset().top + $Container.scrollTop())
+            }, 'fast');
+        }
+
+        return false;
+    }// scrollTo
 
 
+    /**
+     * Set class to body and element height value to global vairable.
+     * 
+     * @returns {undefined}
+     */
+    setClassAndValue() {
+        if (document.body) {
+            document.body.classList.add('body-contain-rdprofiler');
+        }
+
+        if (document.querySelector('.rdprofiler')) {
+            rundizProfilerElementHeight = document.querySelector('.rdprofiler').offsetHeight;
+        }
+    }// setClassAndValue
+
+
+}// RundizProfiler
+
+
+// Run on page loaded ---------------------------------------------------------------------
 /**
- * Scroll to each class in `matchKey` argument.
- * 
- * To use, use in a link with return. Example: `<a href="#" onclick="return rundizProfilerScrollTo('#section', '.matchKey', jQuery(this));">link</a>`
- * 
- * @param {string} section The section id.
- * @param {string} matchKey The matchKey class.
- * @param {object} thisobj jQuery(this) object.
- * @returns {Boolean} Always return false to prevent any click link action.
+ * @type Integer rundizProfilerElementHeight The rundiz profiler element height.
  */
-function rundizProfilerScrollTo(section, matchKey, thisobj) {
-    $ = jQuery.noConflict();
-    $Container = $(section);
-    $CurrentElement = thisobj.parents('li');
-
-    if ($CurrentElement.prevAll(matchKey).length) {
-        // if previous matchKey exists, use that one.
-        $ScrollTo = $CurrentElement.prevAll(matchKey).offset().top;
-        //console.log('use previous matchKey.');
-        //console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
-    } else if ($CurrentElement.nextAll(matchKey).length) {
-        // if next matchKey exists, use that one.
-        $ScrollTo = $CurrentElement.nextAll(matchKey).offset().top;
-        //console.log('use next matchKey.');
-        //console.log(($ScrollTo - $Container.offset().top + $Container.scrollTop()));
-    }
-
-    if (typeof($ScrollTo) !== 'undefined') {
-        $Container.scroll();
-        $Container.animate({
-            scrollTop: ($ScrollTo - $Container.offset().top + $Container.scrollTop())
-        }, 'fast');
-    }
-
-    delete $Container;
-    delete $CurrentElement;
-    delete $ScrollTo;
-
-    return false;
-}// rundizProfilerScrollTo
+var rundizProfilerElementHeight;
 
 
-// Run on page loaded ---------------------------------------------------------------------
-jQuery.noConflict();
 jQuery(document).ready(function($) {
-    rundizProfilerLoadCSS();
+    let rundizProfiler = new RundizProfiler();
+
+    // load CSS into HTML > head
+    rundizProfiler.loadCss();
+    // set class to body and element height value to var.
+    rundizProfiler.setClassAndValue();
 
     // set active class to show details panel on click, unset active on click again.
     $('.rdprofiler-see-details').on('click', 'a.see-details', function() {

diff --git a/tests/via-http/extra-design/test-exists-footer.php b/tests/via-http/extra-design/test-exists-footer.php
@@ -0,0 +1,102 @@
+<?php
+
+// require the class files. you may no need these if you install via composer.
+require dirname(dirname(dirname(__DIR__))).'/Rundiz/Profiler/ProfilerBase.php';
+require dirname(dirname(dirname(__DIR__))).'/Rundiz/Profiler/Profiler.php';
+
+$profiler = new \Rundiz\Profiler\Profiler();
+$profiler->Console->registerLogSections(['Logs', 'Time Load', 'Memory Usage', 'Files']);
+
+// -----------------------------------------------------------------------------------------------------
+// lazy to write same test on every page, use common test functions
+// you can change this to other coding style in your real project.
+require dirname(__DIR__).'/common-test-functions.php';
+
+?>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Rundiz\Profiler test</title>
+
+        <link rel="stylesheet" href="../reset.css">
+        <link rel="stylesheet" href="../main.css">
+        <style>
+            html {
+                box-sizing: border-box;
+                height: 100%;
+            }
+            body {
+                box-sizing: border-box;
+            }
+            .page-footer {
+                background-color: #ffffcc;
+                box-sizing: border-box;
+                display: flex;
+                grid-column-start: 2;
+                grid-row-end: 3;
+                grid-row-start: 2;
+            }
+            .page-wrapper {
+                box-sizing: border-box;
+                display: grid;
+                grid-template-columns: auto;
+                grid-template-rows: auto 1.656rem;
+                min-height: calc(100vh - 52px);/* 52 is (20 on top + 32 on bottom) */
+                position: relative;
+            }
+            .page-wrapper > main {
+                grid-column-start: 1;
+                grid-row-start: 1;
+            }
+            .page-wrapper > .page-footer {
+                grid-column-start: 1;
+                grid-row-start: 2;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="page-wrapper">
+            <main>
+                <h1>Rundiz\Profiler test</h1>
+                <p>This page test followings:</p>
+                <ul>
+                    <li>Log</li>
+                    <li>Time Load</li>
+                    <li>Memory usage</li>
+                    <li>Files</li>
+                </ul>
+
+                <?php
+                rdpBasicLogs($profiler);
+                rdpTimeLoadLogs($profiler);
+                rdpMemoryUsage($profiler);
+
+                $profiler->gatherAll();
+
+                // just checking.
+                echo '<pre class="profiler-data-dump-test">'.htmlspecialchars(print_r($profiler->dumptest(), true)).'</pre>';
+                echo "\n\n\n";
+                ?> 
+                <div id="toggle-height-element">
+                    Toggle this <button type="button" onclick="return rdprofilerDemoFooterToggleHeight();">button</button> to make this element very height.
+                </div>
+            </main>
+            <footer class="page-footer">
+                This page footer should be always appear at the bottom.
+            </footer>
+        </div><!--.page-wrapper-->
+        <?php
+        // display profiler window.
+        echo $profiler->display();
+        ?>
+        <script>
+            function rdprofilerDemoFooterToggleHeight() {
+                let $ = jQuery.noConflict();
+                var active = $('#toggle-height-element').toggleClass('active').hasClass('active');
+                $('#toggle-height-element').css('height', !active ? 'auto' : '900px');
+            }// rdprofilerDemoFooterToggleHeight
+        </script>
+    </body>
+</html>
diff --git a/tests/via-http/index.php b/tests/via-http/index.php
@@ -30,5 +30,10 @@
             <li><a href="styles/basic-bulma0.php">Bulma 0</a></li>
             <li><a href="styles/basic-pure1.php">Pure 1</a></li>
         </ul>
+
+        <h2 style="margin-top: 40px;">Some more special design</h2>
+        <ul>
+            <li><a href="extra-design/test-exists-footer.php">Page that footer always appear.</a></li>
+        </ul>
     </body>
 </html>