bb-drummer / siteapp

js/util/siteapp.util.triggers.js

'use strict';

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}.${Triggers._ns}.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.'+Triggers._ns+'.trigger');
    }
  },
  toggleListener: function() {
    let id = $(this).data('toggle');
    if (id) {
      triggers($(this), 'toggle');
    } else {
      $(this).trigger('toggle.'+Triggers._ns+'.trigger');
    }
  },
  closeableListener: function(e) {
    e.stopPropagation();
    let animation = $(this).data('closable');

    if(animation !== ''){
      Motion.animateOut($(this), animation, function() {

The variable Motion seems to be never declared. If this is a global, consider adding a /** global: Motion */ comment.

        $(this).trigger('closed.'+Triggers._ns);
      });
    }else{
      $(this).fadeOut().trigger('closed.'+Triggers._ns);
    }
  },
  toggleFocusListener: function() {
    let id = $(this).data('toggle-focus');
    $(`#${id}`).triggerHandler('toggle.'+Triggers._ns+'.trigger', [$(this)]);
  }
};

// Elements with [data-open] will reveal a plugin that supports it when clicked.
Triggers.Initializers.addOpenListener = ($elem) => {
  $elem.off('click.'+Triggers._ns+'.trigger', Triggers.Listeners.Basic.openListener);
  $elem.on('click.'+Triggers._ns+'.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.'+Triggers._ns+'.trigger', Triggers.Listeners.Basic.closeListener);
  $elem.on('click.'+Triggers._ns+'.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.'+Triggers._ns+'.trigger', Triggers.Listeners.Basic.toggleListener);
  $elem.on('click.'+Triggers._ns+'.trigger', '[data-toggle]', Triggers.Listeners.Basic.toggleListener);
}

// Elements with [data-closable] will respond to close.'+Triggers._ns+'.trigger events.
Triggers.Initializers.addCloseableListener = ($elem) => {
  $elem.off('close.'+Triggers._ns+'.trigger', Triggers.Listeners.Basic.closeableListener);
  $elem.on('close.'+Triggers._ns+'.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.'+Triggers._ns+'.trigger blur.'+Triggers._ns+'.trigger', Triggers.Listeners.Basic.toggleFocusListener);
  $elem.on('focus.'+Triggers._ns+'.trigger blur.'+Triggers._ns+'.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.'+Triggers._ns+'.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.'+Triggers._ns+'.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.'+Triggers._ns+'.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.${Triggers._ns}.${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) {

The parameter e is not used and could be removed.

    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.'+Triggers._ns+'.trigger', Triggers.Listeners.Global.resizeListener, $nodes);
  }
}

Triggers.Initializers.addScrollListener = function(debounce){
  let $nodes = $('[data-scroll]');
  if($nodes.length){
    debounceGlobalListener(debounce, 'scroll.'+Triggers._ns+'.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.'+Triggers._ns+'.trigger', [$target, window.pageYOffset]);
        }
        if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") {
          $target.triggerHandler('resizeme.'+Triggers._ns+'.trigger', [$target]);
         }
        if (mutationRecordsList[0].attributeName === "style") {
          $target.closest("[data-mutate]").attr("data-events","mutate");
          $target.closest("[data-mutate]").triggerHandler('mutateme.'+Triggers._ns+'.trigger', [$target.closest("[data-mutate]")]);
        }
        break;

There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.

      case "childList":
    	////console.//log('mutation closest:', $target.closest("[data-mutate]"));
    	// init newly inserted components
        $target.closest("[data-mutate]").attr("data-events","mutate");
        $target.closest("[data-mutate]").triggerHandler('mutateme.'+Triggers._ns+'.trigger', [$target.closest("[data-mutate]")]);
        if ($target.data(Triggers._ns+'Plugin')) {
        	var plgIn = $target.data(Triggers._ns+'Plugin');
        	if ( plgIn.reflow ) { 
            	$target.thalia('reflow');
        		//plgIn.reflow(); 
        	}
        } else {
		    $target.thalia();
        }
	    $($target.closest("[data-mutate]")).trigger('mutateme');
	    //$($target.closest("[data-mutate]")).trigger('mutate');
        break;

There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.

      default:
        return false;
      //nothing
    }
  };

  if ($nodes.length) {

There is no return statement if $nodes.length is false. Are you sure this is correct? If so, consider adding return; explicitly.

    //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"] });
    }

There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.

  }
}

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($, Siteapp) {
  if (typeof($.triggersInitialized) === 'undefined') {
    let $document = $(document);

The variable $document seems to be never used. Consider removing it.

    if(document.readyState === "complete") {
      Triggers.Initializers.addSimpleListeners();
      Triggers.Initializers.addGlobalListeners();
    } else {
      $(document).ready(() => {
      //$(window).on('load', () => {
        Triggers.Initializers.addSimpleListeners();
        Triggers.Initializers.addGlobalListeners();
      });
    }


    $.triggersInitialized = true;
  }

  if(Siteapp) {
    Siteapp.Triggers = Triggers;
    // Legacy included to be backwards compatible for now.
    Siteapp.IHearYou = Triggers.Initializers.addGlobalListeners
  }
}

export {Triggers};