Refactor child

packages/child/check-blocking-css.js → packages/child/check/blocking-css.js

@@ -1,5 +1,5 @@
-import { AUTO } from '../common/consts'
-import { advise, log } from './console'
+import { AUTO } from '../../common/consts'
+import { advise, log } from '../console'
 
 const nodes = () => [document.documentElement, document.body]
 const properties = ['min-height', 'min-width', 'max-height', 'max-width']

packages/child/check/calculation-mode.js

@@ -0,0 +1,57 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
+import { advise, log, warn } from '../console'
+import settings from '../values/settings'
+
+const DEPRECATED_RESIZE_METHODS = {
+  bodyOffset: 1,
+  bodyScroll: 1,
+  offset: 1,
+  documentElementOffset: 1,
+  documentElementScroll: 1,
+  boundingClientRect: 1,
+  max: 1,
+  min: 1,
+  grow: 1,
+  lowestElement: 1,
+}
+
+const olderVersions = (
+  label,
+) => `set this option to <b>'auto'</> when using an older version of <i>iframe-resizer</> on the parent page. This can be done on the child page by adding the following code:
+
+window.iframeResizer = {
+license: 'xxxx',
+${label}CalculationMethod: AUTO,
+}
+`
+
+function showDeprecationWarning(label, calcMode) {
+  const actionMsg = settings.version
+    ? 'remove this option.'
+    : olderVersions(label)
+
+  advise(
+    `<rb>Deprecated ${label}CalculationMethod (${calcMode})</>
+
+This version of <i>iframe-resizer</> can auto detect the most suitable ${label} calculation method. It is recommended that you ${actionMsg}
+`,
+  )
+}
+
+export default function checkCalcMode(calcMode, calcModeDefault, modes) {
+  const { label } = modes
+
+  if (calcModeDefault !== calcMode) {
+    if (!(calcMode in modes)) {
+      warn(`${calcMode} is not a valid option for ${label}CalculationMethod.`)
+      calcMode = calcModeDefault
+    }
+
+    if (calcMode in DEPRECATED_RESIZE_METHODS)
+      showDeprecationWarning(label, calcMode)
+  }
+
+  log(`Set ${label} calculation method: %c${calcMode}`, HIGHLIGHT)
+  return calcMode
+}

packages/child/check/cross-domain.js

@@ -0,0 +1,12 @@
+import { log } from '../console'
+import settings from '../values/settings'
+import state from '../values/state'
+
+export default function checkCrossDomain() {
+  try {
+    state.sameOrigin =
+      settings.mode === 1 || 'iframeParentListener' in window.parent
+  } catch (error) {
+    log('Cross domain iframe detected')
+  }
+}

packages/child/check/deprecated-attributes.js

@@ -0,0 +1,22 @@
+import { SIZE_ATTR } from '../../common/consts'
+import { advise } from '../console'
+
+const DEPRECATED = `<rb>Deprecated Attributes</>
+
+The <b>data-iframe-height</> and <b>data-iframe-width</> attributes have been deprecated and replaced with the single <b>data-iframe-size</> attribute. Use of the old attributes will be removed in a future version of <i>iframe-resizer</>.`
+
+export default function checkDeprecatedAttrs() {
+  let found = false
+
+  const checkAttrs = (attr) =>
+    document.querySelectorAll(`[${attr}]`).forEach((el) => {
+      el.toggleAttribute(SIZE_ATTR, true)
+      el.removeAttribute(attr)
+      found = true
+    })
+
+  checkAttrs('data-iframe-height')
+  checkAttrs('data-iframe-width')
+
+  if (found) advise(DEPRECATED)
+}

packages/child/check/ignored-elements.js

