@phemium-costaisa/amazon-quicksight-embedding-sdk/dist/commons/createIframe.js

JS SDK for embedding Amazon QuickSight

"use strict";
exports.__esModule = true;
var IFRAME_CLASS_NAME = 'quicksight-embedding-iframe';
var createSvgElement = function (tagName, attributes, styles, children) {
    if (styles === void 0) { styles = {}; }
    if (children === void 0) { children = []; }
    var element = document.createElementNS('http://www.w3.org/2000/svg', tagName);
    Object.entries(attributes).forEach(function (_a) {
        var name = _a[0], value = _a[1];
        return element.setAttribute(name, value);
    });
    Object.entries(styles).forEach(function (_a) {
        var name = _a[0], value = _a[1];
        return element.style.setProperty(name, value);
    });
    children.forEach(function (child) { return element.appendChild(child); });
    return element;
};
var createLoaderSVG = function () {
    var circles = [1, 2, 3].map(function (i) {
        var animate = createSvgElement('animate', {
            attributeName: 'opacity',
            dur: '1s',
            values: '0;1;0',
            repeatCount: 'indefinite',
            begin: "".concat(i / 10.0)
        });
        var circle = createSvgElement('circle', {
            fill: '#ccc',
            stroke: 'none',
            cx: "".concat(i * 20 - 14),
            cy: '50',
            r: '6'
        }, undefined, [animate]);
        return circle;
    });
    return createSvgElement('svg', {
        version: '1.1',
        x: '0px',
        y: '0px',
        viewBox: '0 0 100 100',
        'enable-background': 'new 0 0 0 0'
    }, {
        width: '100px',
        height: '100px'
    }, circles);
};
var createPostRequest = function (postRequestOptions) {
    var src = postRequestOptions.src, container = postRequestOptions.container, target = postRequestOptions.target, payload = postRequestOptions.payload;
    if (!src || !container) {
        return;
    }
    var form = document.createElement('form');
    form.style.visibility = 'hidden';
    form.method = 'POST';
    form.action = src;
    form.target = target;
    form.name = "".concat(target, "-form");
    Object.keys(payload).forEach(function (payloadItem) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = payloadItem;
        input.value = payload[payloadItem];
        form.appendChild(input);
    });
    container.appendChild(form);
    form.submit();
    return {
        remove: function () {
            form.remove();
        }
    };
};
var createIframe = function (options) {
    var id = options.id, src = options.src, _a = options.width, width = _a === void 0 ? '0px' : _a, _b = options.height, height = _b === void 0 ? '0px' : _b, container = options.container, onLoad = options.onLoad, loading = options.loading, withIframePlaceholder = options.withIframePlaceholder, payload = options.payload, className = options.className;
    var iframePlaceholder;
    var iframeName = id || "".concat(container.id, "-iframe");
    if (withIframePlaceholder) {
        iframePlaceholder = document.createElement('div');
        iframePlaceholder.id = "".concat(iframeName, "-placeholder");
        iframePlaceholder.style.width = width;
        iframePlaceholder.style.backgroundColor = 'rgba(0,0,0,.01)';
        iframePlaceholder.style.display = 'flex';
        iframePlaceholder.style.justifyContent = 'center';
        iframePlaceholder.style.alignItems = 'center';
        iframePlaceholder.className = "".concat(IFRAME_CLASS_NAME, "-placeholder");
        if (height.endsWith('px')) {
            iframePlaceholder.style.height = height;
        }
        if (typeof withIframePlaceholder !== 'boolean') {
            iframePlaceholder.appendChild(withIframePlaceholder);
        }
        else {
            var loaderSVG = createLoaderSVG();
            iframePlaceholder.appendChild(loaderSVG);
        }
        container.appendChild(iframePlaceholder);
    }
    var _className = [IFRAME_CLASS_NAME];
    if (className) {
        _className.push(className);
    }
    var iframe = document.createElement('iframe');
    iframe.className = _className.join(' ').trim();
    iframe.id = iframeName;
    iframe.name = iframeName;
    iframe.width = width;
    iframe.height = height;
    if (loading) {
        iframe.loading = loading;
    }
    iframe.style.border = '0px';
    iframe.style.padding = '0px';
    if (iframePlaceholder) {
        iframe.style.opacity = '0';
        iframe.style.position = 'absolute';
    }
    if (width === '0px' && height === '0px') {
        iframe.style.position = 'absolute';
    }
    container.appendChild(iframe);
    var postRequest;
    if (payload) {
        postRequest = createPostRequest({
            src: src,
            target: iframe.name,
            container: container,
            payload: payload
        });
    }
    else {
        iframe.src = src;
    }
    var onLoadLocal = function (event) {
        if (iframePlaceholder) {
            iframePlaceholder.remove();
            iframe.style.position = '';
            iframe.style.opacity = '1';
            iframe.style.transition = 'opacity .5s ease-in-out';
        }
        typeof onLoad === 'function' && onLoad(event);
        postRequest === null || postRequest === void 0 ? void 0 : postRequest.remove();
    };
    iframe.addEventListener('load', onLoadLocal);
    return iframe;
};
exports["default"] = createIframe;