Teaser als Akkordeon aufklappen in Contao 5.3

[Schnippel]

Hi Leute,

wie lässt sich in Contao 5.3 die Teaser als Akkordeon aufklappen?

Unbenannt-1.jpg

Dazu wurde in den vorherigen Contao-Versionen das Template "news_latest" geändert, und zwar so hier:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">
 
 <?php if ($this->hasMetaFields): ?>
   <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
 <?php endif; ?>
 
 <?php if ($this->addImage): ?>
   <?php $this->insert('image', $this->arrData); ?>
 <?php endif; ?>
 
 <h2><?= $this->linkHeadline ?></h2>
 
 <div class="ce_text block">
   <?= $this->teaser ?>
<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
 <div class="toggler"><h2 itemprop="name">
   <?= $this->headline ?></h2>
 </div>
 
 <?php if ($this->hasText || $this->hasTeaser): ?>
   <p class="more"><?= $this->more ?></p>
 <?php endif; ?>
 
 <div class="ce_text block" itemprop="description">
   <div class="accordion">
     <?php if ($this->hasMetaFields): ?>
       <p class="info"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
     <?php endif; ?>
     <?php if ($this->addImage): ?> <?php $this->insert('image', $this->arrData); ?> <?php endif; ?>
     <div class="ce_text block" itemprop="description">
       <?php if ($this->teaser): ?>
         <?php echo \StringUtil::substr($this->teaser,120); ?>
       <?php else: ?>
         <?php echo \StringUtil::substr($this->text,120); ?>
       <?php endif; ?>
     </div>
     <?php if ($this->hasText || $this->hasTeaser): ?>
       <p class="more"><?= $this->more ?></p>
     <?php endif; ?>
   </div>
 </div>
</div>
 
<?php
 
// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
   $this->addSchemaOrg($this->getSchemaOrgData());
}

Wie kann das Ganze jetzt in Contao 5.3 umgesetzt werden?
Was muß da an dem neuen "news_latest" in Contao 5.3 wie und wo geändert oder ergänzt werden, damit das klappt?
Ich steh da bissl uffn Schlauch mangels technischen Wissen :-/

[zoglo]

Hi Leute,

wie lässt sich in Contao 5.3 die Teaser als Akkordeon aufklappen?

Unbenannt-1.jpg

Dazu wurde in den vorherigen Contao-Versionen das Template "news_latest" geändert, und zwar so hier:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">
 
 <?php if ($this->hasMetaFields): ?>
   <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
 <?php endif; ?>
 
 <?php if ($this->addImage): ?>
   <?php $this->insert('image', $this->arrData); ?>
 <?php endif; ?>
 
 <h2><?= $this->linkHeadline ?></h2>
 
 <div class="ce_text block">
   <?= $this->teaser ?>
<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
 <div class="toggler"><h2 itemprop="name">
   <?= $this->headline ?></h2>
 </div>
 
 <?php if ($this->hasText || $this->hasTeaser): ?>
   <p class="more"><?= $this->more ?></p>
 <?php endif; ?>
 
 <div class="ce_text block" itemprop="description">
   <div class="accordion">
     <?php if ($this->hasMetaFields): ?>
       <p class="info"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
     <?php endif; ?>
     <?php if ($this->addImage): ?> <?php $this->insert('image', $this->arrData); ?> <?php endif; ?>
     <div class="ce_text block" itemprop="description">
       <?php if ($this->teaser): ?>
         <?php echo \StringUtil::substr($this->teaser,120); ?>
       <?php else: ?>
         <?php echo \StringUtil::substr($this->text,120); ?>
       <?php endif; ?>
     </div>
     <?php if ($this->hasText || $this->hasTeaser): ?>
       <p class="more"><?= $this->more ?></p>
     <?php endif; ?>
   </div>
 </div>
</div>
 
<?php
 
// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
   $this->addSchemaOrg($this->getSchemaOrgData());
}

Wie kann das Ganze jetzt in Contao 5.3 umgesetzt werden?
Was muß da an dem neuen "news_latest" in Contao 5.3 wie und wo geändert oder ergänzt werden, damit das klappt?
Ich steh da bissl uffn Schlauch mangels technischen Wissen :-/

Im Beispiel von Handorgel.JS gibt es ein Markup, wie es auszusehen hat + die Skriptinitialisierungen:
https://oncode.github.io/handorgel/

[mlweb]

Übrigens nur so am Rand - das news-latest des Cores ist nicht wirklich neu. Ist immer noch ein HTML5-Template und hat m.E. keine großartigen Veränderungen gegenüber der 4.13 erhalten.
Neu ist das in Contao verwendete Akkordeon.

[Schnippel]

Hmm,

