Toastr support

Via its integration with the toastr component, Sircl provides an easy wat to show non-blocking notifications also known as toasts.

Introduction

toastr is a Javascript library for Gnome / Growl type non-blocking notifications also known as toasts.

More information about the toastr library: https://codeseven.github.io/toastr/.

For a demonstration, see: https://codeseven.github.io/toastr/demo.html.

Setup

Toastr requires the full (not "slim") edition of jQuery. To setup toastr in combination with Sircl, you need to install following files in order:

• Cascading style sheets
  • toastr.css
  • sircl.css
• Javscript:
  • jquery.js
  • toastr.js
  • sircl.js
  • sircl-toastr.js

You can replace sircl.js by sircl-bundle.js, and/or add more Sircl libraries.

The toastr.css and toastr.js files can also be included from CDN using the following elements:

<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

Showing toasts on click

To show toasts on click, add the onclick-showtoastr attribute with as value a (relative) CSS selector to the toasts to show. The toast is defined as an element with following properties:

• The data-toastr-type attribute defines the type of toast: "success", "info", "warning" or "error".
  Defaults to "info"
• The data-toastr-title attribute defines a title for the toast.
• The content of the element is the content of the toast.

Add the hidden attribute to hide the element from the normal page output. Or use for instance a TEMPLATE element.

For instance:

<button type="button" onclick-copytext="[email protected]"
                      onclick-showtoastr="#copiedtoastr">
  <span class="spinner"></span> Copy to clipboard
</button>
<template id="copiedtoastr" data-toastr-type="success" data-toastr-title="Copied to clipboard">
  The email address was copied to the clipboard.
</template>

Showing toasts from page or page part

Whenever a page or page part is loaded, that contains an element with the onload-showtoastr class, a toast is shown based on that element.

For instance:

<div class="onload-showtoastr" data-toastr-type="success" data-toastr-title="Added to cart" hidden>
  The item has been added to your shopping cart.
</div>

Showing toasts from response headers

As reponse to Sircl Ajax requests, the server can request to show a toastr by setting the X-Sircl-Toastr response header to a value according this format:

<type>|<content>[|<title>]

The type is either "success", "info", "warning" or "error".

The content is the content of the alert message.

The title is optional.

Example:

X-Sircl-Toastr: success|Your changes have been saved.|Changes saved