Responsives Accordion mit Steuerung für Frontend-Gruppen

[McHubi]

Hallo zusammen,

dieses Modul bietet die Möglichkeit, bis zu 20 (lässt sich erweitern) vertikale Accordion-Elemente zu erstellen. Die Anzahl und Reihenfolge der einzelnen Elemente kann über den Artikelreiter "Konfiguration" festgelegt werden. Die Überschrift eines Elements bildet ein CMS_HTMLHEAD und den Inhalt ein CMS_TEXT. Insofern sind die Inhalte auch per wysiwyg editierbar. Das Modul kann on- oder offline geschaltet und die Ausgabe von der Zugehörigkeit des Seitenbesuchers zu einer bestimmten Frontend-Gruppe abhängig gemacht werden. Die Frontend-Ausgabe des Accordions ist responsiv und mit einem "Ein-/Ausfahreffekt" versehen.
Wichtig: Hinweis am Anfang der Modul-Ausgabe in punkto JS-Funktion beachten!

EDIT 05.11.2015: Option eingebunden, einen Container auszuwählen, der direkt beim Öffnen des Artikels aufgeblättert sein soll.

accordion_sd_2_konfiguration.jpg (41.48 KiB) 14024 mal betrachtet

accordion_sd_2_editor.jpg (105.28 KiB) 14024 mal betrachtet

accordion_sd_2_frontend.jpg (72.87 KiB) 14024 mal betrachtet

Modul-Eingabe

Code: Alles auswählen

