Toastr http://codeseven.github.io/toastr

Simple javascript toast notifications.


<div class="row">
  <div class="col-xs-12 col-md-7">
    <div class="form-group">
      <label for="toastr-title">Title</label>
      <input id="toastr-title" name="toastr-title" type="text" class="form-control" placeholder="Enter a title...">
    </div>
    <div class="form-group">
      <label for="toastr-message">Message</label>
      <input id="toastr-message" name="toastr-message" type="text" class="form-control" placeholder="Enter a message...">
    </div>
    <div class="form-group">
      <label for="toastr-type">Type</label>
      <select class="custom-select form-control" id="toastr-type" name="toastr-type">
        <option value="success" selected>Success</option>
        <option value="info">Info</option>
        <option value="warning">Warning</option>
        <option value="error">Error</option>
      </select>
    </div>
    <div class="form-group">
      <label class="custom-control custom-checkbox" for="toastr-close-button">
        <input type="checkbox" id="toastr-close-button" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        Close button
      </label>
      <label class="custom-control custom-checkbox" for="toastr-progress-bar">
        <input type="checkbox" id="toastr-progress-bar" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        Progress bar
      </label>
      <label class="custom-control custom-checkbox" for="toastr-prevent-duplicates">
        <input type="checkbox" id="toastr-prevent-duplicates" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        Prevent duplicates
      </label>
      <label class="custom-control custom-checkbox" for="toastr-newest-on-top">
        <input type="checkbox" id="toastr-newest-on-top" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        Newest on top
      </label>
    </div>
  </div>
  <div class="col-xs-12 col-md-5">
    <div class="form-group">
      <label>Position</label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-right" checked>
        <span class="custom-control-indicator"></span>
        Top Right
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-right">
        <span class="custom-control-indicator"></span>
        Bottom Right
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-left">
        <span class="custom-control-indicator"></span>
        Bottom Left
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-left">
        <span class="custom-control-indicator"></span>
        Top Left
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-full-width">
        <span class="custom-control-indicator"></span>
        Top Full Width
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-full-width">
        <span class="custom-control-indicator"></span>
        Bottom Full Width
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-center">
        <span class="custom-control-indicator"></span>
        Top Center
      </label>
      <label class="custom-control custom-radio">
        <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-center">
        <span class="custom-control-indicator"></span>
        Bottom Center
      </label>
    </div>
  </div>
</div>

<hr>

<button class="btn btn-primary m-r-1" id="toastr-show">Show toast</button>
<button class="btn m-r-1" id="toastr-clear">Clear toasts</button>

<div class="text-muted m-t-1 pull-md-right">See full example at <a href="http://codeseven.github.io/toastr/demo.html">http://codeseven.github.io/toastr/demo.html</a></div>
<script>
  $(function() {
    var curMsgIndex = -1;

    function getMessage() {
      var msgs = [
        'My name is Inigo Montoya. You killed my father. Prepare to die!',
        '<div><input class="form-control input-sm" value="textbox"/>&nbsp;<a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
        'Are you the six fingered man?',
        'Inconceivable!',
        'I do not think that means what you think it means.',
        'Have fun storming the castle!',
      ];

      curMsgIndex++;

      if (curMsgIndex === msgs.length) { curMsgIndex = 0; }

      return msgs[curMsgIndex];
    };

    $('#toastr-show').click(function() {
      var msg   = $('#toastr-message').val() || getMessage();
      var title = $('#toastr-title').val() || '';
      var type  = $('#toastr-type').val();

      toastr[type](msg, title, {
        positionClass:     $('input[name="toastr-position"]:checked').val(),
        closeButton:       $('#toastr-close-button').prop('checked'),
        progressBar:       $('#toastr-progress-bar').prop('checked'),
        preventDuplicates: $('#toastr-prevent-duplicates').prop('checked'),
        newestOnTop:       $('#toastr-newest-on-top').prop('checked'),
      });
    });

    $('#toastr-clear').on('click', function() {
      toastr.clear();
    });
  });

</script>
    Copy

Usage

require(['jquery', 'px-libs/toastr'], function($, toastr) {
  ...
});

Usage

To use toastr plugin, you need to include the next scripts:

<script src="path/to/js/libs/toastr.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-toastr.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['toastr']);

Alternatively, you can include toastr plugin using ocLazyLoad plugin:

$ocLazyLoad.load([
  {
    name: 'toastr',
    files: [
      'path/to/js/libs/toastr.js',
      'path/to/js/pixeladmin/directives/angular-toastr.js',
    ],
  },
]);

$toastr service

Inject $toastr service into a controller to create notifications. By default it comes with eight methods (see the plugin's documentation):

  |  
<div ng-app="ngToastrApp" ng-controller="ngToastrAppCtrl as ctrl">
  <button class="btn btn-success" ng-click="ctrl.success()">Success</button>
  <button class="btn btn-danger" ng-click="ctrl.error()">Error</button>
  <button class="btn btn-info" ng-click="ctrl.info()">Info</button>
  <button class="btn btn-warning" ng-click="ctrl.warning()">Warning</button>

  &nbsp;&nbsp;|&nbsp;&nbsp;

  <button class="btn btn-default" ng-click="ctrl.clear()">Clear</button>
</div>

<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/toastr.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-toastr.js"></script>

<script>
  angular.module('ngToastrApp', [ 'toastr' ])
    .controller('ngToastrAppCtrl', function($toastr) {
      this.success = function() { $toastr.success('Some notification text.', 'Success Title', { closeButton: true }); };
      this.error   = function() { $toastr.error('Some notification text.',   'Danger Title',  { closeButton: true }); };
      this.info    = function() { $toastr.info('Some notification text.',    'Info Title',    { closeButton: true }); };
      this.warning = function() { $toastr.warning('Some notification text.', 'Warning Title', { closeButton: true }); };
      this.clear   = function() { $toastr.clear(); };
    });
</script>
    Copy
SETTINGS
THEMES