class ReportAdPopup extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
render() {
this.shadowRoot.innerHTML = `
`;
this.setupEventListeners();
}
setupEventListeners() {
const closeButton = this.shadowRoot.querySelector('#close');
const reportForm = this.shadowRoot.querySelector('#rbuForm');
const reportButton = this.shadowRoot.querySelector('#reportButton');
closeButton.addEventListener('click', () => {
this.closePopup();
});
reportForm.addEventListener('submit', (e) => {
e.preventDefault();
const selectedReason = this.shadowRoot.querySelector('input[name="rbuReason"]:checked');
if (selectedReason && this.callback) {
this.callback(selectedReason.value);
this.closePopup();
}
});
}
buildReasons(reasons) {
const reasonsList = this.shadowRoot.querySelector('#reasonsList');
const reportButton = this.shadowRoot.querySelector('#reportButton');
reasonsList.innerHTML = '';
reasons.forEach(reason => {
const item = document.createElement('div');
item.className = 'reasons-item';
const radio = document.createElement('input');
radio.type = 'radio';
radio.value = reason.value;
radio.name = 'rbuReason';
radio.className = 'radio nm';
const label = document.createElement('label');
label.textContent = reason.label;
label.className = 'reasons-item-name';
label.setAttribute('for', reason.value);
radio.id = reason.value;
label.addEventListener('click', () => {
radio.checked = true;
reportButton.disabled = false;
});
radio.addEventListener('change', () => {
reportButton.disabled = !radio.checked;
});
item.appendChild(radio);
item.appendChild(label);
reasonsList.appendChild(item);
});
}
appendStyling(styling) {
const headingTitle = this.shadowRoot.querySelector('#headingTitle');
const reportButton = this.shadowRoot.querySelector('#reportButton');
const popUp = this.shadowRoot.querySelector('#rbuPopUp');
if (headingTitle && reportButton && popUp) {
headingTitle.textContent = styling.text;
headingTitle.style.color = styling.fontColor;
popUp.style.backgroundColor = styling.backgroundColor;
reportButton.style.color = styling.report.fontColor;
reportButton.style.backgroundColor = styling.report.backgroundColor;
}
}
closePopup() {
this.style.display = 'none';
if (this.onCloseCallback) {
this.onCloseCallback();
}
}
init(params, callback, onCloseCallback) {
const popup = params.popup;
if (this.validation(popup)) {
this.callback = callback;
this.onCloseCallback = onCloseCallback;
this.appendStyling(popup);
this.buildReasons(popup.reasons);
this.style.display = 'block';
}
}
validation(params) {
if (!params) return false;
if (!params.text || params.text.trim() === '') return false;
if (!params.backgroundColor || params.backgroundColor.trim() === '') return false;
if (!params.fontColor || params.fontColor.trim() === '') return false;
if (!params.report || !params.report.backgroundColor || params.report.backgroundColor.trim() === '') return false;
if (!params.report || !params.report.fontColor || params.report.fontColor.trim() === '') return false;
if (!params.reasons || !Array.isArray(params.reasons) || params.reasons.length === 0) return false;
return true;
}
}
customElements.define('report-ad-popup', ReportAdPopup);
const reportAdPopup = document.createElement('report-ad-popup');
document.body.appendChild(reportAdPopup);
window.rbuPopUp = (function () {
function start(params, callback, onCloseCallback) {
reportAdPopup.init(
params,
callback,
onCloseCallback
);
}
return start;
})()