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

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

"use strict";

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

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

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

/* babel-plugin-inline-import './ForceResponsiveViewportFeature.webjs' */
var script = "function ForceResponsiveViewportFeature(context) {\n  var options = context.options || {};\n  var maxScale = options.maxScale || 1;\n  var initScale = options.initScale || 1;\n  var minScale = options.minScale || 1;\n  var metaViewportContent =\n    'width=device-width, ' +\n    'initial-scale=' +\n    initScale +\n    ',' +\n    'minimum-scale=' +\n    minScale +\n    ',' +\n    'maximum-scale=' +\n    maxScale;\n  var metaElements = document.getElementsByTagName('meta');\n  Array.prototype.forEach.call(metaElements, function (elem) {\n    elem.name === 'viewport' && elem.parentNode.removeChild(elem);\n  });\n  var metaViewport = document.createElement('meta');\n  metaViewport.setAttribute('name', 'viewport');\n  metaViewport.setAttribute('content', metaViewportContent);\n  var head = document.getElementsByTagName('head')[0];\n  if (!head) {\n    head = document.createElement('head');\n    document.documentElement.appendChild(head);\n  }\n  head.appendChild(metaViewport);\n}\n";
var defaultOptions = {
  maxScale: 1,
  initScale: 1,
  minScale: 1
};
/**
 * This feature inserts or, when present, replace a meta element looking like:
 *
 * ```html
 * <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
 * ```
 *
 * This will guarantee that the layout viewport will match
 * device-width (hence, “responsive”). Minimum scale is locked to 1, but you
 * can customize maximum scale to allow pinch-zoom gestures (see {@link ForceResponsiveViewportOptions}).
 * See also {@link https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag | MDN—Using the viewport meta tag ...}
 *
 * @example
 *
 * ```ts
 * const Webshell = makeWebshell(
 *   WebView,
 *   new ForceResponsiveViewportFeature({
 *     maxScale: 3,
 *   })
 * );
 * ```
 *
 * @public
 */

var ForceResponsiveViewportFeature = new _FeatureBuilder["default"]({
  script: script,
  defaultOptions: defaultOptions,
  identifier: 'org.formidable-webview/webshell.force-responsive-viewport'
}).build();
exports.ForceResponsiveViewportFeature = ForceResponsiveViewportFeature;
//# sourceMappingURL=ForceResponsiveViewportFeature.js.map