?>
<table cellspacing="0" cellpadding="10" border="0">
  <tr>
    <td valign="top"><?php echo mi18n("Sichtbar für"); ?></td>
    <td><input size=5 type="text" name="CMS_VAR[20]" value="CMS_VALUE[20]"><br/><small>
	<?php echo mi18n("(1;2;... oder leer für alle)");	?>
	</small></td>
  </tr>
  <tr>
    <td><?php echo mi18n("offline"); ?></td>
    <td>
	<?php
    if ("CMS_VALUE[30]"!="true") echo '<input type="checkbox" name="CMS_VAR[30]" value="true"/>'; 
	  else echo '<input type="checkbox" name="CMS_VAR[30]" value="true" checked/>'; 
   ?>
	</td>
  </tr>
  <tr>
    <td><?php echo mi18n("Reihenfolge von max. 20 Containern:"); ?></td>
    <td valign="top"><input type="text" name="CMS_VAR[100]" value="CMS_VALUE[100]"/></td>
  </tr>
  <tr>
    <td colspan="2">
      <small>(100#101#102#103#104#...)<br/>
      <?php echo mi18n("Nummerierung MUSS im 100er Bereich sein, da normale Textelemente und Headlines im Bereich <100 nummeriert werden!"); ?></small>
    </td>
  </tr>
  <tr>
    <td><?php echo mi18n("Container, der beim Artikelaufruf sofort geöffnet sein soll:"); ?></td>
    <td valign="top"><input type="text" name="CMS_VAR[110]" value="CMS_VALUE[110]"/></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="image" src="images/submit.gif"></td>
  </tr>
</table>
<?php

Modul-Ausgabe:

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     accordion_sd_2
* Author(s)   :     www.Seamless-Design.de Markus Hübner
* Copyright   :     www.Seamless-Design.de Markus Hübner
* Created     :     08.2014
************************************************/

// assert framework initialization
defined('CON_FRAMEWORK') || die('Illegal call: Missing framework initialization - request aborted.');

$id_feu=$auth->auth["uid"];
//echo 'FE-User-ID:'.$id_feu.'<br/>';
$show_content="true";
$show_content_to_fe_groups="CMS_VALUE[20]";
$offline="false";
$offline="CMS_VALUE[30]";
$element_initial_display="CMS_VALUE[110]";

if(cRegistry::isBackendEditMode())
  {
  echo '<hr><p style="color: #ff0000; font-weight:900;">'.mi18n("Sichtbar für").' '.$show_content_to_fe_groups;
  if($show_content_to_fe_groups=="") echo mi18n("alle");
  if($offline=="true") echo ' - '.mi18n("Inhalt ist offline!");
  echo '</p>';
  }
  
if($id_feu!="nobody" AND $show_content_to_fe_groups!="" AND $offline!="true")
  {
  $show_content="false";
  $array_allowed_groups=array();
  $query = "SELECT idfrontendgroup FROM con_frontendgroupmembers WHERE idfrontenduser=$id_feu";
  $result = cRegistry::getDb();
  $result->query($query);
  while($result->nextRecord())
    {
    $arr=$result->toArray();
    $array_allowed_groups[]=$arr[idfrontendgroup];
    }
  $show_content_to_fe_groups_arr=explode(";",$show_content_to_fe_groups);
  foreach($array_allowed_groups AS $element) if(in_array($element,$show_content_to_fe_groups_arr)) $show_content="true";
  }
  
if(!cRegistry::isBackendEditMode() AND $show_content=="true" AND $offline!="true" OR cRegistry::isBackendEditMode())
{
$order_of_appearance="CMS_VALUE[100]";
$array_order_of_appearance=explode("#",$order_of_appearance);
//print_r($array_order_of_appearance);  

$array_text=array();
$array_head=array();
foreach($array_order_of_appearance AS $number)
  {
  if($number=="101") {$text="CMS_HTML[101]";$head="CMS_HTMLHEAD[101]";}
  if($number=="102") {$text="CMS_HTML[102]";$head="CMS_HTMLHEAD[102]";}
  if($number=="103") {$text="CMS_HTML[103]";$head="CMS_HTMLHEAD[103]";}
  if($number=="104") {$text="CMS_HTML[104]";$head="CMS_HTMLHEAD[104]";}
  if($number=="105") {$text="CMS_HTML[105]";$head="CMS_HTMLHEAD[105]";}
  if($number=="106") {$text="CMS_HTML[106]";$head="CMS_HTMLHEAD[106]";}
  if($number=="107") {$text="CMS_HTML[107]";$head="CMS_HTMLHEAD[107]";}
  if($number=="108") {$text="CMS_HTML[108]";$head="CMS_HTMLHEAD[108]";}
  if($number=="109") {$text="CMS_HTML[109]";$head="CMS_HTMLHEAD[109]";}
  if($number=="110") {$text="CMS_HTML[110]";$head="CMS_HTMLHEAD[110]";}
  if($number=="111") {$text="CMS_HTML[111]";$head="CMS_HTMLHEAD[111]";}
  if($number=="112") {$text="CMS_HTML[112]";$head="CMS_HTMLHEAD[112]";}
  if($number=="113") {$text="CMS_HTML[113]";$head="CMS_HTMLHEAD[113]";}
  if($number=="114") {$text="CMS_HTML[114]";$head="CMS_HTMLHEAD[114]";}
  if($number=="115") {$text="CMS_HTML[115]";$head="CMS_HTMLHEAD[115]";}
  if($number=="116") {$text="CMS_HTML[116]";$head="CMS_HTMLHEAD[116]";}
  if($number=="117") {$text="CMS_HTML[117]";$head="CMS_HTMLHEAD[117]";}
  if($number=="118") {$text="CMS_HTML[118]";$head="CMS_HTMLHEAD[118]";}
  if($number=="119") {$text="CMS_HTML[119]";$head="CMS_HTMLHEAD[119]";}
  if($number=="120") {$text="CMS_HTML[120]";$head="CMS_HTMLHEAD[120]";}
  $array_head[]=$head;
  $array_text[]=$text;

	// When in backend edit mode add a label so the author
// knows what to type in the shown field.
if (cRegistry::isBackendEditMode()) {
    $label_element = mi18n("LABEL_ELEMENT").' '.$number;
	$label_head = mi18n("LABEL_HEAD");
	$label_text = mi18n("LABEL_TEXT");
	$height=100;
	$style_content_div="height: 100%;";
} else {
    $label_element = NULL;
	$label_head = NULL;
	$label_text = NULL;
	$height=0;
	$style_content_div="";
}
  $id_to_show_hide="asd2_content_".$number;
	  // use smarty template to output header text
  $tpl = cSmartyFrontend::getInstance();
  $tpl->assign('label_element', $label_element);
  $tpl->assign('label_head', $label_head);
  $tpl->assign('label_text', $label_text);
  $tpl->assign('head', $head);
  $tpl->assign('text', $text);
  $tpl->assign('height', $height);
  $tpl->assign('style_content_div', $style_content_div);
  $tpl->assign('content_id', $id_to_show_hide);
  $tpl->display('get.tpl');

  if($number==$element_initial_display)
    {
    ?>
    <script type="text/javascript">
      document.getElementById('<?php echo $id_to_show_hide; ?>').style.height=var_element_temp_height+"px";
      document.getElementById('<?php echo $id_to_show_hide; ?>').style.padding="10px"; //em not possible, because of calculating width and height!
    </script>
    <?php
    }
  }
}
?>

JavaScript

Code: Alles auswählen

function asd2_show_hide(var_element_id,var_element_temp_height)
{
var var_element_height=document.getElementById(var_element_id).style.height;
if(var_element_height=="0px")
  {
  document.getElementById(var_element_id).style.height=var_element_temp_height+"px";
  document.getElementById(var_element_id).style.padding="10px"; //em not possible, because of calculating width and height!
  document.getElementById(var_element_id).style.transition="1s";
  }
  else
    {
	document.getElementById(var_element_id).style.height=0+"px";
    document.getElementById(var_element_id).style.padding="0px"; //em not possible, because of calculating width and height!
	document.getElementById(var_element_id).style.transition="1s";
	}
}

HTML-Template "get.tpl":

Code: Alles auswählen

<!-- content_text -->

{if 0 lt $label_element|strlen}
<p style="font-weight: 900;"><label class="content_type_label">{$label_element}</label></p>
{/if}


<div class="asd2_content" id="{$content_id}_temp">
{$text}
</div>


{if 0 lt $label_head|strlen}
<label class="content_type_label">{$label_head}</label><br/>
{/if}
<div class="asd2_head" id="{$content_id}_head">
<script type="text/javascript">
var var_element_width=document.getElementById('{$content_id}'+'_head').offsetWidth;
var var_element_width_corrected=var_element_width-22; //padding and border!
document.getElementById('{$content_id}'+'_temp').style.width=var_element_width_corrected+"px";
var var_element_temp_height=document.getElementById('{$content_id}'+'_temp').offsetHeight;
var var_content_id='{$content_id}';
//alert(var_content_id+' '+var_element_temp_height);
document.getElementById('{$content_id}'+'_temp').style.display="none";
document.write('<div ');
document.write('onclick="javascript: asd2_show_hide(');
document.write("'"+var_content_id+"','"+var_element_temp_height+"'");
document.write(');"');
document.write('>');
</script>
  {$head}</div>
</div>


{if 0 lt $label_text|strlen}
<label class="content_type_label">{$label_text}</label><br/>
{/if}
<div class="asd2_content" id="{$content_id}" style="height:{$height}px; overflow: hidden;{$style_content_div}">
{$text}
</div>

<!-- /content_text -->

CSS:

Code: Alles auswählen

div.asd2_head {
border: 1px solid #999999;
background-color: #999999;
color: #ffffff;
font-weight: 900;
cursor: pointer;
margin-bottom: 1px;
padding: 10px; /*em not possible, because of calculating width and height!*/
}
div.asd2_content {
border: 1px solid #999999;
margin-bottom: 5px;	
}

lang_de_DE.txt:

Code: Alles auswählen

(1;2;... oder leer für alle)=(1;2;... oder leer für alle)
1: GRUPPE_A=1: GRUPPE_A
2: GRUPPE_B=2: GRUPPE_B
3: GRUPPE_C=3: GRUPPE_C
Container, der beim Artikelaufruf sofort geöffnet sein soll:=Container, der beim Artikelaufruf sofort geöffnet sein soll:
Inhalt ist offline!=Inhalt ist offline!
LABEL_ELEMENT=ELEMENT
LABEL_HEAD=Überschrift
LABEL_TEXT=Text
Nummerierung MUSS im 100er Bereich sein, da normale Textelemente und Headlines im Bereich <100 nummeriert werden!=Nummerierung MUSS im 100er Bereich sein, da normale Textelemente und Headlines im Bereich <100 nummeriert werden!
Reihenfolge von max. 20 Containern:=Reihenfolge von max. 20 Containern:
Sichtbar für=Sichtbar für Frontend-Gruppen:
alle=alle
offline=offline

[Oldperl]

Sehr nettes Teil Markus, fleißig, fleißig.
Ähnlich wie mein FlexContent-Modul, bei dem kann man dann noch verschiedene CSS-Klassen zuordnen. Du solltest Dir evtl. mal die neue cRegistry-Klasse, viele GLOBALS und Contenido-Variable werden darüber gewrapped und der Zugriff vereinfacht, und die cApi-Klasse(n) wegen den DB-Zugriffen nochmal anschauen.

Gruß aus Franken

Ortwin

[divox]

Interesantes Modul

ich hab die Dateien alle eingefügt aber die Funktionen show & hide geht nicht..

Wichtig: Hinweis am Anfang der Modul-Ausgabe in punkto JS-Funktion beachten!

Was ist damit gemeint?

[McHubi]

Du musst die auskommentierte js Funktion im <head> Deines Layouts einbinden oder das Auskommentieren entfernen.

[divox]

Hej, Vielen Dank, es funktioniert!

[McHubi]

Hab die JS-Funktion mal aus der Modul-Ausgabe entfernt und im ersten Posting für das Einfügen im Modul-Reiter "JavaScript" ausgelagert. Da gehört sie letztlich auch hin... Shame on me! Gewohnheit aus der 4.8er, als es diesen Modul-Reiter noch nicht gab...

[divox]

Danke

[benja]

Hallo, hat jemand einen Tipp für mich wie ich um das Accordion ein Div setze? Ich weiß leider nicht wie ich das im Template anlege. Irgendwas mit {foreach},...
Kann mir jemand helfen?

Danke im Voraus
benja

[McHubi]

Hallo benja,

hast Du es schon ausprobiert? Die Lösung hast Du nämlich schon selbst geschrieben, die dann so aussähe:

Code: Alles auswählen

echo '<div style="border: 1px solid red;">';

foreach($array_order_of_appearance AS $number)
  {
...
  }

echo '</div>';

[benja]

Hallo McHubi,

vielen Dank, ich probiere das. Das Projekt liegt nur kurzfristig auf Eis - wie das so ist, erst muss alles gestern fertig sein und dann wird sich Zeit gelassen.

Liebe Grüsse
Benja

Nachtrag: Hat super funktioniert, Danke noch mal.

[divox]

Hi,

wo kann ich das einstellen das der erste Bereich immer offen ist und die weiteren geschlossen sind?

[McHubi]

Hallo divox,

die Option war bislang nicht implementiert. Was Du für die Umsetzung brauchst? Nicht viel:

1) Eingabeoption in der Modulkonfiguration, sprich eine Erweiterung der Moduleingabe:

