SOLVED: Ein-/Ausblendbarer CODE Block in Nachrichtenliste mit Akkordeon

Guten Abend,

ich habe mein news_latest.html5 Template so bearbeitet, das die Newsliste als Akkordeon angezeigt wird.
Um Syntaxhighlightning in Nachrichten verwenden zu können, nutze ich die Erweiterung Syntaxhighlightning.
Ich hätte nun gerne, das die CODE Blöcke beim Laden der Nachricht als Standard ausgeblendet sind, mit dem Hinweis (siehe auch Bild im Anhang):

Code angehängt. Klicke hier zum Ein- / Ausblenden

Wie kann ich das bewerkstelligen, bzw. wie kann ich folgendes einbauen?

Hier mein Template news_latest.html5:

PHP-Code:

---

<div class="toggler"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle; ?>"<?php endif; ?>>
  <h2><?php echo $this->headline; ?></h2>
</div>
<div class="layout_latest block<?php echo $this->class; ?>"><div class="accordion">
    <?php if ($this->hasMetaFields): ?>
        <p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->parseDate("d. F Y", $this->timestamp); ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
    <?php endif; ?>
    <?php if ($this->addImage): ?>
        <div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
        <?php if ($this->href): ?>
            <a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
                <?php endif; ?>
                    <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
                <?php if ($this->href): ?>
            </a>
        <?php endif; ?>
        <?php if ($this->caption): ?>
            <div class="caption"><?php echo $this->caption; ?></div>
            <?php endif; ?>
            </div>
            <?php endif; ?>
            <p class="teaser"><?php echo $this->teaser; ?></p>
            <?php if ($this->text): ?>
                <p class="more"><?php echo $this->more; ?></p>
            <?php endif; ?>
            </div>
        <div>
    </div>
</div>

---

und news_full.html5

PHP-Code:

---

<div class="layout_full block<?php echo $this->class; ?>">

<h1><?php echo $this->newsHeadline; ?></h1>
<?php if ($this->hasMetaFields): ?>

<p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->parseDate("d. F Y", $this->timestamp); ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->hasSubHeadline): ?>

<h2><?php echo $this->subHeadline; ?></h2>
<?php endif; ?>

<div class="ce_text">
<?php if (!$this->addBefore): ?>

<?php echo $this->text; ?>
<?php endif; ?>
<?php if ($this->addImage): ?>

<figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>">
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
<?php if ($this->addBefore): ?>
<?php echo $this->text; ?>
<?php endif; ?>
</div>
<?php if ($this->enclosure): ?>
<div class="enclosure">
    <ul class="downloads">
<?php foreach ($this->enclosure as $enclosure): ?>
    <?php
        $filepath = substr($file['href'], strrpos($file['href'],'=')+1 );
        $mydate = date ($GLOBALS['TL_CONFIG']['dateFormat'] , filemtime(TL_ROOT . "/" . $filepath));
        $mytime = date ($GLOBALS['TL_CONFIG']['timeFormat'] , filemtime(TL_ROOT . "/" . $filepath));
    ?>
<li><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['mime']; ?>" class="mime_icon"> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?></a> <span class="size">(<?php echo $enclosure['filesize']; ?></span><span class="date"> | <?php echo $mydate; ?></span><span class="time"> | <?php echo $mytime; ?>)</span></li>
<?php endforeach; ?>
</div>
<?php endif; ?>
    </ul> 
</div>

---

Für Ideen und Tips wäre ich dankbar.

ToM

Bin von allein auf die Lösung gekommen:

Als erstes kopiert man das Template moo_accordion.html5 und nennt es um in z.B. moo_codewrapper.
Nicht vergessen, das dann auch im Seitenlayout zu aktivieren. :)

Inhalt wie folgt:

PHP-Code:

---

