CMS Contao 4.7.x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Viele dieser Templates habe ich schon in Version 2.11.17 genutzt, allerdings poste ich nur noch die aktuellen für Version 4.7.x, die anderen sind einfach zu alt... Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür!

Codewrapper

Man kann sich den Effekt des moo_accordion gut zunutze machen, um mit der Code Highlightning Funktion in Contao grössere Codeblöcke verschlossen darzustellen. Dazu kopiere ich erstmal das Template ce_code.html5 zweimal: Einmal als ce_code_nowrap.html5 und als ce_codewrapper.html5, mit folgenden Änderungen:

ce_code_nowrap.html5
<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
  <div class="code-no-wrap">
    <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
  </div>
<?php $this->endblock(); ?>
ce_codewrapper.html5
<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
  <div class="wrapper"> Code eingef&uuml;gt. Hier klicken zum Ein- / Ausblenden </div>
  <div class="code"> 
  <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
  </div>
<?php $this->endblock(); ?>

Den Effekt vom ce_code_nowrap sieht man oben schön, den ce_codewrapper sehen wir gleich. Ich kopiere das moo_accordion.html5 und nenne es um in moo_codewrapper.html5, und ändere es ein wenig ab:

moo_codewrapper.html5

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<?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>
  window.addEvent('domready', function() {
    new Fx.Accordion($$('.wrapper'), $$('.code'), {
      opacity: false,
      display: <?php echo $wid; ?>,
      duration: 2000,
      alwaysHide: true,
	  onActive: function(tog, el) {
        tog.addClass('active');
		// alert('add');
		tog.setProperty('aria-expanded', 'true');
        el.setProperty('aria-hidden', 'false');
		new Fx.Scroll( window, { duration: this.options.duration }).toElement(tog);
		// tog.getNext('div').fade('in');
		return false;
      },
      onBackground: function(tog, el) {
		tog.removeClass('active');
		// alert('remove');
		tog.setProperty('aria-expanded', 'false');
        el.setProperty('aria-hidden', 'true');
		// tog.getNext('div').fade('out');
		return false;
      },
	  onComplete: function(tog, el) {
		// alert('scroll');
		// new Fx.Scroll( window, { duration: this.options.duration }).toElement(tog);
      }
    });
    $$('.wrapper').each(function(el) {
      el.setProperty('role', 'tab');
      el.setProperty('tabindex', 0);
      el.addEvents({
        'keypress': function(event) {
          if (event.code == 13 || event.code == 32) {
            this.fireEvent('click');
          }
        },
        'focus': function() {
          this.addClass('hover');
        },
        'blur': function() {
          this.removeClass('hover');
        },
        'mouseenter': function() {
          this.addClass('hover');
        },
        'mouseleave': function() {
          this.removeClass('hover');
        }
      });
    });
    $$('.ce_code').each(function(el) {
      el.setProperty('role', 'tablist');
    });
    $$('.code').each(function(el) {
      el.setProperty('role', 'tabpanel');
    });
  });
</script>

Dazu noch ein paar Einträge im CSS vornehmen und sich passende Icons suchen. Ich habe die Feather Icons von Cole Bemis im Einsatz:Maximize IconMinimize Icon

CSS für Codewrapper

Code eingefügt. Hier klicken zum Ein- / Ausblenden
/* Code Wrapper Dateiname */
h4 {
    width:30%;
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("files/layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-size:1em;
    font-weight:bold;
    background-size: contain;
}

/* Code No Wrapper Dateiname */
h5 {
    width:30%;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("files/layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-size:1em;
    font-weight:bold;
    background-size: contain;
}

/* Code Wrapper Inhalt */
.code {
    padding-right:2em;
    padding-left:2em;
}

/* Code No Wrapper Inhalt */
.code-no-wrap {
    padding-right:2em;
    padding-left:2em;
}

/* Code Wrapper Toggler */
.wrapper {
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("files/layout/svg_icons/maximize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: contain;
    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 {
    background-image:url("files/layout/svg_icons/minimize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: contain;
}

Durch Auswahl des Elements Code und der Überschrift h4 in Verbindung mit dem Template ce_codewrapper erhalte ich den Code versteckt, mit h5 und Template ce_code_nowrap ist er sichtbar.

Um jetzt einen zugeklappten 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 Beispiel für das erste Wrapperelement in diesem Artikel ergibt sich folgender Link: https://nightwing.eu/cms-contao/codewrapper/?wid=0

 

Achtung:

Bitte die Templates im Backend unter Templates auswählen und speichern und dann dort editieren! Ansonsten sind die Änderungen nicht updatesicher.

Zurück