Modul: Tabelle in Accordion umwandeln

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

Modul: Tabelle in Accordion umwandeln

Beitrag von McHubi » Do 8. Aug 2019, 21:05

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"},
[...]
Dateianhänge
table_to_accordion_sd-fe-002.jpg
(148.81 KiB) Noch nie heruntergeladen
table_to_accordion_sd-fe-001.jpg
(106.28 KiB) Noch nie heruntergeladen
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

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

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

casi1969
Beiträge: 71
Registriert: Mi 4. Aug 2004, 16:30
Wohnort: Köln
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von casi1969 » Do 5. Dez 2019, 18:18

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

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von McHubi » Do 5. Dez 2019, 19:40

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
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

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

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

casi1969
Beiträge: 71
Registriert: Mi 4. Aug 2004, 16:30
Wohnort: Köln
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von casi1969 » Fr 6. Dez 2019, 00:12

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"},
[...]

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von McHubi » Fr 6. Dez 2019, 07:40

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
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

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

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

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von Faar » Fr 6. Dez 2019, 12:13

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.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von McHubi » Fr 6. Dez 2019, 13:38

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
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

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

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

casi1969
Beiträge: 71
Registriert: Mi 4. Aug 2004, 16:30
Wohnort: Köln
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von casi1969 » So 8. Dez 2019, 20:20

Danke Markus, so funktioniert das!

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von Faar » Mo 9. Dez 2019, 07:35

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.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Schwebbs
Beiträge: 12
Registriert: Fr 19. Feb 2021, 17:28
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von Schwebbs » So 14. Mär 2021, 14:20

Hallo,

ich versuche gerade das Accordion zu basteln. Ich habe es nach der o. g. Anleitung probiert (es handelt sich um eine blanko Contenido Installation auf Xampp):

1) Modul anlegen
Das Modul ist unter Style -> Module zu sehen (content_accordion)

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)
Da weiß ich gar nicht so recht, was ich machen muss/musste. Es gibt nun eine Vorlage Accordion, bei der unter content (Container 160) content_accordion eingetragen ist.

3) CSS-Klassen in der Datei "style_tiny.css" einbinden
Unter style -> CSS habe ich den Code in der style_tiny.css eingetragen

4) In der Konfiguration des TinyMCE die JSON-Parameter im Bereich CMS_HTML ergänzen damit die Klassen im TinyMCE zugewiesen werden können.
Die entsprechenden Parameter sind eingetragen.

5) Im gewünschten Artikel per Tiny eine einspaltige Tabelle mit einer geraden Anzahl an Zeilen anlegen.
Habe ich gemacht.

6) Der Tabelle die CSS-Klasse "accordion" zuweisen und den Zeilen im Wechsel "accordion_header" und "accordion_content".
Auch das ist mal kein Problem. :-)

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.
Auch das habe ich gemacht (2).

Wenn ich den Artikel dann speichere, ist kein Accordion zu sehen, lediglich die einzelnen Zeilen der Tabelle. Im Source-Code sind die Klassen den einzelnen Reihen zugewiesen. Anscheinend ist die Verknüpfung mit der CSS-Datei ein Problem...

Mir fehlt da aber gerade der Ansatz... Vielen Dank für Hilfe!

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von McHubi » Mo 15. Mär 2021, 17:16

Hallo Schwebbs,

hast Du sicherheitshalber mal unter "Administration -> System -> Bereinigung" Caches und Co. gelöscht?
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)
Da weiß ich gar nicht so recht, was ich machen muss/musste. Es gibt nun eine Vorlage Accordion, bei der unter content (Container 160) content_accordion eingetragen ist.
Welche Nummer der Container hat, ist nicht entscheidend. Die Reihenfolge ist wichtig. Mit dem JavaScript wird das Markup, sprich der Seitenquelltext durchsucht und umgewandelt. Damit das klappt, muss der Quelltext vor der Ausführung des Scriptes fertig geladen sein. Daher die Einbindung am Ende. Die Nummer 160 sagt jetzt nichts aus, an welcher Stelle das Script eingebunden ist. Du kannst mir gerne mal per PN den kompletten Quelltext einer Seite zukommen lassen. Dann werfe ich da mal einen Blick drauf.
Anscheinend ist die Verknüpfung mit der CSS-Datei ein Problem...
Wird sie denn im Frontend geladen? Was enthält die CSS-Datei, wenn Du sie über den Quelltext lädst?

Code: Alles auswählen

 <link rel="stylesheet" type="text/css" href="css/style_tiny.css" />
Was ist, wenn Du

Code: Alles auswählen

table.accordion {
width: 100%;
}
mal z. B. eine rote Hintergrundfarbe verpasst? Wenn das klappt, steht schon mal die Verknüpfung zur CSS-Datei.

Ggf. hilft es Dir auch, mal einen Blick auf diese Seite und dessen Quelltext zu werfen: https://www.praxiseiswirth.de/neurologi ... logie.html

VG
Markus
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

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

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

Schwebbs
Beiträge: 12
Registriert: Fr 19. Feb 2021, 17:28
Kontaktdaten:

Re: Modul: Tabelle in Accordion umwandeln

Beitrag von Schwebbs » Mo 5. Apr 2021, 08:37

Hallo Markus,

vielen Dank für Deine Unterstützung, da hätte ich auch selber drauf kommen können, mal nachzuschauen, ob die CSS richtig eingebunden ist... Insbesondere durch Deinen Link ist mir das deutlich geworden!

Danke für Deine Hilfe, jetzt klappt alles!

Antworten