Add multiples templates for toast item

Author: Asmitta-01

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - Progress bar line in toasts
+- Customizable toast items templates
 
 ## 0.2.0
 

config/definition.php

@@ -24,6 +24,7 @@
                     ->integerNode('timer')->defaultValue(5000)->end()
                     ->booleanNode('dismissible')->defaultTrue()->end()
                     ->booleanNode('progress_bar')->defaultFalse()->end()
+                    ->stringNode('template')->isRequired()->end()
                 ->end()
             ->end()
         ->end()

docs/config.md

@@ -13,6 +13,7 @@ asmitta_toast:
     timer: 5000
     progress_bar: false
     dismissible: true
+    template: '@AsmittaToast/toast_items/default.html.twig'
 ```
 
 ## Configuration Options
@@ -47,3 +48,8 @@ asmitta_toast:
 
 - Adds a close button to manually dismiss toasts
 - When `false`, toasts can only be dismissed by timer
+
+**template** (string, default: `@AsmittaToast/toast_items/default.html.twig`)
+
+- Twig template used to render individual toast items
+- More info in [the templating doc](./templating.md)

docs/index.md

@@ -0,0 +1,33 @@
+# ToastBundle
+
+A Symfony bundle for displaying [Bootstrap toasts](https://getbootstrap.com/docs/5.3/components/toasts/) from flash messages.
+
+## Installation
+
+Make sure Composer is installed globally, as explained in the
+[installation chapter](https://getcomposer.org/doc/00-intro.md)
+of the Composer documentation.
+
+Open a command console, enter your project directory and execute:
+
+```console
+composer require asmitta-01/toast-bundle
+```
+
+## Configuration
+
+if your application dont't use Symfony Flex, enable the bundle in `config/bundles.php`:
+
+```php
+return [
+    // ...
+    Asmitta\ToastBundle\AsmittaToastBundle::class => ['all' => true],
+];
+```
+
+Create a configuration file at `config/packages/asmitta_toast.yaml`.
+
+## Resources
+
+- [Configuration file](./config.md)
+- [Templating](./templating.md)

docs/templating.md

@@ -0,0 +1,15 @@
+# Templating
+
+The bundle provides three(03) toast items templates actually:
+
+- `@AsmittaToast/toast_items/default.html.twig` (Default)
+- `@AsmittaToast/toast_items/with_icon.html.twig`
+- `@AsmittaToast/toast_items/colored_icon.html.twig`
+
+:warning: If you're using a template displaying icons, **you should include bootstrap icons package** in your view:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+```
+
+You can create custom templates and specify their path here. Ensure your custom template accepts the following variables: `type`, `message`, `toast_type`, `timer`, `is_dismissible`, `show_progress_bar`(See [default template](../templates/toast_items/default.html.twig)).

src/AsmittaToastBundle.php

@@ -44,6 +44,7 @@ public function loadExtension(array $config, ContainerConfigurator $container, C
             ->arg(0, $config['toast_item']['timer'])
             ->arg(1, $config['toast_item']['dismissible'])
             ->arg(2, $config['toast_item']['progress_bar'])
+            ->arg(3, $config['toast_item']['template'])
         ;
     }
 }

src/Service/ToastItemConfig.php

@@ -7,7 +7,8 @@ class ToastItemConfig
     public function __construct(
         private int $timer,
         private bool $dismissible,
-        private bool $showProgressBar
+        private bool $showProgressBar,
+        private string $template
     ) {}
 
     public function getTimer(): int
@@ -24,4 +25,9 @@ public function showProgressBar(): bool
     {
         return $this->showProgressBar;
     }
+
+    public function getTemplate(): string
+    {
+        return $this->template;
+    }
 }

src/Twig/ToastExtension.php

@@ -60,6 +60,7 @@ public function renderToasts(): string
             'timer' => $this->toastItemConfig->getTimer(),
             'is_dismissible' => $this->toastItemConfig->isDismissible(),
             'show_progress_bar' => $this->toastItemConfig->showProgressBar(),
+            'template' => $this->toastItemConfig->getTemplate(),
         ]);
     }
 

templates/toast_container.html.twig

@@ -1,7 +1,7 @@
 <div class="toast-container position-fixed {{ position }} p-3">
     {% for type, messages in flashes %}
         {% for message in messages %}
-            {% include '@AsmittaToast/toast_item.html.twig' with {
+            {% include template with {
                 'type': type,
                 'message': message,
                 'toast_type': toast_types[type] ?? 'info',

templates/toast_items/colored_icon.html.twig

@@ -0,0 +1,36 @@
+{% set class = 'text-' ~ type %}
+
+{% set accessibility_attr = {
+    'success': 'role="status" aria-live="polite"',
+    'warning': 'role="alert" aria-live="assertive"',
+    'danger': 'role="alert" aria-live="assertive"',
+    'info': 'role="status" aria-live="polite"'
+}[type] ?? 'role="alert"' %}
+
+{% set icon = {
+    info: 'bi-info-circle-fill',
+    danger: 'bi-exclamation-circle-fill',
+    warning: 'bi-exclamation-triangle-fill',
+    success: 'bi-check-circle-fill'
+}[type] ?? 'bi-info-circle' %}
+
+<div class="toast d-flex position-relative" {{ accessibility_attr|raw }} data-bs-autohide="{{ timer > 0 ? 'true' : 'false' }}" data-bs-delay="{{ timer }}">
+	<i class="{{ icon }} ms-2 mt-2 fs-2 {{ class }}"></i>
+
+	<div class="w-100">
+		<div class="toast-header border-0 pb-0">
+			<strong class="me-auto">{{ toast_type|trans({}, 'asmitta_toast_bundle') }}</strong>
+
+			{% if is_dismissible %}
+				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
+			{% endif %}
+		</div>
+		<div class="toast-body">
+			{{ message }}
+		</div>
+	</div>
+
+	{% if show_progress_bar and timer > 0 %}
+		<div class="asmitta-toast-progress-bar active" style="--asmitta-toast-progress-timer: {{ timer }}ms; --asmitta-toast-progress-color: var(--bs-{{ type }})"></div>
+	{% endif %}
+</div>