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();
}
});
}
}