biofriction-wp-theme/node_modules/foundation-sites/js/foundation.util.triggers.js

261 lines
8.6 KiB
JavaScript
Raw Normal View History

2021-10-26 14:18:09 +02:00
'use strict';
import $ from 'jquery';
import { onLoad } from './foundation.core.utils';
import { Motion } from './foundation.util.motion';
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]);
});
};
var Triggers = {
Listeners: {
Basic: {},
Global: {}
},
Initializers: {}
}
Triggers.Listeners.Basic = {
openListener: function() {
triggers($(this), 'open');
},
closeListener: function() {
let id = $(this).data('close');
if (id) {
triggers($(this), 'close');
}
else {
$(this).trigger('close.zf.trigger');
}
},
toggleListener: function() {
let id = $(this).data('toggle');
if (id) {
triggers($(this), 'toggle');
} else {
$(this).trigger('toggle.zf.trigger');
}
},
closeableListener: function(e) {
e.stopPropagation();
let animation = $(this).data('closable');
if(animation !== ''){
Motion.animateOut($(this), animation, function() {
$(this).trigger('closed.zf');
});
}else{
$(this).fadeOut().trigger('closed.zf');
}
},
toggleFocusListener: function() {
let id = $(this).data('toggle-focus');
$(`#${id}`).triggerHandler('toggle.zf.trigger', [$(this)]);
}
};
// Elements with [data-open] will reveal a plugin that supports it when clicked.
Triggers.Initializers.addOpenListener = ($elem) => {
$elem.off('click.zf.trigger', Triggers.Listeners.Basic.openListener);
$elem.on('click.zf.trigger', '[data-open]', Triggers.Listeners.Basic.openListener);
}
// 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.
Triggers.Initializers.addCloseListener = ($elem) => {
$elem.off('click.zf.trigger', Triggers.Listeners.Basic.closeListener);
$elem.on('click.zf.trigger', '[data-close]', Triggers.Listeners.Basic.closeListener);
}
// Elements with [data-toggle] will toggle a plugin that supports it when clicked.
Triggers.Initializers.addToggleListener = ($elem) => {
$elem.off('click.zf.trigger', Triggers.Listeners.Basic.toggleListener);
$elem.on('click.zf.trigger', '[data-toggle]', Triggers.Listeners.Basic.toggleListener);
}
// Elements with [data-closable] will respond to close.zf.trigger events.
Triggers.Initializers.addCloseableListener = ($elem) => {
$elem.off('close.zf.trigger', Triggers.Listeners.Basic.closeableListener);
$elem.on('close.zf.trigger', '[data-closeable], [data-closable]', Triggers.Listeners.Basic.closeableListener);
}
// Elements with [data-toggle-focus] will respond to coming in and out of focus
Triggers.Initializers.addToggleFocusListener = ($elem) => {
$elem.off('focus.zf.trigger blur.zf.trigger', Triggers.Listeners.Basic.toggleFocusListener);
$elem.on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', Triggers.Listeners.Basic.toggleFocusListener);
}
// More Global/complex listeners and triggers
Triggers.Listeners.Global = {
resizeListener: function($nodes) {
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");
},
scrollListener: function($nodes) {
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");
},
closeMeListener: 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]);
});
}
}
// Global, parses whole document.
Triggers.Initializers.addClosemeListener = function(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, Triggers.Listeners.Global.closeMeListener);
}
}
function debounceGlobalListener(debounce, trigger, listener) {
let timer, args = Array.prototype.slice.call(arguments, 3);
$(window).off(trigger).on(trigger, function(e) {
if (timer) { clearTimeout(timer); }
timer = setTimeout(function(){
listener.apply(null, args);
}, debounce || 10);//default time to emit scroll event
});
}
Triggers.Initializers.addResizeListener = function(debounce){
let $nodes = $('[data-resize]');
if($nodes.length){
debounceGlobalListener(debounce, 'resize.zf.trigger', Triggers.Listeners.Global.resizeListener, $nodes);
}
}
Triggers.Initializers.addScrollListener = function(debounce){
let $nodes = $('[data-scroll]');
if($nodes.length){
debounceGlobalListener(debounce, 'scroll.zf.trigger', Triggers.Listeners.Global.scrollListener, $nodes);
}
}
Triggers.Initializers.addMutationEventsListener = function($elem) {
if(!MutationObserver){ return false; }
let $nodes = $elem.find('[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 (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"] });
}
}
}
Triggers.Initializers.addSimpleListeners = function() {
let $document = $(document);
Triggers.Initializers.addOpenListener($document);
Triggers.Initializers.addCloseListener($document);
Triggers.Initializers.addToggleListener($document);
Triggers.Initializers.addCloseableListener($document);
Triggers.Initializers.addToggleFocusListener($document);
}
Triggers.Initializers.addGlobalListeners = function() {
let $document = $(document);
Triggers.Initializers.addMutationEventsListener($document);
Triggers.Initializers.addResizeListener();
Triggers.Initializers.addScrollListener();
Triggers.Initializers.addClosemeListener();
}
Triggers.init = function ($, Foundation) {
onLoad($(window), function () {
if ($.triggersInitialized !== true) {
Triggers.Initializers.addSimpleListeners();
Triggers.Initializers.addGlobalListeners();
$.triggersInitialized = true;
}
});
if(Foundation) {
Foundation.Triggers = Triggers;
// Legacy included to be backwards compatible for now.
Foundation.IHearYou = Triggers.Initializers.addGlobalListeners
}
}
export {Triggers};