<!DOCTYPE html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/pnotify/dist/pnotify.css"> <link rel="stylesheet" href="node_modules/pnotify/dist/pnotify.buttons.css"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/pnotify/dist/pnotify.js"></script> <script src="node_modules/pnotify/dist/pnotify.confirm.js"></script> <script src="node_modules/pnotify/dist/pnotify.buttons.js"></script> <script src="src/angular-pnotify.js"></script> </head> <body ng-app="pnotify-demo"> <div ng-controller="MyCtrl"> <div class="container-fluid"> <div class="page-header"> <h1>angular-pnotify demo</h1> </div> <p>View source for more details.</p> <hr> <p><button ng-click="success()" class="btn btn-success">Success</button></p> <p><pre>notificationService.success('Successing text')</pre></p> <hr> <p><button ng-click="info()" class="btn btn-info">Info</button></p> <p><pre>notificationService.info('Infomative text')</pre></p> <hr> <p><button ng-click="notice()" class="btn btn-warning">Notice</button></p> <p><pre>notificationService.notice('Notice text')</pre></p> <hr> <p><button ng-click="error()" class="btn btn-danger">Error</button></p> <p><pre>notificationService.error('Error text')</pre></p> <hr> <p>Use the generic PNotify object.</p> <p><button ng-click="generic()" class="btn btn-primary">Generic PNotify</button></p> <p> <pre> notificationService.notify({ title: 'The notice title.', title_escape: false, text: 'The notice text.', text_escape: false, styling: "bootstrap3", type: "notice", icon: true }); </pre> </p> <hr> <p><button ng-click="confirmDialog()" class="btn btn-primary">Confirm dialog</button></p> <p> <pre> notificationService.notify({ title: 'Confirmation Needed', text: 'Are you sure?', hide: false, confirm: { confirm: true }, buttons: { closer: false, sticker: false }, history: { history: false } }).get().on('pnotify.confirm', function() { alert('Ok, cool.'); }).on('pnotify.cancel', function() { alert('Oh ok. Chicken, I see.'); }); </pre> </p> <hr> <p><button ng-click="overrideDefaults()" class="btn btn-primary">Override defaults</button></p> <p> <pre> notificationService.notifyWithDefaults({ text: 'Keeps defaults but override delay', delay: 1000, }); </pre> </p> <hr> <p><button ng-click="stackTopLeft()" class="btn btn-primary">Stack top left</button></p> <p> In config: <pre> // Configure a stack named 'top_left' that append a call 'stack-topleft' notificationServiceProvider.setStack('top_left', 'stack-topleft', { dir1: 'down', dir2: 'right', push: 'top' }); </pre> In controller: <pre> notificationService.info('Hello World : Top left', 'top_left'); </pre> </p> <hr> <p><button ng-click="stackBottomRight()" class="btn btn-primary">Stack bottom right</button></p> <p> In config: <pre> // Configure a stack named 'bottom_right' that append a call 'stack-bottomright' notificationServiceProvider.setStack('bottom_right', 'stack-bottomright', { dir1: 'up', dir2: 'left', firstpos1: 25, firstpos2: 25 }); </pre> In controller: <pre> notificationService.info('Hello World : Bottom right', 'bottom_right'); </pre> </p> <hr> <p><button ng-click="removeNotifications()" class="btn btn-primary">Remove all notifications</button></p> <p> In controller: <pre> notificationService.removeNotifications(); </pre> </p> </div> </div> <script> angular.module('pnotify-demo', ['jlareau.pnotify']) .config(['notificationServiceProvider', function(notificationServiceProvider) { notificationServiceProvider .setDefaults({ styling: 'bootstrap3', delay: 4000, buttons: { closer: false, closer_hover: false, sticker: false, sticker_hover: false }, type: 'error' }) // Configure a stack named 'bottom_right' that append a call 'stack-bottomright' .setStack('bottom_right', 'stack-bottomright', { dir1: 'up', dir2: 'left', firstpos1: 25, firstpos2: 25 }) // Configure a stack named 'top_left' that append a call 'stack-topleft' .setStack('top_left', 'stack-topleft', { dir1: 'down', dir2: 'right', push: 'top' }) ; }]) .controller('MyCtrl', ['$scope','notificationService', function ($scope, notificationService) { $scope.success = function() { notificationService.success('Successing text'); }; $scope.info = function() { notificationService.info('Info text'); }; $scope.notice = function() { notificationService.notice('Notice text'); }; $scope.error = function() { notificationService.error('Error text'); }; $scope.generic = function() { // This is a sample using the generic PNotify object notificationService.notify({ title: 'The notice title.', title_escape: false, text: 'The notice text.', text_escape: false, styling: 'bootstrap3', type: 'notice', icon: true }); }; $scope.confirmDialog = function() { notificationService.notify( { title: 'Confirmation Needed', text: 'Are you sure?', hide: false, confirm: { confirm: true }, buttons: { closer: false, sticker: false }, history: { history: false } }).get().on('pnotify.confirm', function() { alert('Ok, cool.'); }).on('pnotify.cancel', function() { alert('Oh ok. Chicken, I see.'); }); }; $scope.overrideDefaults = function() { notificationService.notifyWithDefaults({ text: 'Keeps defaults but override delay', delay: 1000 }); }; $scope.stackTopLeft = function(){ notificationService.info('Hello World : Top left', 'top_left'); }; $scope.stackBottomRight = function(){ notificationService.info('Hello World : Bottom right', 'bottom_right'); }; $scope.removeNotifications = function(){ notificationService.removeNotifications(); } }]); </script> </body> </html>