JavaScript-Bibliothek agorum.icons/js/icons

Diese JavaScript-Bibliothek bietet Funktionen zum Verwenden von Icons in agorum core.

Verwendung

Binden Sie die Bibliothek stets am Anfang eines Skripts ein:

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

Ein Icon erstellen

Um die Funktionen dieser JavaScript-Bibliothek verwenden zu können, erstellen Sie ein Icon in agorum core.

1. Klicken Sie oben rechts in der Kopfleiste auf und dann auf Icon erstellen.
2. Erstellen Sie Ihr Icon.
3. Kopieren Sie den Code aus dem Feld Code im Abschnitt Code/SVG.
4. Verwenden Sie den Code für die beschriebenen Funktionen.

Aufbau von agorum-Icons

Ein Icon in agorum core definiert sich durch eine Zeichenkette und besteht aus mindestens einer bis mehreren Ebenen.

• Die Zeichenkette besteht aus einzelnen Eigenschaften, die das Icon näher definieren.
• Jede Eigenschaft trennen Sie durch ein Semikolon (;).
• Mehrere Ebenen trennen Sie durch einen Pipe (|).
• Das System stapelt die Ebenen von der untersten Ebene bis zur obersten Ebene.

Beispiel für ein Icon mit einer Ebene

agorum:rounded-square-5;color=#0069b5;scale=.9

Beispiel für ein Icon mit mehreren Ebenen

agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9

In diesem Beispiel liegt das abgerundete Quadrat unterhalb des Information-Icons.

Eigenschaften

color

Definiert die Farbe für die Umrandung und Füllung des Icons.

