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ü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
SOLVED: Ein-/Ausblendbarer CODE Block in Nachrichtenliste mit Akkordeon
Zitieren
Lesezeichen