angular-modal-service - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

dst/angular-modal-service.js

@@ -57,2 +57,5 @@ /******/ (function(modules) { // webpackBootstrap
 	
+	    //  Track open modals.
+	    self.openModals = [];
+	
 	    //  Returns a promise which gets the template, either
@@ -88,2 +91,10 @@ //  from the template parameter or via a request to the
 	
+	    //  Close all modals, providing the given result to the close promise.
+	    self.closeModals = function (result, delay) {
+	      while (self.openModals.length) {
+	        self.openModals[0].close(result, delay);
+	        self.openModals.splice(0, 1);
+	      }
+	    };
+	
 	    self.showModal = function (options) {
@@ -107,2 +118,5 @@
 	
+	        //  The main modal object we will build.
+	        var modal = {};
+	
 	        //  Create a new scope for the modal.
@@ -123,2 +137,5 @@ var modalScope = (options.scope || $rootScope).$new();
 	          close: function close(result, delay) {
+	            //  If we have a pre-close function, call it.
+	            if (typeof options.preClose === 'function') options.preClose(modal, result, delay);
+	
 	            if (delay === undefined || delay === null) delay = 0;
@@ -163,10 +180,8 @@ $timeout(function () {
 	
-	        //  We now have a modal object...
-	        var modal = {
-	          controller: modalController,
-	          scope: modalScope,
-	          element: modalElement,
-	          close: closeDeferred.promise,
-	          closed: closedDeferred.promise
-	        };
+	        //  Populate the modal object...
+	        modal.controller = modalController;
+	        modal.scope = modalScope;
+	        modal.element = modalElement;
+	        modal.close = closeDeferred.promise;
+	        modal.closed = closedDeferred.promise;
 	
@@ -176,2 +191,5 @@ //  ...which is passed to the caller via the promise.
 	
+	        //  We can track this modal in our open modals.
+	        self.openModals.push({ modal: modal, close: inputs.close });
+	
 	        function cleanUpClose(result) {
@@ -195,2 +213,10 @@
 	
+	            //  Remove the modal from the set of open modals.
+	            for (var i = 0; i < self.openModals.length; i++) {
+	              if (self.openModals[i].modal === modal) {
+	                self.openModals.splice(i, 1);
+	                break;
+	              }
+	            }
+	
 	            //  Unless we null out all of these objects we seem to suffer
@@ -197,0 +223,0 @@ //  from memory leaks, if anyone can explain why then I'd

dst/angular-modal-service.min.js

@@ -1,2 +0,2 @@
-!function(e){function n(t){if(o[t])return o[t].exports;var l=o[t]={exports:{},id:t,loaded:!1};return e[t].call(l.exports,l,l.exports,n),l.loaded=!0,l.exports}var o={};n.m=e,n.c=o,n.p="",n(0)}([function(e,n){"use strict";angular.module("angularModalService",[]).factory("ModalService",["$animate","$document","$compile","$controller","$http","$rootScope","$q","$templateRequest","$timeout",function(e,n,o,t,l,r,s,c,a){function u(){var l=this,u=function(e,n){var o=s.defer();return e?o.resolve(e):n?c(n,!0).then(function(e){o.resolve(e)},function(e){o.reject(e)}):o.reject("No template or templateUrl has been specified."),o.promise},i=function(n,o){var t=n.children();return t.length>0?e.enter(o,n,t[t.length-1]):e.enter(o,n)};l.showModal=function(l){var c=angular.element(n[0].body),d=s.defer();return l.controller?(u(l.template,l.templateUrl).then(function(n){function u(n){m.resolve(n),l.bodyClass&&c[0].classList.remove(l.bodyClass),e.leave(g).then(function(){v.resolve(n),p.$destroy(),$.close=null,d=null,m=null,y=null,$=null,g=null,p=null}),f&&f()}var p=(l.scope||r).$new(),f=r.$on("$locationChangeSuccess",u),m=s.defer(),v=s.defer(),$={$scope:p,close:function(e,n){void 0!==n&&null!==n||(n=0),a(function(){u(e)},n)}};l.inputs&&angular.extend($,l.inputs);var h=o(n),g=h(p);$.$element=g;var b=p[l.controllerAs],x=t(l.controller,$,!1,l.controllerAs);l.controllerAs&&b&&angular.extend(x,b),l.appendElement?i(l.appendElement,g):i(c,g),l.bodyClass&&c[0].classList.add(l.bodyClass);var y={controller:x,scope:p,element:g,close:m.promise,closed:v.promise};d.resolve(y)}).then(null,function(e){d.reject(e)}),d.promise):(d.reject("No controller has been specified."),d.promise)}}return new u}])}]);
+!function(e){function o(l){if(n[l])return n[l].exports;var t=n[l]={exports:{},id:l,loaded:!1};return e[l].call(t.exports,t,t.exports,o),t.loaded=!0,t.exports}var n={};o.m=e,o.c=n,o.p="",o(0)}([function(e,o){"use strict";angular.module("angularModalService",[]).factory("ModalService",["$animate","$document","$compile","$controller","$http","$rootScope","$q","$templateRequest","$timeout",function(e,o,n,l,t,r,s,a,c){function u(){var t=this;t.openModals=[];var u=function(e,o){var n=s.defer();return e?n.resolve(e):o?a(o,!0).then(function(e){n.resolve(e)},function(e){n.reject(e)}):n.reject("No template or templateUrl has been specified."),n.promise},i=function(o,n){var l=o.children();return l.length>0?e.enter(n,o,l[l.length-1]):e.enter(n,o)};t.closeModals=function(e,o){for(;t.openModals.length;)t.openModals[0].close(e,o),t.openModals.splice(0,1)},t.showModal=function(a){var p=angular.element(o[0].body),d=s.defer();return a.controller?(u(a.template,a.templateUrl).then(function(o){function u(o){h.resolve(o),a.bodyClass&&p[0].classList.remove(a.bodyClass),e.leave(b).then(function(){$.resolve(o),m.$destroy();for(var e=0;e<t.openModals.length;e++)if(t.openModals[e].modal===f){t.openModals.splice(e,1);break}M.close=null,d=null,h=null,f=null,M=null,b=null,m=null}),v&&v()}var f={},m=(a.scope||r).$new(),v=r.$on("$locationChangeSuccess",u),h=s.defer(),$=s.defer(),M={$scope:m,close:function(e,o){"function"==typeof a.preClose&&a.preClose(f,e,o),void 0!==o&&null!==o||(o=0),c(function(){u(e)},o)}};a.inputs&&angular.extend(M,a.inputs);var g=n(o),b=g(m);M.$element=b;var y=m[a.controllerAs],x=l(a.controller,M,!1,a.controllerAs);a.controllerAs&&y&&angular.extend(x,y),a.appendElement?i(a.appendElement,b):i(p,b),a.bodyClass&&p[0].classList.add(a.bodyClass),f.controller=x,f.scope=m,f.element=b,f.close=h.promise,f.closed=$.promise,d.resolve(f),t.openModals.push({modal:f,close:M.close})}).then(null,function(e){d.reject(e)}),d.promise):(d.reject("No controller has been specified."),d.promise)}}return new u}])}]);
 //# sourceMappingURL=./dst/angular-modal-service.min.js.map

package.json

 {
   "name": "angular-modal-service",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "AngularJS Service for showing Modals and Popups",
@@ -5,0 +5,0 @@ "main": "./dst/angular-modal-service.js",

README.md

@@ -144,2 +144,3 @@ angular-modal-service
 * `bodyClass`: Optional. The custom css class to append to the body while the modal is open (optional, useful when not using Bootstrap).
+* `preClose`: Optional. A funtion which will be called before the process of closing a modal starts. The signature is `function preClose(modal, result, delay)`. It is provided the `modal` object, the `result` which was passed to `close` and the `delay` which was passed to close.
 
@@ -164,2 +165,12 @@ #### The Modal Object
 
+### Closing All Modals
+
+Sometimes you may way to forcibly close all open modals, for example if you are going to transition routes. You can use the `ModalService.closeModals` function for this:
+
+```js
+ModalService.closeModals(optionalResult, optionalDelay);
+```
+
+The `optionalResult` parameter is pased into all `close` promises, the `optionalDelay` parameter has the same effect as the controller `close` function delay parameter.
+
 ### Animation
@@ -275,6 +286,17 @@
 
-**I don't want to use the 'data-dismiss' attribute on a button, how can I close a modal manually?**
+**The backdrop does not fade away after I call `close`** or **I don't want to use the 'data-dismiss' attribute on a button, how can I close a modal manually?**
 
-You can check the 'Complex' sample ([complexcontroller.js](samples/complex/complexcontroller.js)). The 'Cancel' button closes without using the `data-dismiss` attribute.
-All you need to do is grab the modal element in your controller, then call the bootstrap `modal` function
+You can check the 'Complex' sample ([complexcontroller.js](samples/complex/complexcontroller.js)). The 'Cancel' button closes without using the `data-dismiss` attribute. In this case, just use the `preClose` option to ensure the bootstrap modal is removed:
+
+```js
+ModalService.showModal({
+  templateUrl: "some/bootstrap-template.html",
+  controller: "SomeController",
+  preClose: (modal) => { modal.element.modal('hide'); }
+}).then(function(modal) {
+  // etc
+});
+```
+
+Another option is to grab the modal element in your controller, then call the bootstrap `modal` function
 to manually close the modal. Then call the `close` function as normal:
@@ -281,0 +303,0 @@

samples/sampleapp.js

@@ -14,7 +14,8 @@ //  Build our app module, with a dependency on the angular modal service.
       templateUrl: "yesno/yesno.html",
-      controller: "YesNoController"
+      controller: "YesNoController",
+      preClose: (modal) => { modal.element.modal('hide'); }
     }).then(function(modal) {
       modal.element.modal();
       modal.close.then(function(result) {
-        $scope.yesNoResult = result ? "You said Yes" : "You said No";
+        $scope.yesNoResult = result ? "You said Yes" : "You didn't say Yes";
       });
@@ -30,2 +31,3 @@ });
       controller: "ComplexController",
+      preClose: (modal) => { modal.element.modal('hide'); },
       inputs: {
@@ -37,3 +39,7 @@ title: "A More Complex Example"
       modal.close.then(function(result) {
-        $scope.complexResult  = "Name: " + result.name + ", age: " + result.age;
+        if (!result) {
+          $scope.complexResult = "Modal forcibly closed..."
+        } else {
+          $scope.complexResult  = "Name: " + result.name + ", age: " + result.age;
+        }
       });
@@ -58,2 +64,8 @@ });
 
+  $scope.keyPress = function(value) {
+    if (value.keyCode == 42) {
+      ModalService.closeModals(null, 500);
+    }
+  };
+
 }]);

src/angular-modal-service.js

 'use strict';
 
-let module = angular.module('angularModalService', []);
+var module = angular.module('angularModalService', []);
 
@@ -11,2 +11,5 @@ module.factory('ModalService', ['$animate', '$document', '$compile', '$controller', '$http', '$rootScope', '$q', '$templateRequest', '$timeout',
     var self = this;
+    
+    //  Track open modals.
+    self.openModals = [];
 
@@ -44,2 +47,10 @@ //  Returns a promise which gets the template, either
 
+    //  Close all modals, providing the given result to the close promise.
+    self.closeModals = function(result, delay) {
+      while (self.openModals.length) {
+        self.openModals[0].close(result, delay);
+        self.openModals.splice(0, 1);
+      }
+    };
+
     self.showModal = function(options) {
@@ -64,2 +75,5 @@
 
+          //  The main modal object we will build.
+          var modal = {};
+
           //  Create a new scope for the modal.
@@ -80,2 +94,5 @@ var modalScope = (options.scope || $rootScope).$new();
             close: function(result, delay) {
+              //  If we have a pre-close function, call it.
+              if (typeof options.preClose === 'function') options.preClose(modal, result, delay);
+
               if (delay === undefined || delay === null) delay = 0;
@@ -121,10 +138,8 @@ $timeout(function() {
 
-          //  We now have a modal object...
-          var modal = {
-            controller: modalController,
-            scope: modalScope,
-            element: modalElement,
-            close: closeDeferred.promise,
-            closed: closedDeferred.promise
-          };
+          //  Populate the modal object...
+          modal.controller = modalController;
+          modal.scope = modalScope;
+          modal.element = modalElement;
+          modal.close = closeDeferred.promise;
+          modal.closed = closedDeferred.promise;
 
@@ -134,2 +149,5 @@ //  ...which is passed to the caller via the promise.
 
+          //  We can track this modal in our open modals.
+          self.openModals.push({ modal: modal, close: inputs.close });
+
           function cleanUpClose(result) {
@@ -154,2 +172,10 @@
 
+                      //  Remove the modal from the set of open modals.
+                      for (var i=0; i<self.openModals.length; i++) {
+                        if (self.openModals[i].modal === modal) {
+                          self.openModals.splice(i, 1);
+                          break;
+                        }
+                      }
+
                       //  Unless we null out all of these objects we seem to suffer
@@ -156,0 +182,0 @@ //  from memory leaks, if anyone can explain why then I'd

No alert changes

Improved metrics

Total package byte prevSize

1469225

increased by0.52%

Number of package files

44

increased by2.33%

Lines of code

18971

increased by0.51%

Number of lines in readme file

342

increased by6.88%

No dependency changes