divi/includes/builder/scripts/stores/sticky.js

// External dependencies
import { EventEmitter } from 'events';
import assign from 'lodash/assign';
import cloneDeep from 'lodash/cloneDeep';
import compact from 'lodash/compact';
import filter from 'lodash/filter';
import forEach from 'lodash/forEach';
import get from 'lodash/get';
import has from 'lodash/has';
import head from 'lodash/head';
import includes from 'lodash/includes';
import isEqual from 'lodash/isEqual';
import isFunction from 'lodash/isFunction';
import isObject from 'lodash/isObject';
import isUndefined from 'lodash/isUndefined';
import keys from 'lodash/keys';
import last from 'lodash/last';
import map from 'lodash/map';
import mapKeys from 'lodash/mapKeys';
import set from 'lodash/set';
import size from 'lodash/size';
import slice from 'lodash/slice';
import sortBy from 'lodash/sortBy';
import $ from 'jquery';

// Internal dependencies
import {
  isOrHasValue,
} from '@frontend-builder/utils/responsive-options-pure';
import {
  top_window,
} from '@core-ui/utils/frame-helpers';
import ETScriptDocumentStore from './document';
import ETScriptWindowStore from './window';
import {
  getOffsets,
  isBFB,
  isBuilder,
  isDiviTheme,
  isExtraTheme,
  isLBB,
  isTB,
  isVB,
  maybeDecreaseEmitterMaxListeners,
  maybeIncreaseEmitterMaxListeners,
  registerFrontendComponent,
} from '../utils/utils';

import {
  filterInvalidModules,
  getLimit,
} from '../utils/sticky';

// Event Constants
const SETTINGS_CHANGE = 'settings_change';

// Variables
const $body       = $('body');
const hasFixedNav = $body.hasClass('et_fixed_nav');

/**
 * Saved sticky elements. In FE, this means all the sticky settings that exist on current page.
 * In VB (and other builder context) this means sticky settings that exist on current page but
 * is rendered outside current builder type. Removed nested sticky module (sticky inside another
 * sticky module) from the module list.
 *
 * @since 4.6.0
 *
 * @type {object}
 */
const savedStickyElements = filterInvalidModules(cloneDeep(window.et_pb_sticky_elements));

/**
 * Defaults of known non module elements which its stickiness needs to be considered.
 *
 * @since 4.6.0
 *
 * @type {object}
 */
