Git Product home page Git Product logo

toastr's Introduction

Toastr.js notifications for Laravel 5 and Lumen

For more drivers (toastr, pnotify, sweetalers2) please try the new package yoeunes/notify

๐Ÿ‘€ This package helps you to add toastr.js notifications to your Laravel 5 and Lumen projects.

Latest Stable Version Latest Unstable Version Build Status Scrutinizer Code Quality Code Coverage Total Downloads License

toastr

Install

You can install the package using composer

$ composer require yoeunes/toastr

Then add the service provider to config/app.php. In Laravel versions 5.5 and beyond, this step can be skipped if package auto-discovery is enabled.

'providers' => [
    ...
    Yoeunes\Toastr\ToastrServiceProvider::class
    ...
];

As optional if you want to modify the default configuration, you can publish the configuration file:

$ php artisan vendor:publish --provider='Yoeunes\Toastr\ToastrServiceProvider' --tag="config"

For Lumen :

  1. In bootstrap/app.php
    • uncomment $app->withFacades();
    • add bindings for ToastrServiceProvider : $app->register(Yoeunes\Toastr\ToastrServiceProvider::class);
  2. Add config/session.php, since it is not present in Lumen by default. You can take session.php from Laravel Official Repository

Usage:

Include jQuery and toastr.js in your view template:

  1. Link to jquery <script src="jquery.min.js"></script> or from cdn with our custom blade directive @jquery
  2. Link to toastr.css <link href="toastr.css" rel="stylesheet"/> or @toastr_css
  3. Link to toastr.js <script src="toastr.js"></script> or @toastr_js

The custom directives @jquery, @toastr_css, @toastr_js pulls the latest version for jquery and toastr from cdn.js, you could also pass a specified version a first parameter: @jquery(3.2), @toastr_css(2.1.4) and @toastr_js(2.1.4)

  1. use toastr() helper function inside your controller to set a toast notification for info, success, warning or error
// Display an info toast with no title
toastr()->info('Are you the 6 fingered man?')

as an example:

<?php

namespace App\Http\Controllers;

use App\Post;
use App\Http\Requests\PostRequest;
use Illuminate\Database\Eloquent\Model;

class PostController extends Controller
{
    public function store(PostRequest $request)
    {
        $post = Post::create($request->only(['title', 'body']));

        if ($post instanceof Model) {
            toastr()->success('Data has been saved successfully!');

            return redirect()->route('posts.index');
        }

        toastr()->error('An error has occurred please try again later.');

        return back();
    }
}

After that add the @toastr_render at the bottom of your view to actualy render the toastr notifications.

<!doctype html>
<html>
    <head>
        <title>Toastr.js</title>
        @toastr_css
    </head>
    <body>
        
    </body>
    @jquery
    @toastr_js
    @toastr_render
</html>

Other Options

// Set a warning toast, with no title
toastr()->warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Set a success toast, with a title
toastr()->success('Have fun storming the castle!', 'Miracle Max Says')

// Set an error toast, with a title
toastr()->error('I do not think that word means what you think it means.', 'Inconceivable!')

// Override global config options from 'config/toastr.php'

toastr()->success('We do have the Kapua suite available.', 'Turtle Bay Resort', ['timeOut' => 5000])

Limit the number of displayed toastrs

To limit the number of displayed toastrs set the value maxItems in the config file to an integer value, you can also set it per action in your controller like this:

toastr()->success('Have fun storming the castle!', 'Miracle Max Says');
toastr()->error('I do not think that word means what you think it means.', 'Inconceivable!'); // i want to display this one
toastr()->info('Are you the 6 fingered man?'); // and this one

toastr()->maxItems(2);

now if you call the render method the last two notifications will be displayed

Other api methods:

// You can also chain multiple messages together using method chaining

toastr()->info('Are you the 6 fingered man?')->success('Have fun storming the castle!')->warning('doritos');

// @jquery, @toastr_css and @toastr_js is an alias for helper functions:

function jquery(string $version = '3.3.1', string $src = null);
function toastr_css(string $version = '2.1.4', string $href = null);
function toastr_js(string $version = '2.1.4', string $src = null);

// you could replace @toastr_render by :

toastr()->render() or app('toastr')->render()

// you can use toastr('') instead of toastr()->success()

function toastr(string $message = null, string $type = 'success', string $title = '', array $options = []);

so

  • toastr($message) is equivalent to toastr()->success($message)
  • toastr($message, 'info') is equivalent to toastr()->info($message)
  • toastr($message, 'warning') is equivalent to toastr()->warning($message)
  • toastr($message, 'error') is equivalent to toastr()->error($message)

configuration:

// config/toastr.php
<?php

return [
    // Limit the number of displayed toasts, by default no limits
    'maxItems' => null,
    
    'options' => [
        'closeButton'       => true,
        'closeClass'        => 'toast-close-button',
        'closeDuration'     => 300,
        'closeEasing'       => 'swing',
        'closeHtml'         => '<button><i class="icon-off"></i></button>',
        'closeMethod'       => 'fadeOut',
        'closeOnHover'      => true,
        'containerId'       => 'toast-container',
        'debug'             => false,
        'escapeHtml'        => false,
        'extendedTimeOut'   => 10000,
        'hideDuration'      => 1000,
        'hideEasing'        => 'linear',
        'hideMethod'        => 'fadeOut',
        'iconClass'         => 'toast-info',
        'iconClasses'       => [
            'error'   => 'toast-error',
            'info'    => 'toast-info',
            'success' => 'toast-success',
            'warning' => 'toast-warning',
        ],
        'messageClass'      => 'toast-message',
        'newestOnTop'       => false,
        'onHidden'          => null,
        'onShown'           => null,
        'positionClass'     => 'toast-top-right',
        'preventDuplicates' => true,
        'progressBar'       => true,
        'progressClass'     => 'toast-progress',
        'rtl'               => false,
        'showDuration'      => 300,
        'showEasing'        => 'swing',
        'showMethod'        => 'fadeIn',
        'tapToDismiss'      => true,
        'target'            => 'body',
        'timeOut'           => 5000,
        'titleClass'        => 'toast-title',
        'toastClass'        => 'toast',
    ],
];

For a list of available options, see toastr.js' documentation.

Credits

License

MIT

toastr's People

Contributors

khatriafaz avatar lloricode avatar whereislucas avatar yoeunes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.