aber ich muß schon das Template in 5.3 "news_latest" mir zur Hand nehmen, was so hier ausschaut:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

  <?php $this->block('info'); ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?></p>
  <?php $this->endblock(); ?>

  <?php if ($this->addImage): ?>
    <?php $this->insert('image', $this->arrData); ?>
  <?php endif; ?>

  <h2><?= $this->linkHeadline ?></h2>

  <div class="ce_text block">
    <?= $this->cspInlineStyles($this->teaser) ?>
  </div>

  <?php if ($this->hasText || $this->hasTeaser): ?>
    <p class="more"><?= $this->more ?></p>
  <?php endif; ?>

</div>

<?php

// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
    $this->addSchemaOrg($this->getSchemaOrgData());
}

Was muß da jetzt wo genau hinzugefügt werden?

Ich hatte damals diese Seite hier: https://nightwing.eu/cms-contao/akko...ste-eventliste

Unbenannt-2.jpg

Geht sicherlich für Contao 5.3 nicht mehr, oder?

[mlweb]

Das Template ist schon das richtige, aber das Akkordeon in Contao 5.3 ist ein anderes. Ein Beispiel für den Aufbau des Codes beim neuen Akkordeon hat Dir zoglo oben gepostet.

[zoglo]

Ich habe dir mal die Templates visuell markiert, welche Gemeinsamkeiten die haben, das musst du nun zusammenbauen. Bin gerade nicht mehr an meinem Arbeitsgerät, ist Wochenende.. daher schnell mit MS Paint gemalt:
Unbenannt (33).png

[Schnippel]

Hi,

ich hab das mal versucht irgendwie zusammenzubasteln..

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">
<div class="handorgel">

  <?php $this->block('info'); ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?></p>
  <?php $this->endblock(); ?>

  <?php if ($this->addImage): ?>
    <?php $this->insert('image', $this->arrData); ?>
  <?php endif; ?>

  <h2><?= $this->linkHeadline ?>
     <h3 class="handorgel__header">
        <button class="handorgel__header__button" autofocus>
          Title (autofocused)
        </button>
      </h3>
      </h2>

<?php if ($this->hasText || $this->hasTeaser): ?>
    <p class="more"><?= $this->more ?></p>
 
  <div class="handorgel__content" data-open>
    <div class="handorgel__content__inner">
      Content openened by default
    </div>
  </div>


  <div class="ce_text block">
    <?= $this->cspInlineStyles($this->teaser) ?>
  </div>
   <?php endif; ?>
   

  

</div>
</div>

<?php

// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
    $this->addSchemaOrg($this->getSchemaOrgData());
}

Leider funtkioniert das bei mir nicht. :-/
Sieht jemand, was ich da wie wo falsch mache?

[zoglo]

Und das alles noch mit Skriptinitialisierungen, das fehlt dir ja gerade.

[Schnippel]

Hmm bei mir will es nicht. :-/

ich habe unter Themes > im Seitenlayout > JavaScript-Templates > js_accordion

aktiviert.

Die Accordions lassen sich nicht öffnen.
Deaktivere ich das js_accordion, dann sind die Accordions alle offen.

Oder habe ich hier einen Denkfehler?

[zoglo]

Hmm bei mir will es nicht. :-/

ich habe unter Themes > im Seitenlayout > JavaScript-Templates > js_accordion

aktiviert.

Die Accordions lassen sich nicht öffnen.
Deaktivere ich das js_accordion, dann sind die Accordions alle offen.

Oder habe ich hier einen Denkfehler?

Dann wird die Struktur nocht nicht ganz stimmen. Schau dir das mal an dieser Struktur ab (Über die Browserkonsole das HTML mal vergleichen)
https://demo.contao.org/accordion.html

[Schnippel]

Mein Template schaut so hier aus:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
 <div class="content-accordion">
     <div class="handorgel">
      <h2 class="handorgel__header itemprop="name">
      
        <button class="handorgel__header__button">
          <?= $this->linkHeadline ?>
        </button>
        
        </h2>
        
        <div class="handorgel__content" data-open>
            <div class="handorgel__content__inner">
                 <?php if ($this->hasText || $this->hasTeaser): ?>
                
                <?php $this->block('info'); ?>
                  <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?></p>
                      <?php $this->endblock(); ?>
                     
                <?php if ($this->addImage): ?>
                <?php $this->insert('image', $this->arrData); ?>
                  <?php endif; ?>

                <div class="ce_text block">
                    <?= $this->cspInlineStyles($this->teaser) ?>
                  </div>
                <p class="more"><?= $this->more ?></p>
                <?php endif; ?>
                
            </div>
       </div>
       
     </div>
 </div>  
</div>

<?php

// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
    $this->addSchemaOrg($this->getSchemaOrgData());
}

Die Akkordeons lassen sich nicht aufklappen.

Und das alles noch mit Skriptinitialisierungen, das fehlt dir ja gerade.

Das Skrit im Seitenlayout aktivieren, welches von Contao angezeigt wird, oder?
Unbenannt-1.jpg


Gleich noch eine Frage:
beim

<button class="handorgel__header__button">
          <?= $this->linkHeadline ?>
        </button>

ist ein Link. Was muß ich angeben, wenn es nur die Headline ohne einen Link sein soll? Hab das mit "Headline" probiert, aber da wurde nichts angezeigt.

