Showing Flask's flash non-blocking notifications in templates using toastr.
Donate to help keep this project maintained. 
Step 1: Initialize the extension:
from flask_toastr import Toastr toastr = Toastr(app) Step 2: In your <head> and bottom of <body>sections of your base template add the following code:
<html> <head> {{ toastr.include_jquery() }} {{ toastr.include_toastr_css() }} {{ toastr.message() }} </head> <body> {{ toastr.include_toastr_js() }} </body> </html>This extension also supports the Flask application factory pattern by allowing you to create a Toastr object and then separately initialize it for an app:
toastr = Toastr() def create_app(config): app = Flask(__name__) app.config.from_object(config) # initialize toastr on the app within create_app() toastr.init_app(app) app = create_app(prod_config)Note that jQuery is required. If you are already including it on your own then you can remove the include_jquery() line. Secure HTTP is used if the request under which these are executed is secure.
The include_jquery(), include_toastr_js() and include_toastr_css() methods take some optional arguments. If you pass a version argument to any of these calls, then the requested version will be loaded from the default CDN. In addition, it is also possible to pass js_filename and css_filename to include_toastr_js() and include_toastr_css(), respectively.
Step 3: Use the flash() method with or without category in your views. For example:
@app.route('/') def index(): flash("All OK") flash("All OK", 'success') flash("All Normal", 'info') flash("Not So OK", 'error') flash("So So", 'warning') return render_template('index.html')Or you could also use flash() method with custom titles, see #14 for details:
@app.route('/') def index(): flash("Message", 'Custom Title') flash({'title': "Custom Title", 'message': "Error Message"}, 'error') return render_template('index.html')Step 4: Enjoy
| Config | Default | Possible Values | Description | Reference |
|---|---|---|---|---|
| TOASTR_VERSION | '2.1.4' | Releases from here | Version of Toastr | https://github.com/CodeSeven/toastr/tags |
| TOASTR_JQUERY_VERSION | '2.1.0' | Releases from here | Version of JQuery | https://releases.jquery.com/jquery/ |
| TOASTR_CSS_FILENAME | 'toastr.min.css' | CDN file name | CSS Filename used in CDN Toastr's link | https://github.com/CodeSeven/toastr#cdns |
| TOASTR_JS_FILENAME | 'toastr.min.js' | CDN file name | JS Filename used in CDN Toastr's link | https://github.com/CodeSeven/toastr#cdns |
| TOASTR_CLOSE_BUTTON | 'true' | 'true' or 'false' | Enable or Disable close button | https://github.com/CodeSeven/toastr#close-button |
| TOASTR_SHOW_EASING | 'swing' | 'swing' or 'linear' | Override the animation easing to show the toasts | https://github.com/CodeSeven/toastr#animation-options |
| TOASTR_HIDE_EASING | 'linear' | 'swing' or 'linear' | Override the animation easing to hide the toasts | https://github.com/CodeSeven/toastr#animation-options |
| TOASTR_CLOSE_EASING | 'linear' | 'swing' or 'linear' | Override the animation easing to close the toasts | https://github.com/CodeSeven/toastr#animation-options |
| TOASTR_SHOW_METHOD | 'fadeIn' | 'fadeIn', 'fadeOut', 'slideDown', 'slideUp, 'show', 'hide' | Override the animation method to show the toasts | https://github.com/CodeSeven/toastr#animation-options |
| TOASTR_HIDE_METHOD | 'fadeOut' | 'fadeIn', 'fadeOut', 'slideDown', 'slideUp, 'show', 'hide' | Override the animation method to hide the toasts | https://github.com/CodeSeven/toastr#animation-options |
| TOASTR_CLOSE_METHOD | 'fadeOut' | 'fadeIn', 'fadeOut', 'slideDown', 'slideUp, 'show', 'hide' | Override the animation method to close the toasts | https://github.com/CodeSeven/toastr#animation-options |
| TOASTR_TIMEOUT | 15000 | any int value (in ms) | Time to notification close | https://github.com/CodeSeven/toastr#timeouts |
| TOASTR_EXTENDED_TIMEOUT | 1000 | any int value (in ms) | Time to notification close after hover mouse or click | https://github.com/CodeSeven/toastr#timeouts |
| TOASTR_POSITION_CLASS | 'toast-top-right' | 'toast-top-right', 'toast-bottom-right', 'toast-bottom-left', 'toast-top-left', 'toast-top-full-width', 'toast-bottom-full-width', 'toast-top-center', 'toast-bottom-center' | Notification Positon | https://codeseven.github.io/toastr/demo.html |
| TOASTR_PREVENT_DUPLICATES | 'false' | 'true' or 'false' | Doesn't show same notification | https://github.com/CodeSeven/toastr#prevent-duplicates |
| TOASTR_NEWS_ON_TOP | 'false' | 'true' or 'false' | Notification's aparition order | https://github.com/CodeSeven/toastr#display-sequence |
| TOASTR_PROGRESS_BAR | 'true' | 'true' or 'false' | Enable or Disable progress bar | https://github.com/CodeSeven/toastr#progress-bar |
| TOASTR_OPACITY | True | True or False | Enable or Disable notification's opacity | https://stackoverflow.com/a/17640150/7041939 |
Note: The values `true` and `false` are passed to JS, that is Case Sensitive. Therefore they must be passed in lowercase. To run the example in your local environment: 1. Clone the repository: git clone https://github.com/wiltonsr/Flask-Toastr.git cd Flask-Toastr 2. Create and activate a virtual environment: virtualenv env source env/bin/activate 3. Install requirements: pip install -r 'example/requirements.txt' 4. Run the application: python example/app.py Consult the toastr documentation for more details.
This extension is just a project to improve my python and flask skills. Any suggestions or tips are welcome.