const elementsDefaults = {
  wpAdminBar: {
    id: 'wpAdminBar',
    selector: '#wpadminbar',
    exist: false,
    height: 0,
    window: 'top',
    condition: () => {
      // Admin bar doesn't have fixed position in smaller breakpoint
      const isPositionFixed = 'fixed' === top_window.jQuery(elements.wpAdminBar.selector).css('position');

      // When Responsive View's control is visible, admin bar offset becomes irrelevant. Note:
      // At this point the `height` value might not be updated yet, so manually get the height
      // value via `getHeight()` method.
      const hasVbAppFramePaddingTop = elements.builderAppFramePaddingTop.getHeight() > 0;

      return ! hasVbAppFramePaddingTop && ! isTB && ! isLBB && isPositionFixed;
    },
  },
  diviFixedPrimaryNav: {
    id: 'diviPrimaryNav',
    selector: '#main-header',
    exist: false,
    height: 0,
    window: 'app',
    condition: () => {
      // Divi Theme has fixed nav. Note: vertical header automatically removes .et_fixed_nav
      // classname so it is fine just to test fixed nav state against .et_fixed_nav classname only
      const hasFixedNavBodyClass = isDiviTheme && hasFixedNav;

      // Check for element's existence
      const isNavExist = $(elements.diviFixedPrimaryNav.selector).length > 0;

      // Primary nav is doesn't have fixed position in smaller breakpoint
      const isPositionFixed = 'fixed' === $(elements.diviFixedPrimaryNav.selector).css('position');

      return hasFixedNavBodyClass && isNavExist && isPositionFixed;
    },
    getHeight: () => {
      const $mainHeader = $(elementsDefaults.diviFixedPrimaryNav.selector);

      // Bail if this isn't Divi
      if (! isDiviTheme && 1 > $mainHeader.length) {
        return 0;
      }

      // Clone header
      const $clone = $mainHeader.clone();

      // Emulate fixed header state. Fixed header state is emulated as soon as the window is
      // scrolled so it is safe to assume that any sticky module on its sticky state will "meet"
      // header on its fixed state; this will avoid unwanted "jump" effect that happens because
      // fixed header has 400ms transition which could be slower than scroll speed; The fixed header
      // state also adds negative margin top state to #page-container which triggers document
      // dimension change event. Also add classname which will ensure that this clone won't
      // be visible to end user even if we only render it for a split second to avoid issues
      $clone.addClass('et-fixed-header et-script-temporary-measurement');

      // Add it to layout so its dimension can be measured
      $mainHeader.parent().append($clone);

      // Measure the fixed header height
      const height = $clone.outerHeight();

      // Immediately remove the cloned DOM from layout
      $clone.remove();

      return parseFloat(height);
    },
  },
  diviFixedSecondaryNav: {
    id: 'diviPrimaryNav',
    selector: '#top-header',
    exist: false,
    height: 0,
    window: 'app',
    condition: () => {
      // Divi Theme has fixed nav. Note: vertical header automatically removes .et_fixed_nav
      // classname so it is fine just to test fixed nav state against .et_fixed_nav classname only
      const hasFixedNavBodyClass = isDiviTheme && hasFixedNav;

      // Check for element's existence
      const isNavExist = $(elements.diviFixedSecondaryNav.selector).length > 0;

      // Primary nav is doesn't have fixed position in smaller breakpoint
      const isPositionFixed = 'fixed' === $(elements.diviFixedSecondaryNav.selector).css('position');

      return hasFixedNavBodyClass && isNavExist && isPositionFixed;
    },
  },
  extraFixedPrimaryNav: {
    id: 'extraFixedPrimaryNav',
    selector: '#main-header',
    exist: false,
    height: 0,
    window: 'app',
    condition: () => {
      if (! isObject(ETScriptWindowStore) || ! isExtraTheme) {
        return false;
      }

      // Extra Theme has fixed nav.
      const hasFixedNavBodyClass = isExtraTheme && hasFixedNav;

      // Check for element's existence.
      const isNavExist = $(elements.extraFixedPrimaryNav.selector).length > 0;

      // Extra has its own breakpoint for fixed nav. Detecting computed style is most likely fail
      // because retrieved value is always one step behind before the computed style result is retrieved
      const isPositionFixed = 1024 <= (ETScriptWindowStore.width + ETScriptWindowStore.verticalScrollBar);

      return hasFixedNavBodyClass && isNavExist && isPositionFixed;
    },
    getHeight: () => {
      const $mainHeader = $(elementsDefaults.extraFixedPrimaryNav.selector);

      // Bail if this isn't Extra
      if (! isExtraTheme && 1 > $mainHeader.length) {
        return 0;
      }

      // Clone header
      const $clone = $mainHeader.clone();

      // Emulate fixed header state. Fixed header state is emulated as soon as the window is
      // scrolled so it is safe to assume that any sticky module on its sticky state will "meet"
      // header on its fixed state; this will avoid unwanted "jump" effect that happens because
      // fixed header has 500ms transition which could be slower than scroll speed; The fixed header
      // state also adds negative margin top state to #page-container which triggers document
      // dimension change event. Also add classname which will ensure that this clone won't
      // be visible to end user even if we only render it for a split second to avoid issues
      $clone.addClass('et-fixed-header et-script-temporary-measurement');

      // Add it to layout so its dimension can be measured
      $mainHeader.parent().append($clone);

      // Measure the fixed header height
      const height = $clone.outerHeight();

      // Immediately remove the cloned DOM from layout
      $clone.remove();

      return parseFloat(height);
    },
  },
  builderAppFramePaddingTop: {
    id: 'builderAppFramePaddingTop',
    selector: isBFB ? '#et-bfb-app-frame' : '#et-fb-app-frame',
    exist: false,
    height: 0,
    window: 'top',
    getHeight: () => {
      const selector = elements.builderAppFramePaddingTop.selector;
      const cssProperty = isBFB ? 'marginTop' : 'paddingTop';
      const paddingTop = top_window.jQuery(selector).css(cssProperty);

      return parseFloat(paddingTop);
    }
  },
  tbHeader: {
    id: 'et-tb-branded-modal__header',
    selector: '.et-tb-branded-modal__header',
    exist: false,
    height: 0,
    window: 'top',
  },
  lbbHeader: {
    id: 'et-block-builder-modal--header',
    selector: '.et-block-builder-modal--header',
    exist: false,
    height: 0,
    window: 'top',
  },
  gbHeader: {
    id: 'edit-post-header',

    // This selector exist on WP 5.4 and below; hence these are used instead of `.block-editor-editor-skeleton__header`
    selector: '.edit-post-header',
    exist: false,
    height: 0,
    window: 'top',
  },
  gbFooter: {
    id: 'block-editor-editor-skeleton__footer',
    selector: '.block-editor-editor-skeleton__footer',
    exist: false,
    height: 0,
    window: 'top',
  },
  gbComponentsNoticeList: {
    id: 'components-notice-list',
    selector: '.components-notice-list',
    exist: false,
    height: 0,
    window: 'top',
    multiple: true,
  },
};

