This repository has been archived on 2022-06-23. You can view files and clone it, but cannot push or open issues or pull requests.
divi/includes/builder/scripts/stores/window.js

756 lines
20 KiB
JavaScript
Raw Normal View History

2021-12-07 11:08:05 +00:00
// External dependencies
import { EventEmitter } from 'events';
import forEach from 'lodash/forEach';
import get from 'lodash/get';
import includes from 'lodash/includes';
import isEqual from 'lodash/isEqual';
import $ from 'jquery';
// Internal dependencies
import { top_window } from '@core-ui/utils/frame-helpers';
import ETScriptStickyStore from './sticky';
import {
getContentAreaSelector,
getTemplateEditorIframe,
} from '../../frontend-builder/gutenberg/utils/selectors';
import { isTemplateEditor } from '../../frontend-builder/gutenberg/utils/conditionals';
import {
getBuilderUtilsParams,
isBFB,
isExtraTheme,
isFE,
isLBB,
isLBP,
isTB,
isVB,
maybeDecreaseEmitterMaxListeners,
maybeIncreaseEmitterMaxListeners,
registerFrontendComponent,
} from '../utils/utils';
// Builder window
const $window = $(window);
const $topWindow = top_window.jQuery(top_window);
const hasTopWindow = ! isEqual(window, top_window);
const windowLocations = hasTopWindow ? ['app', 'top'] : ['app'];
// Event Constants
const HEIGHT_CHANGE = 'height_change';
const WIDTH_CHANGE = 'width_change';
const SCROLL_TOP_CHANGE = 'scroll_top_change';
const BREAKPOINT_CHANGE = 'breakpoint_change';
const SCROLL_LOCATION_CHANGE = 'scroll_location_change';
const VERTICAL_SCROLL_BAR_CHANGE = 'vertical_scroll_bar_change';
// States.
// Private, limited to this module (ETScriptWindowStore class) only
const states = {
breakpoint: 'desktop',
extraMobileBreakpoint: false,
isBuilderZoomed: false,
scrollLocation: getBuilderUtilsParams().onloadScrollLocation, // app|top
scrollTop: {
app: 0,
top: 0,
},
height: {
app: 0,
top: 0,
},
width: {
app: 0,
top: 0,
},
bfbIframeOffset: {
top: 0,
left: 0,
},
lbpIframeOffset: {
top: 0,
left: 0,
},
verticalScrollBar: {
app: 0,
top: 0,
},
};
// Valid values.
// Retrieved from server, used for validating values
const validValues = {
scrollLocation: [...getBuilderUtilsParams().scrollLocations],
};
// Variables
const builderScrollLocations = {
...getBuilderUtilsParams().builderScrollLocations,
};
// @todo need to change how this works since builder already have et_screen_sizes(), unless
// we prefer to add another breakpoint functions
const deviceMinimumBreakpoints = {
desktop: 980,
tablet: 767,
phone: 0,
};
const bfbFrameId = '#et-bfb-app-frame';
/**
* Window store.
*
* This store listen to direct window's events; builder callback listen to this store's events
* to avoid dom-based calculation whenever possible; use the property passed by this store.
*
* @since 4.6.0
*/
class ETScriptWindowStore extends EventEmitter {
/**
* ETScriptWindowStore constructor.
*
* @since 4.6.0
*/
constructor() {
super();
// Set app window onload values
const windowWidth = $window.innerWidth();
const windowHeight = $window.innerHeight();
const windowScrollTop = $window.scrollTop();
this.setWidth('app', windowWidth).setHeight('app', windowHeight);
this.setScrollTop('app', windowScrollTop);
this.setVerticalScrollBarWidth('app', (window.outerWidth - windowWidth));
// Set top window onload values (if top window exist)
if (hasTopWindow) {
const topWindowWidth = $topWindow.innerWidth();
const topWindowHeight = $topWindow.innerHeight();
const topWindowScrollTop = top_window.jQuery(top_window).scrollTop();
this.setWidth('top', topWindowWidth).setHeight('top', topWindowHeight);
this.setScrollTop('top', topWindowScrollTop);
this.setVerticalScrollBarWidth('top', (top_window.outerWidth - topWindowWidth));
}
// Set iframe offset
if (isBFB) {
this.setBfbIframeOffset();
}
// Set Layout Block iframe offset
if (isLBP) {
this.setLayoutBlockPreviewIframeOffset();
}
}
/**
* Set window height.
*
* @since 4.6.0
*
* @param {string} windowLocation App|top.
* @param {number} height
*
* @returns {Window}
*/
setHeight = (windowLocation = 'app', height) => {
if (height === states.height[windowLocation]) {
return this;
}
states.height[windowLocation] = height;
this.emit(HEIGHT_CHANGE);
return this;
};
/**
* Set window width.
*
* @since 4.6.0
*
* @param {string} windowLocation App|top.
* @param {number} width
*
* @returns {Window}
*/
setWidth = (windowLocation = 'app', width) => {
if (width === states.width[windowLocation]) {
return this;
}
// Only app window could set breakpoint
if ('app' === windowLocation) {
this.setBreakpoint(width);
// Extra theme has its own "mobile breakpoint" (below 1024px)
if (isExtraTheme) {
const outerWidth = this.width + this.verticalScrollBar;
const extraMobileBreakpoint = 1024;
const fixedNavActivation = ! states.extraMobileBreakpoint && outerWidth >= extraMobileBreakpoint;
const fixedNavDeactivation = states.extraMobileBreakpoint && outerWidth < extraMobileBreakpoint;
// Re-set element props when Extra mobile breakpoint change happens
if (fixedNavActivation || fixedNavDeactivation) {
states.extraMobileBreakpoint = (outerWidth >= extraMobileBreakpoint);
ETScriptStickyStore.setElementsProps();
}
}
}
states.width[windowLocation] = width;
this.emit(WIDTH_CHANGE);
return this;
};
/**
* Set scroll location value.
*
* @since 4.6.0
*
* @param {string} scrollLocation App|top.
*
* @returns {ETScriptWindowStore}
*/
setScrollLocation = scrollLocation => {
// Prevent incorrect scroll location value from being saved
if (! includes(validValues.scrollLocation, scrollLocation)) {
return false;
}
if (scrollLocation === states.scrollLocation) {
return this;
}
states.scrollLocation = scrollLocation;
this.emit(SCROLL_LOCATION_CHANGE);
return this;
}
/**
* Set scroll top value.
*
* @since 4.6.0
*
* @param {string} windowLocation App|top.
* @param {number} scrollTop
*
* @returns {ETScriptWindowStore}
*/
setScrollTop = (windowLocation, scrollTop) => {
if (scrollTop === states.scrollTop[windowLocation]) {
return this;
}
states.scrollTop[windowLocation] = scrollTop;
this.emit(SCROLL_TOP_CHANGE);
return this;
}
/**
* Set builder zoomed status (on builder only).
*
* @since 4.6.0
*
* @param {string} builderPreviewMode Desktop|tablet|phone|zoom|wireframe.
*/
setBuilderZoomedStatus = builderPreviewMode => {
const isBuilderZoomed = 'zoom' === builderPreviewMode;
states.isBuilderZoomed = isBuilderZoomed;
}
/**
* Set BFB iframe offset.
*
* @since 4.6.0
*/
setBfbIframeOffset = () => {
states.bfbIframeOffset = top_window.jQuery(bfbFrameId).offset();
}
/**
* Set Layout Block iframe offset.
*
* @since 4.6.0
*/
setLayoutBlockPreviewIframeOffset = () => {
const blockId = get(window.ETBlockLayoutModulesScript, 'blockId', '');
const previewIframeId = `#divi-layout-iframe-${blockId}`;
const $block = top_window.jQuery(previewIframeId).closest('.wp-block[data-type="divi/layout"]');
const blockPosition = $block.position();
const contentSelectors = [
// WordPress 5.4
'block-editor-editor-skeleton__content',
// WordPress 5.5
'interface-interface-skeleton__content',
];
let blockOffsetTop = parseInt(get(blockPosition, 'top', 0));
// Since WordPress 5.4, blocks list position to its parent somehow is not considered
// Previous inserted DOM are also gone + Block item now has collapsing margin top/bottom
// These needs to be manually calculated here since the result is no longer identical
if (includes(contentSelectors, getContentAreaSelector(top_window, false))) {
// Find Block List Layout. By default, it's located on editor of top window.
// When Template Editor is active, it's "moved" to editor of iframe window.
const $blockEditorLayout = isTemplateEditor() ? getTemplateEditorIframe(top_window).find('.block-editor-block-list__layout.is-root-container') : top_window.jQuery('.block-editor-block-list__layout');
// Blocks list position to its parent (title + content wrapper)
// WordPress 5.4 = 183px
// WordPress 5.5 = 161px
if ($blockEditorLayout.length) {
blockOffsetTop += $blockEditorLayout.position().top;
}
// Compensating collapsing block item margin top
blockOffsetTop += parseInt($block.css('marginTop')) || 0;
}
// Admin bar in less than 600 width window uses absolute positioning which stays on top of
// document and affecting iframe top offset
if (600 > this.width && ETScriptStickyStore.getElementProp('wpAdminBar', 'exist', false)) {
blockOffsetTop += ETScriptStickyStore.getElementProp('wpAdminBar', 'height', 0);
}
states.lbpIframeOffset.top = blockOffsetTop;
}
/**
* Set vertical scrollbar width.
*
* @since 4.6.0
*
* @param {string} windowLocation
* @param {number} width
*/
setVerticalScrollBarWidth = (windowLocation = 'app', width) => {
if (width === states.verticalScrollBar[windowLocation]) {
return this;
}
states.verticalScrollBar[windowLocation] = width;
this.emit(VERTICAL_SCROLL_BAR_CHANGE);
return this;
}
/**
* Get current window width.
*
* @since 4.6.0
*
* @returns {number}
*/
get width() {
return states.width[this.scrollLocation];
}
/**
* Get current window height.
*
* @since 4.6.0
*
* @returns {number}
*/
get height() {
return states.height[this.scrollLocation];
}
/**
* Get current window scroll location.
*
* @since 4.6.0
*
* @returns {string} App|top.
*/
get scrollLocation() {
return states.scrollLocation;
}
/**
* Get current window scroll top / distance to document.
*
* @since 4.6.0
*
* @returns {number}
*/
get scrollTop() {
const multiplier = this.isBuilderZoomed ? 2 : 1;
let appFrameOffset = 0;
// Add app iframe offset on scrollTop calculation in BFB
if (isBFB) {
appFrameOffset += states.bfbIframeOffset.top;
}
// Add Layout Block preview iframe on scrollTop calculation
if (isLBP) {
appFrameOffset += states.lbpIframeOffset.top;
}
return (states.scrollTop[this.scrollLocation] - appFrameOffset) * multiplier;
}
/**
* Get current app window breakpoint (by device).
*
* @since 4.6.0
*
* @returns {string}
*/
get breakpoint() {
return states.breakpoint;
}
/**
* Get builder zoomed status.
*
* @since 4.6.0
*
* @returns {bool}
*/
get isBuilderZoomed() {
return states.isBuilderZoomed;
}
/**
* Get current window vertical scrollbar width.
*
* @since 4.6.0
*
* @returns {number}
*/
get verticalScrollBar() {
return states.verticalScrollBar[this.scrollLocation];
}
/**
* Get builder scroll location of builder context + preview mode.
*
* @since 4.6.0
*
* @param {string} previewMode Desktop|tablet|phone|zoom|wireframe.
*
* @returns {string} App|top.
*/
getBuilderScrollLocation = previewMode => get(builderScrollLocations, previewMode, 'app')
/**
* Add width change event listener.
*
* @since 4.6.0
*
* @param {Function} callback
*
* @returns {Window}
*/
addWidthChangeListener = callback => {
maybeIncreaseEmitterMaxListeners(this, WIDTH_CHANGE);
this.on(WIDTH_CHANGE, callback);
return this;
};
/**
* Remove width change event listener.
*
* @since 4.6.0
*
* @param {Function} callback
*
* @returns {Window}
*/
removeWidthChangeListener = callback => {
this.removeListener(WIDTH_CHANGE, callback);
maybeDecreaseEmitterMaxListeners(this, WIDTH_CHANGE);
return this;
};
/**
* Add height change event listener.
*
* @since 4.6.0
*
* @param {Function} callback
*
* @returns {Window}
*/
addHeightChangeListener = callback => {
maybeIncreaseEmitterMaxListeners(this, HEIGHT_CHANGE);
this.on(HEIGHT_CHANGE, callback);
return this;
};
/**
* Remove height change event listener.
*
* @since 4.6.0
*
* @param {Function} callback
*
* @returns {Window}
*/
removeHeightChangeListener = callback => {
this.removeListener(HEIGHT_CHANGE, callback);
maybeDecreaseEmitterMaxListeners(this, HEIGHT_CHANGE);
return this;
};
/**
* Add scroll location change event listener.
*
* @param callback
* @since 4.6.0
* @returns {ETScriptWindowStore}
*/
addScrollLocationChangeListener = callback => {
maybeIncreaseEmitterMaxListeners(this, SCROLL_LOCATION_CHANGE);
this.on(SCROLL_LOCATION_CHANGE, callback);
return this;
}
/**
* Remove scroll location change event listener.
*
* @param callback
* @since 4.6.0
* @returns {ETScriptWindowStore}
*/
removeScrollLocationChangeListener = callback => {
this.removeListener(SCROLL_LOCATION_CHANGE, callback);
maybeDecreaseEmitterMaxListeners(this, SCROLL_LOCATION_CHANGE);
return this;
}
/**
* Add scroll top change event listener.
*
* @param callback
* @since 4.6.0
* @returns {ETScriptWindowStore}
*/
addScrollTopChangeListener = callback => {
maybeIncreaseEmitterMaxListeners(this, SCROLL_TOP_CHANGE);
this.on(SCROLL_TOP_CHANGE, callback);
return this;
}
/**
* Remove scroll top change event listener.
*
* @param callback
* @since 4.6.0
* @returns {ETScriptWindowStore}
*/
removeScrollTopChangeListener = callback => {
this.removeListener(SCROLL_TOP_CHANGE, callback);
maybeDecreaseEmitterMaxListeners(this, SCROLL_TOP_CHANGE);
return this;
}
/**
* Set breakpoint (by device) based on window width.
*
* @since 4.6.0
*
* @todo Update breakpoint setting mechanic so this won't need to define another screen size definition
* and able to reuse (et_screen_size()).
*
* @param {number} windowWidth
*
* @returns {ETScriptWindowStore}
*/
setBreakpoint = windowWidth => {
let newBreakpoint = '';
forEach(deviceMinimumBreakpoints, (minWidth, device) => {
if (windowWidth > minWidth) {
newBreakpoint = device;
// equals to "break"
return false;
}
});
// No need to update breakpoint property if it is unchanged
if (this.breakpoint === newBreakpoint) {
return;
}
states.breakpoint = newBreakpoint;
this.emit(BREAKPOINT_CHANGE);
return this;
}
/**
* Add breakpoint change event listener.
*
* @since 4.6.0
*
* @param {Function} callback
*/
addBreakpointChangeListener = callback => {
maybeIncreaseEmitterMaxListeners(this, BREAKPOINT_CHANGE);
this.on(BREAKPOINT_CHANGE, callback);
return this;
}
/**
* Remove breakpoint change event listener.
*
* @since 4.6.0
*
* @param {Function} callback
*/
removeBreakpointChangeListener = callback => {
this.removeListener(BREAKPOINT_CHANGE, callback);
maybeDecreaseEmitterMaxListeners(this, BREAKPOINT_CHANGE);
return this;
}
}
// initiate window store instance
const windowStoreInstance = new ETScriptWindowStore();
/**
* Listen for (app/top) window events, and update store's value
* store is listener free; it only hold / set / get values.
*/
forEach(windowLocations, windowLocation => {
const isTop = 'top' === windowLocation;
const isApp = 'app' === windowLocation;
const currentWindow = isApp ? window : top_window;
const $currentWindow = currentWindow.jQuery(currentWindow);
// Scroll in Theme Builder & Layout Block Builder happens on element; adjustment needed
// const scrollWindow = isTop && (isTB || isLBB) ? currentWindow.document.getElementById('et-fb-app') : currentWindow;
const scrollWindow = () => {
// Theme Builder & Layout Block Builder
if (isTop && (isTB || isLBB)) {
return currentWindow.document.getElementById('et-fb-app');
}
// Layout Block Preview / Gutenberg
if (isTop && isLBP) {
return currentWindow.document.getElementsByClassName(getContentAreaSelector(currentWindow, false))[0];
}
return currentWindow;
};
// listen to current (app/top) window resize event
currentWindow.addEventListener('resize', () => {
const width = currentWindow.jQuery(currentWindow).innerWidth();
const height = currentWindow.jQuery(currentWindow).innerHeight();
windowStoreInstance.setWidth(windowLocation, width).setHeight(windowLocation, height);
windowStoreInstance.setVerticalScrollBarWidth(windowLocation, (currentWindow.outerWidth - width));
if ((windowStoreInstance.width > 782 && height <= 782) || (windowStoreInstance.width <= 782 && height > 782)) {
// Wait until admin bar's viewport style kicks in
setTimeout(() => {
ETScriptStickyStore.setElementHeight('wpAdminBar');
windowStoreInstance.emit(SCROLL_TOP_CHANGE);
}, 300);
}
});
// listen to current (app/top) window scroll event
scrollWindow().addEventListener('scroll', () => {
const scrollTop = isTop && (isTB || isLBB || isLBP) ? scrollWindow().scrollTop : scrollWindow().pageYOffset;
windowStoreInstance.setScrollTop(windowLocation, scrollTop);
});
// Top window listener only
if (isTop) {
// Listen to builder's preview mode change that is passed via top window event
$currentWindow.on('et_fb_preview_mode_changed', (event, screenMode, builderMode) => {
const scrollLocation = windowStoreInstance.getBuilderScrollLocation(builderMode);
windowStoreInstance.setBuilderZoomedStatus(builderMode);
windowStoreInstance.setScrollLocation(scrollLocation);
});
// Update iframe offset if any metabox is moved
if (isBFB) {
currentWindow.addEventListener('ETBFBMetaboxSortStopped', () => {
windowStoreInstance.setBfbIframeOffset();
});
}
// Gutenberg moves the scroll back to window if window's width is less than 600px
if (isLBP) {
currentWindow.addEventListener('scroll', () => {
if (windowStoreInstance.width > 600) {
return;
}
const scrollTop = currentWindow.pageYOffset;
windowStoreInstance.setScrollTop(windowLocation, scrollTop);
});
}
// When scroll is located on top window, there is a chance that the top window actually scrolls
// before the builder is loaded which means initial scroll top value actually has changed
// to avoid issue caused by it, when app window that carries this script is loaded, trigger
// scroll event on the top window's scrolling element
scrollWindow().dispatchEvent(new CustomEvent('scroll'));
}
// App window listener only
if (isApp) {
// Update known element props when breakpoint changes. Breakpoint change is basically less
// aggressive resize event, happened between known window's width
if (isFE || isVB) {
windowStoreInstance.addBreakpointChangeListener(() => {
ETScriptStickyStore.setElementsProps();
});
}
// Update iframe offset if layout block is moved
if (isLBP) {
currentWindow.addEventListener('ETBlockGbBlockOrderChange', () => {
// Need to wait at least 300ms until GB animation is done
setTimeout(() => {
windowStoreInstance.setLayoutBlockPreviewIframeOffset();
windowStoreInstance.emit(SCROLL_TOP_CHANGE);
}, 300);
});
// Update iframe offset if notice size is changed
currentWindow.addEventListener('ETGBNoticeSizeChange', () => {
if (ETScriptStickyStore.getElementProp('gbComponentsNoticeList', 'exist', false)) {
ETScriptStickyStore.setElementHeight('gbComponentsNoticeList');
windowStoreInstance.emit(SCROLL_TOP_CHANGE);
}
});
}
}
});
// Register store instance as component to be exposed via global object
registerFrontendComponent('stores', 'window', windowStoreInstance);
// Export store instance
// IMPORTANT: For uniformity, import this as ETScriptWindowStore
export default windowStoreInstance;