Modul stage_teaser_sd

Alles rund um Module und Plugins in CONTENIDO 4.10.
Antworten
McHubi
Beiträge: 1092
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Modul stage_teaser_sd

Beitrag von McHubi » Mi 29. Mai 2019, 22:39

Hallo zusammen,

dieses Modul stellt Teaser dar, die nacheinander eingefadet werden. Dabei besteht die Möglichkeit, Zusatzinformationen über die jeweiligen Teaser zu legen und dabei alle Möglichkeiten des Tinymce zu nutzen. So lassen sich Fettungen, Links, Bulletpoints, Buttons usw. integrieren. Die Daten zu den einzelnen Teasern werden in separaten Webartikeln hinterlegt und ausgelesen.

Einstellungen über den Artikelreiter "Konfiguration":
* Höhe der Stage
* Anzeigedauer der Teaser
* Dauer des Überblendeffekts
* Darstellung der ggf. vorhandenen Zusatzinfos oben oder unten auf dem Teaser
* Darstellung von Teaserbullets ja/nein (per Klick auf die Teaserbullets können einzelne Teaser direkt aufgerufen werden)
* Darstellung des play/pause-Buttons ja/nein
* Sortierung der Teaser nach title, Erstellungsdatum oder Veröffentlichungsdatum des Webartikels mit den Teaserinfos

INSTALLATION
1) Anlegen einer neuen Vorlage mit den Modulen content_image (Standardmodul des Demomandanten) und content_text
2) Anlegen einer eigenen Kategorie für die Ablage der Webartikel mit den Teaser-Infos
3) Anlegen der gewünschten Menge Teaser (Webartikel) in dieser Kategorie mit Bild und ggf. Text
4) Einbinden des Moduls "stage_teaser_sd" in der Vorlage in der die Stage eingebunden werden soll
5) Konfiguration des Moduls im Artikelreiter "Konfiguration" mit Angabe der ID-Cat der Kategorie in der die Teaser abgelegt sind
6) Ggf. Anpassung der CSS-Klassen an die eigenen Bedürfnisse


Modul-Eingabe

Code: Alles auswählen

/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname   :     stage_teaser_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Markus Hübner
* Created     :     05/2019
************************************************/

echo '<table>';
echo '<tr><td>'.mi18n("input idcat slider articles").'</td><td><input size="2" type="text" name="CMS_VAR[100]" value="CMS_VALUE[100]"></td></tr>';

echo '<tr><td>'.mi18n("input sort articles by").'</td><td>
  <input type="radio" name="CMS_VAR[200]" value="title"';
    if(CMS_VALUE[200]== "title") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles by title").'<br/>
  <input type="radio" name="CMS_VAR[200]" value="created"';
    if(CMS_VALUE[200]== "created") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles by created").'<br/>
  <input type="radio" name="CMS_VAR[200]" value="published"';
    if(CMS_VALUE[200]== "published") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles by published").'<br/>
  <br/>
  <input type="radio" name="CMS_VAR[210]" value="DESC"';
    if(CMS_VALUE[210]== "DESC") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles descending").'<br/>
  <input type="radio" name="CMS_VAR[210]" value="ASC"';
    if(CMS_VALUE[210]== "ASC") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles ascending").'
</td></tr>';

echo '<tr><td>'.mi18n("input slider height").'</td><td><input size="2" type="text" name="CMS_VAR[300]" value="CMS_VALUE[300]"> '.mi18n("input slider height unit").'</td></tr>';
echo '<tr><td>'.mi18n("input slider fading-time").'</td><td><input size="2" type="text" name="CMS_VAR[310]" value="CMS_VALUE[310]"> '.mi18n("input slider fading-time unit").'</td></tr>';
echo '<tr><td>'.mi18n("input slider display-time").'</td><td><input size="2" type="text" name="CMS_VAR[320]" value="CMS_VALUE[320]"> '.mi18n("input slider display-time unit").'</td></tr>';

echo '<tr><td>'.mi18n("input slider description position").'</td><td>
  <input type="radio" name="CMS_VAR[400]" value="top"';
    if(CMS_VALUE[400]== "top") echo ' checked="checked"';
    echo '>'.mi18n("input slider description position top").'<br/>
  <input type="radio" name="CMS_VAR[400]" value="bottom"';
    if(CMS_VALUE[400]== "bottom") echo ' checked="checked"';
    echo '>'.mi18n("input slider description position bottom").'
