Template-Variablen komfortabel anzeigen: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Seite erstellt)
 
K
 
(3 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
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 26:
 
/**
 
/**
 
  * 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 50:
 
foreach($this->arrData as $key => $value)
 
foreach($this->arrData as $key => $value)
 
{
 
{
   if($key == 'singleSRC' || is_object($value))
+
   if(is_object($value))
 
   {
 
   {
 
     continue;
 
     continue;
 
   }
 
   }
 +
 
   $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 54: Zeile 64:
 
     $date = str_replace(' ', '&nbsp;', $date);
 
     $date = str_replace(' ', '&nbsp;', $date);
 
     $date = str_pad($date, 48, ' ', STR_PAD_LEFT);
 
     $date = str_pad($date, 48, ' ', STR_PAD_LEFT);
     $date = ' <b class="date">'.$date.'</b>';
+
     $date = ' <b>'.$date.'</b>';
 +
    $datePrefix = '<b>timestamp</b> ';
 
   }
 
   }
   $datePrefix = $date ? '<b>timestamp</b> ' : '';
+
   elseif(is_string($value) && \Validator::isBinaryUuid($value))
 +
  {
 +
    $value = \StringUtil::binToUuid($value);
 +
    $uuidPrefix = '<b>uuid</b> ';
 +
  }
 +
 
 
   $vars[] = array(
 
   $vars[] = array(
 
     'key'        => $key,
 
     'key'        => $key,
 
     '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 73: Zeile 90:
 
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 166: Zeile 183:
 
<!-- 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.

Aktuelle Version vom 5. Juli 2017, 23:56 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

noch 4 mal das Wort Abstraktion und ich beginne Zigaretten zu rauchen...

Martin Mildner
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge