JSFiddle - React, Tailwind, and code Playground
JavaScript
// Pops a window relative to the current window position
function popup(url, winName, xOffset, yOffset) {
var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0);
var y = (window.screenY || window.screenTop || 0) + (yOffset || 0);
return window.open(url, winName, 'top=' +y+ ',left=' +x);
}
/**
* Finds the screen element for the monitor that the browser window is currently in.
* This is required because window.screen is the screen that the page was originally
* loaded in. This method works even after the window has been moved across monitors.
*
* @param {function} cb The function that will be called (asynchronously) once the screen
* object has been discovered. It will be passed a single argument, the screen object.
*/
function getScreenProps (cb) {
if (!window.frames.testiframe) {
var iframeEl = document.createElement('iframe');
iframeEl.name = 'testiframe';
iframeEl.src = "about:blank";
iframeEl.id = 'iframe-test'
document.body.appendChild(iframeEl);
}
// Callback when the iframe finishes reloading, it will have the
// correct screen object
document.getElementById('iframe-test').onload = function() {
cb( window.frames.testiframe.screen );
delete document.getElementById('iframe-test').onload;
};
// reload the iframe so that the screen object is reloaded
window.frames.testiframe.location.reload();
};
function getWindowSize(windowObj) {
var wW, wH;
var wT = windowObj.screenTop;
var wL = windowObj.screenLeft;
if (windowObj.outerWidth) {
wW = windowObj.outerWidth;
wH = windowObj.outerHeight;
} else {
var cW = windowObj.document.body.offsetWidth;
var cH = windowObj.document.body.offsetHeight;
var barsW = 500 - windowObj.document.body.offsetWidth;
var barsH = 500 - windowObj.document.body.offsetHeight;
wW = barsW + cW;
wH = barsH + cH;
}
return { right: wW, bottom: wH, top :...