<script>
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('div.wrapper'), $$('div.code'), {
      opacity: false,
      display: -1,
      alwaysHide: true,
      onActive: function(tog, el) {
        el.setProperty('aria-hidden', 'false');
        tog.addClass('active');
        tog.getNext('div').fade('in');
        tog.setProperty('aria-expanded', 'true');
        return false;
      },
      onBackground: function(tog, el) {
        el.setProperty('aria-hidden', 'true');
        tog.removeClass('active');
        tog.getNext('div').fade('out');
        tog.setProperty('aria-expanded', 'false');
        return false;
      }           
    });
    $$('div.wrapper').each(function(el) {
      el.setProperty('role', 'tab');
      el.setProperty('tabindex', 0);
      el.addEvents({
        'keypress': function(event) {
          if (event.code == 13) {
            this.fireEvent('click');
          }
        },
        'focus': function() {
          this.addClass('hover');
        },
        'blur': function() {
          this.removeClass('hover');
        },
        'mouseenter': function() {
          this.addClass('hover');
        },
        'mouseleave': function() {
          this.removeClass('hover');
        }
      });
    });
    $$('div.ce_code').each(function(el) {
      el.setProperty('role', 'tablist');
    });
    $$('div.code').each(function(el) {
      el.setProperty('role', 'tabpanel');
    });
  });
})(document.id);
</script> 


---

Jetzt sucht man bei der Erweiterung Syntaxhighlighter im Pfad \system\modules\syntax_highlighter die Datei SyntaxHighlighter.php die folgende Zeilen (ab 84ff):

PHP-Code:

---

        foreach($arrMapper as $key => $mapper)
        {
            // Insert mapper js file
            if(strpos($strContent, '[' . strtoupper($key) . ']')!==false)
            {
                $GLOBALS['TL_JAVASCRIPT'][] = 'plugins/highlighter/' . $mapper[1] . '.js';
            }
            
            // Match data
            preg_match('#\[' . strtoupper($key) . '\](.*)\[/' . strtoupper($key) . '\]#Usim', $strContent, $arrMatch);
            
            // If there is data
            if(is_array($arrMatch) && isset($arrMatch[0]) && isset($arrMatch[1]) && !empty($arrMatch[0]) && !empty($arrMatch[1]))
            {
                // Insert blank lines
                $arrMatch[1] = str_replace('<br>', "\n", $arrMatch[1]);
                $arrMatch[1] = str_replace('</p>', '</p>'."\n", $arrMatch[1]);
                
                // Remove fucking html tags
                $strContent = str_replace($arrMatch[0], '<pre class="brush: ' . strtolower($mapper[0]) . '">' . strip_tags($arrMatch[1]) . '</pre>', $strContent);
            }
        } 


---

und ändert diese in:

PHP-Code:

---

        foreach($arrMapper as $key => $mapper)
        {
            // Insert mapper js file
            if(strpos($strContent, '[' . strtoupper($key) . ']')!==false)
            {
                $GLOBALS['TL_JAVASCRIPT'][] = 'plugins/highlighter/' . $mapper[1] . '.js';
            }
            
            // Match data
            preg_match_all('#\[' . strtoupper($key) . '\](.*)\[/' . strtoupper($key) . '\]#Usim', $strContent, $arrMatch);
            
            // If there is data
            if(is_array($arrMatch) && isset($arrMatch[0]) && isset($arrMatch[1]) && !empty($arrMatch[0]) && !empty($arrMatch[1]))
            {
                foreach($arrMatch[0] as $k => $v)
                {
                    if(!empty($arrMatch[1][$k]))
                    {
                    //    $arrMatch[1][$k] = strip_tags(str_replace(array('<br>','</p>'), array('</p>',"\n"), $arrMatch[1][$k]));
                        $arrMatch[1][$k] = strip_tags(str_replace(array('<br>', '</p>'), array("\n", '</p>'."\n"), $arrMatch[1][$k]));
                        $strContent = str_replace($v, '<div class="wrapper"> Code eingef&uuml;gt. Hier klicken zum Ein- / Ausblenden </div> <div class="code"> <pre class="brush: ' . strtolower($mapper[0]) . '">' . $arrMatch[1][$k] . '</pre> </div> <p>', $strContent);
                    }
                }
            }
        } 


---

Jetzt noch eine kleine PNG Grafik unter z.B. /files/layout/codewrapper.png abspeichern und noch folgende CSS anlegen:

Code:

---

/* Code Wrapper Inhalt */
.code {
    padding-left:21px;
}
/* Code Wrapper Toggler */
.wrapper {
    padding-left:21px;
    vertical-align:middle;
    font-weight:bold;
    background: url("files/layout/codewrapper.png") left center no-repeat;
    cursor: pointer;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}
