Added directive to the body to listen for escape key events. Moved th…

…e service to close active elements to common services module. Now any closeable elements that are active on the body will close upon press of Esc key. Closes zurb#193.
juliouscm · Dec 5, 2014 · f92ea15 · f92ea15
1 parent 98fb90d
commit f92ea15
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -10,7 +10,7 @@
     <script src="assets/js/routes.js"></script>
     <script src="assets/js/angular-app.js"></script>
   </head>
-  <body>
+  <body zf-esc-close>
 
       <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/js/angular/common/common.directives.js b/js/angular/common/common.directives.js
@@ -54,18 +54,28 @@ angular.module('foundation.common.directives')
   }
 }]);
 
+angular.module('foundation.common.directives')
+  .directive('zfEscClose', ['FoundationApi', function(foundationApi) {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attrs) {
+      element.on('keyup', function(e) {
+        if (e.keyCode === 27) {
+          foundationApi.closeActiveElements();
+        }
+        e.preventDefault();
+      });
+    }
+  };
+}]);
+
 angular.module('foundation.common.directives')
   .directive('zfHardToggle', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
       element.on('click', function(e) {
-        var activeElements = document.querySelectorAll('.is-active[zf-closable]');
-        if (activeElements.length) {
-          angular.forEach(activeElements, function(el) {
-            foundationApi.publish(el.id, 'close');
-          });
-        }
+        foundationApi.closeActiveElements();
         foundationApi.publish(attrs.zfHardToggle, 'toggle');
         e.preventDefault();
       });

diff --git a/js/angular/common/common.services.js b/js/angular/common/common.services.js
@@ -55,6 +55,15 @@ angular.module('foundation.common.services')
           element.removeClass(activeClass);
         }
       },
+      closeActiveElements: function() {
+          var self = this;
+          var activeElements = document.querySelectorAll('.is-active[zf-closable]');
+          if (activeElements.length) {
+            angular.forEach(activeElements, function(el) {
+              self.publish(el.id, 'close');
+            });
+          }
+      },
       animate: function(element, futureState, animationIn, animationOut) {
         var initClasses        = ['ng-enter', 'ng-leave'];
         var activeClasses      = ['ng-enter-active', 'ng-leave-active'];

diff --git a/js/angular/partials/modal.html b/js/angular/partials/modal.html
@@ -1,6 +1,7 @@
 <div
   class="modal-overlay"
-  ng-click="hideOverlay()">
+  ng-click="hideOverlay()"
+  ng-esc-close>
   <aside
     class="modal"
     ng-click="$event.stopPropagation();"