angular-flash-alert - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

bower.json

 {
     "name": "angular-flash-alert",
-    "version": "1.1.1",
+    "version": "2.0.0",
     "homepage": "https://github.com/sachinchoolur/angular-flash",
@@ -8,4 +8,4 @@ "authors": [
     ],
-    "description": "Flash message for angularjs",
-    "main": ["dist/angular-flash.js", "dist/angular-flash.css"],
+    "description": "Flash messages for AngularJS and Bootstrap",
+    "main": ["angular-flash.js", "angular-flash.css"],
     "keywords": [
@@ -20,7 +20,4 @@ "angular-flash",
     "dependencies": {
-        "angular": ">=1.2.0"
+        "angular": ">=1.4.8"
     },
-    "devDependencies": {
-        "qunit": "~1.12.0"
-    },
     "ignore": [
@@ -27,0 +24,0 @@ "README.md",

contributing.md

 # Contributing
 
 ## Important notes
-Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory!
+Please don't edit files in the root directory of repository as they are generated via Grunt. You'll find source code in the `src` subdirectory!
 
 ### Code style
-Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
+Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** There is also a `.editorconfig` to apply styles on your IDE of choice.
 
-### PhantomJS
-While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers.
-
 ## Modifying the code
 First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed.
 
-Test that Grunt's CLI and Bower are installed by running `grunt --version` and `bower --version`.  If the commands aren't found, run `npm install -g grunt-cli bower`.  For more information about installing the tools, see the [getting started with Grunt guide](http://gruntjs.com/getting-started) or [bower.io](http://bower.io/) respectively.
+Test that Grunt's CLI and Bower are installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing the tools, see the [getting started with Grunt guide](http://gruntjs.com/getting-started).
 
 1. Fork and clone the repo.
 1. Run `npm install` to install all build dependencies (including Grunt).
-1. Run `bower install` to install the front-end dependencies.
 1. Run `grunt` to grunt this project.
 
-Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.
+Assuming that you don't see anything on red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.
 
@@ -29,5 +25,4 @@ ## Submitting pull requests
 1. Fix stuff.
-1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
-1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere.
+1. Run tests (see README for instructions) and see the tests pass. Repeat steps 2-4 until all tests pass.
 1. Update the documentation to reflect any changes.
 1. Push to your fork and submit a pull request.

demo/javascripts/main.js

@@ -89,3 +89,3 @@ $.fn.putCursorAtEnd = function () {
         var message = "<strong>List Created!</strong> The list <em>" + $scope.lastAdded.content + "</em> has been created. <a ng-click='undoAdd();' href=''>Undo</a>";
-        Flash.create('danger', message, 'customAlert');
+        Flash.create('danger', message, 0, 'customAlert');
     };
@@ -97,3 +97,3 @@
         var message = "<strong>List Deleted!</strong> The list <em>" + $scope.deletedItem.content + "</em> has been deleted. <a ng-click='undoDelete();' href=''>Undo</a>";
-        Flash.create('danger', message, 'customAlert');
+        Flash.create('danger', message, 0, 'customAlert');
     };
@@ -105,3 +105,3 @@
         var message = "<strong>List Deleted!</strong> The list <em>" + $scope.deletedItem.content + "</em> has been deleted.";
-        Flash.create('danger', message, 'customAlert');
+        Flash.create('danger', message, 0, 'customAlert');
     };
@@ -153,2 +153,2 @@
 
-}]);
+}]);

dist/angular-flash.js

