Template-Variablen komfortabel anzeigen

Aus Contao Community Documentation

betrifft
Contao Version 3.x.x und evtl. 2.x.x
Hinweis.png 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(' ', '&nbsp;', $date);
    $date = str_pad($date, 48, ' ', STR_PAD_LEFT);
    $date = ' <b>'.$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);
Ansichten
Meine Werkzeuge

Contao Community Documentation

Fork die Wand an!

Tristan Lins
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge