Merge pull request zurb#403 from zurb/actionsheet-toggle-off

Action sheet toggle off
As-You-Like · Jan 14, 2015 · 95021ec · 95021ec
2 parents 6d8019d + 30f31bc
commit 95021ec
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/js/angular/components/actionsheet/actionsheet-content.html b/js/angular/components/actionsheet/actionsheet-content.html
@@ -1,5 +1,8 @@
 <div
   class="action-sheet {{ position }}"
   ng-class="{'is-active': active}"
-  ng-transclude>
+  >
+    <div
+    ng-transclude>
+    </div>
 </div>
diff --git a/js/angular/components/actionsheet/actionsheet.js b/js/angular/components/actionsheet/actionsheet.js
@@ -14,6 +14,7 @@
     var controller = this;
     var content = controller.content = $scope.content;
     var container = controller.container = $scope.container;
+    var body = angular.element(document.body);
 
     controller.registerContent = function(scope) {
       content = scope;
@@ -25,21 +26,49 @@
       container.active = false;
     };
 
-    controller.toggle = function() {
-      content.toggle();
-      container.toggle();
+    controller.toggle = toggle;
+    controller.hide = hide;
 
-      content.$apply();
-      container.$apply();
+    controller.registerListener = function() {
+      document.body.addEventListener('click', listenerLogic);
     };
 
-    controller.hide = function() {
+    controller.deregisterListener = function() {
+      document.body.removeEventListener('click', listenerLogic);
+    }
+
+    function listenerLogic(e) {
+      var el = e.target;
+      var insideActionSheet = false;
+
+      do {
+        if(el.classList && el.classList.contains('action-sheet-container')) {
+          insideActionSheet = true;
+          break;
+        }
+
+      } while ((el = el.parentNode));
+
+      if(!insideActionSheet) {
+        hide();
+      }
+    }
+
+    function hide() {
       content.hide();
       container.hide();
 
       content.$apply();
       container.$apply();
-    };
+    }
+
+    function toggle() {
+      content.toggle();
+      container.toggle();
+
+      content.$apply();
+      container.$apply();
+    }
   }
 
   zfActionSheet.$inject = ['FoundationApi'];
@@ -123,11 +152,19 @@
 
       scope.toggle = function() {
         scope.active = !scope.active;
+
+        if(scope.active) {
+          controller.registerListener();
+        } else {
+          controller.deregisterListener();
+        }
+
         return;
       };
 
       scope.hide = function() {
         scope.active = false;
+        controller.deregisterListener();
         return;
       };
     }