gatsby-plugin-image/dist/components/layout-wrapper.js

Adding responsive images to your site while maintaining high performance scores can be difficult to do manually. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you!

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutWrapper = exports.getSizer = void 0;
var react_1 = __importStar(require("react"));
var terser_macro_1 = __importDefault(require("../../macros/terser.macro"));
var NativeScriptLoading = function () { return (react_1.default.createElement("script", { type: "module", dangerouslySetInnerHTML: {
        __html: (0, terser_macro_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nconst hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nif (hasNativeLazyLoadSupport) {\n  const gatsbyImages = document.querySelectorAll('img[data-main-image]');\n  for (let mainImage of gatsbyImages) {\n    if (mainImage.dataset.src) {\n      mainImage.setAttribute('src', mainImage.dataset.src)\n      mainImage.removeAttribute('data-src')\n    }\n    if (mainImage.dataset.srcset) {\n      mainImage.setAttribute('srcset', mainImage.dataset.srcset)\n      mainImage.removeAttribute('data-srcset')\n    }\n\n    const sources = mainImage.parentNode.querySelectorAll('source[data-srcset]');\n    for (let source of sources) {\n      source.setAttribute('srcset', source.dataset.srcset)\n      source.removeAttribute('data-srcset')\n    }\n\n    if (mainImage.complete) {\n      mainImage.style.opacity = 1;\n\n      // also hide the placeholder\n      mainImage.parentNode.parentNode.querySelector('[data-placeholder-image]').style.opacity = 0;\n    }\n  }\n}\n"], ["\nconst hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nif (hasNativeLazyLoadSupport) {\n  const gatsbyImages = document.querySelectorAll('img[data-main-image]');\n  for (let mainImage of gatsbyImages) {\n    if (mainImage.dataset.src) {\n      mainImage.setAttribute('src', mainImage.dataset.src)\n      mainImage.removeAttribute('data-src')\n    }\n    if (mainImage.dataset.srcset) {\n      mainImage.setAttribute('srcset', mainImage.dataset.srcset)\n      mainImage.removeAttribute('data-srcset')\n    }\n\n    const sources = mainImage.parentNode.querySelectorAll('source[data-srcset]');\n    for (let source of sources) {\n      source.setAttribute('srcset', source.dataset.srcset)\n      source.removeAttribute('data-srcset')\n    }\n\n    if (mainImage.complete) {\n      mainImage.style.opacity = 1;\n\n      // also hide the placeholder\n      mainImage.parentNode.parentNode.querySelector('[data-placeholder-image]').style.opacity = 0;\n    }\n  }\n}\n"]))),
    } })); };
function getSizer(layout, width, height) {
    var sizer = "";
    if (layout === "fullWidth") {
        sizer = "<div aria-hidden=\"true\" style=\"padding-top: ".concat((height / width) * 100, "%;\"></div>");
    }
    if (layout === "constrained") {
        sizer = "<div style=\"max-width: ".concat(width, "px; display: block;\"><img alt=\"\" role=\"presentation\" aria-hidden=\"true\" src=\"data:image/svg+xml;charset=utf-8,%3Csvg%20height='").concat(height, "'%20width='").concat(width, "'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E\" style=\"max-width: 100%; display: block; position: static;\"></div>");
    }
    return sizer;
}
exports.getSizer = getSizer;
var Sizer = function Sizer(_a) {
    var layout = _a.layout, width = _a.width, height = _a.height;
    if (layout === "fullWidth") {
        return (react_1.default.createElement("div", { "aria-hidden": true, style: { paddingTop: "".concat((height / width) * 100, "%") } }));
    }
    if (layout === "constrained") {
        return (react_1.default.createElement("div", { style: { maxWidth: width, display: "block" } },
            react_1.default.createElement("img", { alt: "", role: "presentation", "aria-hidden": "true", src: "data:image/svg+xml;charset=utf-8,%3Csvg%20height='".concat(height, "'%20width='").concat(width, "'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E"), style: {
                    maxWidth: "100%",
                    display: "block",
                    position: "static",
                } })));
    }
    return null;
};
var LayoutWrapper = function LayoutWrapper(_a) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (react_1.default.createElement(react_1.Fragment, null,
        react_1.default.createElement(Sizer, __assign({}, props)),
        children,
        SERVER ? react_1.default.createElement(NativeScriptLoading, null) : null));
};
exports.LayoutWrapper = LayoutWrapper;
var templateObject_1;