@@ -0,0 +1,30 @@
+import { BOLD, NORMAL } from 'auto-console-group'
+
+import { IGNORE_ATTR } from '../../common/consts'
+import { warn } from '../console'
+
+let ignoredElementsCount = 0
+
+function warnIgnored(ignoredElements) {
+  const s = ignoredElements.length === 1 ? '' : 's'
+
+  warn(
+    `%c[${IGNORE_ATTR}]%c found on %c${ignoredElements.length}%c element${s}`,
+    BOLD,
+    NORMAL,
+    BOLD,
+    NORMAL,
+  )
+}
+
+export default function checkIgnoredElements() {
+  const ignoredElements = document.querySelectorAll(`*[${IGNORE_ATTR}]`)
+  const hasIgnored = ignoredElements.length > 0
+
+  if (hasIgnored && ignoredElements.length !== ignoredElementsCount) {
+    warnIgnored(ignoredElements)
+    ignoredElementsCount = ignoredElements.length
+  }
+
+  return hasIgnored
+}

packages/child/check/mode.js

@@ -0,0 +1,26 @@
+import { VERSION } from '../../common/consts'
+import setMode, { getModeData, getModeLabel } from '../../common/mode'
+import { isDef } from '../../common/utils'
+import { advise, log, purge, vInfo } from '../console'
+import settings from '../values/settings'
+
+export default function ({ key, key2, mode, version }) {
+  const oMode = mode
+  const pMode = setMode({ key })
+  const cMode = setMode({ key2 })
+  // eslint-disable-next-line no-multi-assign
+  settings.mode = mode = Math.max(pMode, cMode)
+  log('Final mode set to:', getModeLabel(mode))
+  if (mode < 0) {
+    mode = Math.min(pMode, cMode)
+    purge()
+    advise(`${getModeData(mode + 2)}${getModeData(2)}`)
+    if (isDef(version))
+      throw getModeData(mode + 2).replace(/<\/?[a-z][^>]*>|<\/>/gi, '')
+  } else if (!isDef(version) || (oMode > -1 && mode > oMode)) {
+    if (sessionStorage.getItem('ifr') !== VERSION)
+      vInfo(`v${VERSION} (${getModeLabel(mode)})`, mode)
+    if (mode < 2) advise(getModeData(3))
+    sessionStorage.setItem('ifr', VERSION)
+  }
+}

packages/child/check/overflow.js

@@ -0,0 +1,46 @@
+import { FUNCTION, IGNORE_ATTR, OVERFLOW_ATTR } from '../../common/consts'
+import { endAutoGroup, event as consoleEvent, info } from '../console'
+import state from '../values/state'
+
+let prevOverflowedNodeSet = new Set()
+
+export function filterIgnoredElements(nodeList) {
+  const filteredNodeSet = new Set()
+  const ignoredNodeSet = new Set()
+
+  for (const node of nodeList) {
+    if (node.closest(`[${IGNORE_ATTR}]`)) {
+      ignoredNodeSet.add(node)
+    } else {
+      filteredNodeSet.add(node)
+    }
+  }
+
+  if (ignoredNodeSet.size > 0) {
+    queueMicrotask(() => {
+      consoleEvent('overflowIgnored')
+      info(`Ignoring elements with [data-iframe-ignore] > *:\n`, ignoredNodeSet)
+      endAutoGroup()
+    })
+  }
+
+  return filteredNodeSet
+}
+
+export default function checkOverflow() {
+  const allOverflowedNodes = document.querySelectorAll(`[${OVERFLOW_ATTR}]`)
+  const overflowedNodeSet = filterIgnoredElements(allOverflowedNodes)
+  let hasOverflowUpdated = false
+
+  // Not supported in Safari 16 (or esLint!!!)
+  // eslint-disable-next-line no-use-extend-native/no-use-extend-native
+  if (typeof Set.prototype.symmetricDifference === FUNCTION)
+    hasOverflowUpdated =
+      overflowedNodeSet.symmetricDifference(prevOverflowedNodeSet).size > 0
+
+  prevOverflowedNodeSet = overflowedNodeSet
+  state.overflowedNodeSet = overflowedNodeSet
+  state.hasOverflow = overflowedNodeSet.size > 0
+
+  return { hasOverflowUpdated, overflowedNodeSet }
+}

packages/child/check/quirks-mode.js

@@ -0,0 +1,15 @@
+import { advise } from '../console'
+
+const QUIRKS_MODE = 'BackCompat'
+
+const DEPRECATED = `<rb>Quirks Mode Detected</>
+
+This iframe is running in the browser's legacy <b>Quirks Mode</>, this may cause issues with the correct operation of <i>iframe-resizer</>. It is recommended that you switch to the modern <b>Standards Mode</>.
+
+For more information see <u>https://iframe-resizer.com/quirks-mode</>.
+`
+
+export default function checkQuirksMode() {
+  if (document.compatMode !== QUIRKS_MODE) return
+  advise(DEPRECATED)
+}

