[RockSolid Custom Elements] - Ticker

[Rocksolid Custom Elements] Ticker - erstellt einen einfachen Ticker.
* slide-Animation mit CSS
* kein Javascipt
* kein jQuery
* Zeit des Slides variierbar
* Möglichkeit zum Stop bei mouseover
* Möglichkeit zur Vergabe einer eigenen Klasse pro Slide
* mit etwas mehr an CSS kann auch via Inserttag z.B. ein News-Module eingefügt werden, welches dann slidet - {{insert_module::ID}}

rsce_ticker_config.php

PHP-Code:

---

<?php

return [
    'label' => ['Ticker','Erstellt einen einfachen Ticker'],
    'types' => ['content','module'],
    'contentCategory' => 'WERBEpanorama',
    'moduleCategory' => 'WERBEpanorama',
    'standardFields' => ['cssID'],
    'beTemplate' => 'rsce_ticker_backend',
    'fields' => [
        'duration' => [
            'label' => ['Dauer','Geben Sie die Durchlaufdauer in Millisekunden ein. 1000 = 1 Sekunde. Standard = 13000 = 13 Sekunden'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50',
                'rgxp' => 'natural',
            ],
            'default' => '13000',
        ],
        'animationstopp' => [
            'label' => ['Stop Animation','Beendet Animation bei mouse-hover'],
            'inputType' => 'checkbox',
            'eval' => [
                'tl_class' => 'w50 m12',
            ],
            'default' => false,
        ],
        'items' => [
            'label' => ['Items','Fügen Sie Inhalte ein. HTML erlaubt'],
            'elementLabel' => 'Item %s',
            'inputType' => 'list',
            'minItems' => 1,
            'fields' => [
                'content' => [
                    'label' => ['Item Inhalt',''],
                    'inputType' => 'text',
                    'eval' => [
                        'tl_class' => 'w50',  
                        'allowHtml' => true,
                        'mandatory' => true,  
                    ], 
                ],
                'itemclass' => [
                    'label' => ['Klasse','Hier können Sie eine Klasse für das Item vergeben.'],
                    'inputType' => 'text',
                    'eval' => [
                        'tl_class' => 'w50',
                    ],
                ],
            ],
        ],
    ],
];

---

rsce_ticker.html5

PHP-Code:

---

<?php
$GLOBALS['TL_CSS'][] = 'files/layout/css/rsce_ticker.css';
?>

<div class="slidercontainer">
    <div class="slidewrapper">
        <div class="slideitems primary <?php if ($this->animationstopp): echo 'stopp'; endif; ?>" style="animation: primary <?= $this->duration ?>ms linear infinite">
            <?php foreach($this->items as $item): ?>
            <div class="slideitem <?php if ($item->itemclass): echo $item->itemclass; endif; ?>">
                <?= $item->content ?>
            </div>
            <?php endforeach ?>
        </div>
        <div class="slideitems secondary <?php if ($this->animationstopp): echo 'stopp'; endif; ?>" style="animation: secondary <?= $this->duration ?>ms linear infinite">
            <?php foreach($this->items as $item): ?>
            <div class="slideitem <?php if ($item->itemclass): echo $item->itemclass; endif; ?>">
                <?= $item->content ?>
            </div>
            <?php endforeach ?>
        </div>        
    </div>
</div>

---

rsce_ticker.css

PHP-Code:

---

.slidercontainer {
    display: flex;
    align-items: center;
    height: 50vh;
    width: 100%;
    overflow: hidden;
}
.slidewrapper {
    position: relative;
    width: 100%;
    height: 20rem;
    padding: 2rem 0;
    font-size: 2rem;
    overflow-x: hidden;
}
.slideitems {
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0%;
    top: 0%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
/*.primary {
    animation: primary 13s linear infinite;
}
.secondary {
    animation: secondary 13s linear infinite;
}*/
@keyframes primary {
    from {
      left: 0%;
    }
    to {
      left: -100%;
    }
}
@keyframes secondary {
    from {
      left: 100%;
    }
    to {
      left: 0%;
    }
}
  
/* tRansition paused on mouseover */
.slidewrapper:hover > .slideitems.stopp {
  animation-play-state: paused!important;
} 


---

rsce_ticker_backend.html5

PHP-Code:

---

<?php if (TL_MODE === 'BE'): ?>

<span><?= $this->duration ?> ms</span><br>
<?php foreach($this->items as $item): ?>
<span><?= $item->content ?></span><br>
<?php endforeach ?>

<?php endif; ?>

---

Beispiel Backend:
https://community.contao.org/de/atta...6&d=1649270234
Anhang 25456

Beispiel Frontend:
https://community.contao.org/de/atta...5&d=1649270069
Anhang 25455