managers/banner.js

import SDK from "../sdk";

/**
 * @class SmartBanner
 * @hideconstructor
 */
export default class SmartBanner {
    /**
     * Create and display a Smart Banner.
     *
     * @memberOf SmartBanner
     * @param {Object} params
     * @param {string} params.target - ID of the div where the Smart Banner will be shown.
     * @param {Object} params.options - Visual customization options.
     * @param {string} params.options.description - Custom app description. Won't be shown if not specified.
     * @param {string} params.options.rating - App rating between 0 and 5, in 0.5 increments. 4 by default.
     * @param {string} params.options.reviews - Number of reviews. Won't be shown if not specified.
     * @param {string} params.options.position - Position of the banner, <code>top</code> or <code>bottom</code> (default).
     * @param {string} params.options.bgColor - Banner background color.
     * @param {string} params.options.txtColor - Banner text color.
     * @param {string} params.options.closeBtnColor - Close button color.
     * @param {string} params.options.btnBgColor - "Get button" background color.
     * @param {string} params.options.btnTxtColor - "Get button" text color.
     * @param {string} params.options.reviewsColor - "Number of reviews" color.
     * @param {string} params.options.btnTxt - "Get button" text.
     * @param {string} params.options.icon - URL for a custom icon. App icon will be used if not specified.
     * @param {Object.<string, string>} params.customData - Custom data attached to this Smart Banner.
     * @param {function} params.onShow - Called when the Smart Banner is displayed.
     * @param {function} params.onHide - Called when the Smart Banner is hidden.
     */
    static create(params) {
        // Only supported on iOS and Android
        if (!/Android|iPad|iPhone|iPod/.test(navigator.userAgent)) {
            console.log("Smart Banners are only supported on Android and iOS.");
            return;
        }

        params = params || {};

        // DOM element the widget will be rendered to.
        const target = params.target;
        // Make sure the container element exists.
        if (typeof params.target !== 'string' || !document.getElementById(params.target)) {
            console.log("Container for Smart Banner with id '%s' doesn't exist.", params.target);
            return;
        }

        const options = {
            isSI: true,
            method: "POST",
            body: {
                app_id: SDK._appId,
                options: JSON.stringify(params.options),
                custom_data: JSON.stringify(params.customData),
            },
        };

        // Callbacks
        const onShow = params.onShow || function() {};
        const onHide = params.onHide || function() {};

        SDK.rawRequest("/sdk/smart-banner", options).then(function (resp) {
            SmartBanner._render(target, resp.data.url, params.options, onShow, onHide);
        }).catch(function(err) {
            console.log(err);
        });
    }

    /** @ignore */
    static _render(target, url, options, onShow, onHide) {
        let pos = "bottom";
        let padding = 0;
        let bannerHeight = 60;

        // Opera Mini has CSS issues with bottom:0 position:fixed elements.
        if (/Opera Mini/.test(navigator.userAgent)) {
            pos = "top";
        } else if (typeof options !== "undefined" &&
            typeof options["position"] === "string" &&
            options.position === "top") {
            pos = "top";
        }

        if (pos === "top") {
            padding = (parseInt(document.body.style.paddingTop) || 0) + bannerHeight;
            document.body.style.paddingTop = padding + 'px';
        } else {
            padding = (parseInt(document.body.style.paddingBottom) || 0) + bannerHeight;
            document.body.style.paddingBottom = padding + 'px';
        }

        const frame = document.createElement("iframe");
        frame.id = "getsocial-banner-frame-" + btoa(Math.random() + "").substr(10, 10);
        frame.width = "100%";
        frame.height = bannerHeight + "px";
        frame.style.border = "0";
        frame.style.position = "fixed";
        frame.style[pos] = "0";

        // Safari specific hax :(
        if (pos === "bottom" && /iPad|iPhone|iPod/.test(navigator.userAgent)) {
            frame.style[pos] = "4px";
        }

        // noinspection JSValidateTypes
        frame.style.left = 0;
        frame.src = url;
        document.getElementById(target).appendChild(frame);

        onShow();

        window.addEventListener('message', function (e) {
            if (e.data === 'gs-hide-banner') {
                frame.style.display = "none";

                if (pos === "top") {
                    document.body.style.paddingTop = (padding-bannerHeight) + "px";
                } else {
                    document.body.style.paddingBottom = (padding-bannerHeight) + "px";
                }

                onHide();
            }
        });
    }
}