"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
/*! FILE VERSION: [[VERSION]] */
/* skin builder cross publication */
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function (s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
if (!Object.entries) {
Object.entries = function (obj) {
var ownProps = Object.keys(obj),
i = ownProps.length,
resArray = new Array(i); // preallocate the Array
while (i--) {
resArray[i] = [ownProps[i], obj[ownProps[i]]];
}
return resArray;
};
}
if (!Object.fromEntries) {
Object.fromEntries = function (arr) {
var obj = {};
arr.forEach(function (el) {
obj[el['0']] = el['1'];
});
return obj;
};
}
var BottomStickyExpandableBuilder = /*#__PURE__*/function () {
function BottomStickyExpandableBuilder(config) {
var _this$props$bgColor;
_classCallCheck(this, BottomStickyExpandableBuilder);
//publication constants
this.parentWindowContainers = {
news247: {
main: '#hp-320x50stuck',
bgColor: '#888888'
},
sport24: {
main: '#hp-320x50stuck',
bgColor: '#182F4C'
}
};
this.props = this.parseConfig(config);
console.log(this.props);
this.hideInitialFrame();
if (!this.canInit()) {
console.error('bottomstickyexpandablebuilder: blank / invalid publication or container');
return false;
}
this.props.bgColor = (_this$props$bgColor = this.props.bgColor) !== null && _this$props$bgColor !== void 0 ? _this$props$bgColor : this.parentWindowContainers[this.props.hostname].bgColor;
this.mainStylesheet = "\n .bottom_sticky_expandable .toggle_banner {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: 9999;\n width: 100%;\n height: 100%;\n background-color: transparent; }\n\n .bottom_sticky_expandable .bottom_sticky_expandable__toggle_btn {\n position: absolute;\n top: 50%;\n right: 20px;\n border: none;\n background-color: rgba(255, 255, 255, 0.6);\n z-index: 99999;\n width: 30px;\n height: 30px;\n background-image: url('data:image/svg+xml;utf8,');\n background-position: center;\n background-repeat: no-repeat;\n background-size: 40px auto;\n -webkit-transform: translateY(-50%);\n -moz-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n -o-transform: translateY(-50%);\n transform: translateY(-50%);\n -webkit-border-radius: 50%;\n -moz-border-radius: 50%;\n -ms-border-radius: 50%;\n -o-border-radius: 50%;\n border-radius: 50%;\n outline: none; }\n\n .bottom_sticky_expandable .bottom_sticky_expandable__inner {\n width: 360px;\n height: 50px;\n margin: 0 auto; }\n .bottom_sticky_expandable .bottom_sticky_expandable__inner .bottom_sticky_expandable__creative_container {\n position: relative;\n height: inherit; }\n .bottom_sticky_expandable .bottom_sticky_expandable__inner .bottom_sticky_expandable__creative_container .bottom_sticky_expandable__creative {\n height: inherit; }\n .bottom_sticky_expandable .bottom_sticky_expandable__inner .bottom_sticky_expandable__creative_container .bottom_sticky_expandable__creative .creativeCollapsed,\n .bottom_sticky_expandable .bottom_sticky_expandable__inner .bottom_sticky_expandable__creative_container .bottom_sticky_expandable__creative .creativeExpanded {\n position: relative;\n top: 50%;\n margin: 0 auto;\n -webkit-transform: translateY(-50%);\n -moz-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n -o-transform: translateY(-50%);\n transform: translateY(-50%); }\n .bottom_sticky_expandable .bottom_sticky_expandable__inner .bottom_sticky_expandable__creative_container .bottom_sticky_expandable__creative .creativeCollapsed {\n display: block; }\n .bottom_sticky_expandable .bottom_sticky_expandable__inner .bottom_sticky_expandable__creative_container .bottom_sticky_expandable__creative .creativeExpanded {\n display: none; }\n\n .bottom_sticky_expandable.expand {\n top: 0;\n height: 100%; }\n .bottom_sticky_expandable.expand .bottom_sticky_expandable__inner {\n width: 100% !important;\n height: 100% !important; }\n .bottom_sticky_expandable.expand .bottom_sticky_expandable__toggle_btn {\n top: 20px;\n -webkit-transform: none;\n -moz-transform: none;\n -ms-transform: none;\n -o-transform: none;\n transform: none;\n background-image: url('data:image/svg+xml;utf8,'); }\n .bottom_sticky_expandable.expand .toggle_banner {\n display: none !important; }\n .bottom_sticky_expandable.expand .creativeCollapsed {\n display: none !important; }\n .bottom_sticky_expandable.expand .creativeExpanded {\n display: block !important; }\n\n\n ";
this.init();
}
_createClass(BottomStickyExpandableBuilder, [{
key: "parseConfig",
value: function parseConfig(config) {
var _this = this;
return Object.fromEntries(Object.entries(this.defaultProps).map(function (prop) {
prop['1'] = config[prop['0']] || _this.defaultProps[prop['0']];
return prop;
}));
}
}, {
key: "hideInitialFrame",
value: function hideInitialFrame() {
var _this2 = this;
Object.keys(this.parentWindowContainers).forEach(function (container) {
if (document.querySelector(_this2.parentWindowContainers[container].main)) {
document.querySelector(_this2.parentWindowContainers[container].main).children['0'].setAttribute('style', "\n visibility: hidden;\n position: absolute;\n height: 0;\n width: 0;\n z-index: -1;\n ");
}
});
}
}, {
key: "canInit",
value: function canInit() {
var _this3 = this;
return !Object.keys(this.props).filter(function (key) {
return _this3.props[key] === '';
}).length && this.parentWindowContainers[this.props.hostname] !== undefined && this.screenDimensions.width >= this.props.minViewPort;
}
}, {
key: "init",
value: function init() {
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = this.mainStylesheet;
document.head.appendChild(style);
this.parentWindowContainer = document.querySelector(this.parentWindowContainers[this.props.hostname].main);
this.parentWindowContainer.classList.add('bottom_sticky_expandable'); // this.parentWindowContainer.setAttribute( 'style', `
// width: ${ this.props.parentWindowContainerAttrs.width }px;
// height: ${ this.props.parentWindowContainerAttrs.height }px;
// margin: 0 auto;
// `);
this.parentWindowContainer.setAttribute('style', "\n position: fixed;\n bottom: 0;\n left:0;\n z-index: 9999;\n width: 100%;\n background-color: ".concat(this.props.bgColor, ";\n "));
this.buildHTML();
this.buildCreative();
this.bindEvents();
}
}, {
key: "calcDimension",
value: function calcDimension(type, prop, value) {
var calcValue = value.indexOf('%') !== -1 ? this.screenDimensions[prop] * (Number(value.replace('%', '')) / 100) : Number(value);
if (calcValue > this.screenDimensions[prop] && prop == 'width' || calcValue > this.props.maxHeight[type] && prop == 'height') {
return prop == 'width' ? '100%' : this.props.maxHeight[type] + 'px';
}
return value + (value.indexOf('%') === -1 ? 'px' : '');
}
}, {
key: "buildHTML",
value: function buildHTML() {
var elements = [{
tag: 'div',
className: 'bottom_sticky_expandable__inner',
parent: '.bottom_sticky_expandable'
}, {
tag: 'div',
className: 'bottom_sticky_expandable__creative_container',
parent: '.bottom_sticky_expandable__inner'
}, {
tag: 'div',
className: 'toggle_banner',
parent: '.bottom_sticky_expandable'
}, {
tag: 'div',
className: 'bottom_sticky_expandable__creative',
parent: '.bottom_sticky_expandable .bottom_sticky_expandable__creative_container'
}, {
tag: 'button',
className: 'bottom_sticky_expandable__toggle_btn',
parent: '.bottom_sticky_expandable'
}];
elements.forEach(function (args) {
var element = document.createElement(args.tag);
element.className = args.className;
if (args.style) {
element.setAttribute('style', args.style);
}
document.querySelector(args.parent).appendChild(element);
});
}
}, {
key: "buildCreative",
value: function buildCreative() {
var _this4 = this;
[{
type: this.props['typeCollapsed'],
postfix: 'Collapsed'
}, {
type: this.props['typeExpanded'],
postfix: 'Expanded'
}].forEach(function (group) {
var element, elementContainer;
if (group.type == 'image') {
element = document.createElement('img');
element.src = _this4.props["creative".concat(group.postfix)];
element.setAttribute('style', "\n ".concat(group.postfix.toLowerCase() == 'expanded' ? 'position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;' : 'margin: 0 auto;', "\n border:0;\n max-width: ").concat(_this4.calcDimension(group.postfix.toLowerCase(), 'width', _this4.props["width".concat(group.postfix)]), ";\n height: auto;\n max-height: 100%;\n\n "));
if (group.postfix.toLowerCase() == 'expanded') {
if (_this4.props.clickURL) {
elementContainer = document.createElement('a');
elementContainer.href = _this4.props.clickURL;
elementContainer.target = '_blank';
} else {
elementContainer = document.createElement('div');
}
elementContainer.setAttribute('style', "\n margin: 0 auto;\n text-align: center;\n height: 100%;\n ");
}
} else {
element = document.createElement('iframe');
element.frameborder = '0';
element.scrolling = 'NO';
element.src = _this4.props["creative".concat(group.postfix)];
element.setAttribute('style', "\n margin: 0 auto;\n border:0;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n "); // width: ${ this.calcDimension( group.postfix.toLowerCase(), 'width', this.props[ `width${ group.postfix }` ] ) };
// height: ${ this.calcDimension( group.postfix.toLowerCase(), 'height', this.props[ `height${ group.postfix }` ] ) };
if (group.postfix.toLowerCase() == 'expanded' && _this4.props.clickURL) {
elementContainer = document.createElement('a');
elementContainer.href = _this4.props.clickURL;
elementContainer.target = '_blank';
} else {
elementContainer = document.createElement('div');
}
elementContainer.setAttribute('style', "\n margin: 0 auto;\n text-align: center;\n ".concat(group.postfix.toLowerCase() == 'expanded' ? "padding-top: ".concat(_this4.props["ratio".concat(group.postfix)], "%;") : 'height: inherit;', "\n "));
}
if (!elementContainer) {
element.classList.add("creative".concat(group.postfix));
document.querySelector('.bottom_sticky_expandable .bottom_sticky_expandable__creative').appendChild(element);
} else {
elementContainer.classList.add("creative".concat(group.postfix));
document.querySelector('.bottom_sticky_expandable .bottom_sticky_expandable__creative').appendChild(elementContainer);
elementContainer.appendChild(element);
}
});
}
}, {
key: "updateUI",
value: function updateUI(isExpanded) {
if (isExpanded) {
document.body.style.overflow = 'hidden';
if (this.props.hostname == 'news247' && document.getElementById('header')) {
document.getElementById('header').style.zIndex = '9';
}
} else {
document.body.style.removeProperty('overflow');
if (this.props.hostname == 'news247' && document.getElementById('header')) {
document.getElementById('header').style.removeProperty('z-index');
}
}
}
}, {
key: "bindEvents",
value: function bindEvents() {
document.querySelector('.bottom_sticky_expandable__toggle_btn').addEventListener('click', this.toggleBanner.bind(this));
document.querySelector('.toggle_banner').addEventListener('click', this.toggleBanner.bind(this));
window.addEventListener('orientationchange', this.onOrientationChange.bind(this));
}
}, {
key: "toggleBanner",
value: function toggleBanner(event) {
var btn = event.currentTarget,
container = btn.closest('.bottom_sticky_expandable');
container.classList.toggle('expand');
this.updateUI(container.classList.contains('expand'));
}
}, {
key: "onOrientationChange",
value: function onOrientationChange(event) {
var container = document.querySelector('.bottom_sticky_expandable');
if (container.classList.contains('expand')) {
container.classList.remove('expand');
this.updateUI(false);
}
}
}, {
key: "defaultProps",
get: function get() {
return {
hostname: '',
clickURL: null,
bgColor: null,
widthCollapsed: '100%',
heightCollapsed: '100%',
ratioCollapsed: '56.6666',
typeCollapsed: '',
creativeCollapsed: '',
widthExpanded: '100%',
heightExpanded: '100%',
ratioExpanded: '56.6666',
typeExpanded: '',
creativeExpanded: '',
minViewPort: 360,
parentWindowContainerAttrs: {
width: '360',
height: '50'
},
maxHeight: {
collapsed: '50',
expanded: this.screenDimensions.height
}
};
}
}, {
key: "screenDimensions",
get: function get() {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
}]);
return BottomStickyExpandableBuilder;
}();
window.top.bottomStickyExpandableBuilder = function (config) {
new BottomStickyExpandableBuilder(config);
};