mercuryseries / flashy-bundle
Easy flash notifications in Symfony
Installs: 10 243
Dependents: 0
Suggesters: 0
Security: 0
Stars: 29
Watchers: 6
Forks: 3
Open Issues: 3
Type:symfony-bundle
Requires
- php: ^7.3|^8.0
- symfony/config: ^4.4 || ^5.3 || ^6.0
- symfony/dependency-injection: ^4.4 || ^5.3 || ^6.0
- symfony/http-kernel: ^4.4 || ^5.3 || ^6.0
Requires (Dev)
- symfony/phpunit-bridge: ^4.4 || ^5.3 || ^6.0
README
Copyright
Inspired by Jeffrey Way's Flash Package.
Installation
Video Tutorial
https://www.youtube.com/watch?v=sxLceVKcWoc
You like text ?
- First, use Composer to download the library:
-
For Symfony 5.3+:
composer require mercuryseries/flashy-bundle
-
For Symfony versions lower than 5.3, please use:
composer require "mercuryseries/flashy-bundle:^3.0"
- Then add the MercurySeriesFlashyBundle to your application:
In Symfony < 4:
// app/AppKernel.php public function registerBundles() { return array( // ... new MercurySeries\FlashyBundle\MercurySeriesFlashyBundle(), // ... ); }
In Symfony 4 with Symfony Flex this will be done automatically for you.
Usage
Once the bundle is installed, you can autowire a FlashyNotifier
into any controller:
// Method 1: via action arguments public function create(FlashyNotifier $flashy) { ... $flashy->success('Event created!', 'http://your-awesome-link.com'); return $this->redirectToRoute('home'); }
// Method 2: via constructor public function __construct(FlashyNotifier $flashy) { $this->flashy = $flashy; } public function create() { ... $this->flashy->success('Event created!', 'http://your-awesome-link.com'); return $this->redirectToRoute('home'); }
You may also do:
$flashy->info('Welcome Aboard', 'http://your-awesome-link.com')
$flashy->success('Welcome Aboard', 'http://your-awesome-link.com')
$flashy->error('Uh Oh', 'http://your-awesome-link.com')
$flashy->warning('Be careful!', 'http://your-awesome-link.com')
$flashy->primary('Thanks for signing up!', 'http://your-awesome-link.com')
$flashy->primaryDark('Thanks for signing up!', 'http://your-awesome-link.com')
$flashy->muted('Can you see me?', 'http://your-awesome-link.com')
$flashy->mutedDark('Can you see me?', 'http://your-awesome-link.com')
This will set a few keys in the session:
- 'mercuryseries_flashy_notification.message' - The message you're flashing
- 'mercuryseries_flashy_notification.type' - A string that represents the type of notification (good for applying HTML class names)
- 'mercuryseries_flashy_notification.link' - The URL to redirect to on click
With this message flashed to the session, you may now display it in your view(s) by including the partial @MercurySeriesFlashy/flashy.html.twig
:
Example
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Awesome Website</title> <!-- Load Flashy default CSS --> <link rel="stylesheet" href="{{ asset('bundles/mercuryseriesflashy/css/flashy.css') }}"> </head> <body> <h1>Welcome to my website!</h1> <!-- Flashy depends on jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Load Flashy default JavaScript --> <script src="{{ asset('bundles/mercuryseriesflashy/js/flashy.js') }}"></script> <!-- Include Flashy default partial --> {{ include('@MercurySeriesFlashy/flashy.html.twig') }} </body> </html>
Note that this bundle has jQuery as dependency. It's also better to load the flashy partial before your body close tag.
If you need to modify the default flash message partial, you can create a bundles/MercurySeriesFlashyBundle/flashy.html.twig
in your templates
folder.
The default content of @MercurySeriesFlashy/flashy.html.twig
is:
{% for message in app.flashes('mercuryseries_flashy_notification') %} <script id="flashy-template" type="text/template"> <div class="flashy flashy--{{ message.type }}"> <a class="flashy__body" href="#" target="_blank"></a> </div> </script> <script> flashy("{{ message.message }}", "{{ message.link }}"); </script> {% endfor %}
Basic CSS & JS for the default partial
The bundles comes with basic CSS & JS for the default partial so you can get started faster. Of course you can change them, use another ones or create your own partial.
<link rel="stylesheet" href="{{ asset('bundles/mercuryseriesflashy/css/flashy.css') }}"> <script src="{{ asset('bundles/mercuryseriesflashy/js/flashy.js') }}"></script>
Again, note that this bundle has jQuery as dependency.
Nice rendering
For a nice rendering you may include these lines in your head:
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet'>
and override the following sections of the default flashy view:
// public/bundles/mercuryseriesflashy/css/flashy.css .flashy { font-family: "Source Sans Pro", Arial, sans-serif; ... } // templates/bundles/MercurySeriesFlashyBundle/flashy.html.twig {% for message in app.flashes('mercuryseries_flashy_notification') %} <script id="flashy-template" type="text/template"> <div class="flashy flashy--{{ message.type }}"> <i class="material-icons">speaker_notes</i> <a class="flashy__body" href="#" target="_blank"></a> </div> </script> <script> flashy("{{ message.message }}", "{{ message.link }}"); </script> {% endfor %}
Configuration
# config/packages/mercuryseries_flashy.yaml mercuryseries_flashy: # The name to use as the flash message key in the session store flash_message_name: mercuryseries_flashy_notification # The session store to use for storing flash messages session_store: null