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:

• Öffnen Sie die News-Übersichtsseite zum Schreiben, und bearbeiten Sie deren Intro-Bereich.
• 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 Intro-Bereich 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.

<div style="background-color:#f0f0f0; padding:30px; padding-top:5px">
 <h3>Filtern der Artikel nach Jahr:</h3>
<div id="navigation">
   <div><input type='checkbox' id='all' />&nbsp;Alle</div>

   <div id="categories">
      <div><input type='checkbox' id='2021' />&nbsp;2021</div>
      <div><input type='checkbox' id='2022' />&nbsp;2022</div>
      <div><input type='checkbox' id='2023' />&nbsp;2023</div>
   </div>
 </div>
</div>

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

<script src="/docroot/jquery/jquery-3.3.1.min.js"></script>
<script src="/docroot/jquery/jquery-migrate-3.0.0.js"></script>
    
<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=$("ul.NewsList--list > li").has("div > div > div > time[datetime^='20']");

    // 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){
            $("ul.NewsList--list > li").has("div > div > div > time[datetime^='" + val.getAttribute("id") + "']").css("display","block");
        })
    })
});
</script>

CMS-News