@@ -1,90 +0,111 @@
-/*! angular-flash - v1.0.0 - 2015-03-19
+/*! angular-flash - v2.0.0 - 2016-02-01
 * https://github.com/sachinchoolur/angular-flash
-* Copyright (c) 2015 Sachin; Licensed MIT */
-(function() {
-    'use strict';
-    var app = angular.module('flash', []);
+* Copyright (c) 2016 Sachin; Licensed MIT */
+'use strict';
 
-    app.run(['$rootScope', function($rootScope) {
-        // initialize variables
-        $rootScope.flash = {};
-        $rootScope.flash.text = '';
-        $rootScope.flash.type = '';
-        $rootScope.flash.timeout = 5000;
-        $rootScope.hasFlash = false;
-    }]);
+/*! angular-flash - v2.0.0 - 2016-01-17
+ * https://github.com/sachinchoolur/angular-flash
+ * Copyright (c) 2016 Sachin; Licensed MIT */
 
-    // Directive for compiling dynamic html
-    app.directive('dynamic', ['$compile', function($compile) {
-        return {
-            restrict: 'A',
-            replace: true,
-            link: function(scope, ele, attrs) {
-                scope.$watch(attrs.dynamic, function(html) {
-                    ele.html(html);
-                    $compile(ele.contents())(scope);
-                });
-            }
-        };
-    }]);
+var app = angular.module('flash', []);
 
-    // Directive for closing the flash message
-    app.directive('closeFlash', ['$compile', 'Flash', function($compile, Flash) {
-        return {
-            link: function(scope, ele) {
-                ele.on('click', function() {
-                    Flash.dismiss();
-                });
-            }
-        };
-    }]);
+app.run(['$rootScope', function ($rootScope) {
+    return $rootScope.flashes = [];
+}]);
 
-    // Create flashMessage directive
-    app.directive('flashMessage', ['$compile', '$rootScope', function($compile, $rootScope) {
-        return {
-            restrict: 'A',
-            template: '<div role="alert" ng-show="hasFlash" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible ng-hide alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div>',
-            link: function(scope, ele, attrs) {
-                // get timeout value from directive attribute and set to flash timeout
-                $rootScope.flash.timeout = parseInt(attrs.flashMessage, 10);
-            }
-        };
-    }]);
+app.directive('dynamic', ['$compile', function ($compile) {
+    return {
+        restrict: 'A',
+        replace: true,
+        link: function link(scope, ele, attrs) {
+            return scope.$watch(attrs.dynamic, function (html) {
+                ele.html(html);
+                return $compile(ele.contents())(scope);
+            });
+        }
+    };
+}]);
 
-    app.factory('Flash', ['$rootScope', '$timeout',
-        function($rootScope, $timeout) {
+app.directive('closeFlash', ['$compile', '$rootScope', 'Flash', function ($compile, $rootScope, Flash) {
+    return {
+        link: function link(scope, ele, attrs) {
+            return ele.on('click', function () {
+                var id = parseInt(attrs.closeFlash, 10);
+                Flash.dismiss(id);
+                $rootScope.$apply();
+            });
+        }
+    };
+}]);
 
-            var dataFactory = {},
-                timeOut;
+app.directive('flashMessage', ['Flash', function (Flash) {
+    return {
+        restrict: 'E',
+        scope: {
+            duration: '=duration'
+        },
+        template: '<div ng-show="$root.flashes.length > 0"><div role="alert" ng-repeat="flash in $root.flashes track by $index" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash="{{flash.id}}"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div></div>',
+        link: function link(scope, ele, attrs) {
+            Flash.setDefaultTimeout(scope.duration);
+        }
+    };
+}]);
 
-            // Create flash message
-            dataFactory.create = function(type, text, addClass) {
-                var $this = this;
-                $timeout.cancel(timeOut);
-                $rootScope.flash.type = type;
-                $rootScope.flash.text = text;
-                $rootScope.flash.addClass = addClass;
-                $timeout(function() {
-                    $rootScope.hasFlash = true;
-                }, 100);
-                timeOut = $timeout(function() {
-                    $this.dismiss();
-                }, $rootScope.flash.timeout);
-            };
-
-            // Cancel flashmessage timeout function
-            dataFactory.pause = function() {
-                $timeout.cancel(timeOut);
-            };
-
-            // Dismiss flash message
-            dataFactory.dismiss = function() {
-                $timeout.cancel(timeOut);
-                $timeout(function() {
-                    $rootScope.hasFlash = false;
-                });
-            };
-            return dataFactory;
+app.factory('Flash', ['$rootScope', '$timeout', function ($rootScope, $timeout) {
+    var dataFactory = {};
+    var counter = 0;
+    dataFactory.setDefaultTimeout = function (timeout) {
+        dataFactory.defaultTimeout = timeout;
+    };
+    dataFactory.getDefaultTimeout = function () {
+        return dataFactory.defaultTimeout;
+    };
+    dataFactory.create = function (type, text, timeout, addClass) {
+        var $this = undefined,
+            flash = undefined;
+        $this = this;
+        flash = {
+            type: type,
+            text: text,
+            addClass: addClass,
+            id: counter++
+        };
+        if (dataFactory.defaultTimeout && typeof timeout === 'undefined') {
+            flash.timeout = dataFactory.defaultTimeout;
+        } else if (timeout) {
+            flash.timeout = timeout;
         }
-    ]);
-}());
+        $rootScope.flashes.push(flash);
+        if (flash.timeout) {
+            flash.timeoutObj = $timeout(function (id) {
+                $this.dismiss(id);
+            }, flash.timeout, true, flash.id);
+        }
+    };
+    dataFactory.pause = function (index) {
+        if ($rootScope.flashes[index].timeoutObj) {
+            $timeout.cancel($rootScope.flashes[index].timeoutObj);
+        }
+    };
+    dataFactory.dismiss = function (id) {
+        var index = findIndexById(id);
+        if (index !== -1) {
+            dataFactory.pause(index);
+            $rootScope.flashes.splice(index, 1);
+            $rootScope.$digest();
+        }
+    };
+    dataFactory.clear = function () {
+        while ($rootScope.flashes.length > 0) {
+            dataFactory.dismiss(0);
+        }
+    };
+    dataFactory.reset = dataFactory.clear;
+    function findIndexById(id) {
+        return $rootScope.flashes.findIndex(function (flash) {
+            return flash.id === id;
+        });
+    }
+    return dataFactory;
+}]);
+//# sourceMappingURL=angular-flash.js.map

dist/angular-flash.min.js

@@ -1,4 +0,4 @@
-/*! angular-flash - v1.0.0 - 2015-03-19
+/*! angular-flash - v2.0.0 - 2016-02-01
 * https://github.com/sachinchoolur/angular-flash
-* Copyright (c) 2015 Sachin; Licensed MIT */
-!function(){"use strict";var a=angular.module("flash",[]);a.run(["$rootScope",function(a){a.flash={},a.flash.text="",a.flash.type="",a.flash.timeout=5e3,a.hasFlash=!1}]),a.directive("dynamic",["$compile",function(a){return{restrict:"A",replace:!0,link:function(b,c,d){b.$watch(d.dynamic,function(d){c.html(d),a(c.contents())(b)})}}}]),a.directive("closeFlash",["$compile","Flash",function(a,b){return{link:function(a,c){c.on("click",function(){b.dismiss()})}}}]),a.directive("flashMessage",["$compile","$rootScope",function(a,b){return{restrict:"A",template:'<div role="alert" ng-show="hasFlash" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible ng-hide alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div>',link:function(a,c,d){b.flash.timeout=parseInt(d.flashMessage,10)}}}]),a.factory("Flash",["$rootScope","$timeout",function(a,b){var c,d={};return d.create=function(d,e,f){var g=this;b.cancel(c),a.flash.type=d,a.flash.text=e,a.flash.addClass=f,b(function(){a.hasFlash=!0},100),c=b(function(){g.dismiss()},a.flash.timeout)},d.pause=function(){b.cancel(c)},d.dismiss=function(){b.cancel(c),b(function(){a.hasFlash=!1})},d}])}();
+* Copyright (c) 2016 Sachin; Licensed MIT */
+"use strict";var app=angular.module("flash",[]);app.run(["$rootScope",function(a){return a.flashes=[]}]),app.directive("dynamic",["$compile",function(a){return{restrict:"A",replace:!0,link:function(b,c,d){return b.$watch(d.dynamic,function(d){return c.html(d),a(c.contents())(b)})}}}]),app.directive("closeFlash",["$compile","$rootScope","Flash",function(a,b,c){return{link:function(a,d,e){return d.on("click",function(){var a=parseInt(e.closeFlash,10);c.dismiss(a),b.$apply()})}}}]),app.directive("flashMessage",["Flash",function(a){return{restrict:"E",scope:{duration:"=duration"},template:'<div ng-show="$root.flashes.length > 0"><div role="alert" ng-repeat="flash in $root.flashes track by $index" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash="{{flash.id}}"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div></div>',link:function(b,c,d){a.setDefaultTimeout(b.duration)}}}]),app.factory("Flash",["$rootScope","$timeout",function(a,b){function c(b){return a.flashes.findIndex(function(a){return a.id===b})}var d={},e=0;return d.setDefaultTimeout=function(a){d.defaultTimeout=a},d.getDefaultTimeout=function(){return d.defaultTimeout},d.create=function(c,f,g,h){var i=void 0,j=void 0;i=this,j={type:c,text:f,addClass:h,id:e++},d.defaultTimeout&&"undefined"==typeof g?j.timeout=d.defaultTimeout:g&&(j.timeout=g),a.flashes.push(j),j.timeout&&(j.timeoutObj=b(function(a){i.dismiss(a)},j.timeout,!0,j.id))},d.pause=function(c){a.flashes[c].timeoutObj&&b.cancel(a.flashes[c].timeoutObj)},d.dismiss=function(b){var e=c(b);-1!==e&&(d.pause(e),a.flashes.splice(e,1),a.$digest())},d.clear=function(){for(;a.flashes.length>0;)d.dismiss(0)},d.reset=d.clear,d}]);

Gruntfile.js

@@ -1,3 +0,3 @@
-'use strict';
 module.exports = function (grunt) {
+    'use strict';
     // Load all grunt tasks
@@ -8,2 +8,3 @@ require('load-grunt-tasks')(grunt);
 
+    var distPath = 'dist/';
     // Project configuration.
@@ -13,2 +14,13 @@ grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
+        babel: {
+            options: {
+                sourceMap: true,
+                presets: ['es2015']
+            },
+            dist: {
+                files: {
+                    'dist/angular-flash.js': 'src/angular-flash.js'
+                }
+            }
+        },
         banner: '/*! angular-flash - v<%= pkg.version %> - ' +
@@ -20,5 +32,2 @@ '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
         // Task configuration.
-        clean: {
-            files: ['dist']
-        },
         concat: {
@@ -30,8 +39,8 @@ options: {
             basic: {
-              src: ['src/angular-flash.js'],
-              dest: 'dist/angular-flash.js'
+              src: [distPath + 'angular-flash.js'],
+              dest: distPath + 'angular-flash.js'
             },
             extras: {
               src: ['src/angular-flash.css'],
-              dest: 'dist/angular-flash.css'
+              dest: distPath + 'angular-flash.css'
             }
@@ -44,4 +53,4 @@ },
             dist: {
-                src: 'src/angular-flash.js',
-                dest: 'dist/angular-flash.min.js'
+                src: distPath + 'angular-flash.js',
+                dest: distPath + 'angular-flash.min.js'
             }
@@ -53,5 +62,5 @@ },
                   expand: true,
-                  cwd: 'src',
-                  src: ['*.css', '!*.min.css'],
-                  dest: 'dist',
+                  cwd: '',
+                  src: [distPath + '*.css', '!*.min.css'],
+                  dest: '',
                   ext: '.min.css'
@@ -61,9 +70,2 @@ }]
         },
