Template-Variablen komfortabel anzeigen: Unterschied zwischen den Versionen

Aus Contao Community Documentation

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

Version vom 5. Juli 2017, 23:55 Uhr

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

IRC -> einziger fortlaufend sich selbst aktualisierender Comic.

Tristan Lins
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge