sp-magic.de/bower_components/foundation-sites/js/foundation.util.triggers.js
2016-10-28 19:56:41 +02:00

240 lines
7.1 KiB
JavaScript

'use strict';
!function($) {
const 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;
}());
const triggers = (el, type) => {
el.data(type).split(' ').forEach(id => {
$(`#${id}`)[ type === 'close' ? 'trigger' : 'triggerHandler'](`${type}.zf.trigger`, [el]);
});
};
// Elements with [data-open] will reveal a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-open]', function() {
triggers($(this), 'open');
});
// Elements with [data-close] will close a plugin that supports it when clicked.
// If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
$(document).on('click.zf.trigger', '[data-close]', function() {
let id = $(this).data('close');
if (id) {
triggers($(this), 'close');
}
else {
$(this).trigger('close.zf.trigger');
}
});
// Elements with [data-toggle] will toggle a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-toggle]', function() {
triggers($(this), 'toggle');
});
// Elements with [data-closable] will respond to close.zf.trigger events.
$(document).on('close.zf.trigger', '[data-closable]', function(e){
e.stopPropagation();
let animation = $(this).data('closable');
if(animation !== ''){
Foundation.Motion.animateOut($(this), animation, function() {
$(this).trigger('closed.zf');
});
}else{
$(this).fadeOut().trigger('closed.zf');
}
});
$(document).on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', function() {
let id = $(this).data('toggle-focus');
$(`#${id}`).triggerHandler('toggle.zf.trigger', [$(this)]);
});
/**
* Fires once after all other scripts have loaded
* @function
* @private
*/
$(window).load(() => {
checkListeners();
});
function checkListeners() {
eventsListener();
resizeListener();
scrollListener();
closemeListener();
}
//******** only fires this function once on load, if there's something to watch ********
function closemeListener(pluginName) {
var yetiBoxes = $('[data-yeti-box]'),
plugNames = ['dropdown', 'tooltip', 'reveal'];
if(pluginName){
if(typeof pluginName === 'string'){
plugNames.push(pluginName);
}else if(typeof pluginName === 'object' && typeof pluginName[0] === 'string'){
plugNames.concat(pluginName);
}else{
console.error('Plugin names must be strings');
}
}
if(yetiBoxes.length){
let listeners = plugNames.map((name) => {
return `closeme.zf.${name}`;
}).join(' ');
$(window).off(listeners).on(listeners, function(e, pluginId){
let plugin = e.namespace.split('.')[0];
let plugins = $(`[data-${plugin}]`).not(`[data-yeti-box="${pluginId}"]`);
plugins.each(function(){
let _this = $(this);
_this.triggerHandler('close.zf.trigger', [_this]);
});
});
}
}
function resizeListener(debounce){
let 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(){
if(!MutationObserver){//fallback for IE 9
$nodes.each(function(){
$(this).triggerHandler('resizeme.zf.trigger');
});
}
//trigger all listening elements and signal a resize event
$nodes.attr('data-events', "resize");
}, debounce || 10);//default time to emit resize event
});
}
}
function scrollListener(debounce){
let timer,
$nodes = $('[data-scroll]');
if($nodes.length){
$(window).off('scroll.zf.trigger')
.on('scroll.zf.trigger', function(e){
if(timer){ clearTimeout(timer); }
timer = setTimeout(function(){
if(!MutationObserver){//fallback for IE 9
$nodes.each(function(){
$(this).triggerHandler('scrollme.zf.trigger');
});
}
//trigger all listening elements and signal a scroll event
$nodes.attr('data-events', "scroll");
}, 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
}
}
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]
// Foundation.CheckWatchers = checkWatchers;
Foundation.IHearYou = checkListeners;
// Foundation.ISeeYou = scrollListener;
// Foundation.IFeelYou = closemeListener;
}(jQuery);
// 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);
// }
// }
// }