Merge pull request #14 from base-apps/fix-legacy-issues

backlog of fixes for repository
base-apps · Jul 15, 2016 · 6cee131 · 6cee131
2 parents cd9397e + 413aae8
commit 6cee131
Show file tree

Hide file tree

Showing 18 changed files with 329 additions and 132 deletions.
diff --git a/docs/templates/action-sheet.html b/docs/templates/action-sheet.html
@@ -82,7 +82,7 @@ <h3>Additional Options</h3>
 <hr>
 
 <h3>External Triggers</h3>
-<p>To use an entirely different element entirely to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.</p>
+<p>To use an entirely different element to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.</p>
 
 <hljs>
 <a href="#" zf-hard-toggle="separate-actionsheet">Toggle</a>
@@ -117,12 +117,10 @@ <h3>Sass Mixins</h3>
 // This is the action sheet itself
 .custom-action-sheet {
   // These are the core styles for the sheet menu
-
-    $padding: 1rem,
-    $color: #000,
-    $border-color,
-    $background-hover: #ccc
-  );
+  $padding: 1rem,
+  $color: #000,
+  $border-color,
+  $background-hover: #ccc
 
   // This mixin sets up styles for the mobile action sheet
   @include action-sheet(

diff --git a/js/angular/components/common/common.js b/js/angular/components/common/common.js
@@ -192,22 +192,40 @@
 
     function link(scope, element, attrs) {
       element.on('click', function(e) {
-        var tar = e.target;
-        var avoid = ['zf-toggle', 'zf-hard-toggle', 'zf-open', 'zf-close'].filter(function(e, i){
+        var tar = e.target, avoid, activeElements, closedElements, i;
+
+        // check if clicked target is designated to open/close another component
+        avoid = ['zf-toggle', 'zf-hard-toggle', 'zf-open', 'zf-close'].filter(function(e){
           return e in tar.attributes;
         });
+        if(avoid.length > 0) {
+          // do nothing
+          return;
+        }
 
-        if(avoid.length > 0){ return; }
+        // check if clicked element is inside active closable parent
+        if (getParentsUntil(tar, 'zf-closable') !== false) {
+          // do nothing
+          return;
+        }
 
-        var activeElements = document.querySelectorAll('.is-active[zf-closable]');
+        // close all active elements
+        activeElements = document.querySelectorAll('.is-active[zf-closable]');
+        closedElements = 0;
+        if(activeElements.length > 0) {
+          for(i = 0; i < activeElements.length; i++) {
+            if (!activeElements[i].hasAttribute('zf-ignore-all-close')) {
+              foundationApi.publish(activeElements[i].id, 'close');
+              closedElements++;
+            }
+          }
 
-        if(activeElements.length && !activeElements[0].hasAttribute('zf-ignore-all-close')){
-          if(getParentsUntil(tar, 'zf-closable') === false){
+          // if one or more elements were closed,
+          // prevent the default action
+          if (closedElements > 0) {
             e.preventDefault();
-            foundationApi.publish(activeElements[0].id, 'close');
           }
         }
-        return;
       });
     }
     /** special thanks to Chris Ferdinandi for this solution.

diff --git a/js/angular/components/iconic/iconic.js b/js/angular/components/iconic/iconic.js
@@ -152,9 +152,11 @@
 
         injectSvg(element[0]);
 
-        foundationApi.subscribe('resize', function () {
-          // only run update on current element
-          ico.update(element[0]);
+        // subscribe for resize events
+        foundationApi.subscribe('resize', resize);
+
+        scope.$on("$destroy", function() {
+          foundationApi.unsubscribe('resize', resize);
         });
 
         // handle dynamic updating of src
@@ -254,6 +256,11 @@
             }
           });
         }
+
+        function resize() {
+          // run update on current element
+          ico.update(element[0]);
+        }
       }
 
       function addDataDash(attr) {

diff --git a/js/angular/components/interchange/interchange.js b/js/angular/components/interchange/interchange.js
@@ -31,8 +31,32 @@
 
       var globalQueries = foundationMQ.getMediaQueries();
 
-      //setup
-      foundationApi.subscribe('resize', function(msg) {
+      // subscribe for resize events
+      foundationApi.subscribe('resize', resize);
+
+      scope.$on("$destroy", function() {
+        foundationApi.unsubscribe('resize', resize);
+      });
+
+      //init
+      foundationApi.publish('resize', 'initial resize');
+
+      function templateLoader(templateUrl) {
+        return $http.get(templateUrl, {cache: $templateCache});
+      }
+
+      function collectInformation(el) {
+        var data = foundationMQ.collectScenariosFromElement(el);
+
+        scenarios = data.scenarios;
+        innerTemplates = data.templates;
+      }
+
+      function checkScenario(scenario) {
+        return !current || current !== scenario;
+      }
+
+      function resize(msg) {
         transclude(function(clone, newScope) {
           if(!scenarios || !innerTemplates) {
             collectInformation(clone);
@@ -72,25 +96,6 @@
             }
           }
         });
-
-      });
-
-      //init
-      foundationApi.publish('resize', 'initial resize');
-
-      function templateLoader(templateUrl) {
-        return $http.get(templateUrl, {cache: $templateCache});
-      }
-
-      function collectInformation(el) {
-        var data = foundationMQ.collectScenariosFromElement(el);
-
-        scenarios = data.scenarios;
-        innerTemplates = data.templates;
-      }
-
-      function checkScenario(scenario) {
-        return !current || current !== scenario;
       }
     }
   }
@@ -224,17 +229,10 @@
 
       function postLink(scope, element, attrs) {
         // subscribe for resize events
-        foundationApi.subscribe('resize', function() {
-          var orignalVisibilty = scope[queryResult];
-          runQuery();
-          if (orignalVisibilty != scope[queryResult]) {
-            // digest if visibility changed
-            scope.$digest();
-          }
-        });
+        foundationApi.subscribe('resize', resize);
 
         scope.$on("$destroy", function() {
-          foundationApi.unsubscribe('resize');
+          foundationApi.unsubscribe('resize', resize);
         });
 
         // run first media query check
@@ -259,6 +257,15 @@
             }
           }
         }
+
+        function resize() {
+          var orignalVisibilty = scope[queryResult];
+          runQuery();
+          if (orignalVisibilty != scope[queryResult]) {
+            // digest if visibility changed
+            scope.$digest();
+          }
+        }
       }
     }
   }