Deprecation Notice
This project has been deprecated as Presenter#flashMessage now accepts Objects.
Extended Flashes
About
You may be asking, what is this? Glad you asked.
During development of website in the Nette Framework, I found myself limited by the default Flash Messages, $presenter->flashMessage($message, $type)
That's why I decided I'll do a little addon for these flashes. It works basically the same, but I can set additional arguments which may come handy.
Installation
Run composer require vottuscode/extended-flashes
Go to your BasePresenter.php and add the Vottus\Flashes\Traits\Flashes
trait:
<?php declare(strict_types=1);
namespace App\Presenters;
use Nette\Application\UI\Presenter;
use Vottus\Flashes\Traits\Flashes;
class BasePresenter extends Presenter
{
use Flashes;
// .. your code
}
That's basically everything! But how do you actually use it?
Usage
It is very easy! Instead of flashMessage($message, $type)
use: flash($title, $message, $type, $additional)
First three variables $title
, $message
and $type
are self-explanatory.
If you don't need to set the title, you can set it to null. Type is by default set to info
.
Variable $additional
is for additional info, as mentioned earlier. It is later transformed info a JSON using Nette\Utils\Json::encode()
.
You may use anything that can be converted into a Json, otherwise an Nette\Utils\JsonException
is thrown.
Example flash:
$this->flash("Hello", "This is a nice flash message!", "success", [
"happy" => true
]);
The flashes are in the same $flashes variable, so you don't need to modify your flash messages.
Example flash rendering with flashMessage()
:
<div n:foreach="$flashes as $flash" class="flash {$flash->type}">
{$flash->message}
</div>
Example flash rendering with flash()
:
<div n:foreach="$flashes as $flash" class="flash {$flash->type}">
{$flash->message}
// and you can add:
{var $json = json_decode($flash->additional}
{$json->additional_info}
</div>
Using it with JavaScript
Say what? You can use this with JS? Yes, and there are two ways to use it. You can use Nittro or Nette.ajax.js, but I'm gonna show you a solution without any libraries.
Let's set a flash message in our Presenter:
$this->flash("Hello", "This is a nice flash message!", "success", [
"happy" => true
]);
Create a JS file in your public folder, for example flashes.js:
function flash(title, message, type, additional) {
console.log(title) // Hello
console.log(message) // This is a nice flash message!
console.log(type) // success
console.log(additional.happy); // true
}
In your @layout.latte
, add the script:
<script src="{$baseUrl}/flashes.js"></script>
Then add this below it:
<script n:inner-foreach="$flashes as $flash">
{varType Vottus\Flashes\Entities\Flash $flash}
flash({$flash->title}, {$flash->message}, {$flash->flashType}, JSON.parse({$flash->additional}));
</script>
(the {varType} is not necessary, it's there for auto completion in IDEs)
⚠️ Do not ever disable escaping, it will create an XSS vulnerability.
Now the flash messages are handled by the JS method flash(), and it depends on you how you use it!
You can for example use third-party libraries like SweetAlert or toastr.js for nice toast messages or alerts.
SweetAlert Example
Examples
Printing announcements:
<div n:foreach="$flashes as $flash">
{varType Vottus\Flashes\Entities\Flash $flash}
{var $additional = json_decode($flash->additional)}
<div class="flash flash-{$flash->flashType}">
<span><b>{$additional->date}</b> – By <b>{$additional->author}</b> | {$flash->title}</span>
<p>{$flash->message}</p>
</div>
</div>
Using SweetAlert to flash messages:
<script n:inner-foreach="$flashes as $flash">
{varType Vottus\Flashes\Entities\Flash $flash}
flashSwal({$flash->title}, {$flash->message}, {$flash->flashType}, JSON.parse({$flash->additional}));
</script>
function flashSwal(title, message, type, additional) {
Swal.fire({
title: title,
text: message,
position: additional.position,
});
}
If you want help, feel free to write me a mail or open an issue.