/**
 * Known non module elements which its stickiness needs to be considered.
 *
 * @since 4.6.0
 *
 * @type {object}
 */
const elements = cloneDeep(elementsDefaults);

// States
/**
 * Hold all sticky elements modules' properties.
 *
 * @since 4.6.0
 *
 * @type {object}
 */
let modules = {};


/**
 * Sticky Elements store.
 *
 * This store stores selected properties of all sticky elements on the page so a sticky element
 * can use other sticky element's calculated value quickly.
 *
 * @since 4.6.0
 */
class ETScriptStickyStore extends EventEmitter {
  /**
   * ETScriptStickyStore constructor.
   *
   * @since 4.6.0
   */
  constructor() {
    super();

    // Load modules passed via global variable from server via wp_localize_script()
    assign(modules, savedStickyElements);

    // Caculate top/bottom offsetModules which are basically list of sticky elements that need
    // to be considered for additional offset calculation when `Offset From Surrounding Sticky Elements`
    // option is toggled `on`
    this.generateOffsetModules();

    // Calculate known elements' properties. This needs to be done after DOM is ready
    if (isVB) {
      $(window).on('et_fb_init_app_after', () => {
        this.setElementsProps();
      });
    } else {
      $(() => {
        this.setElementsProps();
      });
    }

    // Some props need to be updated when document height is changed (eg. fixed nav's height)
    ETScriptDocumentStore.addHeightChangeListener(this.onDocumentHeightChange);

    // Builder specific event callback
    if (isBuilder) {
      // Event callback once the builder has been mounted
      $(window).on('et_fb_root_did_mount', this.onBuilderDidMount);

      // Listen to builder change if current window is builder window
      window.addEventListener('ETBuilderStickySettingsSyncs', this.onBuilderSettingsChange);
    }
  }

  /**
   * Get registered modules.
   *
   * @since 4.6.0
   *
   * @type {object}
   */
  get modules() {
    return modules;
  }

  /**
   * List of builder options (that is used by sticky elements) that has responsive mode.
   *
   * @since 4.6.0
   *
   * @returns {Array}
   */
  get responsiveOptions() {
    const options = [
      'position',
      'topOffset',
      'bottomOffset',
      'topLimit',
      'bottomLimit',
      'offsetSurrounding',
      'transition',
      'topOffsetModules',
      'bottomOffsetModules',
    ];

    return options;
  }

