Dokumentation

Appearance

IrisMessenger ​

Einleitung ​

Der IrisMessenger ist das globale Nachrichtensystem für Hermeneus. Es ermöglicht das Anzeigen von Benachrichtigungen in verschiedenen Kategorien (Dialog, Toast, Flash, Bar, Confirm) und Typen wie success, info, danger und confirm. Jede Nachricht kann optional eine Callback-Funktion und einen Selbstzerstörungstimer haben.

Implementierung in Hermeneus ​

Der Messenger ist als Pinia-Store via Global Property in der Vue-Instanz definiert. Er kann überall in Vue über this.$IrisMessengerStore aufgerufen werden.

Nachrichtenmethoden ​

Es gibt fünf Nachrichten-Kategorien, für die auch ein entsprechendes Template in der Komponente IrisMessenger.vue definiert ist:

  • dialog: Dialogfenster in der Mitte des Bildschirms
  • confirm: Dialogfenster mit OK- und Abbrechen-Button: Für die Aktion, die mit Klick auf OK ausgeführt wird, muss eine Callback-Funktion übergeben werden.
  • toast: Dialogfenster, in der unteren Mitte des Bildschirms (üblicherweise mit Timer)
  • flash: Dialogfenster, das unten rechts auf dem Bildschirm erscheint (üblicherweise mit Timer)
  • bar: Leiste, die oben auf dem Bildschirm erscheint (üblicherweise mit Timer)
  • openLoader: Ladebildschirm mit Loader, der alle Nutzerinteraktionen blockiert. Mit closeLoader wird der Ladebildschirm wieder geschlossen, falls kein selfDestructTimer gesetzt wurde.

Nachrichten-Typen ​

Der Typ der Nachricht bestimmt das Aussehen der Nachricht. Es gibt vier Typen:

  • info: i.d.R. weiße Nachricht
  • success: i.d.R. grüne Nachricht
  • warning: i.d.R. gelbe Nachricht
  • danger: i.d.R. rote Nachricht

Anwendung in Vue ​

Eine einfache Dialog-Nachricht anzeigen ​

javascript
this.$IrisMessenger.dialog({
  type: 'info',
  title: 'Information',
  message: 'Dies ist eine Informationsnachricht.'
});

Confirm-Nachricht mit Callback-Funktion ​

Hier wird standardmäßig ein Bestätigungsdialog mit OK- und Abbrechen-Button angezeigt. Wenn der Benutzer auf "OK" klickt, wird die Callback-Funktion ausgeführt.

javascript
this.$IrisMessenger.confirm({
  type: 'info',
  title: 'Bestätigung erforderlich',
  message: 'Sind Sie sicher, dass Sie den Ruhm und Glanz des antiken Römischen Reiches wiederherstellen wollen?',
  callback: () => {
    console.log('Die Nachricht wurde bestätigt.');
  }
});

Nachricht mit Selbstzerstörungstimer ​

Hier wird eine Nachricht angezeigt, die nach 5 Sekunden automatisch verschwindet.

javascript
this.$IrisMessenger.flash({
  type: 'success',
  title: 'Erfolg',
  message: 'Die Nachricht wird in 5 Sekunden verschwinden.',
  selfDestructTimer: 5000
});

Anwendung außerhalb von Vue ​

Der Messenger kann auch außerhalb von Vue verwendet werden, indem er über das window-Objekt aufgerufen wird.

javascript
window.$IrisMessenger.flash({
  type: 'info',
  title: 'Information',
  message: 'Dies ist eine Informationsnachricht.'
});

Obacht! Falls die Nachricht von einem Blade-Template innerhalb eines <script>-Tags aufgerufen wird, muss das Attribut type="module" gesetzt werden:

html
<script type="module">
  window.$IrisMessenger.flash({
    type: 'info',
    title: 'Information',
    message: 'Dies ist eine Informationsnachricht.'
  });
</script>

Darstellung ​

Die Nachrichten werden in der Komponente IrisMessenger.vue dargestellt und durch verschiedene Templates gerendert:

html
<template>
  <div class="no-outline" id="iris-messenger">
    <iris-messenger-template-dialog v-if="template ==='dialog'" :messages="IrisMessengerStore.dialogMessages"/>
    <iris-messenger-template-toast v-if="template ==='toast'" :messages="IrisMessengerStore.toastMessages"/>
    <iris-messenger-template-confirm v-if="template ==='confirm'" :messages="IrisMessengerStore.confirmMessages"/>
  </div>
</template>

Erweiterung ​

Durch Hinzufügen eines neuen Templates kann die Darstellung der Nachrichten einfach erweitert werden. Allerdings muss dann im Store auch eine neue Kategorie hinzugefügt und ein entsprechender Getter (z.B. annoyingMessages) definiert werden.