[Schnippel]

Ich habe mal bissl mit KI probiert und folgendes zusammegebastelt.
Das Problem ist jetzt noch, daß ein geöffnetes Accordion sich nicht automatisch schließt, wenn ein anderes Accordion geöffnet wird. Somit sind dann 2 Accordions offen. Wie kann man das ändern?

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">

  <div class="handorgel js-news-handorgel">

    <h2 class="handorgel__header" itemprop="name">
   
      <button class="handorgel__header__button" type="button">
         <?= $this->headline ?>
      </button>
    </h2>

    <div class="handorgel__content" data-close>
      <div class="handorgel__content__inner" itemprop="description">
        <?php if ($this->hasText || $this->hasTeaser): ?>
        
         <?php $this->block('info'); ?>
                  <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?></p>
                      <?php $this->endblock(); ?>
                     
                <?php if ($this->addImage): ?>
                <?php $this->insert('image', $this->arrData); ?>
                  <?php endif; ?>

                <div class="ce_text block">
                    <?= $this->cspInlineStyles($this->teaser) ?>
                  </div>
                <p class="more"><?= $this->more ?></p>
                <?php endif; ?>

     
        

      </div>
    </div>

  </div>
</div>



<!--// /*Handorgel init: nur falls nicht bereits global initialisiert*/ -->
<script>
(function () {
  function init() {
    if (!window.handorgel) return;

    document.querySelectorAll('.mod_newsarchive .js-news-handorgel').forEach(function (el) {
      if (el.dataset.handorgelReady) return;
      el.dataset.handorgelReady = '1';
      new handorgel(el, { collapsible: true });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

[JamesdK]

Dann musst du die Option

multiSelectable: false

ergänzen, siehe auch https://github.com/oncode/handorgel

[Schnippel]

Dann musst du die Option
Code:
multiSelectable: false
ergänzen

und wo genau muß ich das machen? in dem Template?

Oder muß ich in den Ordner "assets > handorgel > js" gehen und dort die Datei "handorgel.js" ändern?
Das ist doch jene js, welche im Contao-BA im Seitenlayout aktivier wird, oder?


### UPDATE ####

Ich glaube, jetzt funktioniert es.
Ziel war es, dass Nachrichten als Teaser angezeigt werden in einem Accordion, siehe hier:
https://community.contao.org/de/atta...8&d=1771005160

- Accordion öffnet sich, wenn man drauf klickt, und schließt sich bei erneutem Klick oder, wenn ein anderes Accordion geöffnert wird.

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">

  <div class="handorgel js-news-handorgel">

    <h2 class="handorgel__header" itemprop="name">
      <button class="handorgel__header__button" type="button">
        <?= $this->headline ?>
      </button>
    </h2>

    <div class="handorgel__content">
      <div class="handorgel__content__inner" itemprop="description">

        <?php $this->block('info'); ?>
          <p class="info">
            <time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time>
            <?= $this->author ?>
          </p>
        <?php $this->endblock(); ?>

        <?php if ($this->addImage): ?>
          <?php $this->insert('image', $this->arrData); ?>
        <?php endif; ?>

        <div class="ce_text block">
          <?= $this->cspInlineStyles($this->teaser) ?>
        </div>

        <?php if ($this->hasText || $this->hasTeaser): ?>
          <p class="more"><?= $this->more ?></p>
        <?php endif; ?>

      </div>
    </div>

  </div>
</div>

<?php
if (!$this->hasReader) {
  $this->addSchemaOrg($this->getSchemaOrgData());
}
?>

<script>
(function () {
  function init() {
    if (!window.handorgel) return;

    // Alle Handorgel-Instanzen sammeln
    var instances = [];

    document.querySelectorAll('.mod_newsarchive .js-news-handorgel').forEach(function (el) {
      if (el.dataset.handorgelReady) return;
      el.dataset.handorgelReady = '1';

      var hg = new handorgel(el, {
        collapsible: true,
        multiSelectable: true // wir regeln "nur eins offen" seitenweit selbst
      });

      instances.push(hg);

      // Wenn in dieser Instanz ein Panel geöffnet wird: alle anderen schließen
      el.addEventListener('click', function (ev) {
        // nur reagieren, wenn Header/Button geklickt wurde
        if (!ev.target.closest('.handorgel__header__button')) return;

        // etwas später prüfen, damit Handorgel den Toggle erst ausführt
        window.setTimeout(function () {
          // ist in dieser Instanz gerade ein Panel offen?
          var hasOpen = el.querySelector('.handorgel__content.handorgel__content--open');
          if (!hasOpen) return;

          instances.forEach(function (otherHg) {
            if (otherHg === hg) return;
            // alle offenen Panels in anderen Instanzen schließen
            otherHg.folds.forEach(function (fold) {
              fold.close();
            });
          });
        }, 0);
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

Ich danke euch allen für eure Hilfe, Tipps und Anregungen.