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)

Updates
v 1.0.0
Erkennung von binären UUIDs.
00:55, 6. Jul. 2017 (CEST)

Man erstellt eine Datei in ROOT/templates/template-vars.php

<?php
 
/**
 * Debug template vars
 * @version 1.0.0
 * @date 6. Jul. 2017
 *
 * @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(is_object($value))
  {
    continue;
  }
 
  $date = '';
  $datePrefix = '';
  $uuidPrefix = '';
  // 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 = '<b>timestamp</b> ';
  }
  elseif(is_string($value) && \Validator::isBinaryUuid($value))
  {
    $value = \StringUtil::binToUuid($value);
    $uuidPrefix = '<b>uuid</b> ';
  }
 
  $vars[] = array(
    'key'        => $key,
    'value'      => htmlspecialchars(print_r(str_replace('    ', '  ', $value), true)),
    'date'       => $date,
    'datePrefix' => $datePrefix,
    'uuidPrefix' => $uuidPrefix
  );
}
 
// 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['uuidPrefix'].$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

Nein, der Hangout ist noch nicht vorbei, wir schweigen nur. Es heisst ja auch hangout und nicht bryll out.

Christian Schiffler
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge