# 🧁 Toastra – Notification Plugin

Ein universelles Notification-System für jede Art von Projekt (Vanilla JS, Laravel + Vite, usw.). Über eine globale `toastra.notify(...)`-API können Benachrichtigungen angezeigt werden, während eine globale `config.js` Standardwerte (Position, Dauer, Animation etc.) verwaltet.

Dieses Plugin ist **nicht** von Vue, React oder AlpineJS abhängig – alles läuft in reinem JavaScript.  
**Domain:** [toastra.com](https://toastra.com)

---

## 📁 Verzeichnisstruktur

```
src/
└── plugins/
    └── Toastra/
        ├── index.js
        ├── src/
        │   ├── config.js
        │   ├── message.js
        │   └── message.css
        └── README.md        
```

---

## ⚙️ Integration

### 1. HTML-Einbindung (ohne Build-Tool)

```html
<script src="path/to/Toastra/index.js"></script>
<link rel="stylesheet" href="path/to/Toastra/src/message.css">
```

Jetzt kannst du direkt `toastra.notify(...)` verwenden.

---

### 2. Laravel + Vite Setup

#### Vite-Konfiguration (`vite.config.js`)

```js
resolve: {
    alias: {
        '@': '/resources/js',
        '@toastra': '/src/plugins/Toastra',
    },
}
```

#### In `app.js` importieren:

```js
import '@toastra';
```

#### In `app.css` importieren:

```css
@import "@toastra/src/message.css";
```

---

## 🚀 Verwendung

### Standardwerte in `config.js`

```js
toastra.config({
  mode: "dark-mode",
  icon: true,
  position: "bottom-center",
  progressbar: true,
  animation: "slide-up",
});
```

### Benachrichtigung anzeigen

```js
toastra.notify({ text: 'Hallo Welt!' });

toastra.notify({
  title: 'Fehler',
  text: 'Es ist etwas schiefgelaufen!',
  type: 'error'
});

toastra.notify({
  type: 'success',
  text: 'Gespeichert!',
  position: 'top-center',
  duration: 8000
});
```

---

## ⚙️ Konfigurationsoptionen

| **Key**            | **Standard**                                   | **Beschreibung**                                                                                      | **Mögliche Werte**                                                                                      |
|--------------------|------------------------------------------------|--------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|
| `type`             | `'default'`                                    | Stil der Nachricht                                                                                     | `'default'`, `'success'`, `'info'`, `'warning'`, `'error'`, `'update'`                                   |
| `mode`             | `'default-mode'`                               | Farbmodus                                                                                              | `'default-mode'`, `'light-mode'`, `'dark-mode'`                                                          |
| `position`         | `'top-right'`                                  | Anzeigeort                                                                                             | `'top-left'`, `'top-center'`, `'top-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'`        |
| `duration`         | `3000`                                         | Anzeigezeit in ms                                                                                      | Zahl                                                                                                     |
| `selector`         | `'body'`                                       | Container für die Nachricht                                                                            | CSS-Selektor                                                                                             |
| `icon`             | `null`                                         | Icon anzeigen                                                                                          | `true`, `null`, HTML-String                                                                              |
| `progressbar`      | `false`                                        | Fortschrittsbalken                                                                                     | `true`/`false`                                                                                           |
| `close`            | `false`                                        | Manuelles Schließen                                                                                    | `true`/`false`                                                                                           |
| `title`            | `''`                                           | Titelzeile                                                                                             | String                                                                                                   |
| `text`             | `'Hi Guys, how are you?'`                      | Nachrichtentext                                                                                        | String                                                                                                   |
| `onComplete`       | `null`                                         | Callback bei Ende                                                                                      | Funktion oder `null`                                                                                     |
| `onCompleteParams` | `{}`                                           | Parameter für Callback                                                                                 | Objekt                                                                                                   |
| `offset`           | `{ top: '', left: '', right: '', bottom: '' }` | Abstand zum Bildschirmrand                                                                             | CSS-Werte wie `'20px'`                                                                                   |
| `style`            | `{ color: '', background: '' }`                | Benutzerdefinierte Farben                                                                              | CSS-Stilobjekt                                                                                           |
| `animation`        | `'slide-right'`                                | Ein-/Ausblendanimation                                                                                 | `'slide-right'`, `'slide-left'`, `'slide-up'`, `'slide-down'`                                            |
| `classname`        | `''`                                           | Zusätzliche CSS-Klassen                                                                                | `'my-toast custom-class'`                                                                               |

---

## 📝 Styling

Passe `message.css` an, um z. B. Farben, Abstände oder Animationen zu ändern. Auch mit Tailwind erweiterbar.

---

## 🧪 Demo & Vorschau

Live-Demo bald verfügbar unter **[toastra.com](https://toastra.com)**  
Für lokale Tests einfach im Projekt:

```js
toastra.notify({ text: '🎉 Toastra funktioniert!' });
```

---

## ✅ Fazit

- Modular, Framework-unabhängig
- Elegante Toast-Benachrichtigungen
- Frei konfigurierbar über `toastra.config(...)` und `toastra.notify(...)`