  /**
   * Update selected module / elements prop on document height change.
   *
   * @since 4.6.0
   */
  onDocumentHeightChange = () => {
    // Update Divi fixed nav height property. Divi fixed nav height change when it enters its sticky state
    // thus making it having different height when sits on top of viewport and during window scroll
    if (this.getElementProp('diviFixedPrimaryNav', 'exist', false)) {
      const getHeight = this.getElementProp('diviFixedPrimaryNav', 'getHeight');

      this.setElementProp('diviFixedPrimaryNav', 'height', getHeight());
    }

    // Update Extra's fixed height property. Extra fixed nav height changes as the window is scrolled
    if (this.getElementProp('extraFixedPrimaryNav', 'exist', false)) {
      const getExtraFixedMainHeaderHeight = this.getElementProp('extraFixedPrimaryNav', 'getHeight');

      this.setElementProp('extraFixedPrimaryNav', 'height', getExtraFixedMainHeaderHeight());
    }

    if (this.getElementProp('builderAppFramePaddingTop', 'exist', false)) {
      this.setElementHeight('builderAppFramePaddingTop');
    }
  }

  /**
   * Builder did mount listener callback.
   *
   * @since 4.6.0
   */
  onBuilderDidMount = () => {
    const stickyOnloadModuleKeys  = keys(window.et_pb_sticky_elements);
    const stickyMountedModuleKeys = keys(this.modules);

    // Has sticky elements but builder has no saved sticky module; sticky element on current
    // page is outside current builder (eg. page builder has with no sticky element saved but
    // TB header of current page has sticky element). Need to emit change to kickstart the stick
    // element initialization and generating offset modules
    if (stickyOnloadModuleKeys.length > 0 && isEqual(stickyOnloadModuleKeys, stickyMountedModuleKeys)) {
      this.onBuilderSettingsChange(undefined, true);
    }
  }

  /**
   * Builder settings change listener callback.
   *
   * @since 4.6.0
   *
   * @param {object} event
   * @param {bool}   forceUpdate
   */
  onBuilderSettingsChange = (event, forceUpdate = false) => {
    const settings = get(event, 'detail.settings');

    if (isEqual(settings, this.modules) && ! forceUpdate) {
      return;
    }

    // Update sticky settings. Removed nested sticky module (sticky inside another
    // sticky module) from the module list.
    modules = filterInvalidModules(cloneDeep(settings), modules);

    // Append saved sticky elements settings which is rendered outside of current builder
    // type because it won't be generated by current builder's components
    assign(modules, savedStickyElements);

    // Generate offset modules
    this.generateOffsetModules();

    this.emit(SETTINGS_CHANGE);
  }

  /**
   * Get id of all modules.
   *
   * @since 4.6.0
   *
   * @type {object} modules
   *
   * @returns {Array}
   */
  getModulesId = modules => map(modules, module => module.id)

  /**
   * Get modules based on its rendering position; also consider its offset surrounding setting if needed.
   *
   * @since 4.6.0
   * @param {string} top|bottom
   * @param position
   * @param offsetSurrounding
   * @param {string|bool} on|off|false When false, ignore offset surrounding value.
   * @returns {bool}
   */
  getModulesByPosition = (position, offsetSurrounding = false) => filter(modules, (module, id) => {
    // Check offset surrounding value; if param set to `false`, ignore it. If `on`|`off`, only
    // pass module that has matching value
    const isOffsetSurrounding = ! offsetSurrounding ? true : isOrHasValue(module.offsetSurrounding, offsetSurrounding);

    return includes(['top_bottom', position], this.getProp(id, 'position')) && isOffsetSurrounding;
  })

