updating triggers for mutation listeners, and equalizer to use them

This is the implementation of mutation in addition to scroll and resize
triggers for universal plugin usage. Foundation can now fire events
when elements that are listening for mutation events or their children
change in the DOM either by element addition, element removal, or
attribute manipulation.

This can be very useful for ajax caused changes, display none on load
issues, element manipulation, and any other DOM mutation events.

diff --git a/js/foundation.equalizer.js b/js/foundation.equalizer.js
index 29b01e863375294ef59e047bfd975abd8819424f..dd38248abe8d4792dd32157c85ff7efe47f54554 100644 (file)
--- a/js/foundation.equalizer.js
+++ b/js/foundation.equalizer.js
@@ -36,6 +36,7 @@ class Equalizer {
 
     this.$watched = $watched.length ? $watched : this.$element.find('[data-equalizer-watch]');
     this.$element.attr('data-resize', (eqId || Foundation.GetYoDigits(6, 'eq')));
+       this.$element.attr('data-mutate', (eqId || Foundation.GetYoDigits(6, 'eq')));
 
     this.hasNested = this.$element.find('[data-equalizer]').length > 0;
     this.isNested = this.$element.parentsUntil(document.body, '[data-equalizer]').length > 0;
@@ -71,6 +72,7 @@ class Equalizer {
     this.$element.off({
       '.zf.equalizer': this._bindHandler.onPostEqualizedBound,
       'resizeme.zf.trigger': this._bindHandler.onResizeMeBound
+         'mutateme.zf.trigger': this._bindHandler.onResizeMeBound
     });
   }
 
@@ -101,6 +103,7 @@ class Equalizer {
       this.$element.on('postequalized.zf.equalizer', this._bindHandler.onPostEqualizedBound);
     }else{
       this.$element.on('resizeme.zf.trigger', this._bindHandler.onResizeMeBound);
+         this.$element.on('mutateme.zf.trigger', this._bindHandler.onResizeMeBound);
     }
     this.isOn = true;
   }

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index 4308b152798cdc305699637a24ec6147d72fcb60..7e13de64d51ae43152ed1524c4633206ec45078b 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -71,6 +71,7 @@ function checkListeners() {
   eventsListener();
   resizeListener();
   scrollListener();
+  mutateListener();
   closemeListener();
 }
 
@@ -150,49 +151,69 @@ function scrollListener(debounce){
   }
 }
 
+function mutateListener(debounce) {
+    let timer,
+        $nodes = $('[data-mutate]');
+    if ($nodes.length) {
+        if (timer) {
+          clearTimeout(timer);
+        }
+
+        timer = setTimeout(function () {
+               
+                       //trigger all listening elements and signal a mutate event
+                       $nodes.each(function () {
+                         $(this).triggerHandler('mutateme.zf.trigger');
+                       });
+                 
+        }, debounce || 10); //default time to emit scroll event
+    }
+ }
+
 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);
-    //trigger the event handler for the element depending on type
-    switch ($target.attr("data-events")) {
-
-      case "resize" :
-      $target.triggerHandler('resizeme.zf.trigger', [$target]);
-      break;
-
-      case "scroll" :
-      $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
-      break;
-
-      // case "mutate" :
-      // console.log('mutate', $target);
-      // $target.triggerHandler('mutate.zf.trigger');
-      //
-      // //make sure we don't get stuck in an infinite loop from sloppy codeing
-      // if ($target.index('[data-mutate]') == $("[data-mutate]").length-1) {
-      //   domMutationObserver();
-      // }
-      // break;
-
-      default :
-      return false;
-      //nothing
+  var listeningElementsMutation = function (mutationRecordsList) {
+      var $target = $(mutationRecordsList[0].target);
+
+         //trigger the event handler for the element depending on type
+      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") === "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]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
+                 }
+                 break;
+
+        case "childList":
+                 $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
+      }
+    };
+
+    if (nodes.length) {
+      //for each element that needs to listen for resizing, scrolling, or mutation add a single observer
+      for (var i = 0; i <= nodes.length - 1; i++) {
+        var elementObserver = new MutationObserver(listeningElementsMutation);
+        elementObserver.observe(nodes[i], { attributes: true, childList: true, characterData: false, subtree: true, attributeFilter: ["data-events", "style"] });
+      }
     }
   }
 
-  if(nodes.length){
-    //for each element that needs to listen for resizing, scrolling, (or coming soon mutation) add a single observer
-    for (var i = 0; i <= nodes.length-1; i++) {
-      let elementObserver = new MutationObserver(listeningElementsMutation);
-      elementObserver.observe(nodes[i], { attributes: true, childList: false, characterData: false, subtree:false, attributeFilter:["data-events"]});
-    }
-  }
-}
-
 // ------------------------------------
 
 // [PH]