</td></tr>';

echo '<tr><td>'.mi18n("input slider navi show bullets").'</td><td>
  <input type="radio" name="CMS_VAR[500]" value="yes"';
    if(CMS_VALUE[500]== "yes") echo ' checked="checked"';
    echo '>'.mi18n("input yes").'<br/>
  <input type="radio" name="CMS_VAR[500]" value="no"';
    if(CMS_VALUE[500]== "no") echo ' checked="checked"';
    echo '>'.mi18n("input no").'
</td></tr>';

echo '<tr><td>'.mi18n("input slider navi show play-pause").'</td><td>
  <input type="radio" name="CMS_VAR[600]" value="yes"';
    if(CMS_VALUE[600]== "yes") echo ' checked="checked"';
    echo '>'.mi18n("input yes").'<br/>
  <input type="radio" name="CMS_VAR[600]" value="no"';
    if(CMS_VALUE[600]== "no") echo ' checked="checked"';
    echo '>'.mi18n("input no").'
</td></tr>';
echo '</table>';
Modul-Ausgabe

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     stage_teaser_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Markus Hübner
* Created     :     05/2019
************************************************/

$idcat_slider_articles="CMS_VALUE[100]";
$sort_by="CMS_VALUE[200]"; // title, created, published
$sort_direction="CMS_VALUE[210]"; // ASC or DESC
$slider_height="CMS_VALUE[300]"; //em is used!
$slide_duration="CMS_VALUE[320]"; //milli-seconds are used!
$slide_transition="CMS_VALUE[310]"; //seconds are used! 
$description_position="CMS_VALUE[400]";
$show_slide_numbers="CMS_VALUE[500]";
$show_play_pause="CMS_VALUE[600]";

$array_articles_order=array();
$query="SELECT  T1.idart, T2.title, T2.published
FROM  con_cat_art T1, con_art_lang T2
WHERE  T1.idart = T2.idart 
AND T1.idcat='$idcat_slider_articles' 
AND T2.online='1' 
ORDER BY T2.$sort_by $sort_direction";
  $result = cRegistry::getDb();
  $result->query($query);
  while($result->nextRecord())
    {
	  $array_result=$result->toArray();
	  $array_articles_order[]=$array_result[idart];
    }

echo '<div id="slides" style="height: '.$slider_height.'em;">';
$amount_of_slides=0;

foreach($array_articles_order AS $idart_sliderarticle)
  {
  $amount_of_slides++;
  $article = new cApiArticleLanguage();
  $article->loadByArticleAndLanguageId($idart_sliderarticle, $lang);
  $slide_text=$article->getContent('CMS_HTML', 1);
  $upl_id=$article->getContent('CMS_IMGEDITOR', 1);
  $query="SELECT dirname,filename FROM con_upl WHERE idupl='$upl_id'";
  $result = cRegistry::getDb();
  $result->query($query);
  while($result->nextRecord()) $array_result=$result->toArray();
  $slide_image=$standard_upload_folder.$array_result[dirname].$array_result[filename];
  echo '<div ';
  if($amount_of_slides==1) echo 'class="slide showing"';
    else echo 'class="slide"';
  echo ' style="background-image: url(\'upload/'.$slide_image.'\'); height: '.$slider_height.'em; transition: opacity '.$slide_transition.'s;';
  echo '"/>';
  if($slide_text!="")
    {
    echo '<div class="description" style="';
    if($description_position=="top") echo 'top: 0px;';
    else echo 'bottom: 0px;';
    echo '">'.$slide_text.'</div>';
    }
  echo '</div>';
  }
echo '</div>';

  echo '<div class="amount_of_slides"><ul id="slides_numbers" class="number_of_slide"';
  if($show_slide_numbers=="no") echo ' style="display: none;"';
  echo '>';
  $i=0;
  while($i<$amount_of_slides)
    {
    echo '<li onclick="javascript: chooseSlide('.$i.','.$amount_of_slides.');" ';
    if($i==0) echo 'class="slide_number number_active"';
      else echo 'class="slide_number number_passive"';
    $i++;
    echo '>';
    echo '&bull;';
    //echo $i;
    echo '</li>';
    }
  echo '</ul></div>';
  
echo '<div class="control"';
if($show_play_pause=="no") echo ' style="display: none;"';
echo '><button class="controls" id="pause">&#10073;&#10073;</button></control>';
?>
<script type="text/javascript">
var var_slide_duration=<?php echo $slide_duration; ?>*1;
</script>
CSS

