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]"/>';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=" ⟨";
}
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=" ⟩";
}
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"> ⟩</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"> ⟩</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"> ⟨</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
}
?>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 */... 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"},
[...]
