add destroy-on-close support for modals

#16
base-apps · Aug 11, 2016 · cb3c5f2 · cb3c5f2
1 parent ee6c203
commit cb3c5f2
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 15 deletions.
diff --git a/docs/partials/examples-modal.html b/docs/partials/examples-modal.html
@@ -43,3 +43,10 @@ <h4>Yo, do you <em>really</em> want to do this?</h4>
 <div zf-modal zf-swipe-close="up" animation-out="slideOutUp" id="example-touch-modal" class="tiny dialog">
   <p class="text-center">Swipe up on this modal to close it.</p>
 </div>
+
+<!-- Auto destroy modal -->
+<div zf-modal id="autoDestroyModal" destroy-on-close="true">
+  <a zf-close class="close-button">&times;</a>
+  <h3>One Hit Wonder</h3>
+  <p>Close me and you'll never see me again!</p>
+</div>
diff --git a/docs/templates/modal.html b/docs/templates/modal.html
@@ -119,6 +119,26 @@ <h4>Yo, do you <em>really</em> want to do this?</h4>
 
 <hr>
 
+<h3>One-time Modals</h3>
+
+<p>A modal can be configured to only display once and never again using the <code>destroy-on-close</code> attribute.  The modal will be completely removed from the DOM once closed.</p>
+
+<div class="text-center">
+  <a class="button" zf-open="autoDestroyModal">Auto Destroy Modal</a>
+</div>
+
+<hljs language="html">
+<a zf-open="autoDestroyModal" class="button">Auto Destroy Modal</a>
+
+<div zf-modal id="autoDestroyModal" destroy-on-close="true">
+  <a zf-close class="close-button">&times;</a>
+  <h3>One Hit Wonder</h3>
+  <p>Close me and you'll never see me again!</p>
+</div>
+</hljs>
+
+<hr>
+
 <h3>Programmatic Modals</h3>
 
 <p>Modals can be created on the fly using the <code>ModalFactory</code>. Clicking the button will execute the code shown below.</p>
@@ -136,6 +156,8 @@ <h3>Programmatic Modals</h3>
   'overlay': true,
   // Set if the modal can be closed by clicking on the overlay
   'overlayClose': false,
+  // Set if the modal should be destroyed once closed
+  'destroyOnClose': false,
   // Define a template to use for the modal
   'templateUrl': 'partials/examples-dynamic-modal.html',
   // Allows you to pass in properties to the scope of the modal

diff --git a/js/angular/components/modal/modal.js b/js/angular/components/modal/modal.js
@@ -75,6 +75,7 @@
 
         scope.active = false;
         scope.overlay = attrs.overlay === 'false' ? false : true;
+        scope.destroyOnClose = attrs.destroyOnClose === 'true' ? true : false;
         scope.overlayClose = attrs.overlayClose === 'false' ? false : true;
 
         var animationIn = attrs.animationIn || 'fadeIn';
@@ -93,7 +94,22 @@
           if (scope.active) {
             scope.active = false;
             adviseActiveChanged();
-            animate();
+
+            if (scope.destroyOnClose) {
+              animate().then(function() {
+                element.remove();
+                scope.$destroy();
+              });
+            } else {
+              animate();
+            }
+          } else {
+            if (scope.destroyOnClose) {
+              $timeout(function() {
+                element.remove();
+                scope.$destroy();
+              }, 0, false);
+            }
           }
           return;
         };
@@ -159,7 +175,7 @@
             element.addClass('is-active');
           }
 
-          animateFn(dialog, scope.active, animationIn, animationOut);
+          return animateFn(dialog, scope.active, animationIn, animationOut);
         }
       }
     }
@@ -189,6 +205,7 @@
         'animationOut',
         'overlay',
         'overlayClose',
+        'destroyOnClose',
         'ignoreAllClose',
         'class'
       ];
@@ -305,7 +322,12 @@
                 element.attr('animation-out', config[prop]);
                 break;
               case 'overlayClose':
-                element.attr('overlay-close', (config[prop] === 'false' || config[prop] === false) ? 'false' : 'true'); // must be string, see postLink() above
+                // must be string, see postLink() above
+                element.attr('overlay-close', (config[prop] === 'false' || config[prop] === false) ? 'false' : 'true');
+                break;
+              case 'destroyOnClose':
+                // must be string, see postLink() above
+                element.attr('destroy-on-close', (config[prop] === 'true' || config[prop] === true) ? 'true' : 'false');
                 break;
               case 'ignoreAllClose':
                 element.attr('zf-ignore-all-close', 'zf-ignore-all-close');
@@ -362,6 +384,7 @@
         'class': 'tiny dialog confirm-modal',
         'overlay': true,
         'overlayClose': false,
+        'destroyOnClose': true,
         'templateUrl': 'components/modal/modal-confirm.html',
         'contentScope': {
           title: config.title,
@@ -374,18 +397,12 @@
               config.enterCallback();
             }
             modal.deactivate();
-            $timeout(function() {
-              modal.destroy();
-            }, 1000);
           },
           cancel: function() {
             if (config.cancelCallback) {
               config.cancelCallback();
             }
             modal.deactivate();
-            $timeout(function() {
-              modal.destroy();
-            }, 1000);
           }
         }
       });
@@ -409,6 +426,7 @@
         'class': 'tiny dialog prompt-modal',
         'overlay': true,
         'overlayClose': false,
+        'destroyOnClose': true,
         'templateUrl': 'components/modal/modal-prompt.html',
         'contentScope': {
           title: config.title,
@@ -424,19 +442,13 @@
                 config.enterCallback(data.value);
               }
               modal.deactivate();
-              $timeout(function() {
-                modal.destroy();
-              }, 1000);
             }
           },
           cancel: function() {
             if (config.cancelCallback) {
               config.cancelCallback();
             }
             modal.deactivate();
-            $timeout(function() {
-              modal.destroy();
-            }, 1000);
           }
         }
       });