@momsfriendlydevco/angular-ui-loader - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

demo/app.js

@@ -7,2 +7,7 @@ var app = angular.module("app", [
 	$scope.$loader = $loader;
+
+	$scope.$on('$loaderStart', (e, id) => console.log('$loaderStart', id));
+	$scope.$on('$loaderStop', (e, id) => console.log('$loaderStop', id));
+	$scope.$on('$loaderStopAll', e => console.log('$loaderStopAll'));
+	$scope.$on('$loaderUpdateState', (e, state) => console.log('$loaderUpdateState', state));
 });

dist/loader.js

@@ -1,1 +0,1 @@
-"use strict";var Loader={loading:!1,loadingForeground:!1,loadingBackground:!1,waitingForeground:{},waitingBackground:{},isActive:function(){return Boolean(Object.keys(Loader.waitingForeground).length||Object.keys(Loader.waitingBackground).length)},isForeground:function(){return Object.keys(Loader.waitingForeground).length>0},isBackground:function(){return Object.keys(Loader.waitingBackground).length>0},start:function(o,e){o||(o="default"),void 0===e&&(e=!0);var r=!1;e?(r=Loader.isBackground(),Loader.waitingForeground[o]=!0):Loader.waitingBackground[o]=!0;var d=Loader.isForeground();return document.body.classList.add("loading",d?"loading-foreground":"loading-background"),r&&Loader.timers.backgroundCloseout.setup(),document.body.classList.remove(d?"loading-background":"loading-foreground"),Loader.updateStates(),Loader},startBackground:function(o){return Loader.start(o,!1)},updateStates:function(){Loader.loading=Loader.isActive(),Loader.loadingForeground=Loader.isForeground(),Loader.loadingBackground=Loader.isBackground()},timers:{foregroundCloseout:{handle:null,interval:1e3,callback:function(){document.body.classList.remove("loading-foreground-closing")},setup:function(){document.body.classList.add("loading-foreground-closing"),Loader.timers.foregroundCloseout.handle=setTimeout(Loader.timers.foregroundCloseout.callback,Loader.timers.foregroundCloseout.interval)},teardown:function(){cancelTimeout(Loader.timers.foregroundCloseout.handle)}},backgroundCloseout:{handle:null,interval:1e3,callback:function(){document.body.classList.remove("loading-background-closing")},setup:function(){document.body.classList.add("loading-background-closing"),Loader.timers.backgroundCloseout.handle=setTimeout(Loader.timers.backgroundCloseout.callback,Loader.timers.backgroundCloseout.interval)},teardown:function(){cancelTimeout(Loader.timers.backgroundCloseout.handle)}}},stop:function(o){o||(o="default");var e=Loader.waitingForeground[o];if(e)delete Loader.waitingForeground[o];else{if(!Loader.waitingBackground[o])return;delete Loader.waitingBackground[o]}return Loader.isActive()?Loader.isForeground()||(document.body.classList.add("loading-background"),document.body.classList.remove("loading-foreground"),Loader.timers.foregroundCloseout.setup()):(document.body.classList.remove("loading","loading-foreground","loading-background"),e?Loader.timers.foregroundCloseout.setup():Loader.timers.backgroundCloseout.setup()),Loader.updateStates(),Loader},clear:function(){return Loader.waitingForeground={},Loader.waitingBackground={},Loader.stop(),Loader},templateHTML:'<div class="loader-bar"></div><div class="loader-spinner"></div>',init:function(){var o=document.createElement("div");o.innerHTML=Loader.templateHTML,document.body.appendChild(o)}};document.addEventListener("DOMContentLoaded",Loader.init);
+"use strict";var Loader={loading:!1,loadingForeground:!1,loadingBackground:!1,waitingForeground:{},waitingBackground:{},on:{start:function(o){},stateUpdate:function(o){},stop:function(o){},stopAll:function(){}},isActive:function(){return Boolean(Object.keys(Loader.waitingForeground).length||Object.keys(Loader.waitingBackground).length)},isForeground:function(){return Object.keys(Loader.waitingForeground).length>0},isBackground:function(){return Object.keys(Loader.waitingBackground).length>0},start:function(o,e){o||(o="default"),void 0===e&&(e=!0);var n=!1;e?(n=Loader.isBackground(),Loader.waitingForeground[o]=!0):Loader.waitingBackground[o]=!0,Loader.on.start(o);var r=Loader.isForeground();return document.body.classList.add("loading",r?"loading-foreground":"loading-background"),n&&Loader.timers.backgroundCloseout.setup(),document.body.classList.remove(r?"loading-background":"loading-foreground"),Loader.updateStates(),Loader},startBackground:function(o){return Loader.start(o,!1)},updateStates:function(){var o=Loader.isActive(),e=Loader.isForeground(),n=Loader.isBackground();Loader.loading=o,Loader.loadingForeground=e,Loader.loadingBackground=n,Loader.on.stateUpdate({loading:o,foreground:e,background:n})},timers:{foregroundCloseout:{handle:null,interval:1e3,callback:function(){document.body.classList.remove("loading-foreground-closing")},setup:function(){document.body.classList.add("loading-foreground-closing"),Loader.timers.foregroundCloseout.handle=setTimeout(Loader.timers.foregroundCloseout.callback,Loader.timers.foregroundCloseout.interval)},teardown:function(){cancelTimeout(Loader.timers.foregroundCloseout.handle)}},backgroundCloseout:{handle:null,interval:1e3,callback:function(){document.body.classList.remove("loading-background-closing")},setup:function(){document.body.classList.add("loading-background-closing"),Loader.timers.backgroundCloseout.handle=setTimeout(Loader.timers.backgroundCloseout.callback,Loader.timers.backgroundCloseout.interval)},teardown:function(){cancelTimeout(Loader.timers.backgroundCloseout.handle)}}},stop:function(o){o||(o="default");var e=Loader.waitingForeground[o];if(e)delete Loader.waitingForeground[o];else{if(!Loader.waitingBackground[o])return;delete Loader.waitingBackground[o]}return Loader.on.stop(o),Loader.isActive()?Loader.isForeground()||(document.body.classList.add("loading-background"),document.body.classList.remove("loading-foreground"),Loader.timers.foregroundCloseout.setup()):(document.body.classList.remove("loading","loading-foreground","loading-background"),e?Loader.timers.foregroundCloseout.setup():Loader.timers.backgroundCloseout.setup(),Loader.on.stopAll()),Loader.updateStates(),Loader},clear:function(){return Loader.waitingForeground={},Loader.waitingBackground={},Loader.stop(),Loader},templateHTML:'<div class="loader-bar"></div><div class="loader-spinner"></div>',init:function(){var o=document.createElement("div");o.innerHTML=Loader.templateHTML,document.body.appendChild(o)}};document.addEventListener("DOMContentLoaded",Loader.init);

