From 439ba7706829f1f01a4620fbf6b69a9110933698 Mon Sep 17 00:00:00 2001 From: zurbchris Date: Wed, 18 Nov 2015 16:05:37 -0800 Subject: [PATCH] adds mutationObserver to replace looping mechanisms --- js/foundation.util.triggers.js | 284 ++++++++++++++------------------- 1 file changed, 124 insertions(+), 160 deletions(-) diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js index fbc49e7e8..c48ef0aa3 100644 --- a/js/foundation.util.triggers.js +++ b/js/foundation.util.triggers.js @@ -1,4 +1,5 @@ !function(Foundation, $) { + 'use strict'; // Elements with [data-open] will reveal a plugin that supports it when clicked. $(document).on('click.zf.trigger', '[data-open]', function() { var id = $(this).data('open'); @@ -36,63 +37,20 @@ }); -//chris's testing things---------------- - - - - //trying to reposition elements on resize - //********* only fires when all other scripts have loaded ********* - /** - * Fires once after all other scripts have loaded - * @function - * @private - */ - $(window).load(function(){ - // checkWatchers(null); + var checkListeners = function(){ eventsListener(); resizeListener(); scrollListener(); - //domMutationObserver(); closemeListener(); - }); - + }; /** - * Checks the global Foundation object for instantiated plugins. - * @function - * @param {String|Array} plugs - Name or array of names of plugins the user would like to add to the list of plugins to watch on window resize - * @throws Plugin#error - */ - // function checkWatchers(plugs) { - // var plugins = Foundation._plugins, - // pluginsToWatch = ['accordion-menu', 'drilldown', 'dropdown-menu', 'dropdown', 'slider', 'reveal', 'sticky', 'tooltip']; - // if(plugs){ - // if(typeof plugs === 'array' && typeof plugs[0] === 'string'){ - // pluginsToWatch = pluginsToWatch.concat(plugs); - // }else if(typeof plugs === 'string'){ - // pluginsToWatch.push(plugs) - // }else{ - // /** - // * Logs error if plugs is not a string or array. - // * @event Plugin#error - // */ - // console.error('Plugin names must be strings'); - // } - // } - // var counter = pluginsToWatch.length, - // watching = false; - // - // while(counter){ - // if(plugins[pluginsToWatch[counter - 1]]){ - // watching = true; - // }else{ - // pluginsToWatch.splice(counter - 1, 1); - // } - // --counter; - // if(!counter && watching){ - // resizeListener(pluginsToWatch); - // } - // } - // } + * Fires once after all other scripts have loaded + * @function + * @private + */ + $(window).load(function(){ + checkListeners(); + }); //******** only fires this function once on load, if there's something to watch ******** var closemeListener = function(pluginName){ @@ -122,127 +80,133 @@ _this.triggerHandler('close.zf.trigger', [_this]); }); - }); } }; var resizeListener = function(debounce){ - var timer; - - $(window).off('resize.zf.trigger') - .on('resize.zf.trigger', function(e) { - if (timer) { clearTimeout(timer); } - - timer = setTimeout(function() { - //trigger all listening elements and signal a resize event - $('[data-resize]').attr('data-events', "resize"); - }, debounce || 10);//default time to emit resize event - }); - + var timer, + $nodes = $('[data-resize]'); + if($nodes.length){ + $(window).off('resize.zf.trigger') + .on('resize.zf.trigger', function(e) { + if (timer) { clearTimeout(timer); } + + timer = setTimeout(function() { + //trigger all listening elements and signal a resize event + $nodes.attr('data-events', "resize"); + }, debounce || 10);//default time to emit resize event + }); + } }; var scrollListener = function(debounce){ - var timer; - + var timer, + $nodes = $('[data-scroll]'); + if($nodes.length){ $(window).off('scroll.zf.trigger') - .on('scroll.zf.trigger', function(e){ - if(timer){ clearTimeout(timer); } + .on('scroll.zf.trigger', function(e){ + if(timer){ clearTimeout(timer); } - timer = setTimeout(function(){ - //trigger all listening elements and signal a scroll event - $('[data-scroll]').attr('data-events', "scroll"); - }, debounce || 50);//default time to emit scroll event + timer = setTimeout(function(){ + //trigger all listening elements and signal a scroll event + $nodes.attr('data-events', "scroll"); + }, debounce || 10);//default time to emit scroll event }); - - }; - function domMutationObserver(debounce) { - // !!! This is coming soon and needs more work; not active !!! // - var timer, - nodes = document.querySelectorAll('[data-mutate]'); - - if (nodes.length) { - var MutationObserver = (function () { - var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''] - for (var i=0; i < prefixes.length; i++) { - if (prefixes[i] + 'MutationObserver' in window) { - return window[prefixes[i] + 'MutationObserver']; - } - } - return false; - }()); - - - //for the body, we need to listen for all changes effecting the style and class attributes - var bodyObserver = new MutationObserver(bodyMutation); - bodyObserver.observe(document.body, { attributes: true, childList: true, characterData: false, subtree:true, attributeFilter:["style", "class"]}); - - - //body callback - function bodyMutation(mutate) { - //trigger all listening elements and signal a mutation event - if (timer) { clearTimeout(timer); } - - timer = setTimeout(function() { - bodyObserver.disconnect(); - $('[data-mutate]').attr('data-events',"mutate"); - }, debounce || 150); - } - } + } }; + // function domMutationObserver(debounce) { + // // !!! This is coming soon and needs more work; not active !!! // + // var timer, + // nodes = document.querySelectorAll('[data-mutate]'); + // // + // if (nodes.length) { + // // var MutationObserver = (function () { + // // var prefixes = ['WebKit', 'Moz', 'O', 'Ms', '']; + // // for (var i=0; i < prefixes.length; i++) { + // // if (prefixes[i] + 'MutationObserver' in window) { + // // return window[prefixes[i] + 'MutationObserver']; + // // } + // // } + // // return false; + // // }()); + // + // + // //for the body, we need to listen for all changes effecting the style and class attributes + // var bodyObserver = new MutationObserver(bodyMutation); + // bodyObserver.observe(document.body, { attributes: true, childList: true, characterData: false, subtree:true, attributeFilter:["style", "class"]}); + // + // + // //body callback + // function bodyMutation(mutate) { + // //trigger all listening elements and signal a mutation event + // if (timer) { clearTimeout(timer); } + // + // timer = setTimeout(function() { + // bodyObserver.disconnect(); + // $('[data-mutate]').attr('data-events',"mutate"); + // }, debounce || 150); + // } + // } + // } var eventsListener = function() { - var nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]'); - - if (nodes.length) { - - var MutationObserver = (function () { - var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''] - for (var i=0; i < prefixes.length; i++) { - if (prefixes[i] + 'MutationObserver' in window) { - return window[prefixes[i] + 'MutationObserver']; - } - } - return false; - }()); - - //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++) { - var elementObserver = new MutationObserver(listeningElementsMutation); - elementObserver.observe(nodes[i], { attributes: true, childList: false, characterData: false, subtree:false, attributeFilter:["data-events"]}); - } - - //element callback - function listeningElementsMutation(mutationRecordsList) { - //trigger the event handler for the element depending on type - switch ($(mutationRecordsList[0].target).attr("data-events")) { - - case "resize" : - $(mutationRecordsList[0].target).triggerHandler('resizeme.zf.trigger', [$(mutationRecordsList[0].target)]); - break; - - case "scroll" : - $(mutationRecordsList[0].target).triggerHandler('scrollme.zf.trigger', [$(mutationRecordsList[0].target), window.scrollY]); - break; - - case "mutate" : - $(mutationRecordsList[0].target).triggerHandler('mutate.zf.trigger'); - - //make sure we don't get stuck in an infinite loop from sloppy codeing - if ($(mutationRecordsList[0].target).index('[data-mutate]') == $("[data-mutate]").length-1) { - domMutationObserver(); - } - break; - - default : - //nothing - } - }; - } + var nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]'); + + if (nodes.length) { + + var MutationObserver = (function () { + var prefixes = ['WebKit', 'Moz', 'O', 'Ms', '']; + for (var i=0; i < prefixes.length; i++) { + if (prefixes[i] + 'MutationObserver' in window) { + return window[prefixes[i] + 'MutationObserver']; + } + } + return false; + }()); + + //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++) { + var elementObserver = new MutationObserver(listeningElementsMutation); + elementObserver.observe(nodes[i], { attributes: true, childList: false, characterData: false, subtree:false, attributeFilter:["data-events"]}); + } + + //element callback + function listeningElementsMutation(mutationRecordsList) { + var $target = $(mutationRecordsList[0].target); + //trigger the event handler for the element depending on type + switch ($target.attr("data-events")) { + + case "resize" : + console.log('resizing', $target); + $target.triggerHandler('resizeme.zf.trigger', [$target]); + break; + + case "scroll" : + console.log('scrolling', $target); + $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 + } + } + } }; -// ------------------------------------ + // ------------------------------------ // [PH] -// Foundation.CheckWatchers = checkWatchers; -Foundation.IHearYou = resizeListener; -Foundation.ISeeYou = scrollListener; -Foundation.IFeelYou = closemeListener; + // Foundation.CheckWatchers = checkWatchers; + Foundation.IHearYou = checkListeners; + // Foundation.ISeeYou = scrollListener; + // Foundation.IFeelYou = closemeListener; }(window.Foundation, window.jQuery); -- 2.47.2