CONTENIDO Forum

Code: Alles auswählen

<!-- content_text -->

{if 0 lt $label|strlen}
<p><label class="content_type_label">{$label|escape}</label></p>
{/if}
<div class="content_text" id="table_of_contents">
  {$text}
</div>

<!-- /content_text -->

Code: Alles auswählen

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

echo 'Welche Überschriften sollen für das Inhaltsverzeichnis berücksichtigt werden? ';
echo '<select name="CMS_VAR[100]">';
echo '<option value="none"';
  if("CMS_VALUE[100]"=="none") echo 'selected';
  echo '>keine</option>';
echo '<option value="h2"';
  if("CMS_VALUE[100]"=="h2") echo 'selected';
  echo '>h2</option>';
echo '<option value="h2,h3"';
  if("CMS_VALUE[100]"=="h2,h3") echo 'selected';
  echo '>h2,h3</option>';
echo '<option value="h2,h3,h4"';
  if("CMS_VALUE[100]"=="h2,h3,h4") echo 'selected';
  echo '>h2,h3,h4</option>';
echo '</select>';

Code: Alles auswählen

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

$headlines_to_consider="CMS_VALUE[100]";
$array_possible_headline_combinations=array("h2","h2,h3","h2,h3,h4");
$table_of_contents_headline=mi18n("ueberschrift inhaltsverzeichnis");
$table_of_contents_jump_to=mi18n("zum abschnitt");
if($headlines_to_consider!="" AND in_array($headlines_to_consider,$array_possible_headline_combinations)) //in_array: check implemented if this module is installed afterwards and you do not want to configure every single article initially. if there is no configuration given, the table of contents will not be shown.
{
?>

<div id="table_of_contents_linklist" class="table_of_contents_linklist"></div>

<script>
document.addEventListener("DOMContentLoaded", function() {

var var_h_tags='<?php echo $headlines_to_consider; ?>';	//h2 | h2,h3 | h2,h3,h4 | h2,h4 | ...

var var_table_of_contents_area=document.getElementById('table_of_contents');
var var_givenObject = document.getElementById("table_of_contents");
var var_headlines_to_consider=var_h_tags; 
var var_table_of_contents_headlines=var_table_of_contents_area.querySelectorAll(var_headlines_to_consider);
var arr_table_of_contents_area_headlines=new Array();

var var_table_of_contents_linklist_items='<b><?php echo $table_of_contents_headline; ?></b><ul>';

for (var i = 0; i < var_table_of_contents_headlines.length; i++) {
var var_insertObject = document.createElement("span");
var_insertObject.id = "headline_anchor_h_"+i;
var_insertObject.innerHTML = "";
var var_table_of_contents_headlines_innerhtml = var_table_of_contents_headlines[i].innerHTML;
var_table_of_contents_linklist_items+='<li class="'+var_table_of_contents_headlines[i].tagName+'"><a href="front_content.php?idart=<?php echo $idart; ?>#headline_anchor_h_'+i+'" title="<?php echo $table_of_contents_jump_to; ?>">'+var_table_of_contents_headlines_innerhtml+'</a></li>';
var_givenObject.insertBefore(var_insertObject,var_table_of_contents_headlines[i]);
}

var_table_of_contents_linklist_items+='</ul>';	  
	  
document.getElementById('table_of_contents_linklist').innerHTML=var_table_of_contents_linklist_items;
}, false );
</script>
<?php
}
?>

Code: Alles auswählen

div.table_of_contents_linklist {
border: 1px solid #999999;
width: 30%;
padding: 0.5em;
margin-top: 1.5em;
margin-left: 2em;
margin-right: 1em;
margin-bottom: 1em;
float: left;
}
div.table_of_contents_linklist ul {
padding-left: 0em;
}
div.table_of_contents_linklist li {
list-style-type: none;
}
div.table_of_contents_linklist li.H2 {
}
div.table_of_contents_linklist li.H3 {
margin-left: 1em;
list-style-type: none;
}
div.table_of_contents_linklist li.H4 {
margin-left: 2em;
}
div.table_of_contents_linklist li a {
text-decoration: none;
color: #000000;
}
div.table_of_contents_linklist li a:hover {
color: #ff0000;
}