  /**
   * Sort modules from top to down based on offset prop. Passed module has no id or index prop so
   * offset which visually indicate module's position in the page will do.
   *
   * @since 4.6.0
   */
  sortModules = () => {
    const storeModules = this.modules;
    const modulesSize  = size(storeModules);

    // Return modules as-is if it is less than two modules; no need to sort it
    if (modulesSize < 2) {
      return storeModules;
    }

    // There's no index whatsoever, but offset's top and left indicates module's position
    const sortedModules = sortBy(storeModules, [
      module => module.offsets.top,
      module => module.offsets.left,
    ]);

    // sortBy returns array type value; remap id as object key
    const remappedModules = mapKeys(sortedModules, module => module.id);

    modules = cloneDeep(remappedModules);
  }

  /**
   * Set prop value.
   *
   * @since 4.6.0
   *
   * @param {string} id Need to be unique.
   * @param {string} name
   * @param {string} value
   */
  setProp = (id, name, value) => {
    // Skip updating if the id isn't exist
    if (! has(modules, id) || isUndefined(id)) {
      return;
    }

    const currentValue = this.getProp(id, name);

    // Skip updating prop if the value is the same
    if (currentValue === value) {
      return;
    }

    set(modules, `${id}.${name}`, value);
  }

  /**
   * Get prop.
   *
   * @since 4.6.0
   * @param {string} id
   * @param {string} name
   * @param {mixed} defaultValue
   * @param returnCurrentBreakpoint
   * @param {bool} return
   * @returns {mixed}
   */
  getProp = (id, name, defaultValue, returnCurrentBreakpoint = true) => {
    const value        = get(modules, `${id}.${name}`, defaultValue);
    const isResponsive = returnCurrentBreakpoint
      && isObject(value)
      && has(value, 'desktop')
      && includes(this.responsiveOptions, name);

    return isResponsive ? get(value, get(ETScriptWindowStore, 'breakpoint', 'desktop'), defaultValue) : value;
  }

  /**
   * Set known elements' props.
   *
   * @since 4.6.0
   */
  setElementsProps = () => {
    forEach(elements, (settings, name) => {
      if (! has(settings, 'window')) {
        return;
      }

      if (has(settings, 'condition') && isFunction(settings.condition) && ! settings.condition()) {
        // Reset props if it fails on condition check
        this.setElementProp(name, 'exist', get(elementsDefaults, `${name}.exist`, false));
        this.setElementProp(name, 'height', get(elementsDefaults, `${name}.height`, 0));
        return;
      }

      const currentWindow = 'top' === this.getElementProp(name, 'window') ? top_window : window;
      const $element      = currentWindow.jQuery(settings.selector);
      const hasElement    = $element.length > 0 && $element.is(':visible');

      if (hasElement) {
        this.setElementProp(name, 'exist', hasElement);

        this.setElementHeight(name);
      }
    });
  }

  /**
   * Set known element prop value.
   *
   * @since 4.6.0
   *
   * @param {string} id Need to be unique.
   * @param {string} name
   * @param {string} value
   */
  setElementProp = (id, name, value) => {
    const currentValue = this.getElementProp(id, name);

    // Skip updating prop if the value is the same
    if (currentValue === value) {
      return;
    }

    set(elements, `${id}.${name}`, value);
  }

  /**
   * Get known element prop.
   *
   * @since 4.6.0
   *
   * @param {string} id
   * @param {string} name
   * @param {mixed} defaultValue
   *
   * @returns {mixed}
   */
  getElementProp = (id, name, defaultValue) => get(elements, `${id}.${name}`, defaultValue)

  /**
   * Set element height.
   *
   * @since 4.6.0
   *
   * @param {string} name
   */
  setElementHeight = name => {
    const selector      = this.getElementProp(name, 'selector');
    const currentWindow = 'top' === this.getElementProp(name, 'window', 'app') ? top_window : window;
    const $selector     = currentWindow.jQuery(selector);

    let height = 0;

    forEach($selector, item => {
      const getHeight = this.getElementProp(name, 'getHeight', false);

      if (isFunction(getHeight)) {
        height += getHeight();
      } else {
        height += currentWindow.jQuery(item).outerHeight();
      }
    });

    this.setElementProp(name, 'height', parseInt(height));
  }

