Einbindung einer Liste mit Filtern
In diesem Tutorial lernst du, eine dynamisch anpassbare Liste mit Filtern, Suche und Sortieren so anzulegen, wie sie beispielsweise für das Material verwendet wird.
Liste anlegen
Für die Liste verwenden wir listjs. Als HTML benötigen wir dafür nur das Containerelement mit der Klasse list, in welche die Liste generiert werden soll. Weiteres HTML für bestimmte Funktionen ist optional. Wenn bereits beim Laden der Liste Elemente in der Liste eingetragen sein sollen, können diese manuell eingetragen werden. Wichtig ist dabei, dass alle Attribute von Einträgen als Klasse angegeben wird. Dynamisch im JavaScript erzeugte Elemente können entweder automatisch anhand bereits beim Initialisieren der Liste vorhandener Elemente, anhand einer in HTML oder JavaScript definierten Vorlage oder durch eine eigene JavaScript-Funktion erzeugt werden.
In diesem Beispiel nehmen wir eine Liste mit Startelementen und einer HTML-Vorlage wie folgt:
<div id="newList" class="list">
<div class="thumbnail">
<h3 class="name">Max Mustermann</h3>
<p class="age">20</p>
<p class="city">Berlin</p>
</div>
<div class="thumbnail">
<h3 class="name">Jane Doe</h3>
<p class="age">25</p>
<p class="city">München</p>
</div>
</div>
<div id="list-template" class="thumbnail">
<h3 class="name"></h3>
<p class="age"></p>
<p class="city"></p>
</div>
Die Liste wird im JavaScript initialisiert. Die Liste wird mit new List() erstellt. Hierfür wird die ID für das Containerelement oder das Element selbst und ein Konfigurationsobjekt gebraucht. Des Weiteren kann man weitere Einträge als dritter Parameter als Array angeben. Eine wichtige Einstellung im Konfigurationsobjekt ist ein Array der Attribute unter valueNames, insbesondere um bereits existierende Einträge einzulesen und eine HTML-Vorlage für neue Einträge zu füllen. Eine weitere wichtige Einstellung ist das Attribut item. Dieses kann entweder die ID eines HTML-Templates, ein HTML-String einer Vorlage oder eine Funktion sein, welche ein values-Objekt übergeben bekommt und das HTML für den neuen Eintrag zurückgibt. Zusammengenommen ist dies für das Beispiel der folgende Code:
var listOptions = {
valueNames: [ 'name', 'age', 'city' ],
item: 'list-template',
};
var listValues = [
{ name: 'Joe Doe', age: '30', city: 'New York'}
];
var newList = new List('newList', listOptions, listValues);
Um zu einer bereits existierenden Liste neue Einträge hinzuzufügen, kann die Funktion newList.add() verwendet werden, zum Löschen dient die Funktion newList.remove().
Sortieren
Listjs bietet zwei Möglichkeiten um die Liste zu sortieren: Einerseits durch HTML-Buttons mit einer Klasse, die in der Konfiguration der Liste unter sortClass angegeben wurde (default: sort). Durch data-Attribute kann das Verhalten der Buttons angepasst werden, dabei ist data-sort eine Pflichtangabe um anzugeben, nach welchem Attribut sortiert werden soll. Alternativ kann in JavaScript durch die newList.sort()-Funktion sortiert werden. Dabei muss der erste Parameter das zu sortierende Attribut angeben, während als zweiter Parameter ein Konfigurationsobjekt angegeben werden kann. Im folgenden Beispiel sortieren die Buttons nach dem Alter immer in der gleichen Reihenfolge, während nach Name und Stadt durch mehrmaliges Drücken des Buttons die Reihenfolge invertiert werden kann.
<button class="sort" data-sort="name">Name</button>
<button class="sort" data-sort="age" data-order="asc">Jung</button>
<button class="sort" data-sort="age" data-order="desc">Alt</button>
<button class="sort" data-sort="city" data-default-order="desc">Stadt</button>
Suche
Für die Suche bietet Listjs analog zum Sortieren auch zwei Möglichkeiten um eine Suche durchzuführen: Entweder durch Felder im HTML mit der Klasse, welche in der Konfiguration der Liste mit searchClass angegeben wird (default: search). Alternativ bietet Listjs in JavaScript die Funktion newList.search(searchString, columns). Der searchString ist die Suchanfrage, Leerzeichen werden als logisches UND interpretiert solange eine Phrase nicht in Anführungszeichen gesetzt wird. Das Array columns gibt an, in welchen Attributen gesucht werden soll.
Alternativ zur Standardsuche kann auch eine fuzzy search durchgeführt werden. Beim HTML-Button wird dafür fuzzysearch als Klasse verwendet, im JavaScript heißt die Funktion newList.fuzzySearch().
Filter
Als Filter im ELP eignen sich grundsätzlich alle Auswahl- bzw. Eingabemöglichkeiten, insbesondere ein <select>-Element. Für das ELP ist es typisch, die Filter in einen Bereich einzubetten, wodurch diese ausgeblendet werden können. Des Weiteren ist eine Übersicht über ausgewählte Filter etabliert.
Filter
Als Filter-Element eignet sich grundsätzlich jedes Element, welches eine Eingabe bzw. Auswahl durch den Nutzer ermöglicht. Funktional sind diese für die hier verwendete Funktionalität identisch, solange sie ein change-Event auslösen und ihren Wert durch element.value bzw. $(element).val() abgefragt werden kann. Im ELP ist das typische Element für Filter ein <select>-Element.
Select2
Einfache <select>-Elemente sind sowohl im Aussehen als auch in Funktion nur wenig anpassbar. Um diese Anpassbarkeit zu erreichen, kann das <select>-Element durch das JavaScript-Packet select2 visuell ersetzt werden. Ein Tutorial dazu gibt es [hier] (EinbindungSelect2)/.
Filterreihe
Die Filter werden im ELP in einer "Filterreihe" eingebettet. Dies ist entgegen dem Namen nicht unbedingt eine einzelne Reihe, sondern der Bereich der ausgeblendet beziehungsweise minimiert werden kann. Das Ausblenden wird über ein verstecktes Input-Element des Typs Checkbox realisiert. Wenn Input-Element ausgewählt ist, dann wird die Filterreihe angezeigt; wenn das Input-Element abgewählt ist, dann wird die Filterreihe minimiert. Dafür muss das Input-Feld im HTML direkt vor der Filterreihe stehen und die Klasse filterrow-toggle haben, des Weiteren muss das Input-Feld eine eindeutige ID besitzen. Das Wechseln des Zustands des Input-Elements wird durch ein Label direkt nach der Filterreihe realisiert. Dieses Label muss als for-Attribut die ID des Inputs und die Klasse filterrow-toggle-label haben.
Die Filterreihe selbst ist ein Element mit den Klassen row und filterrow. filterrow ist die spezielle Klasse von ELP während row die Klasse für das Grid-System von bootstrap ist, siehe hier. Dies zeigt auch schon an, wie die Positionierung der Filter innerhalb der Filterreihe im ELP funktioniert: In der Filterreihe wird der horizontale Bereich in 12tel geteilt
<input id="test-toggle" class="filterrow-toggle" type="checkbox" />
<div class="row filterrow">
<div class="col-xs-12">
<label
class="translate"
for="nav-materials-filterrow-search"
data-langkey="infothek-search"
>Suche</label
>
<input
id="nav-materials-filterrow-search"
class="search-advanced form-control translateplaceholder"
data-placeholderkey="searchplaceholder"
data-search="title description"
data-filtertype="search"
placeholder="Suchbegriff"
/>
</div>
<div class="col-xs-4">
<label
class="translate"
for="nav-materials-filterrow-icon"
data-langkey="material-icon"
>Icon/Bild</label
>
<select
id="nav-materials-filterrow-icon"
class="form-control filter"
data-filtertype="icon"
style="width: 100%"
>
<option></option>
...
</select>
</div>
<div class="col-xs-3">
<label></label>
<button class="form-control reset">
<i class="fa fa-undo"></i>
<span class="translate" data-langkey="category-reset">Zurücksetzen</span>
</button>
</div>
</div>
<label class="filterrow-toggle-label" for="test-toggle">
<span class="translate" data-langkey="infothek-show-filter">Filter anzeigen</span>
</label>