/* Code Wrapper Toggler Hover */
.wrapper:hover {
    color:#f60;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}
/* Code Wrapper Toggler Aktiv */
.wrapper.active {
}

---

Man kann einzelne Wrapperelemente auch per Link direkt ansprechen, dann ist der entsprechende Wrapper gleich geöffnet.
Dazu muss man zu Beginn des moo_codewrapper.html5 Templates noch etwas PHP einfügen und den Wert display -1; durch die zuvor gesetzte Variable ersetzen:

PHP-Code:

---

<?php
$wid = '-1'; // default all closed
//$wid = '0'; // default first open
if (is_numeric($this->Input->get('wid'))) {
  $wid=(int)$this->Input->get('wid');
}
?>
<script>
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('div.toggler'), $$('div.accordion'), {
      opacity: false,
      display: <?php echo $wid; ?>,
      alwaysHide: true,

---

Um jetzt einen Wrapper direkt aufzurufen, muss man der Link URL nur folgenden Parameter dranpappen: ?wid=id
Man beginnt, das erste Element mit 0 zu zählen, also nicht wundern.

Als kleines Schmankerl kann man noch hinzufügen, das der sich öffnende Code oben im Browser positioniert.
Das macht bei längeren Artikeln mit viel Code absolut Sinn. Im Template moo_codewrapper.html5 fügt man eine weitere Funktion onComplete hinzu:

PHP-Code:

---

      onActive: function(tog, el) {
        el.setProperty('aria-hidden', 'false');
        tog.addClass('active');
        tog.getNext('div').fade('in');
        tog.setProperty('aria-expanded', 'true');
        return false;
      },
      onBackground: function(tog, el) {
        el.setProperty('aria-hidden', 'true');
        tog.removeClass('active');
        tog.getNext('div').fade('out');
        tog.setProperty('aria-expanded', 'false');
        return false;
      },
      onComplete: function(tog, el) {
        request = this.previous;
        if(request >= 0) {
          var open = this.togglers[request].getStyle('margin-top').toInt();
          if(open >= 0) new Fx.Scroll(window,{duration: this.options.duration}).toElement(this.togglers[request]);
        }
      } 


---

Hier ein fertiges Beispiel mit allem eingebauten Schnickschnack: click me

Der Syntaxhighlighter wurde von Flex angepasst, um in einem Element mehr als 4 Code Tags mit Highlightning anzeigen zu können.
An dieser Stelle nochmals herzlichen Dank dafür!

ToM

Hi,

lange her... :D

Ich bin gerade dran, meine Version 2.11.17 auf 4.6.11 upzudaten und stosse hier auf Probleme:
Ich habe die hier genannte Erweiterung SyntaxHighlighter in /system/modules/ eingespeist und den Cache geleert, dann erhalte ich eine Fehlermeldung:
[2018-12-17 19:53:13] request.CRITICAL: Uncaught PHP Exception Symfony\Component\Debug\Exception\ClassNotFoundExc eption: "Attempted to load class "SyntaxHighlighter" from the global namespace. Did you forget a "use" statement?" at /www/htdocs/w011c26c/_neu/vendor/contao/core-bundle/src/Resources/contao/library/Contao/System.php line 182 {"exception":"[object] (Symfony\\Component\\Debug\\Exception\\ClassNotFou ndException(code: 0): Attempted to load class "SyntaxHighlighter" from the global namespace.\nDid you forget a "use" statement? at /www/htdocs/w011c26c/_neu/vendor/contao/core-bundle/src/Resources/contao/library/Contao/System.php:182)"} []
Was muss ich jetzt wo und wie ändern, um das zum Laufen zu bekommen? :(
Als Anhang die Erweiterung aus meinem 2.11er System rauskopiert.

Ich wäre dankbar für Hilfe...
Mit den Templates komm ich auch noch nicht ganz klar, aber erstmal Schritt für Schritt. :cool:

ToM

Hat keiner eine Idee, wie ich das in Contao 4.6.xx reinbringen tu?
Oder auch alternative Vorschläge, für denselben Effekt?

:eek::eek:

ToM