Font Awesome Icon Picker
Icon-Picker für Font Awesome ab Version 5.
Der Iconpicker wird an Text-Eingabefelder angebunden. Beim Klick öffnet sich ein Picker Widget. Anschließend werden die Icons des aktuell eingestellten Pakets dynamisch nachgeladen. Über die Einstellungen zu Zeilen und Spalten im Picker Widget kann der Picker beim Scrollen kalkulieren, welche Seite vom Server nachgeladen werden soll. Dies beugt der Überlastung des Browsers vor und sichert so eine flüssige Navigation.
Nutzer mit entsprechender Berechtigung können im Verwaltungsbereich des AddOns mehrere Font Awesome Pakete hochladen und unter diesen das für die Ausgabe präferierte Paket als Standard-Paket auswählen.
Ausgeliefert wird das AddOn mit einer aktuellen Version des freien Paketes. Liegt eine entsprechende Lizenz für ein Pro-Paket vor, kann dieses hochgeladen und genutzt werden.
ACHTUNG: Font Awesome bietet auch Desktop-Pakete zum Download an. Sollten diese hochgeladen werden, erfolgt keine Einbindung in den Paket-Pool. Es erscheint eine entsprechende Fehlermeldung.
Das Picker Widget wird am Ende des <body>-Tags eingebunden und beim Öffnen absolut unter das zugehörige Eingabefeld positioniert. Damit ist sichergestellt , dass besondere Layouts (flex, grid etc.) durch das Picker Widget nicht beeinflusst werden.
Die Schrift-Ressourcen für das aktuelle Paket werden auch im Backend geladen. Für die Einbidnung im Frontend siehe unten.
Features
- Paket-Manager
- wird mit aktuellem Free-Paket ausgeliefert
- Support für Pro- und Free-Pakete
- Support für Subsets (siehe https://fontawesome.com/how-to-use/on-the-desktop/other-topics/subsetter) mit spezieller Markierung (blaues "S" in Paketübersicht)
- komplexer Picker mit zugehöriger Setup-Seite und vielseitigen Anpassungsmöglichkeiten siehe "Anpassungen"
- am Ziel-Feld (input type=text oder textarea) initialisierbar mit von den Standardeinstellungen abweichenden Settings
- Picker-Features (alles einstellbar):
- Suche nach
Name,Label,Code,Search Terms - umschaltbare Vorschau-Stile
- Mehrfachauswahl
- Ergänzung der Stil-Klasse (
fat,fal,far,fas,fad,fab) - verschiebbar
- Wahl des Rückgabewerts (
Name,Code,ID,Label,SVG-Code) - Event-Handler
- Daten-Anfragen via REX API Klasse
- Suche nach
- MBlock-Support
Einbindung Font Awesome im Frontend
Für die Ausgabe eines <link>-Tags für das Font Awesome CSS muss folgender Code im <head> Bereich des Templates eingefügt werden. ACHTUNG: Funktioniert nur direkt im Template, nicht bei includes!
REX_FA_ICONPICKER[]
Nutzung des Pickers im Backend
Der Picker wird über die Angabe der Klasse rex-fa-iconpicker in Text-Eingabefeldern initialisiert. Moduleingaben.
<input type="text" class="form-control rex-fa-iconpicker" />
Alternativ kann man eine Initialisierung mit JavaScript wie folgt vornehmen (im Beispiel mit speziellen Settings für diese Instanz):
let fap = new FAPicker(
document.getElementById('<ID_OF_INPUT_OR_TEXTAREA>'),
{
'multiple': true,
'add-weight': false
}
);
Man kann nach der Initialisierung auf die Picker-Instanz zugreifen:
let fap = $("#<ID_OF_INPUT_OR_TEXTAREA>").get(0).FAPicker;
Standardmäßig wird der Picker geöffnet, sobald man in diesen klickt und schließt, sobald man ein Icon auswählt oder den Schließen-Button X oben rechts im Popup klickt.
Anpassungen
Funktionen und Aussehen des Pickers können über Attribute für besondere Anwendungsfälle angepasst werden. Viele Einstellungen können, entsprechende Berechtigung vorausgesetzt, generell angepasst werden.
Die Einstellungen werden über HTML-Attribute mit dem Schema data-fa-X="VALUE" direkt am Eingabefeld vorgenommen. Ein Beispiel für 6 Icon-Spalten im Picker -Popup:
<input type="text" class="rex-fa-iconpicker" data-fa-columns="6" />
Alle Einstellungen im Überblick:
rows- Zeilen im Picker Widgetcolumns- Spalten im Picker Widgetoffset- Seiten im Picker Widget die beim Nachladen zusätzlich geladen und gerendert werden (Bsp.: ein Offset von 1 bei 4 Spalten und 5 Zeilen bedeutet, dass nicht nur 20 Icons (1 Seite, 4 * 5) nachgeladen werden, sondern 60 - 1 Seite davor und 1 danach)max-pages- Performance-Einstellung; legt fest, wieviele Seiten maximal in einem Picker Widget geladen sein dürfenweight-selector- zeigt Stil-Auswahl am Rand des Picker Widgets an [0, 1]movable- macht das Picker Widget verschiebbar, Doppelklick auf den Move-Button zum Zurücksetzen [0, 1]details-on-hover- Bei Mouseover über ein Icon wird ein komplexer Tooltip mit mehr Infos gezeigt und das Icon in den erlaubten Schriftschnitten (sieheweights) abgebildet [0, 1]close-with-button- Schließen wird nur explizit über einen Close Button oben rechts im Picker Widget durchgeführt [0, 1]multiple- erlaubt Mehrfach-Auswahl [0, 1]weights- Verfügbare Schriftschnitte als zusammenhängender String (l = Light, r = Regular, s = Solid, d = Duotone, b = Brand), Bsp.ldbblendet die Vorschauen für Light, Duotone und Brand Icons ein und erlaubt auch deren Auswahl, wennadd-weight= 1 istadd-weight- fügt bei Auswahl eines Icons nicht nur den Namen des Icons ein (bspw.fa-user) sondern auch den aktuell eingestellten Schriftschnitt (Beispiel-Ergebnis:fas fa-userwenn aktuell dersolid-Schriftschnitt ausgewählt war) [0, 1]preview-weight- fügt bei Auswahl eines Icons nicht nur den Namen des Icons ein (bspw.fa-user) sondern auch den aktuell eingestellten Schriftschnitt (Beispiel-Ergebnis:fas fa-userwenn aktuell dersolid-Schriftschnitt ausgewählt war) [0, 1]insert-value- Wert, der bei Auswahl des Icons ins Ziel-Feld eingetragen werden soll (Standard:name) [name,label,icon,svg]sort-by- legt die Sortierung der Icons fest (Optionen:id,name,label,code,createdate)sort-direction- legt die Sortierungsrichtung fest (ascfür aufsteigend oderdescfür absteigend)icons- legt die Liste der zur Auswahl zugelassen Icons fest; erlaubt Platzhalter mit*(Bsp.:question,user*,*virus*,*-up- lädt das Iconquestionexplizit, alle Icons die mituserbeginnen, alle Icons die irgendwo im Namenvirusenthalten und alle Icons, die auf-upenden)hide-search- Suchfeld im Kopf des Picker Popups wird versteckt [0, 1]hide-latest-used- zuletzt benutzte Icons werden in einem Cookie gespeichert; in der "zuletzt benutzt" Sektion werden bis zu 2 Zeilen davon gezeigt; wenn das Feld auf 1 gesetzt wird, ist diese Sektion im Widget versteck [0, 1]class- CSS-Klasse, die am äußersten Wrapper-Element des Picker Widgets für eigene Anpassungen angehängt wirdicon-class- CSS-Klasse, die an den Icon Buttons für eigene Anpassungen angehängt wirdonbeforeselect- Event-Handler für den Zeitpunkt, bevor ein Icon in das zugehörige Eingabefeld eingecheckt wird (return falseverhindert das Einfügen in das Eingabefeld, der 1. Funktionsparameter ist das auslösende Button-Object, der 2. Parameter das Ziel-Objekt)onselect- Event-Handler für den Zeitpunkt, nachdem ein Icon in das zugehörige Eingabefeld eingecheckt wurde (der 1. Funktionsparameter ist der Name des Icons, der 2. Parameter das gelöscht-Flag, der 3. Parameter das Ziel-Objekt)onbeforeshow- Event-Handler: Vor dem Anzeigen des Widgets | 1. Param: Ziel-Feld als DOM-Objectonshow- Event-Handler: Nach dem Anzeigen des Widgets | 1. Param: Ziel-Feld als DOM-Objectonbeforehide- Event-Handler: Vor dem Ausblenden des Widgets | 1. Param: Ziel-Feld als DOM-Objectonhide- Event-Handler: Nach dem Ausblenden des Widgets | 1. Param: Ziel-Feld als DOM-Object
Future Plans / TODO
- Wahl eines Subsets direkt am Ort der Initialisierung (Überschreibung des Standard-Pakets)
- Extension Points für REX API Rückgaben (überhaupt möglich?)
- Preview-Overlay bei Mouseover über Icon-Value im Text-Feld > zeigt, wie das aktuell gesetzte Icon aussieht ohne den Picker zu öffnen
- evtl. Webfont-URL in den .css-Files manipulieren, sodass der korrekte absolute Pfad eingetragen wird. Damit wären "elegantere" Einbindungen im FE möglich, ohne den Speicherort der Paketdaten offen zu legen (via index.php mit URL-Params)
- FA6 Support sobald finale Package-Struktur releast ist
1.7k Dec 27, 2022
1 Jan 7, 2022
96 Aug 5, 2022
8 Mar 14, 2022
7 Dec 2, 2022
12 Aug 29, 2022
22 Dec 20, 2022
255 Dec 29, 2022
49 Dec 28, 2022
84 Jan 7, 2023
4 Aug 29, 2022
2.1k Dec 22, 2022
3 Aug 6, 2021
14 Sep 14, 2022
4 Mar 31, 2022
2 Oct 22, 2021
27 Dec 25, 2022
2 Dec 7, 2021