-        qunit: {
-            all: {
-                options: {
-                    urls: ['http://localhost:9000/test/angular-flash.html']
-                }
-            }
-        },
         jshint: {
@@ -78,14 +80,2 @@ options: {
                 src: 'Gruntfile.js'
-            },
-            src: {
-                options: {
-                    jshintrc: 'src/.jshintrc'
-                },
-                src: ['src/**/*.js']
-            },
-            test: {
-                options: {
-                    jshintrc: 'test/.jshintrc'
-                },
-                src: ['test/**/*.js']
             }
@@ -118,9 +108,6 @@ },
     // Default task.
-    grunt.registerTask('default', ['jshint', 'connect', 'qunit', 'clean', 'concat', 'uglify', 'cssmin']);
-    grunt.registerTask('server', function () {
-        grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
-        grunt.task.run(['serve']);
-    });
+    grunt.registerTask('lint', ['jshint']);
+    grunt.registerTask('default', ['babel', 'lint', 'connect', 'concat', 'uglify', 'cssmin']);
     grunt.registerTask('serve', ['connect', 'watch']);
-    grunt.registerTask('test', ['jshint', 'connect', 'qunit']);
-};
+    grunt.registerTask('test', ['lint', 'connect']);
+};

package.json

 {
-    "name": "angular-flash-alert",
-    "version": "1.1.1",
-    "description": "Flash message for angularjs",
-    "keywords": [
-        "angular-flash",
-        "flash",
-        "message",
-        "alert",
-        "angularjs",
-        "bootstrap"
-    ],
-    "homepage": "https://github.com/sachinchoolur/angular-flash",
-    "bugs": {
-        "url": "https://github.com/sachinchoolur/angular-flash/issues",
-        "email": "[e-mail]"
-    },
-    "author": {
-        "name": "Sachin",
-        "email": "[e-mail]",
-        "url": "https://github.com/sachinchoolur"
-    },
-    "repository": {
-        "type": "git",
-        "url": "[e-mail]:sachinchoolur/angular-flash.git"
-    },
-    "main": "dist/angular-flash.js",
-    "license": "MIT",
-    "scripts": {
-        "test": "grunt"
-    },
-    "devDependencies": {
-        "grunt": "^0.4.5",
-        "grunt-contrib-clean": "^0.6.0",
-        "grunt-contrib-concat": "^0.5.0",
-        "grunt-contrib-connect": "^0.9.0",
-        "grunt-contrib-jshint": "^0.10.0",
-        "grunt-contrib-qunit": "^0.5.1",
-        "grunt-contrib-uglify": "^0.7.0",
-        "grunt-contrib-cssmin": "^0.12.1",
-        "grunt-contrib-watch": "^0.6.1",
-        "jshint-stylish": "^1.0.0",
-        "load-grunt-tasks": "^2.0.0",
-        "time-grunt": "^1.0.0"
+  "name": "angular-flash-alert",
+  "version": "2.0.0",
+  "description": "Flash message for AngularJS and Bootstrap",
+  "keywords": [
+    "angular-flash",
+    "flash",
+    "message",
+    "alert",
+    "angularjs",
+    "bootstrap"
+  ],
+  "homepage": "https://github.com/sachinchoolur/angular-flash",
+  "bugs": {
+    "url": "https://github.com/sachinchoolur/angular-flash/issues",
+    "email": "[e-mail]"
+  },
+  "author": {
+    "name": "Sachin",
+    "email": "[e-mail]",
+    "url": "https://github.com/sachinchoolur"
+  },
+  "contributos": [
+    {
+      "name": "Roope Hakulinen",
+      "email": "[e-mail]",
+      "url": "https://github.com/RoopeHakulinen"
     }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[e-mail]:sachinchoolur/angular-flash.git"
+  },
+  "main": "dist/angular-flash.js",
+  "license": "MIT",
+  "scripts": {
+    "test": "grunt"
+  },
+  "dependencies": {
+    "angular": "^1.4.8"
+  },
+  "devDependencies": {
+    "angular-mocks": "^1.4.8",
+    "babel-preset-es2015": "^6.3.13",
+    "grunt": "^0.4.5",
+    "grunt-babel": "^6.0.0",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-connect": "^0.9.0",
+    "grunt-contrib-cssmin": "^0.12.1",
+    "grunt-contrib-jshint": "^0.10.0",
+    "grunt-contrib-uglify": "^0.7.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "jasmine-core": "^2.4.1",
+    "jshint-stylish": "^1.0.0",
+    "karma": "^0.13.19",
+    "karma-babel-preprocessor": "^6.0.1",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-jasmine": "^0.3.6",
+    "load-grunt-tasks": "^2.0.0",
+    "time-grunt": "^1.0.0"
+  }
 }

README.md

@@ -6,3 +6,3 @@ ![license](https://img.shields.io/npm/l/angular-flash-alert.svg)
 # angular-flash 
-A simple lightweight flash message module for angularjs.
+A simple lightweight flash message module for AngularJS and Bootstrap.
 
@@ -18,16 +18,17 @@
 ---
-#### Bower
 
-You can Install angular-flash using the [Bower](http://bower.io) package manager.
+#### npm
 
+You can also find angular-flash on [npm](http://npmjs.org)
+
 ```sh
-$ bower install angular-flash-alert --save
+$ npm install angular-flash-alert
 ```
 
-#### npm
+#### Bower
 
-You can also find angular-flash on [npm](http://npmjs.org)
+You can Install angular-flash using the [Bower](http://bower.io) package manager.
 
 ```sh
-$ npm install angular-flash-alert
+$ bower install angular-flash-alert --save
 ```
@@ -37,17 +38,16 @@
 ```html
-<link type="text/css" rel="stylesheet" href="css/angular-flash.min.css" />
+<link type="text/css" rel="stylesheet" href="dist/angular-flash.min.css" />
 // If you are using bootstrap v3 no need to include angular-flash.css
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
-<script src="angular-flash.min.js"></script>
+<script src="dist/angular-flash.min.js"></script>
 // Do not include both angular-flash.js and angular-flash.min.js
 ```
-Add `flash` dependency to your module
+Add `ngFlash` dependency to your module
 ```javascript
-var myApp = angular.module("app", ["flash"])
+var myApp = angular.module("app", ["ngFlash"])
 ```
-Include `<div flash-message="5000" ></div>` directive in your html template.
+Include directive below in your HTML template.
 ```html
-<div flash-message="5000" ></div> 
-<!-- 5000 milli-secs is the display duration.
-     Flash alert will be automatically dismissed after 5000 milli-secs.
+<flash-message duration="5000"></flash-message> 
+<!-- 5000ms as the default duration to show flash message.
 -->
@@ -60,11 +60,11 @@ ```
         var message = '<strong>Well done!</strong> You successfully read this important alert message.';
-        Flash.create('success', message, 'custom-class');
-        // First argument (success) is the type of the flash alert
-        // Second argument (message) is the message displays in the flash alert
-        // you can inclide html as message (not just text)
-        // Third argument (custom-class) is the custom class for the perticular flash alert
+        Flash.create('success', message, 0, 'custom-class');
+        // First argument is the type of the flash alert
+        // Second argument is the message displays in the flash alert (HTML ok)
+        // Third argument (optional) is the duration of showing the flash. 0 to not automatically hide flash (user needs to click the cross on top-right corner).
+        // Fourth argument (optional) is the custom class to be added for the flash message created
     }
 }]);
 ```
-####flash alert types####
+####Flash types####
 + success
@@ -76,10 +76,23 @@ + info
 #### Methods ####
+These methods are mostly for internal usage but can be used also from outside.
+
 ``` javascript
-Flash.pause();
-// Pause flash auto dismiss.
-Flash.dismiss()
-// Dismiss the flash
+Flash.pause(4);
+// Pause the fifth flash' auto dismiss.
+Flash.dismiss(1);
+// Dismiss the second flash shown
 ```
-#### [guidelines for contributors](https://github.com/sachinchoolur/angular-flash/blob/master/contributing.md)
+#### [Guidelines for contributors](https://github.com/sachinchoolur/angular-flash/blob/master/contributing.md)
 
-#### MIT © [Sachin](https://twitter.com/sachinchoolur)
+#### Running tests
+```
+npm install
+./node_modules/karma/bin/karma start
+```
+
+#### Contributors
+* [Sachin Choluur](https://github.com/sachinchoolur) (Original author)
+* [Roope Hakulinen](https://github.com/RoopeHakulinen) (Version 2)
+
+#### License
+MIT © [Sachin Choluur](https://twitter.com/sachinchoolur)

src/angular-flash.js

@@ -1,17 +0,15 @@
-(function() {
-    'use strict';
-    angular.module('flash', [])
+/*! angular-flash - v2.0.0 - 2016-01-17
+ * https://github.com/sachinchoolur/angular-flash
+ * Copyright (c) 2016 Sachin; Licensed MIT */
 
-    .run(function($rootScope) {
-        // initialize variables
-        $rootScope.flash = {
-            text: '',
-            type: '',
-            timeout: 5000,
-            hasFlash: false
-        };
-    })
+const app = angular.module('flash', []);
 
-    // Directive for compiling dynamic html
-    .directive('dynamic', function($compile) {
+app.run([
+    '$rootScope', function($rootScope) {
+        return $rootScope.flashes = [];
+    }
+]);
+
+app.directive('dynamic', [
+    '$compile', function($compile) {
         return {
@@ -21,69 +19,98 @@ restrict: 'A',
             link: function(scope, ele, attrs) {
-                scope.$watch(attrs.dynamic, function(html) {
+                return scope.$watch(attrs.dynamic, function(html) {
                     ele.html(html);
-                    $compile(ele.contents())(scope);
+                    return $compile(ele.contents())(scope);
                 });
             }
         };
-    })
+    }
+]);
 
-    // Directive for closing the flash message
-    .directive('closeFlash', function($compile, Flash) {
+app.directive('closeFlash', [
+    '$compile', '$rootScope', 'Flash', function($compile, $rootScope, Flash) {
         return {
-            link: function(scope, ele) {
-                ele.on('click', function() {
-                    Flash.dismiss();
+            link: function(scope, ele, attrs) {
+                return ele.on('click', function() {
+                    let id = parseInt(attrs.closeFlash, 10);
+                    Flash.dismiss(id);
+                    $rootScope.$apply();
                 });
             }
         };
-    })
+    }
+]);
 
-    // Create flashMessage directive
-    .directive('flashMessage', function($compile, $rootScope) {
+app.directive('flashMessage', [
+    'Flash', function(Flash) {
         return {
-            restrict: 'A',
-            template: '<div role="alert" ng-show="hasFlash" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible ng-hide alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div>',
+            restrict: 'E',
+            scope: {
+                duration: '=duration'
+            },
+            template: '<div ng-show="$root.flashes.length > 0"><div role="alert" ng-repeat="flash in $root.flashes track by $index" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash="{{flash.id}}"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div></div>',
             link: function(scope, ele, attrs) {
-                // get timeout value from directive attribute and set to flash timeout
-                $rootScope.flash.timeout = parseInt(attrs.flashMessage, 10);
+                Flash.setDefaultTimeout(scope.duration);
             }
         };
-    })
+    }
+]);
 
-    .factory('Flash', function($rootScope, $timeout) {
-
-        var dataFactory = {};
-        var timeOut;
-
-        // Create flash message
-        dataFactory.create = function(type, text, addClass) {
-            var _this = this;
-            $timeout.cancel(timeOut);
-            $rootScope.flash.type = type;
-            $rootScope.flash.text = text;
-            $rootScope.flash.addClass = addClass;
-            $timeout(function() {
-                $rootScope.hasFlash = true;
-            }, 100);
-
-            timeOut = $timeout(function() {
-                _this.dismiss();
-            }, $rootScope.flash.timeout);
+app.factory('Flash', [
+    '$rootScope', '$timeout', function($rootScope, $timeout) {
+        let dataFactory = {};
+        let counter = 0;
+        dataFactory.setDefaultTimeout = function(timeout) {
+            dataFactory.defaultTimeout = timeout;
         };
-
-        // Cancel flashmessage timeout function
-        dataFactory.pause = function() {
-            $timeout.cancel(timeOut);
+        dataFactory.getDefaultTimeout = function() {
+            return dataFactory.defaultTimeout;
         };
-
-        // Dismiss flash message
-        dataFactory.dismiss = function() {
-            $timeout.cancel(timeOut);
-            $timeout(function() {
-                $rootScope.hasFlash = false;
+        dataFactory.create = function(type, text, timeout, addClass) {
+            let $this, flash;
+            $this = this;
+            flash = {
+                type: type,
+                text: text,
+                addClass: addClass,
+                id: counter++
+            };
+            if (dataFactory.defaultTimeout && typeof timeout === 'undefined') {
+                flash.timeout = dataFactory.defaultTimeout;
+            }
+            else if (timeout) {
+                flash.timeout = timeout;
+            }
+            $rootScope.flashes.push(flash);
+            if (flash.timeout) {
+                flash.timeoutObj = $timeout(function(id) {
+                    $this.dismiss(id);
+                }, flash.timeout, true, flash.id);
+            }
+        };
+        dataFactory.pause = function(index) {
+            if ($rootScope.flashes[index].timeoutObj) {
+                $timeout.cancel($rootScope.flashes[index].timeoutObj);
+            }
+        };
+        dataFactory.dismiss = function(id) {
+            const index = findIndexById(id);
+            if (index !== -1) {
+                dataFactory.pause(index);
+                $rootScope.flashes.splice(index, 1);
+                $rootScope.$digest();
+            }
+        };
+        dataFactory.clear = function() {
+            while ($rootScope.flashes.length > 0) {
+                dataFactory.dismiss(0);
+            }
+        };
+        dataFactory.reset = dataFactory.clear;
+        function findIndexById(id) {
+            return $rootScope.flashes.findIndex((flash) => {
+                return flash.id === id;
             });
-        };
-
+        }
         return dataFactory;
-    });
-}());
+    }
+]);

test/angular-flash_test.js

@@ -1,10 +0,70 @@
-var injector = angular.injector(['ng', 'flash']);
-test('flash test', function(){
-    var scope = injector.get('$rootScope').$new(),
-        $compile = injector.get('$compile'),
-        element;
-    element = angular.element('<div role="alert" ng-show="hasFlash" class="alert {{flash.addClass}} alert-{{flash.type}} alert-dismissible ng-hide alertIn alertOut "> <span dynamic="flash.text"></span> <button type="button" class="close" close-flash><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> </div>');
-    $compile(element)(scope);
-    scope.$digest(); 
-    ok(element.html !== '');  
-});
+describe('Unit testing angular flash', function() {
+    var $compile,
+        $rootScope,
+        $timeout,
+        node,
+        Flash;
+
+    // Load the myApp module, which contains the directive
+    beforeEach(module('flash'));
+
+    // Store references to $rootScope and $compile
+    // so they are available to all tests in this describe block
+    beforeEach(inject(function(_$compile_, _$rootScope_, _$timeout_, _Flash_) {
+        // The injector unwraps the underscores (_) from around the parameter names when matching
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $timeout = _$timeout_;
+        Flash = _Flash_;
+    }));
+
+    beforeEach(function() {
+        node = $compile('<div><flash-message duration=1000></flash-message></div>')($rootScope);
+    });
+
+    it('Replaces the element with the appropriate content', function() {
+        var contents = node.contents();
+        expect(contents[0].nodeType).toEqual(Node.ELEMENT_NODE);
+    });
+
+    it('Has the class specified', function() {
+        var testClassName = 'test-class';
+        Flash.create('success', 'Good job', 10000, testClassName);
+        $rootScope.$digest();
+        var contents = node.contents()[0];
+        expect(contents.querySelectorAll('.alert')[0].classList).toContain(testClassName);
+    });
+
+    it('Shows the flash when created and removes when deleted', function() {
+        Flash.create('success', 'All good');
+        $rootScope.$digest();
+        var contents = node.contents()[0];
+        expect(contents.querySelectorAll('.alert').length).toEqual(1);
+        Flash.dismiss(0);
+        $rootScope.$digest();
+        expect(contents.querySelectorAll('.alert').length).toEqual(0);
+    });
+
+    it('Clears all when clear is called', function() {
+        for (var i = 0; i < 10; ++i) {
+            Flash.create('success', 'All good');
+        }
+        $rootScope.$digest();
+        var contents = node.contents()[0];
+        expect(contents.querySelectorAll('.alert').length).toEqual(10);
+        Flash.clear();
+        $rootScope.$digest();
+        expect(contents.querySelectorAll('.alert').length).toEqual(0);
+    });
+
+    it('Is dismissed after timeout', function() {
+        Flash.create('success', 'All good', 10000);
+        $rootScope.$digest();
+        var contents = node.contents()[0];
+        expect(contents.querySelectorAll('.alert').length).toEqual(1);
+
+        $timeout.flush();
+        $rootScope.$digest();
+        expect(contents.querySelectorAll('.alert').length).toEqual(0);
+    });
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

139857

increased by12.99%

Lines of code

1426

increased by13.63%

Number of lines in readme file

94

increased by16.05%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

19

increased by58.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedangular@^1.4.8

• + Addedangular@1.8.3(transitive)