Last active
September 19, 2021 17:05
-
-
Save GramThanos/0fb87df62627cc2261aae53df8b0585c to your computer and use it in GitHub Desktop.
Browser popup with fallback (looking like chrome's GUI)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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);}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment