@formidable-webview/webshell/lib/commonjs/features/HandleHTMLDimensionsFeature.js

🔥 Craft Robust React Native WebView-based components with ease.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HandleHTMLDimensionsFeature = void 0;

var _FeatureBuilder = _interopRequireDefault(require("../FeatureBuilder"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/* babel-plugin-inline-import './HandleHTMLDimensionsFeature.webjs' */
var script = "function HandleHTMLDimensionsFeature(context) {\n  var options = context.options || {};\n  var forceImplementation = options.forceImplementation || false;\n  var listenToWindowResizeEvent =\n    options.listenToWindowResizeEvent === false ? false : true;\n  var pollingInterval =\n    typeof options.pollingInterval === 'number' ? options.pollingInterval : 200;\n  var deltaMin = options.deltaMin || 0;\n  var oldDimensions = {\n    layoutViewport: { width: 0, height: 0 },\n    content: { width: 0, height: 0 }\n  };\n  var MutationObserver =\n    window['MutationObserver'] || window['WebKitMutationObserver'];\n  function extractNumericValue(pixelString) {\n    return pixelString ? parseFloat(pixelString.match(/[\\d.]+/)) : 0;\n  }\n  function dimensionsAreEqual(d1, d2) {\n    return (\n      Math.abs(d1.layoutViewport.width - d2.layoutViewport.width) < deltaMin &&\n      Math.abs(d1.layoutViewport.height - d2.layoutViewport.height) <\n        deltaMin &&\n      Math.abs(d1.content.width - d2.content.width) < deltaMin &&\n      Math.abs(d1.content.height - d2.content.height) < deltaMin &&\n      d1.implementation === d2.implementation\n    );\n  }\n  function createPostDimensions(implementation) {\n    return context.makeCallbackSafe(function postSize() {\n      var bodyStyle = getComputedStyle(document.body);\n      var bodySize = document.body.getBoundingClientRect();\n      var marginRight = extractNumericValue(bodyStyle.marginRight);\n      var marginBottom = extractNumericValue(bodyStyle.marginBottom);\n      var layoutViewport = {\n        width: document.documentElement.clientWidth,\n        height: document.documentElement.clientHeight\n      };\n      var dimensions = {\n        implementation: implementation,\n        layoutViewport: layoutViewport,\n        content: {\n          width: bodySize.right + marginRight,\n          height: bodySize.bottom + marginBottom\n        }\n      };\n      if (!dimensionsAreEqual(oldDimensions, dimensions)) {\n        context.postMessageToShell(dimensions);\n        oldDimensions = dimensions;\n      }\n    });\n  }\n  if (\n    window.ResizeObserver &&\n    (forceImplementation === false || forceImplementation === 'resize')\n  ) {\n    // resize mode\n    var resizePostDimensions = createPostDimensions('resize');\n    var resizeObserver = new window.ResizeObserver(resizePostDimensions);\n    resizeObserver.observe(document.body);\n    resizePostDimensions();\n  } else if (\n    MutationObserver &&\n    (forceImplementation === false || forceImplementation === 'mutation')\n  ) {\n    // mutation mode\n    var observerPostDimensions = createPostDimensions('mutation');\n    if (listenToWindowResizeEvent) {\n      window.addEventListener('resize', observerPostDimensions);\n    }\n    var observer = new MutationObserver(observerPostDimensions);\n    observer.observe(document, {\n      subtree: true,\n      attributes: true\n    });\n    observerPostDimensions();\n  } else {\n    // polling mode\n    var pollingPostDimensions = createPostDimensions('polling');\n    if (listenToWindowResizeEvent) {\n      window.addEventListener('resize', pollingPostDimensions);\n    }\n    setInterval(pollingPostDimensions, pollingInterval);\n    pollingPostDimensions();\n    forceImplementation !== 'polling' &&\n      context.warn(\n        \"This browser doesn't support either MutationObserver or ResizeObserver.\" +\n          'The dimensions will still be read every ' +\n          pollingInterval +\n          'ms and committed when a change is observed.'\n      );\n  }\n}\n";
var defaultOptions = {
  deltaMin: 0,
  forceImplementation: false,
  pollingInterval: 200,
  listenToWindowResizeEvent: true
};
/**
 * This feature provides `onDOMHTMLDimensions` prop with {@link HTMLDimensions} payloads.
 * It enables receiving various dimensions relative to the layout when a change
 * is observed to either the layout or the content size. The feature can be customized with
 * {@link HandleHTMLDimensionsOptions}.
 * See {@link https://formidable-webview.github.io/webshell//docs/getting-started#minimal-example | this guide for an example}.
 *
 * @remarks
 * If you need to guarantee that 1 CSS pixel = 1 Device pixel, you should use this
 * feature with a meta tag viewport setting width to device width.
 * See {@link ForceResponsiveViewportFeature}
 *
 * @public
 */

var HandleHTMLDimensionsFeature = new _FeatureBuilder["default"]({
  script: script,
  defaultOptions: defaultOptions,
  identifier: 'org.formidable-webview/webshell.handle-html-dimensions'
}).withShellHandler('onDOMHTMLDimensions').build();
exports.HandleHTMLDimensionsFeature = HandleHTMLDimensionsFeature;
//# sourceMappingURL=HandleHTMLDimensionsFeature.js.map