doc568 State.class.js

In C-Forge öffnen

Mit entsprechendem Markup im HTML kann man so jede beliebige Stelle derart klickbar machen, dass ein Popup erscheint, indem man den Status der betroffenen Entität per AJAX verändern kann.

Markup

Der Aufbau ist relativ flexibel. Wichtig ist nur, dass sich alle Informationen (Icon, Typ, TypID, Zustand, Zustandsname, updateStamp) innerhalb der CSS-Klasse stateWrapper befinden. Die genannten Informationen müssen nicht vorhanden sein, sind sie es aber, werden sie entsprechend aktualisiert. Diese Informationen müssen in entsprechenden CSS-Klassen vorhanden sein:

.stateWrapper

Container für alle folgenden CSS-Klassen.

.stateIcon

Das Icon der Entität, entweder entitätsspezifisch oder das klassische fa-square.

.stateName

Der ausgeschrieben Zustandsname der Entität.

.stateStamp

Der Zeitstempel der letzten Aktualisierung der Entität.

Das Icon sollte immer vorhanden sein und der entsprechende Tag über die folgenden Attribute verfügen:

data-toggle

Muss auf state gesetzt werden. Auf all diese Elemente wird der Listener gehetz (dynamische Elemente können mittels registerElement($el) registriert werden)

data-type

Der Typ (Entität) des zu aktualisierenden Items

data-id

Die ID (nicht Nr) des zu aktualisierenden Items

data-state

Der aktuelle Zustand des Items. Wird verwendet um

• Im Dropdown zur Zustandsänderung dnamisch den aktuellen Zustand zu markieren
• Im Falle eines refreshs die aktuelle Einfärbung von stateIcon zu entfernen und durch die neue zu ersetzen.

data-reload

Erwartet eine CSS-Klasse oder -ID (mit CSS-Präfix # oder .). Wird auf der aktuellen Entität der Zustand gewechselt, wird im Anschluss das Objekt mit der angegebenen CSS-Kennung gesucht und ein Refresh durchgeführt. Dabei wird der Zustand der Ziel-Entität erfragt und alle Informationen werden ersetzt, die durch die oben genannten CSS-Klassen angesprochen werden. Wichtig: die Entität, die aktualisiert werden soll, muss zwangsweise die Daten-Attribute data-type und data-id aufweisen. Soll sich die Statusfarbe ändern, muss zusätzlich noch data-state angegeben werden.

Beispiel

<div class="stateWrapper">
	<i class="stateIcon fa fa-square state-active" data-toggle="state" data-type="issue" data-id="1337" data-state="active" data-reload="#iWantThis"></i>
	<span class="stateName">Aktiv</span>
	<span class="stateStamp">Vor 5 Minuten</span>
</div>

<div class="stateWrapper">
	<i class="stateIcon fa fa-book state-inactive" data-type="package" data-id="4711" data-state="inactive"></i>
	<!-- optional weitere .state-Angaben -->
</div>