Edit on

<body ng-app="demo" ng-controller="demoController" ng-cloak>
  <h1>Domino AngularJS Toaster Notifications</h1>

  <div class="row">
    <div class="col-md-4">
      <p>This example will launch some toaster notifications which have been driven by some JSON data - the example URLS to call Domino Data has been commented out for the demo. Once the toaster notification has been cleared then the backend application
        will update the status of the corresponding notification document using a PATCH request.
        For the demo purposes a list of cleared notifcations will be displayed instead.
            The associated blog article which describes this code is available <a href="">here.</a>
        <button ng-click="loadNotifications()" ng-disabled="demoClickedToasts.length>0" class="btn btn-success">Launch Demo</button>

      <div class="panel panel-default" ng-hide="demoClickedToasts.length==0">
        <div class="panel-heading">
          <h3 class="panel-title">Dismissed Toasts</h3>
        <div class="panel-body">
          <ul class="list-group">
            <li class="list-group-item" ng-repeat="toast in demoClickedToasts">
              <span class="glyphicon glyphicon glyphicon-ok"></span> {{toast.title}}
              <span ng-show="toast.type=='toast-info'" class="label label-info">Info</span>
              <span ng-show="toast.type=='toast-warning'" class="label label-warning">Warning</span>
              <span ng-show="toast.type=='toast-error'" class="label label-danger">Danger</span> 
        <div class="panel-footer">
          <h3>Toaster Object (Debug)</h3>
          <p>This is an example how you can simply dump the contents of a object out as JSON for debugging purposes - it uses an AngularJS filter to do this</p>
          <pre>Example Code: { { demoClickedToasts || json } }</pre>

          <pre>JSON Output: {{demoClickedToasts || json}}</pre>


    <div class="col-md-8"></div>

  <script src="https://code.angularjs.org/1.2.13/angular-animate.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/60204/toaster.js"></script>
  <toaster-container toaster-options="{'time-out': 3000,'spinner':false}"></toaster-container>

// Code goes here

var app = angular.module("demo", ['toaster'])

app.controller("demoController", function($scope, $http, toaster) {

  //Initial Holding Object for our Notifications - set as empty
  $scope.notifications = {};

  //Load Notifications for this current user from the View using the Domino REST API
  //For the demo we will use a local sample.json file which mimics the Domino JSON Data
  $scope.loadNotifications = function() {
      url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/60204/sample_3.json'
      //url: '/notification.nsf/api/data/collections/name/(LUNotificationsAwaiting)?category=<Computed Value>'
    }).success(function(data, status, headers, config) {
       $scope.notifications = data;

  //This code watches the notifications object - if it changes then it calls another function
  //This helps to decouple your loading data logic.
  $scope.$watch('notifications', function(newVal, oldVal) {
    if (oldVal == newVal) return;
    //We have notifications - loop through them and show them


  $scope.$on('toaster-Removed', function(event, toasterObj) {

  $scope.displayNotifications = function() {
    angular.forEach($scope.notifications, function(value, key) {
      if (value.sticky == "No") {
        sticky = 3000
      } else {
        sticky = 0
      toaster.pop(value.type, value.title, value.message, sticky, 'trustedHtml', "", value['@unid']);

  //For the demo we will hold a list of clicked toasts so we can display the result
  $scope.demoClickedToasts = []

  $scope.handleNotificationClick = function(toasterObj) {
    //Normally here we would issue a PATCH request to Domino to update the notifcation document
    //For the demo we will just output some content

        method: "PATCH",
        url: '/notification.nsf/api/data/documents/unid/'+ toasterObj.unid,