GramThanos/popup-fallback.js

## popup-fallback.js
// Fallback Popup code
let PopupFallback = function(text, type='alert', defaultText='') {
	return new Promise((resolve, reject) => {
		try {
			let iframe = document.createElement('iframe');
			iframe.style.width = '450px';
			iframe.style.position = 'fixed';
			iframe.style.top = '20px';
			iframe.style.left = '50%';
			iframe.style.marginLeft = '-225px';
			iframe.style.border = '1px solid #cecece';
			iframe.style.backgroundColor = '#ffffff';
			iframe.style.borderRadius = '5px';
			iframe.style.boxShadow = 'rgb(0 0 0 / 33%) 0px 1px 3px';
			iframe.style.zIndex = '999999';
			iframe.style.display = 'block';
			document.body.appendChild(iframe);
			let doc = iframe.contentWindow.document;
			doc.open();
			doc.write(
				'<body>' +
				'<style>' +
					'body {font-family: Tahoma; font-size: 14px; padding: 10px;} ' +
					'#text {margin-top: 10px; font-size: 12px;white-space: pre;} ' +
					'#value-input {width: 100%;border: 1px solid #dadce0;padding: 5px;border-radius: 2px;margin-top: 15px;}' +
					'#buttons {font-size: 12px; text-align: right;margin-top: 20px;} ' +
					'.btn {padding: 8px 8px; background-color: #1a73e8; color: #ffffff;border-radius: 4px; border: 1px solid #4285f4; cursor: pointer; width: 66px; text-align: center;} ' +
					'.btn-invert {background-color: #ffffff; color: #1a73e8; border: 1px solid #dadce0;} ' +
				'</style>' +
				'<div id="wrapper">' +
					(new URL(window.location.href || 'http://website').host) + ' says<br>' +
					'<div id="text"></div>' +
					(type == 'prompt' ? '<input id="value-input" type="text" value=""/>' : '') +
					'<div id="buttons">' +
						((type == 'confirm' || type == 'prompt') ?  '<input id="ok-btn" class="btn" type="button" value="OK"/> <input id="cancel-btn" class="btn btn-invert" type="button" value="Cancel"/>' :
						'<input id="ok-btn" class="btn" type="button" value="OK"/>') +
					'</div>' +
				'</div>' +
				'</body>'
			);

			// Add text
			doc.getElementById('text').textContent = text;

			// Calculate height
			let wrapper = doc.getElementById('wrapper');
			iframe.style.height = (Math.ceil(Math.max(wrapper.clientHeight, wrapper.scrollHeight)) + 38 + 2) + 'px';

			let close = (value) => {
				iframe.style.display = 'none';
				doc.close();
				iframe.parentNode.removeChild(iframe);
				resolve(value);
			};
			if (type == 'confirm') {
				doc.getElementById('ok-btn').focus();
				doc.getElementById('ok-btn').addEventListener('click', () => {close(true);}, false);
				doc.getElementById('cancel-btn').addEventListener('click', () => {close(false);}, false);
			}
			else if (type == 'prompt') {
				let input = doc.getElementById('value-input');
				input.value = defaultText;
				doc.getElementById('value-input').focus();
				doc.getElementById('ok-btn').addEventListener('click', () => {close(input.value);}, false);
				doc.getElementById('cancel-btn').addEventListener('click', () => {close(null);}, false);
			}
			else {
				doc.getElementById('ok-btn').focus();
				doc.getElementById('ok-btn').addEventListener('click', () => {close(undefined);}, false);
			}
		} catch (e) {
			reject(undefined);
		}
	});
};

// Popup handles
let Popup = function(text, type='alert', defaultText) {
	let popup = type == 'confirm' ? window.confirm : type == 'prompt' ? window.prompt : window.alert;

	return new Promise((resolve, reject) => {
		try {
			let t = new Date();
			let v = defaultText === undefined ? popup(text) : popup(text, defaultText);
			if ((new Date() - t) < 100) {
				v = PopupFallback(text, type, defaultText);
			}
			resolve(v);
		} catch (e) {
			reject(null);
		}
	});
};


// Emulate blocked popup
//window.alert = () => {};
//window.confirm = () => {};
//window.prompt = () => {};

// Example calls
Popup(123).then((x) => {console.log('Ok!', x);});
Popup(123, 'confirm').then((x) => {console.log('Ok!', x);});
Popup(123, 'prompt', 'text').then((x) => {console.log('Popup retrun value', x);});