dist/ng-loader.js

@@ -1,1 +0,1 @@
-"use strict";angular.module("angular-ui-loader",[]).service("$loader",function(){return Loader});
+"use strict";angular.module("angular-ui-loader",[]).service("$loader",["$rootScope","$timeout",function(t,r){return Loader.on.start=function(o){return r(function(){return t.$broadcast("$loaderStart",o)})},Loader.on.stateUpdate=function(o){return r(function(){return t.$broadcast("$loaderStateUpdate",o)})},Loader.on.stop=function(o){return r(function(){return t.$broadcast("$loaderStop",o)})},Loader.on.stopAll=function(){return r(function(){return t.$broadcast("$loaderStopAll")})},Loader}]);

gulpfile.js

@@ -1,2 +0,1 @@
-var annotate = require('gulp-ng-annotate');
 var babel = require('gulp-babel');
@@ -44,3 +43,6 @@ var cleanCSS = require('gulp-clean-css');
 		.pipe(rename('loader.js'))
-		.pipe(babel({presets: ['es2015']}))
+		.pipe(babel({
+			presets: ['es2015'],
+			plugins: ['angularjs-annotate'],
+		}))
 		.pipe(uglify())
@@ -53,4 +55,6 @@ .pipe(gulp.dest('./dist'))
 		.pipe(rename('ng-loader.js'))
-		.pipe(babel({presets: ['es2015']}))
-		.pipe(annotate())
+		.pipe(babel({
+			presets: ['es2015'],
+			plugins: ['angularjs-annotate'],
+		}))
 		.pipe(uglify())
@@ -57,0 +61,0 @@ .pipe(gulp.dest('./dist'))

package.json

 {
   "name": "@momsfriendlydevco/angular-ui-loader",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Generic page loading control in plain JS + Angular",
@@ -17,12 +17,12 @@ "main": "dist/loader.js",
     "babel": "^6.23.0",
+    "babel-plugin-angularjs-annotate": "^0.8.2",
     "babel-preset-es2015": "^6.24.1",
     "bootstrap": "^3.3.7",
-    "express": "^4.15.3",
+    "express": "^4.16.2",
     "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
-    "gulp-clean-css": "^3.4.1",
+    "gulp-clean-css": "^3.9.0",
     "gulp-gh-pages": "^0.5.4",
     "gulp-minify-css": "^1.2.4",
-    "gulp-ng-annotate": "^2.0.0",
     "gulp-nodemon": "^2.2.1",
@@ -34,3 +34,3 @@ "gulp-rename": "^1.2.2",
     "jquery": "^3.2.1",
-    "rimraf": "^2.6.1"
+    "rimraf": "^2.6.2"
   },
