Template-Variablen komfortabel anzeigen: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(Seite erstellt) |
(kein Unterschied)
|
Version vom 5. Juli 2017, 16:36 Uhr
betrifft | |
---|---|
Contao Version | 3.x.x und evtl. 2.x.x |
Hinweis: Das Vorhaben war ursprünglich, die Timestamps des Event-Listen-Moduls besser debuggen zu können.
Kann aber noch ausgebaut werden, um auch in anderen Templates die Variablen komfortabler ausgeben zu können. Evtl. kann hieraus auch eine Erweiterung entstehen. --Andreas Burg (Diskussion) 17:36, 5. Jul. 2017 (CEST) |
Man erstellt eine Datei in ROOT/templates/template-vars.php
<?php /** * Debug template vars * * @file ROOT/templates/template-vars.php * @author: info@andreasburg.de * Activate the JS tablesorter (jQuery) in your layout to make the output table sortable. * Keep attention as it did not show objects. */ echo ' <!-- indexer::stop --> <!-- '.basename(__FILE__).' - START -->'; // Build the table echo ' <div class="debug_container"> <table class="sortable"> <thead><tr><th>key</th><th>value</th></tr></thead> <tbody>'."\n"; foreach($this->arrData as $key => $value) { if($key == 'singleSRC' || is_object($value)) { continue; } $date = ''; // Discover a timestamp if(!is_array($value) && strlen($value) == 10 && preg_match('/^\d{10}/', $value)) { $date = \Date::parse('l d.m.Y H:i', $value); $date = str_replace(' ', ' ', $date); $date = str_pad($date, 48, ' ', STR_PAD_LEFT); $date = ' <b class="date">'.$date.'</b>'; } $datePrefix = $date ? '<b>timestamp</b> ' : ''; $vars[] = array( 'key' => $key, 'value' => htmlspecialchars(print_r(str_replace(' ', ' ', $value), true)), 'date' => $date, 'datePrefix' => $datePrefix ); } // Sort by value usort($vars, function($a, $b) { return strnatcasecmp($a['value'], $b['value']); }); // Output table rows foreach($vars as $key => $var) { echo '<tr><td>'.$var['key'].'</td><td>'.$var['datePrefix'].$var['value'].$var['date'].'</td></tr>'."\n"; } echo '</tbody></table></div>'; // Add some CSS $GLOBALS['TL_HEAD'][] = ' <!-- '.basename(__FILE__).' - START --> <style> .debug_container { max-width: 1200px; margin: 0 auto 20px; } .debug_container table { width: 100%; background-color: rgba(255, 255, 255, .9); color: rgba(0, 0, 0, .9); font-family: "DejaVu Sans Mono", "Lucida Console", Consolas, "Courier New", monospace; font-size: .8125rem; } .debug_container tr > * { padding: 6px; } th.header { text-align: left; background-color: rgba(0, 0, 0, .2); color: rgba(0, 0, 0, .9); cursor: pointer; font-weight: bold; text-transform: uppercase; } th.headerSortUp, th.headerSortDown, th.header:hover { background-color: rgba(255, 99, 71, .1); } .debug_container tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, .1); } .debug_container tbody tr:hover td { background-color: rgba(255, 99, 71, .05); } .debug_container td:first-child { font-weight: bold; } .debug_container td:last-child { white-space: pre-wrap; word-wrap: break-word; } .debug_container b { color: tomato; } </style> <!-- '.basename(__FILE__).' - END --> '; // Add some JS $GLOBALS['TL_BODY'][] = ' <!-- '.basename(__FILE__).' - START --> <script> (function($) { $(document).ready(function() { // Table has to be fixed, so first calculate the width of first col TH var firstTh = $(".debug_container th:first-child"), firstThWidth = firstTh.width() ; firstTh.width(firstThWidth); $(".debug_container table").css("table-layout", "fixed"); // Initialize the tablesorter (jQuery) // TODO: Check if function tablesorter() is available $(".debug_container .sortable").tablesorter({ headers: { 1: {sorter: "text"} }, debug: false }); }); })(jQuery); </script> <!-- '.basename(__FILE__).' - END --> '; echo ' <!-- '.basename(__FILE__).' - END --> <!-- indexer::continue --> ';
In einem Template in welchem man die Variablen untersuchen möchte fügt man folgenden Code oben oder unten ein.
<?php include 'template-vars.php'; ?>
Hier nochmal das CSS aus der Datei:
.debug_container { max-width: 1200px; margin: 0 auto 20px; } .debug_container table { width: 100%; background-color: rgba(255, 255, 255, .9); color: rgba(0, 0, 0, .9); font-family: "DejaVu Sans Mono", "Lucida Console", Consolas, "Courier New", monospace; font-size: .8125rem; } .debug_container tr > * { padding: 6px; } th.header { text-align: left; background-color: rgba(0, 0, 0, .2); color: rgba(0, 0, 0, .9); cursor: pointer; font-weight: bold; text-transform: uppercase; } th.headerSortUp, th.headerSortDown, th.header:hover { background-color: rgba(255, 99, 71, .1); } .debug_container tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, .1); } .debug_container tbody tr:hover td { background-color: rgba(255, 99, 71, .05); } .debug_container td:first-child { font-weight: bold; } .debug_container td:last-child { white-space: pre-wrap; word-wrap: break-word; } .debug_container b { color: tomato; }
Hier nochmal das JavaScript (jQuery) aus der Datei:
(function($) { $(document).ready(function() { // Table has to be fixed, so first calculate the width of first col TH var firstTh = $(".debug_container th:first-child"), firstThWidth = firstTh.width() ; firstTh.width(firstThWidth); $(".debug_container table").css("table-layout", "fixed"); // Initialize the tablesorter (jQuery) // TODO: Check if function tablesorter() is available $(".debug_container .sortable").tablesorter({ headers: { 1: {sorter: "text"} }, debug: false }); }); })(jQuery);