Browser Event Listeners

local-storage-listener.js

const localStorageSubscribers = [];

const initLocalStorageListener = () => {
  document.addEventListener('storage', handleLocalStorageChange, false);
};

const removeLocalStorageListener = () => {
  localStorageSubscribers.length = 0;
  document.removeEventListener('storage', handleLocalStorageChange);
};

const handleLocalStorageChange = (e) => {
  localStorageSubscribers.forEach((callback) => callback(e));
};

const addLocalStorageSubscriber = (callback) => {
  if (typeof callback === 'function') {
    localStorageSubscribers.push(callback);
  } else {
    throw new TypeError('"callback" param is not a function.');
  }
};

const removeLocalStorageSubscriber = (callback) => {
  const index = localStorageSubscribers.findIndex((cb) => cb === callback);
  index >= 0 && localStorageSubscribers.splice(index, 1);
};

export {
  initLocalStorageListener,
  removeLocalStorageListener,
  addLocalStorageSubscriber,
  removeLocalStorageSubscriber
};

tab-focus-listener.js

const onBlurSubscribers = [];
const onFocusSubscribers = [];

const pageVisibilityApi = () => {
  let hidden;
  let visibilityChange;
  if (typeof document.hidden !== 'undefined') {
    // Opera 12.10 and Firefox 18 and later support
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
  } else if (typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
  } else if (typeof document.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
  }
  return { hidden, visibilityChange };
};

const { hidden, visibilityChange } = pageVisibilityApi();

const initTabFocusListener = () => {
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
};

const removeTabFocusListener = () => {
  onBlurSubscribers.length = 0;
  onFocusSubscribers.length = 0;
  document.removeEventListener(visibilityChange, handleVisibilityChange);
};

const handleVisibilityChange = () => {
  if (document[hidden]) {
    onBlurSubscribers.forEach((callback) => callback());
  } else {
    onFocusSubscribers.forEach((callback) => callback());
  }
};

const addOnFocusSubscriber = (callback) => {
  if (typeof callback === 'function') {
    onFocusSubscribers.push(callback);
  } else {
    throw new TypeError('"callback" param is not a function.');
  }
};

const addOnBlurSubscriber = (callback) => {
  if (typeof callback === 'function') {
    onBlurSubscribers.push(callback);
  } else {
    throw new TypeError('"callback" param is not a function.');
  }
};

const addTabSubscribers = (onFocusCallback, onBlurCallback) => {
  addOnFocusSubscriber(onFocusCallback);
  addOnBlurSubscriber(onBlurCallback);
};

const removeOnFocusSubscriber = (callback) => {
  const index = onFocusSubscribers.findIndex((cb) => cb === callback);
  index >= 0 && onFocusSubscribers.splice(index, 1);
};

const removeOnBlurSubscriber = (callback) => {
  const index = onBlurSubscribers.findIndex((cb) => cb === callback);
  index >= 0 && onBlurSubscribers.splice(index, 1);
};

const removeTabSubscribers = (onFocusCallback, onBlurCallback) => {
  removeOnFocusSubscriber(onFocusCallback);
  removeOnBlurSubscriber(onBlurCallback);
};

export {
  initTabFocusListener,
  removeTabFocusListener,
  addOnFocusSubscriber,
  addOnBlurSubscriber,
  addTabSubscribers,
  removeOnFocusSubscriber,
  removeOnBlurSubscriber,
  removeTabSubscribers
};