• Geben Sie die Farbe in hexadezimaler Schreibweise an (#rrggbb).
• Um die Umrandung und Füllung separat einzufärben, verwenden Sie die Eigenschaften fill und stroke.

class

Definiert die CSS-Klasse für eine Ebene, um das resultierende SVG gezielt per CSS anzupassen.

fill

Definiert die Farbe für die Füllung einer Ebene.

Geben Sie die Farbe in hexadezimaler Schreibweise an (#rrggbb).

rotate

Definiert den Winkel in Grad °, um den die Ebene im Uhrzeigersinn wird.

Das Zentrum dieser Drehung ist in der Mitte der Ebene (auch nach Verschiebungen).

scale

Definiert den Faktor, um den die Ebene skaliert wird.

• Ein Wert zwischen 0 und 1 verkleinert die Ebene.
• Ein Wert größer als 1 vergrößert die Ebene.
   

slot

Vordefinierte Kombinationen aus Skalierung und Translation, die eine Ebene an feste Stellen verschiebt:

• top-left
• top
• top-right
• left
• center
• right
• bottom-left
• bottom
• bottom-right

stroke

Definiert die Farbe für die Umrandung einer Ebene.

Geben Sie die Farbe in hexadezimaler Schreibweise an (#rrggbb).

translate

Verschiebt eine Ebene in horizontale und vertikale Richtung.

Geben Sie den x-Wert, dann ein Komma (,) und dann den y-Wert an.

translate=x,y

Das System interpretiert das Maß der Verschiebung im Verhältnis zur Größe der Ebene (nach Skalierung).

translate=.2,.5

Dieses Beispiel verschiebt die Ebene um 20 % ihrer Breite nach rechts und um 50 % ihrer Höhe nach unten.

Alternative Ansichten bei undefinierten Icons

Wenn das System automatisch Icons, etwa mit Platzhaltern, erzeugt und bei einem Datentyp auf undefinierte Icons stößt, kann es für diese undefinierten Icons nichts darstellen. Für diese Fälle verwenden Sie alternative Ansichten, die das System verwendet, wenn es die vorhergehenden Ansichten wegen undefinierter Icons nicht oder nicht vollständig darstellen kann.

Trennen Sie mehrere Ansichten durch ein Ausrufezeichen (!).

Beispiel

Im Standard verwendet das System für die Darstellung von Objekten:

fileicon:${nameExtension}!fileicon:blank

Das System versucht zunächst, das Objekt mit einem typspezifischen Icon darzustellen. Wenn ein solches Icon nicht existiert, verwendet es stattdessen fileicon:blank als Alternative.

Objekt-Icons

• Um automatisch Icons für die Darstellung von Objekten zu erzeugen, verwendet agorum core das Icon-Format.
• Das Icon-Format basiert auf Regeln, die sich in der MetaDB unter MAIN_MODULE_MANAGEMENT/customers/agorum.icons befinden.
• Das System unterscheidet zwischen Basis-Regeln und Overlay-Regeln und interpretiert beide Regeltypen in alphabetischer Reihenfolge.

Basis-Regeln

Sie finden die Basis-Regeln in der MetaDB unter dem Pfad:

MAIN_MODULE_MANAGEMENT/customers/agorum.icons/base

• Damit eine Regel gültig ist, muss sie mindestens die zwei Property-Entrys icon und selectors besitzen.
• Zu einem Objekt wird eine passende Basis-Regel gewählt, die dessen Basis-Icon definiert.
• Bei mehreren zutreffenden Selektoren greift der spezifischste Selektor.
• Bei mehreren gleich spezifischen Selektoren greift der zuletzt definierte Selektor.

Property-Entrys

fileicon:${nameExtension}

Overlay-Regeln

Sie finden die Overlay-Regeln in der MetaDB unter dem Pfad:

MAIN_MODULE_MANAGEMENT/customers/agorum.icons/overlay

• Damit eine Regel gültig ist, muss sie mindestens die zwei Property-Entrys icon und selectors besitzen.
• Das System wendet zu einem Objekt alle passenden Overlay-Regeln nacheinander an.
• Das System legt die Overlays der Reihenfolge nach auf das Icon. Dabei können früher definierte Overlays können von später definierten überlagert werden.

Property-Entrys

Funktionen

get

Liefert einen String, der das übergebene Icon im SVG-Format enthält.

Syntax

icons.get(<icon>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let svg = icons.get('agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9');

url

Liefert einen String, der das übergebene Icon als SVG-Data-URL enthält.

Sie können diese URL etwa als src-Attribut eines img-Tags oder in einer CSS-Regel per url() verwenden.

Syntax

icons.url(<icon>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let url = icons.url('agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9');

cls

Registriert das übergebene Icon im aktuell geöffneten Browserfenster für die Verwendung als CSS-Klasse und liefert den Namen dieser Klasse.

• Diese Funktion können Sie nur innerhalb eines aguila-Kontexts verwenden.
• Verwenden Sie diesen Klassennamen als icon-Property eines Widgets (etwa agorum.button), um das Icon dort anzuzeigen.

Syntax

icons.cls(<icon>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let cls = icons.cls('agorum:rounded-square-5;color=#0069b5;scale=.9|ionicon:information;color=white;scale=.9');

tree

Registriert die übergebenen Icons im aktuell geöffneten Browserfenster für die Verwendung als Icon in einem agorum.tree- oder agorum.basicTree-Widget und gibt den Namen der dafür registrierten CSS-Klasse zurück.

• Diese Funktion können Sie nur innerhalb eines aguila-Kontexts verwenden.
• Verwenden Sie diesen Klassennamen als icon-Property eines Knotens in einem Widget des Typs agorum.tree oder agorum.basicTree, um das Icon dort anzuzeigen.
• Die Angabe eines zweiten Icons für den Zustand expanded ist optional. Wenn Sie ausschließlich ein Icon übergeben, verwendet das System das Icon sowohl für den eingeklappten als auch den ausgeklappten Zustand des Baum-Knotens.

Syntax

icons.tree(<icon>, <expanded>);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let cls = icons.tree('ionicon:folder;color=#f8c100', 'ionicon:folder-open;color=#f8c100');

list

Liefert ein Array, das alle im System registrierten Icon-Namen enthält, die Sie für die Komposition von Icons verwenden können.

Syntax

icons.list();

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let all = icons.list();

object

Liefert Icons, die das System nach dem Regelwerk für das übergebene Objekt erzeugt.

• Sie erhalten mindestens das Standard-Icon.
• Für ordnerähnliche Objekte erhalten Sie zusätzlich ein expandiertes Icon.

Syntax

icons.object(object);

Beispiel

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');
let objects = require('common/objects');

let iconSet = icons.object(objects.find('/'));

/*
{
  icon: '<Standard-Icon>',
  expanded: '<expandiertes Icon>'
}
*/