Code: Alles auswählen

...
<tr>
  <td><?php echo mi18n("Container, der beim Artikelaufruf sofort geöffnet sein soll:"); ?></td>
  <td valign="top"><input type="text" name="CMS_VAR[110]" value="CMS_VALUE[110]"/></td>
</tr>
...

2) In der Modulausgabe den notwendigen Klick umgehen und den gewünschten Container direkt anzeigen:

Code: Alles auswählen

...
$element_initial_display="CMS_VALUE[110]";
...
if($number==$element_initial_display)
  {
  ?>
  <script type="text/javascript">
    document.getElementById('<?php echo $id_to_show_hide; ?>').style.height=var_element_temp_height+"px";
    document.getElementById('<?php echo $id_to_show_hide; ?>').style.padding="10px"; //em not possible, because of calculating width and height!
  </script>
  <?php
  }
...

Fertig.

Die Ergänzung ist in den Codes des ersten Postings bereits berücksichtigt.

[divox]

Tausend Dank für deine Mühe.

____________________§§______§§
______________§§§§§_§§§§___§§_§§___§§§
§§§§§§§______§§§§___§§_§§_§§__§§__§§___§§§§§
_§§___§§___§§§§§§§__§§__§§§§__§§§§§____§§
_§§____§§_§§___§§___§§___§§§__§§__§§___§§§§
_§§___§§_§§_____§§§___________§§___§§§_§§
§§§§§§§________________________________§§§§§

[McHubi]

Gerne.