  /**
   * Generate offset modules for offset surrounding option.
   *
   * @since 4.6.0
   */
  generateOffsetModules = () => {
    // Get module's width, height, and offsets. These are needed to calculate offset module's
    // adjacent column adjustment. stickyElement will update this later on its initialization
    // This needs to be on earlier and different loop than the one below for generating offset
    // modules because in builder the modules need to be sorted from top to down first
    forEach(this.modules, (module, id) => {
      const $module       = $(this.getProp(id, 'selector'));
      const moduleWidth   = parseInt($module.outerWidth());
      const moduleHeight  = parseInt($module.outerHeight());
      const moduleOffsets = getOffsets($module, moduleWidth, moduleHeight);

      // Only update dimension props if module isn't on sticky state
      if (! this.isSticky(id)) {
        this.setProp(id, 'width', moduleWidth);
        this.setProp(id, 'height', moduleHeight);
        this.setProp(id, 'offsets', moduleOffsets);
      }

      // Set limits
      const position       = this.getProp(id, 'position', 'none');
      const isStickyBottom = includes(['bottom', 'top_bottom'], position);
      const isStickyTop    = includes(['top', 'top_bottom'], position);

      if (isStickyBottom) {
        const topLimit         = this.getProp(id, 'topLimit');
        const topLimitSettings = getLimit($module, topLimit);

        this.setProp(id, 'topLimitSettings', topLimitSettings);
      }

      if (isStickyTop) {
        const bottomLimit         = this.getProp(id, 'bottomLimit');
        const bottomLimitSettings = getLimit($module, bottomLimit);

        this.setProp(id, 'bottomLimitSettings', bottomLimitSettings);
      }
    });

    // Sort modules in builder to ensure top to bottom module order for generating offset modules
    if (isBuilder) {
      this.sortModules();
    }

    const { modules }             = this;
    const modulesSize             = size(modules);
    const topPositionModules      = this.getModulesByPosition('top', 'on');
    const topPositionModulesId    = this.getModulesId(topPositionModules);
    const bottomPositionModules   = this.getModulesByPosition('bottom', 'on');
    const bottomPositionModulesId = this.getModulesId(bottomPositionModules);

    // Capture top/bottom offsetModules updates for later loop
    const offsetModulesUpdates = [];

    forEach(modules, (module, id) => {
      if (isOrHasValue(module.offsetSurrounding, 'on')) {
        // Top position sticky: get all module id that uses top / top_bottom position +
        // has its offset surrounding turn on, that are rendered BEFORE THIS sticky element
        if (includes(['top', 'top_bottom'], this.getProp(id, 'position'))) {
          const topOffsetModuleIndex = topPositionModulesId.indexOf(id);
          const topOffsetModule      = slice(topPositionModulesId, 0, topOffsetModuleIndex);

          // Saves all top offset modules for reference. This still needs to be processed to
          // filter adjacent column later
          this.setProp(id, 'topOffsetModulesAll', topOffsetModule);

          // Mark for adjacent column filtering
          offsetModulesUpdates.push({
            prop: 'topOffsetModules',
            id,
          });
        }

        // Bottom position sticky: get all module id that uses bottom / top_bottom position +
        // has its offset surrounding turn on, that are rendered AFTER THIS sticky element
        if (includes(['bottom', 'top_bottom'], this.getProp(id, 'position'))) {
          const bottomOffsetModuleIndex = bottomPositionModulesId.indexOf(id);
          const bottomOffsetModules     = slice(bottomPositionModulesId, (bottomOffsetModuleIndex + 1), modulesSize);

          // Saves all bottom offset modules for reference. This still needs to be processed to
          // filter adjacent column later
          this.setProp(id, 'bottomOffsetModulesAll', bottomOffsetModules);

          // Mark for adjacent column filtering
          offsetModulesUpdates.push({
            prop: 'bottomOffsetModules',
            id,
          });
        }
      }
    });

    // Top / bottom offset modules adjacent column filtering
    if (offsetModulesUpdates.length > 0) {
      // Default offsets. Make sure all sides element is available
      const defaultOffsets = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      };

      // Proper limit settings based on current offset modules position
      const offsetLimitPropMaps = {
        topOffsetModules: 'bottomLimitSettings',
        bottomOffsetModules: 'topLimitSettings',
      };

      forEach(offsetModulesUpdates, update => {
        // module's id
        const moduleId = update.id;

        // Need to be defined inside offsetModulesUpdates loop so each surrounding loop starts new
        // Will be updated on every loop so next loop has reference of what is prev modules has
        const prevSurroundingOffsets = {
          ...defaultOffsets,
        };

        // Loop over module's top/bottom offset module ids
        const offsetModules = filter(this.getProp(moduleId, `${update.prop}All`), id => {
          // Modules that are defined at top/bottomOffsetModules prop which is positioned after
          // current module is referred as surrounding (modules) offset
          const surroundingOffsets = {
            ...defaultOffsets,
            ...this.getProp(id, 'offsets', {}),
          };

          // Current module's offset
          const moduleOffsets = {
            ...defaultOffsets,
            ...this.getProp(moduleId, 'offsets'),
          };

          // Module limit's offset
          const moduleLimitOffsets      = this.getProp(moduleId, `${offsetLimitPropMaps[update.prop]}.offsets`);
          const surroundingLimitOffsets = this.getProp(id, `${offsetLimitPropMaps[update.prop]}.offsets`);

          // If current and surrounding modules both have limit offsets, their top and bottom needs
          // to be put in consideration in case they will never offset each other
          if (moduleLimitOffsets && surroundingLimitOffsets) {
            if (surroundingLimitOffsets.top < moduleLimitOffsets.top || surroundingLimitOffsets.bottom > moduleLimitOffsets.bottom) {
              return false;
            }
          }

          // If module has no limits, offset from surrounding sticky elements most likely not a
          // valid offset surrounding. There is a case where surrounding can be valid offset, which
          // is when current module on sticky state between surrounding limit top and bottom.
          // However this rarely happens and requires conditional offset based on current window
          // scroll top which might be over-engineer. Thus this is kept this way until further
          // confirmation with design team
          // @todo probably add conditional offset surrounding; confirm to design team
          if (! moduleLimitOffsets && surroundingLimitOffsets) {
            return false;
          }

          // Top Offset modules (sticky position top): modules rendered before current module
          // Bottom Offset module (sticky position bottom): modules rendered after current module
          // caveat: offset modules that are not vertically aligned with current module should not
          // be considered as offset modules and affecting current module's auto-added offset.
          // Hence this filter. Initially, all offset module should affect module's auto offset
          let shouldPass = true;

          // Surrounding module is beyond current module's right side
          // ***********
          // * current *
          // ***********
          //               ***************
          //               * surrounding *
          //               ***************
          const isSurroundingBeyondCurrentRight = surroundingOffsets.left >= moduleOffsets.right;

          // Surrounding module is beyond current module's left side
          //                   ***********
          //                   * current *
          //                   ***********
          // ***************
          // * surrounding *
          // ***************
          const isSurroundingBeyondCurrentLeft = surroundingOffsets.right < moduleOffsets.left;

          // Surrounding module overlaps with current module's right side
          // ***********                  ************************
          // * current *                  *       current        *
          // ***********            OR    ************************
          //    ***************               ***************
          //    * surrounding *               * surrounding *
          //    ***************               ***************
          const isSurroundingOverlapsCurrent = surroundingOffsets.left > moduleOffsets.left && surroundingOffsets.right > moduleOffsets.left;

          // Previous surrounding module overlaps with current module's left side.
          //       ************************
          //       *       current        *
          //       ************************
          // ********************   ******************************
          // * prev surrounding *   * surrounding (on this loop) *
          // ********************   ******************************
          const isPrevSurroundingOverlapsWithCurrent = moduleOffsets.left <= prevSurroundingOffsets.right && surroundingOffsets.top < prevSurroundingOffsets.bottom;

          // Ignore surrounding height if previous surrounding height has affected current module's offset
          // See isPrevSurroundingOverlapsWithCurrent's figure above
          const isPrevSurroundingHasAffectCurrent = isSurroundingOverlapsCurrent && isPrevSurroundingOverlapsWithCurrent;

          // Ignore the surrounding's height given the following scenarios
          if (isSurroundingBeyondCurrentRight || isSurroundingBeyondCurrentLeft || isPrevSurroundingHasAffectCurrent) {
            shouldPass = false;
          }

          // Save current surrounding offsets for next surrounding offsets comparison
          assign(prevSurroundingOffsets, surroundingOffsets);

          // true: surrounding's height is considered for current module's auto offset
          // false: surrounding's height is ignored
          return shouldPass;
        });

        // Set ${top/bottom}OffsetModules prop which will be synced to stickyElement
        this.setProp(moduleId, `${update.prop}Align`, offsetModules);
      });
    }

