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

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

"use strict";

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

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

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

/* babel-plugin-inline-import './HandleElementCSSBoxFeature.webjs' */
var script = "function HandleElementCSSBoxFeature(context) {\n  var options = context.options || {};\n  var target = options.target;\n  var shouldThrowWhenNotFound = options.shouldThrowWhenNotFound === true;\n  var numericFromPxString = context.utils.numericFromPxString;\n\n  if (!target || (typeof target !== 'string' && typeof target !== 'object')) {\n    throw new Error('Missing or wrong type for required target option');\n  }\n  var postSize = context.makeCallbackSafe(function () {\n    var element = context.utils.getDOMSelection(target);\n    if (element != null) {\n      var clientRect = element.getBoundingClientRect(),\n        styles = getComputedStyle(element),\n        paddingLeft = numericFromPxString(styles.paddingLeft),\n        paddingRight = numericFromPxString(styles.paddingRight),\n        paddingTop = numericFromPxString(styles.paddingTop),\n        paddingBottom = numericFromPxString(styles.paddingBottom),\n        borderLeftWidth = numericFromPxString(styles.borderLeftWidth),\n        borderRightWidth = numericFromPxString(styles.borderRightWidth),\n        borderTopWidth = numericFromPxString(styles.borderTopWidth),\n        borderBottomWidth = numericFromPxString(styles.borderBottomWidth),\n        marginLeft = numericFromPxString(styles.marginLeft),\n        marginRight = numericFromPxString(styles.marginRight),\n        marginTop = numericFromPxString(styles.marginTop),\n        marginBottom = numericFromPxString(styles.marginBottom),\n        borderBoxWidth = clientRect.width,\n        borderBoxHeight = clientRect.height,\n        horizontalScrollbarWidth = element.offsetHeight - element.clientHeight,\n        verticalScrollbarWidth = element.offsetWidth - element.clientWidth,\n        scrollBoxWidth = element.scrollWidth,\n        scrollBoxHeight = element.scrollHeight;\n      var dimensions = {\n        scrollBox: {\n          width: scrollBoxWidth,\n          height: scrollBoxHeight\n        },\n        borderBox: {\n          width: borderBoxWidth,\n          height: borderBoxHeight\n        },\n        computedStyle: {\n          paddingTop: paddingTop,\n          paddingBottom: paddingBottom,\n          paddingLeft: paddingLeft,\n          paddingRight: paddingRight,\n          borderTopWidth: borderTopWidth,\n          borderBottomWidth: borderBottomWidth,\n          borderLeftWidth: borderLeftWidth,\n          borderRightWidth: borderRightWidth,\n          marginTop: marginTop,\n          marginBottom: marginBottom,\n          marginLeft: marginLeft,\n          marginRight: marginRight\n        },\n        horizontalScrollbarWidth: horizontalScrollbarWidth,\n        verticalScrollbarWidth: verticalScrollbarWidth\n      };\n      context.postMessageToShell(dimensions);\n    } else if (shouldThrowWhenNotFound) {\n      throw new Error(\n        \"Couldn't find an element for target \" + JSON.stringify(target)\n      );\n    }\n  });\n  postSize();\n  window.addEventListener('resize', postSize);\n  // trigger when DOM changes\n  var MutationObserver =\n    window['MutationObserver'] || window['WebKitMutationObserver'];\n  if (MutationObserver) {\n    var observer = new MutationObserver(postSize);\n    observer.observe(document, {\n      subtree: true,\n      attributes: true\n    });\n  } else {\n    // That is a last resort fallback for older browsers\n    context.warn(\n      \"This browser doesn't support MutationObserver. Falling back to an interval.\"\n    );\n    setInterval(postSize, 200);\n  }\n}\n";
var defaultOptions = {
  shouldThrowWhenNotFound: false
};
/**
 * This feature provides `onDOMElementCSSBoxDimensions` prop with payloads of type {@link ElementCSSBoxDimensions}.
 * The payload contains information about the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model | CSS Box dimensions} of an element in the
 * `WebView` pixels unit (see {@link HandleElementCSSBoxDimensionsOptions} to instruct which element should be targeted).
 *
 * @example
 * ```ts
 * const Webshell = makeWebshell(
 *   WebView,
 *   new HandleElementCSSBoxDimensionsOptions({
 *     target: { id: "sidebar" }
 *   })
 * );
 *
 * export function MyComponent(props) {
 *   const onSidebarDimensions = ({ borderBox }) => console.info(borderBox.width)
 *   return <Webshell {...props} onDOMElementCSSBoxDimensions={onSidebarDimensions} />
 * }
 * ```
 *
 * @remarks
 * A new event will be triggered on every resize.
 * If you are looking for the document content size, use {@link HandleHTMLDimensionsFeature} instead.
 *
 * @public
 */

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