Seite 1 von 1

Modul: Tabelle in Accordion umwandeln

Verfasst: Do 8. Aug 2019, 21:05
von McHubi
Hallo zusammen,

es gibt wieder ein neues Modul. Webartikel mit umfangreichen Inhalten können schnell "erschlagen". Um den Inhalt besser erfassen zu können, habe ich schon ein Modul entwickelt, was ein Inhaltsverzeichnis mit Sprungmarken automatisch erstellt (viewtopic.php?f=116&t=43522). Eine andere Möglichkeit ist der Einsatz von Accordions, worum sich dieses Modul hier dreht.

Was macht das Modul?

Es wandelt Tabellen automatisch in Accordions um. Dazu muss einer einspaltigen Tabelle lediglich die CSS-Klasse "accordion" zugewiesen werden und dann im Wechsel deren Zeilen die Klassen "accordion_header" und "accordion_content". Per JavaScript wird dann aus der Tabelle ein Accordion.

Die Accordion-Funktionalität kann über die Modulkonfiguration aktiviert und deaktiviert werden, darüber hinaus kann festgelegt werden, ab welcher Anzahl von Elementen die Option "alle öffnen/schließen" eingeblendet wird. Falls die Accordiongenerierung deaktiviert wird oder JavaScript im Browser nicht aktiviert ist, werden die Inhalte einfach untereinander weg dargestellt mit einer Fettung der Headerinhalte - bleiben also nutzbar.

Wie wird es eingebunden und konfiguriert?

1) Modul anlegen
2) Modul in der gewünschten Vorlage möglichst am Ende des <body>-Abschnitts einbinden (die umzuwandelnden Contents müssen beim Rendern der Seite schon vorhanden sein)
3) CSS-Klassen in der Datei "style_tiny.css" einbinden
4) In der Konfiguration des TinyMCE die JSON-Parameter im Bereich CMS_HTML ergänzen damit die Klassen im TinyMCE zugewiesen werden können.
5) Im gewünschten Artikel per Tiny eine einspaltige Tabelle mit einer geraden Anzahl an Zeilen anlegen.
6) Der Tabelle die CSS-Klasse "accordion" zuweisen und den Zeilen im Wechsel "accordion_header" und "accordion_content".
7) In der Konfiguration des Artikels die Checkbox zur Nutzung des Accordion-Umwandlungsscripts aktivieren und die Anzahl eintragen ab der die Option "alles öffnen/schließen" eingeblendet werden soll.

Sourcen

Modul-Eingabe

Code: Alles auswählen

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

echo '<input type="checkbox" name="CMS_VAR[100]" value="true"';
if ("CMS_VALUE[100]" == "true") echo 'checked="checked"';
echo '/>'.mi18n("Accordions verwenden").'<br/>';
echo mi18n("Ab wie vielen Elementen soll die Option alle öffnen/schließen angezeigt werden?").' <input type="text" name="CMS_VAR[200]" value="CMS_VALUE[200]"/>';
Modul-Ausgabe

Code: Alles auswählen

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