    // Perform secondary offset module calculation. The above works by getting the first surrounding
    // sticky on the next row that affects current sticky. This works well when the row is filled
    // like a grid, but fail if there is row in between which is not vertically overlap. Thus,
    // get the closest surrounding offset sticky from last calculation, then fetch it. The idea is
    // the last surrounding sticky might have offset which is not vertically align / overlap to
    // current sticky element
    forEach(this.modules, (module, moduleId) => {
      if (module.topOffsetModulesAlign) {
        const lastTopOffsetModule = last(module.topOffsetModulesAlign);
        const pervTopOffsetModule = this.getProp(lastTopOffsetModule, 'topOffsetModules', this.getProp(lastTopOffsetModule, 'topOffsetModulesAlign', []));

        this.setProp(moduleId, 'topOffsetModules', compact([
          ...pervTopOffsetModule,
          ...[lastTopOffsetModule],
        ]));
      }

      if (module.bottomOffsetModulesAlign) {
        const firstBottomOffsetModule = head(module.bottomOffsetModulesAlign);
        const pervBottomOffsetModule  = this.getProp(firstBottomOffsetModule, 'bottomOffsetModules', this.getProp(firstBottomOffsetModule, 'bottomOffsetModulesAlign', []));

        this.setProp(moduleId, 'bottomOffsetModules', compact([
          ...[firstBottomOffsetModule],
          ...pervBottomOffsetModule,
        ]));
      }
    });
  }

  /**
   * Check if module with given id is on sticky state.
   *
   * @since 4.6.0
   *
   * @param {string} id
   *
   * @returns {bool}
   */
  isSticky = id => get(this.modules, [id, 'isSticky'], false)

  /**
   * Add listener callback for settings change event.
   *
   * @since 4.6.0
   * @param callback
   * @param {Function}
   */
  addSettingsChangeListener = callback => {
    maybeIncreaseEmitterMaxListeners(this, SETTINGS_CHANGE);
    this.on(SETTINGS_CHANGE, callback);
    return this;
  }

  /**
   * Remove listener callback for settings change event.
   *
   * @since 4.6.0
   * @param callback
   * @param {Function}
   */
  removeSettingsChangeListener = callback => {
    this.removeListener(SETTINGS_CHANGE, callback);
    maybeDecreaseEmitterMaxListeners(this, SETTINGS_CHANGE);
    return this;
  }
}

const stickyStoreInstance = new ETScriptStickyStore;

// Register store instance as component to be exposed via global object
registerFrontendComponent('stores', 'sticky', stickyStoreInstance);

// Export store instance
// IMPORTANT: For uniformity, import this as ETScriptStickyStore
export default stickyStoreInstance;