@@ -37,0 +37,0 @@ "repository": {

README.md

@@ -44,7 +44,9 @@ angular-ui-loader
 
+* Install the library with `npm i --save @momsfriendlydevco/angular-ui-loader`
+
 * Include the `dist/loader.css` and `dist/loader.js` files as high as possible within your `<head/>` element:
 
 ```html
-<link rel="stylesheet" href="node_modules/angular-ui-loader/dist/loader.css"/>
-<script src="node_modules/angular-ui-loader/dist/loader.js"></script>
+<link rel="stylesheet" href="node_modules/@momsfriendlydevco/angular-ui-loader/dist/loader.css"/>
+<script src="node_modules/@momsfriendlydevco/angular-ui-loader/dist/loader.js"></script>
 ```
@@ -61,3 +63,3 @@
 ```html
-<script src="node_modules/angular-ui-loader/dist/ng-loader.js"></script>
+<script src="node_modules/@momsfriendlydevco/angular-ui-loader/dist/ng-loader.js"></script>
 ```
@@ -174,1 +176,14 @@
 * The module applies the `.loading-(foreground|background)-closing` style temporarily (default is 1s) to allow closing CSS transitions. The main `loading-(foreground|background)` style does *not* remain attached, if you wish for the element to remain visible you will have to add an override for visibility for the `loading-*-closing` styles. See the [stylesheet](src/loader.css) for examples.
+
+
+Angular Events
+==============
+When using Angular the following events are also emitted via the `$rootScope.$broadcast()` function:
+
+
+| Event                | Parameters | Description                                    |
+|----------------------|------------|------------------------------------------------|
+| `$loaderStart`       | `(id)`     | Emitted when a specific start request is fired |
+| `$loaderStop`        | `(id)`     | Emitted when a specific stop request is fired  |
+| `$loaderStopAll`     | `()`       | Emitted when all loaders have stopped          |
+| `$loaderUpdateState` | `(states)` | Emitted when we update the loading state. `states` is an object with three boolean properties: `loading`, `foreground`, `background` |

src/loader.js

@@ -63,2 +63,15 @@ /**
 	/**
+	* Custom bindings to execute when certain events occur
+	* This is a really low-rent implementation of an event omtiter
+	* Replace these noop functions with your own if you wish to bind to custom events
+	* @var {Object}
+	*/
+	on: {
+		start: id => {},
+		stateUpdate: state => {},
+		stop: id => {},
+		stopAll: ()=> {},
+	},
+
+	/**
 	* Returns if the loader is active
@@ -110,2 +123,4 @@ * @return {boolean} Whether the loader is active
 
+		Loader.on.start(id);
+
 		var isForeground = Loader.isForeground();
@@ -135,5 +150,9 @@ document.body.classList.add('loading', isForeground ? 'loading-foreground' : 'loading-background');
 	updateStates: function() {
-		Loader.loading = Loader.isActive();
-		Loader.loadingForeground = Loader.isForeground();
-		Loader.loadingBackground = Loader.isBackground();
+		var isLoading = Loader.isActive();
+		var isForeground = Loader.isForeground();
+		var isBackground = Loader.isBackground();
+		Loader.loading = isLoading;
+		Loader.loadingForeground = isForeground;
+		Loader.loadingBackground = isBackground;
+		Loader.on.stateUpdate({loading: isLoading, foreground: isForeground, background: isBackground});
 	},
@@ -194,2 +213,4 @@
 
+		Loader.on.stop(id);
+
 		if (!Loader.isActive()) { // Nothing waiting
@@ -202,2 +223,3 @@ document.body.classList.remove('loading', 'loading-foreground', 'loading-background');
 			}
+			Loader.on.stopAll();
 		} else if (!Loader.isForeground()) { // Transition from foreground -> background
@@ -204,0 +226,0 @@ document.body.classList.add('loading-background');

src/ng-loader.js

@@ -10,4 +10,10 @@ /**
 angular.module('angular-ui-loader', [])
-.service('$loader', function() {
+.service('$loader', function($rootScope, $timeout) {
+	// Remap internal events to $rootScope.$broadcast
+	Loader.on.start = id => $timeout(()=> $rootScope.$broadcast('$loaderStart', id));
+	Loader.on.stateUpdate = state => $timeout(()=> $rootScope.$broadcast('$loaderStateUpdate', state));
+	Loader.on.stop = id => $timeout(()=> $rootScope.$broadcast('$loaderStop', id));
+	Loader.on.stopAll = ()=> $timeout(()=> $rootScope.$broadcast('$loaderStopAll'));
+
 	return Loader;
 });

No alert changes

Improved metrics

Total package byte prevSize

38167

increased by8.06%

Lines of code

508

increased by6.72%

Number of lines in readme file

187

increased by8.72%

Worsened metrics

Number of package files

14

decreased by-6.67%

No dependency changes