]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a214c1b)
Update toggle to bubble up if no target is defined 9372/head
authorKevin Ball <kmball11@gmail.com>
Tue, 15 Nov 2016 01:13:39 +0000 (17:13 -0800)
committerKevin Ball <kmball11@gmail.com>
Tue, 15 Nov 2016 01:13:39 +0000 (17:13 -0800)
js/foundation.util.triggers.js patch | blob | blame | history
test/visual/triggers/containing-toggle.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index b9cbfda4fa380ebd658dd76bca328566c0939d60..50b3f360d02183f7bd078d7396c9bbf0d3be93ec 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -36,7 +36,12 @@ $(document).on('click.zf.trigger', '[data-close]', function() {
 
 // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
 $(document).on('click.zf.trigger', '[data-toggle]', function() {
-  triggers($(this), 'toggle');
+  let id = $(this).data('toggle');
+  if (id) {
+    triggers($(this), 'toggle');
+  } else {
+    $(this).trigger('toggle.zf.trigger');
+  }
 });
 
 // Elements with [data-closable] will respond to close.zf.trigger events.
@@ -165,7 +170,7 @@ function mutateListener(debounce) {
 function eventsListener() {
   if(!MutationObserver){ return false; }
   let nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]');
-  
+
   //element callback
   var listeningElementsMutation = function (mutationRecordsList) {
       var $target = $(mutationRecordsList[0].target);
@@ -174,14 +179,14 @@ function eventsListener() {
       switch (mutationRecordsList[0].type) {
 
         case "attributes":
-          if ($target.attr("data-events") === "scroll" && mutationRecordsList[0].attributeName === "data-events") { 
-                       $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]); 
+          if ($target.attr("data-events") === "scroll" && mutationRecordsList[0].attributeName === "data-events") {
+                       $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
                  }
-                 if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") { 
+                 if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") {
                        $target.triggerHandler('resizeme.zf.trigger', [$target]);
                   }
                  if (mutationRecordsList[0].attributeName === "style") {
-                         $target.closest("[data-mutate]").attr("data-events","mutate"); 
+                         $target.closest("[data-mutate]").attr("data-events","mutate");
                          $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
                  }
                  break;
@@ -190,7 +195,7 @@ function eventsListener() {
                  $target.closest("[data-mutate]").attr("data-events","mutate");
                  $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
           break;
-                 
+
         default:
           return false;
         //nothing
diff --git a/test/visual/triggers/containing-toggle.html b/test/visual/triggers/containing-toggle.html
new file mode 100644 (file)
index 0000000..ad76ee8
--- /dev/null
+++ b/test/visual/triggers/containing-toggle.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="row column">
+      <h1>Triggers: Contained</h1>
+
+      <p>This callout has a trigger inside of it with an id. Triggering it should toggle the type</p>
+
+      <div id="callout1" class="callout" data-toggler=".primary">
+        <p>You can toggle this</p>
+        <button type="button" class="button" data-toggle="callout1">
+          DO IT
+        </button>
+      </div>
+
+      <p>This callout has a trigger inside of it WITHOUT an id. Triggering it should also toggle the type</p>
+
+      <div class="callout" data-toggler=".primary">
+        <p>You can toggle this</p>
+        <button type="button" class="button" data-toggle>
+          DO IT
+        </button>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
+
Mirror of https://github.com/foundation/foundation-sites.git