$open_all_minimum_elements="CMS_VALUE[200]";
if($open_all_minimum_elements=="") $open_all_minimum_elements=3;
if('CMS_VALUE[100]'=="true")
{
?>
<script>
/* ##### functions begin ##### */
function open_accordion_element(var_accordion_content_number)
{
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.maxHeight="2000px";
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.transition="max-height 3s";
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.borderBottom="1px solid #999999";
document.getElementsByClassName('accordion_icon')[var_accordion_content_number].innerHTML="&nbsp;&nbsp;&lang;";
}

function close_accordion_element(var_accordion_content_number)
{
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.maxHeight="0px";
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.transition="0.5s";
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.borderBottom="none";
document.getElementsByClassName('accordion_icon')[var_accordion_content_number].innerHTML="&nbsp;&nbsp;&rang;";
}

function show_accordion_content(var_accordion_content_number,var_type,var_start_with_accordion_content_number,var_amount_of_elements,var_change_multiple_toggle_number,var_general_behaviour) 
{
console.log(var_start_with_accordion_content_number);
console.log(var_amount_of_elements);
console.log(var_type);
if(var_type=="single")
    {
    var var_accordion_content_container_status=document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.maxHeight;
    if(var_accordion_content_container_status=="0px") open_accordion_element(var_accordion_content_number);
        else close_accordion_element(var_accordion_content_number);
    }
    else
        {
        var j=0;
        while(j<var_amount_of_elements)
            {
            var var_accordion_content_container_status=document.getElementsByClassName('accordion_content_container')[var_start_with_accordion_content_number].style.maxHeight;
            if(var_general_behaviour=="open" && var_accordion_content_container_status=="0px") open_accordion_element(var_start_with_accordion_content_number);
                else
                    {
                    if(var_general_behaviour=="close") close_accordion_element(var_start_with_accordion_content_number);
                    }
            var_start_with_accordion_content_number++;
            j++;
            }
        }
}
/* ##### functions end ##### */


/* ##### initialising transformation and configuration begin ##### */
var var_accordions = document.getElementsByClassName('accordion');
var var_accordion_headers = document.getElementsByClassName('accordion_header');
var var_accordion_contents = document.getElementsByClassName('accordion_content');
var var_accordion_amount_of_accordions=var_accordions.length;
var var_accordion_amount_of_headers=var_accordion_headers.length;
var var_accordion_amount_of_contents=var_accordion_contents.length;
var var_accordion_content_container = document.getElementsByClassName('accordion_content_container');
var var_accordion_amount_of_accordion_content_container=var_accordion_content_container.length;
var var_add_general_open_close=<?php echo $open_all_minimum_elements; ?> //number of minimum elements to add icons for opening and closing all accordion elements together
/* ##### initialising transformation and configuration end ##### */


/* ##### transformation table to accordion begin ##### */
var i=0;
var var_content="";
var var_content_new_a="";
var var_content_new_b="";
while(i<var_accordion_amount_of_headers)
    {
    var_content=var_accordion_headers[i].innerHTML;
    var_content_new_a=var_content.replace('<td>','<td class="accordion_header_toggle" onclick="javascript:show_accordion_content('+i+',\'single\','+i+',1,\'\',\'\');">');
    var_content_new_b=var_content_new_a.replace('</td>','<div class="accordion_icon">&nbsp;&nbsp;&rang;</div></td>');
    document.getElementsByClassName('accordion_header')[i].innerHTML=var_content_new_b;
    var_content=var_accordion_contents[i].innerHTML;
    var_content_new_a=var_content.replace('<td>','<td><div class="accordion_content_container" style="max-height: 0px;"><div class="padding">');
    var_content_new_b=var_content_new_a.replace('</td>','</div></div></td>');
    document.getElementsByClassName('accordion_content')[i].innerHTML=var_content_new_b;
    i++;
    }

var j=0;
var var_start_with_accordion_content_number=0;
var var_multiple_toggle_number=0;
while(j<var_accordion_amount_of_accordions)
    {
    var var_accordion_complete=document.getElementsByClassName('accordion')[j].innerHTML;
    var var_accordion_elements = var_accordion_complete.split("<tr class=\"accordion_header\">");  
    var var_accordion_amount_of_elements=var_accordion_elements.length-1;
    if(var_accordion_amount_of_elements>=var_add_general_open_close)
        {
        var var_accordion_complete_new=var_accordion_complete.replace('<tr class="accordion_header">','<tr class="multiple_toggle"><td  class="multiple_toggle"><div onclick="javascript:show_accordion_content(\'\',\'multiple\','+var_start_with_accordion_content_number+','+var_accordion_amount_of_elements+','+var_multiple_toggle_number+',\'open\');" class="multiple_toggle_icon">&nbsp;&nbsp;&rang;</div><div onclick="javascript:show_accordion_content(\'\',\'multiple\','+var_start_with_accordion_content_number+','+var_accordion_amount_of_elements+','+var_multiple_toggle_number+',\'close\');" class="multiple_toggle_icon">&nbsp;&nbsp;&lang;</div></td></tr><tr class="accordion_header">');
        document.getElementsByClassName('accordion')[j].innerHTML=var_accordion_complete_new;
        var_multiple_toggle_number++;
        }
    var_start_with_accordion_content_number=var_start_with_accordion_content_number+var_accordion_amount_of_elements;
    j++;
    }
/* ##### transformation table to accordion end ##### */
</script>
<?php
}
?>
CSS-Klassen für die style_tiny.css

Code: Alles auswählen

/* classes for module table_to_accordion_sd begin */
div.accordion_icon,
div.multiple_toggle_icon {
width: 2em;
float: right;
text-align: center;
writing-mode: vertical-lr;
cursor: pointer;
}
div.accordion_content_container {
width: 100%;
overflow: hidden;
}
div.accordion_content_container div.padding {
padding: 0.5em;
}
table.accordion {
width: 100%;
}
td.accordion_header_toggle {
border-bottom: 1px solid #999999;
background-image="+";
cursor: pointer;
background-color: transparent;
transition: 0.5s;
}
td.accordion_header_toggle:hover {
background-color: rgb(240, 240, 240);
transition: 0.5s;
}
tr.accordion_header {
font-weight: 900;
}
tr.accordion_content td {
padding-bottom: 1em;
}
tr.multiple_toggle td {
font-weight: 900;
padding-bottom: 0.5em;
font-size: 1.2em;
}
/* classes for module table_to_accordion_sd end */
Übersetzungen
... entsprechen den Platzhaltern

JSON-Parameter für den Bereich CMS_HTML

Code: Alles auswählen

