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/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/mode.js

@@ -0,0 +1,25 @@
+import { VERSION } from '../../common/consts'
+import setMode, { getModeData, getModeLabel } from '../../common/mode'
+import { isDef } from '../../common/utils'
+import { advise, 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({ key: key2 })
+  // eslint-disable-next-line no-multi-assign
+  settings.mode = mode = Math.max(pMode, cMode)
+  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/quirks-mode.js

@@ -0,0 +1,14 @@
+import { advise } from '../console'
+
+export default function checkQuirksMode() {
+  if (document.compatMode !== 'BackCompat') return
+
+  advise(
+    `<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</>.
+`,
+  )
+}

packages/child/check/ready.js

@@ -0,0 +1,15 @@
+import { READY_STATE_CHANGE } from '../../common/consts'
+import { isolateUserCode } from '../../common/utils'
+import { addEventListener } from '../page/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/version.js

@@ -0,0 +1,27 @@
+import { FALSE, VERSION } from '../../common/consts'
+import { advise } from '../console'
+
+export default function checkVersion({ version }) {
+  if (!version || version === '' || version === FALSE) {
+    advise(
+      `<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.
+`,
+    )
+    return
+  }
+
+  if (version !== VERSION) {
+    advise(
+      `<b>Version mismatch</>
+
+The parent and child pages are running different versions of <i>iframe resizer</>.
+
+Parent page: ${version} - Child page: ${VERSION}.
+`,
+    )
+  }
+}