Template-Variablen komfortabel anzeigen - Versionsgeschichte

Andreas am 5. Juli 2017 um 22:56 Uhr

2017-07-05T22:56:28Z

Andreas: Update v 1.0.0 binäre UUIDs

2017-07-05T22:55:43Z

Update v 1.0.0 binäre UUIDs

Andreas am 5. Juli 2017 um 15:41 Uhr

2017-07-05T15:41:34Z

Andreas am 5. Juli 2017 um 15:40 Uhr

2017-07-05T15:40:53Z

Andreas: Seite erstellt

2017-07-05T15:36:19Z

Seite erstellt

Neue Seite

{{AppliesTo
|Version=3.x.x und evtl. 2.x.x
}}
[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS‏‎]]
[[Category:Dev Snippet]]
[[Category:Development‏‎]]
[[Category:Fehlersuche‏‎]]
[[Category:Stub‏‎]]
{{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.

--[[Benutzer:Andreas|Andreas Burg]] ([[Benutzer Diskussion:Andreas|Diskussion]]) 17:36, 5. Jul. 2017 (CEST)}}
Man erstellt eine Datei in ROOT/templates/template-vars.php
<source lang="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 '

';

// 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'][] = '

<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>

';

// Add some JS
$GLOBALS['TL_BODY'][] = '

<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>

';

echo '


';
</source>
In einem Template in welchem man die Variablen untersuchen möchte fügt man folgenden Code oben oder unten ein.
<source lang="php">
<?php

include 'template-vars.php';

?>
</source>
Hier nochmal das '''CSS''' aus der Datei:
<source lang="css">
.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;
}
</source>
Hier nochmal das '''JavaScript''' (jQuery) aus der Datei:
<source lang="javascript">
(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);
</source>

@@ Zeile 15: / Zeile 15: @@
 --[[Benutzer:Andreas|Andreas Burg]] ([[Benutzer Diskussion:Andreas|Diskussion]]) 17:36, 5. Jul. 2017 (CEST)}}
 ; Updates
 ; v 1.0.0

@@ Zeile 15: / Zeile 15: @@
 --[[Benutzer:Andreas|Andreas Burg]] ([[Benutzer Diskussion:Andreas|Diskussion]]) 17:36, 5. Jul. 2017 (CEST)}}
 Man erstellt eine Datei in ROOT/templates/template-vars.php
 <source lang="php">
@@ Zeile 21: / Zeile 27: @@
 /**
   * Debug template vars
+  *
   * @file ROOT/templates/template-vars.php
@@ Zeile 43: / Zeile 51: @@
 foreach($this->arrData as $key => $value)
+{
-   if($key == 'singleSRC' || is_object($value))
+   if(is_object($value))
+   {
      continue;
@@ Zeile 49: / Zeile 57: @@
    $date = '';
    // Discover a timestamp
    if(!is_array($value) && strlen($value) == 10 && preg_match('/^\d{10}/', $value))
@@ Zeile 56: / Zeile 66: @@
      $date = str_pad($date, 48, ' ', STR_PAD_LEFT);
      $date = ' <b>'.$date.'</b>';
+   }
    $vars[] = array(
@@ Zeile 63: / Zeile 78: @@
      'value'      => htmlspecialchars(print_r(str_replace('    ', '  ', $value), true)),
      'date'       => $date,
-     'datePrefix' => $datePrefix
+     'datePrefix' => $datePrefix,
    );
+}
@@ Zeile 75: / Zeile 91: @@
 foreach($vars as $key => $var)
+{
-   echo '<tr><td>'.$var['key'].'</td><td>'.$var['datePrefix'].$var['value'].$var['date'].'</td></tr>'."\n";
+   echo '<tr><td>'.$var['key'].'</td><td>'.$var['uuidPrefix'].$var['datePrefix'].$var['value'].$var['date'].'</td></tr>'."\n";
+}
 echo '</tbody></table></div>';
@@ Zeile 168: / Zeile 184: @@
 <!-- indexer::continue -->
 ';
 </source>
 In einem Template in welchem man die Variablen untersuchen möchte fügt man folgenden Code oben oder unten ein.

@@ Zeile 58: / Zeile 58: @@
+   }
    $datePrefix = $date ? '<b>timestamp</b> ' : '';
    $vars[] = array(
      'key'        => $key,