Code: Alles auswählen

.controls {
    margin-top: 0em;
    }
    #slides{
    position: relative;
    height: 20em;
    overflow: hidden;
    font-size: 1em;
    }
    
    .slide{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 20em;
    width: 100%;
    opacity: 0;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    }
    
    .showing{
    opacity: 1;
    z-index: 2;
    }
    
    div.description {
    position: absolute;
    width: 100%;
    padding: 0.2em;
    background-color: rgba(255,255,255,0.4);
    color: #000000;
    font-size: 0.9em;
    }
    
    div.amount_of_slides {
    text-align: center;
    }
    
    ul.number_of_slide {
    padding-left: 0;
    margin-top: -0.5em;
    margin-bottom: -0.5em;
    }
    ul.number_of_slide li {
    list-style-type: none;
    display: inline;
    font-size: 3em;
    line-height: 1em;
    cursor: pointer;
    }
    li.number_active {
    color: #444444;
    transition: 0.5s;
    }
    li.number_passive {
    color: #ffffff;
    transition: 0.5s;
    }
    
    div.control {
    text-align: center;
    margin-top: 1em;
    }
    div.control button  {
    background-color: ffffff;
    color: #444444;
    border: 1px solid #444444;
    border-radius: 0.3em;
    padding: 0.5em;
    transition: 0.5s;
    width: 3em;
    }
    div.control button:hover  {
    background-color: #444444;
    color: #ffffff;
    transition: 0.5s;
    cursor: pointer;
    }
    
    
    /*
    non-essential
    */
    /*
    .slide{
        padding: 0px;
        box-sizing: border-box;
        background: #333;
        color: #fff;
    }
    .slide:nth-of-type(1){
        background: red;
    }
    .slide:nth-of-type(2){
        background: orange;
    }
    .slide:nth-of-type(3){
        background: green;
    }
    .slide:nth-of-type(4){
        background: blue;
    }
    .slide:nth-of-type(5){
        background: purple;
    }
    */
JavaScript

Code: Alles auswählen

var slides = document.querySelectorAll('#slides .slide');
var slides_numbers = document.querySelectorAll('#slides_numbers .slide_number');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,var_slide_duration);

var var_chosen_slide=0;
var var_amount_of_slides=0;

function nextSlide(){
    slides[currentSlide].className = 'slide';
    slides_numbers[currentSlide].className = 'slide_number number_passive';
	currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
    slides_numbers[currentSlide].className = 'slide_number number_active';
}

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
    pauseButton.innerHTML = '&#10095;';
    playing = false;
    clearInterval(slideInterval);
}

function playSlideshow(){
    pauseButton.innerHTML = '&#10073;&#10073;';
    playing = true;
    slideInterval = setInterval(nextSlide,var_slide_duration);
}

function chooseSlide(var_chosen_slide,var_amount_of_slides) {
pauseSlideshow();
currentSlide=var_chosen_slide;
var var_i=0;
while(var_i<var_amount_of_slides)
  {
   if(var_i!=var_chosen_slide)
    {
    slides[var_i].className = 'slide';
    slides_numbers[var_i].className = 'slide_number number_passive';
    }
    else
      {
      slides[var_i].className = 'slide showing';
      slides_numbers[var_i].className = 'slide_number number_active';
      }
   var_i++;
  }
}

pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ playSlideshow(); }
};
Übersetzung

Code: Alles auswählen

input idcat slider articles=idcat der Teaser-Artikel
input no=nein
input slider description position=Position der Beschreibung
input slider description position bottom=unten
input slider description position top=oben
input slider display-time=Anzeigedauer pro Teaser
input slider display-time unit=Millisekunden
input slider fading-time=Dauer Fading-Animation
input slider fading-time unit=Sekunden (Teilsekunden bitte mit Punkt angeben: 3.5)
input slider height=Höhe
input slider height unit=em
input slider navi show bullets=zeige Teaser-Bullets
input slider navi show play-pause=zeige play/pause
input sort articles ascending=aufsteigend
input sort articles by=Sortierung nach
input sort articles by created=erstellt
input sort articles by published=veröffentlicht
input sort articles by title=title
input sort articles descending=absteigend
input yes=ja
stage_teaser_sd-fe-001.jpg
(185.77 KiB) Noch nie heruntergeladen
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

(NEU!) Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Antworten