[...]
"table_class_list": [
[...]
{"title": "Tabelle - Accordion", "value": "accordion"},
[...]
"table_row_class_list": [
[...]
{"title": "Accordion - Header", "value": "accordion_header"},
{"title": "Accordion - Content", "value": "accordion_content"},
[...]

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Do 5. Dez 2019, 18:18
von casi1969
Hallo McHubi,

beim Eintragen der JSON-Parameter für den Bereich CMS_HTML wird ein Fehler ausgegeben:
"Die folgenden Fehler sind beim Versuch die Einstellungen zu überprüfen aufgetreten:
Syntaxfehler, fehlerhaftes JSON"
Woran könnte das liegen?

Wir nutzen Contenido 4.10.1 unter PHP 7.2.25
Im Errorlog folgendes:
[05-Dec-2019 17:10:39 UTC] PHP Warning: count(): Parameter must be an array or an object that implements Countable in /.../contenido/external/wysiwyg/tinymce4/contenido/classes/class.tinymce4.configuration.php on line 454

Vielen Dank für Deine Hilfe

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Do 5. Dez 2019, 19:40
von McHubi
Hallo casi1969,
Woran könnte das liegen?
Ohne Deine Eintragungen für die Konfiguration des wysiwyg zu sehen ist das Rätselraten. Poste mal, was Du für CMS_HTML als json hinterlegt hast.

VG

Markus

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Fr 6. Dez 2019, 00:12
von casi1969
Hallo McHubi,

danke für die schnelle Antwort.
Ich kenne mich mit JSON nicht aus. Habe das einfach kopiert:

Code: Alles auswählen

[...]
"table_class_list": [
[...]
{"title": "Tabelle - Accordion", "value": "accordion"},
[...]
"table_row_class_list": [
[...]
{"title": "Accordion - Header", "value": "accordion_header"},
{"title": "Accordion - Content", "value": "accordion_content"},
[...]

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Fr 6. Dez 2019, 07:40
von McHubi
Hallo casi1969,
Habe das einfach kopiert:
Okay. Lass mal die [...] weg. Das sind Platzhalter für ggf. schon vorhandene Daten :wink:
Wenn Du die class lists noch gar nicht in Deinem json-Konstrukt hast, lauten die notwendigen Ergänzungen

Code: Alles auswählen

"table_class_list": [
{"title": "Tabelle - Accordion", "value": "accordion"}
], 
"table_row_class_list": [
{"title": "Accordion - Header", "value": "accordion_header"},
{"title": "Accordion - Content", "value": "accordion_content"}
] 
Und wenn Du noch gar kein json-Konstrukt in der Konfiguration eingetragen hast:

Code: Alles auswählen

{
"table_class_list": [
{"title": "Tabelle - Accordion", "value": "accordion"}
], 
"table_row_class_list": [
{"title": "Accordion - Header", "value": "accordion_header"},
{"title": "Accordion - Content", "value": "accordion_content"}
]
} 
VG

Markus

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Fr 6. Dez 2019, 12:13
von Faar
Tsum Accordion muss ich noch etwas kritisches aus SEO Sicht anmerken:
In irgendeinem Google Webmaster Blogbeitrag stand, dass Texte die durch ein sogenanntes Accordion versteckt werden, nicht gelesen und nicht indexiert werden, weil das Accordion meistens mit Display:none funktioniert.
Das hat sich leider auch in einem Kundenprojekt bestätigt.
Also wer SEO macht und will, dass Google den Text im Accordion liest, sollte kein Accordion verwenden.

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Fr 6. Dez 2019, 13:38
von McHubi
Hallo Faar,
In irgendeinem Google Webmaster Blogbeitrag stand, dass Texte die durch ein sogenanntes Accordion versteckt werden, nicht gelesen und nicht indexiert werden, weil das Accordion meistens mit Display:none funktioniert.
Genau aus dem Grund macht es mein Accordion nicht mit display sondern variiert die Höhe der Box.

Das Ausblenden erfolgt per
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.maxHeight="0px";
und das Einblenden per
document.getElementsByClassName('accordion_content_container')[var_accordion_content_number].style.maxHeight="2000px";

Dabei ist auch berücksichtigt, dass bei deaktiviertem JavaScript das Accordion vollständig aufgeklappt und damit nutzbar ist.

Insofern dürften hier keine SEO-Probleme entstehen...
Also wer SEO macht und will, dass Google den Text im Accordion liest, sollte kein Accordion verwenden.
Die Aussage kannst Du also nicht wirklich pauschal stehen lassen... :wink:

VG,

Markus

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: So 8. Dez 2019, 20:20
von casi1969
Danke Markus, so funktioniert das!

Re: Modul: Tabelle in Accordion umwandeln

Verfasst: Mo 9. Dez 2019, 07:35
von Faar
McHubi hat geschrieben:
Fr 6. Dez 2019, 13:38
Hallo Faar,
Genau aus dem Grund macht es mein Accordion nicht mit display sondern variiert die Höhe der Box.
...
Dabei ist auch berücksichtigt, dass bei deaktiviertem JavaScript das Accordion vollständig aufgeklappt und damit nutzbar ist.

Insofern dürften hier keine SEO-Probleme entstehen...
Moin Markus,
das klingt gut und schlüssig.
Tatsächlich sind nicht nur die üblichen Accordion, sondern auch andere Dinge, wie Galerien, mit vorbelegtem display:none ausgeblendet.
Das liegt auch an jQuery, das display:none für Accordion benützt.
Ein Punkt mehr für eigenes Javascript.