packages/child/check/ready.js

@@ -0,0 +1,15 @@
+import { READY_STATE_CHANGE } from '../../common/consts'
+import { isolateUserCode } from '../../common/utils'
+import { addEventListener } from '../events/listeners'
+
+const COMPLETE = 'complete'
+let readyChecked = false
+
+export default function checkReadyYet(readyCallback) {
+  if (document.readyState === COMPLETE) isolateUserCode(readyCallback)
+  else if (!readyChecked)
+    addEventListener(document, READY_STATE_CHANGE, () =>
+      checkReadyYet(readyCallback),
+    )
+  readyChecked = true
+}

packages/child/check/tolerance.js

@@ -0,0 +1,3 @@
+import settings from '../values/settings'
+
+export default (a, b) => !(Math.abs(a - b) <= settings.tolerance)

packages/child/check/version.js

@@ -0,0 +1,24 @@
+import { FALSE, VERSION } from '../../common/consts'
+import { advise } from '../console'
+
+const LEGACY = `<rb>Legacy version detected on parent page</>
+
+Detected legacy version of parent page script. It is recommended to update the parent page to use <b>@iframe-resizer/parent</>.
+
+See <u>https://iframe-resizer.com/setup/</> for more details.
+`
+
+const mismatch = (version) => `<b>Version mismatch</>
+
+The parent and child pages are running different versions of <i>iframe resizer</>.
+
+Parent page: ${version} - Child page: ${VERSION}.
+`
+
+export default function checkVersion({ version }) {
+  if (!version || version === '' || version === FALSE) {
+    advise(LEGACY)
+  } else if (version !== VERSION) {
+    advise(mismatch(version))
+  }
+}

packages/child/listeners.js → packages/child/events/listeners.js

@@ -1,6 +1,6 @@
 import { HIGHLIGHT } from 'auto-console-group'
 
-import { log } from './console'
+import { log } from '../console'
 
 export const tearDownList = []
 

packages/child/events/mouse.js

@@ -0,0 +1,21 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
+import { MOUSE_ENTER, MOUSE_LEAVE } from '../../common/consts'
+import { log } from '../console'
+import sendMessage from '../send/message'
+import { addEventListener } from './listeners'
+
+const sendMouse = (evt) =>
+  sendMessage(0, 0, evt.type, `${evt.screenY}:${evt.screenX}`)
+
+function addMouseListener(evt, name) {
+  log(`Add event listener: %c${name}`, HIGHLIGHT)
+  addEventListener(window.document, evt, sendMouse)
+}
+
+export default function setupMouseEvents({ mouseEvents }) {
+  if (mouseEvents !== true) return
+
+  addMouseListener(MOUSE_ENTER, 'Mouse Enter')
+  addMouseListener(MOUSE_LEAVE, 'Mouse Leave')
+}

packages/child/events/ready.js

@@ -0,0 +1,33 @@
+import { FOREGROUND, HIGHLIGHT } from 'auto-console-group'
+
+import { CHILD_READY_MESSAGE } from '../../common/consts'
+import { event as consoleEvent, log } from '../console'
+import state from '../values/state'
+
+// Normally the parent kicks things off when it detects the iframe has loaded.
+// If this script is async-loaded, then tell parent page to retry init.
+let sent = false
+const sendReady = (target) =>
+  target.postMessage(
+    CHILD_READY_MESSAGE,
+    window?.iframeResizer?.targetOrigin || '*',
+  )
+
+export default function ready() {
+  if (document.readyState === 'loading' || !state.firstRun || sent) return
+
+  const { parent, top } = window
+
+  consoleEvent('ready')
+  log(
+    'Sending%c ready%c to parent from',
+    HIGHLIGHT,
+    FOREGROUND,
+    window.location.href,
+  )
+
+  sendReady(parent)
+  if (parent !== top) sendReady(top)
+
+  sent = true
+}