News-Filter

Der News-Filter ist eine Variante des oben beschriebenen Inhaltsfilters. Implementiert ist der auf der CMS-News-Seite. Zur Umsetzung braucht es zwei Schritte:

Vorgehen:

• Erstellen Sie einen neuen Teaser.
• Wechseln Sie in den «Quellcode». Geben Sie den nachfolgenden HTML-Code ein (die Jahreszahlen müssen Sie gegebenenfalls anpassen).
• Achtung: Danach darf man den «Quellcode»-Modus nicht mehr ausschalten, sondern muss den Teaser direkt speichern. Sonst putzt der gewissenhafte Texteditor nämlich die vermeintlich "falschen" Code-Teile raus. Das geschieht übrigens auch bei jeder anderen nachträglichen Änderung am Teaser. Dann muss man den untenstehenden Code erneut eingeben... Am besten speichern Sie Ihre Code-Variante in einem lokalen Textfile.

<p>(Dazu muss Javascript aktiviert sein.)</p>

<div id="navigation">
   <div><input type='checkbox' id='all' />&nbsp;Alle</div>

   <div id="categories">
      <div><input type='checkbox' id='2014' />&nbsp;2014</div>
      <div><input type='checkbox' id='2015' />&nbsp;2015</div>
      <div><input type='checkbox' id='2016' />&nbsp;2016</div>
   </div>
</div>

Fügen Sie bei den Seiteneigenschaften der Seite folgenden JavaScript-Code in das Scripts-Feld ein:

<script>
$(function() {
    // set styles
    $("#navigation").css("max-width","600px");
    $("#categories").css("display","grid");
    $("#categories").css("grid-template-columns","1fr 1fr 1fr");
    $("#categories > div").css("display","inline-block");

    // variables
    contents=$("section > div.mod-newslist > ul > li").has("time[datetime^='201']");

    // function for all checkbox
    $("#all").change(function(){
        var status = this.checked ? "block" : "none";

        // reset any input fields
        $("#categories input").prop('checked',false);

        // show all content
        $.each(contents, function(key, value){
            value.style.display=status;
        });
    })
 
    // function for category checkbox    
    $("#categories > div").change(function(){
        // reset the "all" input field
        $("#all").prop('checked',false);

        // hide all content
        $.each(contents, function(key, value){
            value.style.display="none";
        });
        
        // show specific elements
        $("#categories input:checked").each(function (index, val){
            $("section > div.mod-newslist > ul > li").has("time[datetime^='" + val.getAttribute("id") + "']").css("display","block");
        })
    })
});
</script>