I am using the following code to generate a images on a page (from a passed array in an .ejs page) and a 'popup' window on a page when an image is 'clicked':
addEventListener("load", initialize);
addEventListener("onunload", tidy);
const vitals = document.querySelector('#passed'); //reference the 'passed' information to the page
const _convert = vitals.dataset.pix.split(",");
//convert the passed ('gallery_list') string into an array...
var _limits = vitals.dataset.size;
//set limit to # of items in 'gallery_list' array...
var generator;
function tidy() {
console.log("FIRED UNLOAD: ");
generator.window.close(); // Closes the new window
}
function initialize() {
var _count = 0,
_str = vitals.dataset.username;
var _tally = 0; //'count' the # of 'containers' and 'rows' in usage...
if (vitals.dataset.size > 20) {
_limits = 20;
} //limit to 20 items per page...
for (_count = 0; _count < _limits; _count++) {
//**CREATE WITHIN PROPER 'COLUMNS'...WHEN APPLICABLE...
if ((_count === 0) || (Number.isInteger(_count / 5) == true)) {
if (_count != 0) {
_tally += 1
}
}
//**CREATE CONTENT HERE...
//**ADD THE PHOTO...
_item = document.createElement("img");
_item.setAttribute("class", "gallery_pix");
_item.setAttribute("id", "pix_" + _str);
_item.setAttribute("src", "/galleries/pix/" + _convert[_count]);
_item.setAttribute("alt", "picture of " + _str);
_item.setAttribute("width", '100%');
document.getElementById("group_" + _tally).appendChild(_item);
//**
//**
} //for loop
//Get an array of photo images from the page
var _photos = document.querySelectorAll(".gallery_pix");
//Loop through the resulting array
for (var i = 0; i < _photos.length; i++) {
_photos[i].addEventListener("click", function() {
var _img_select = this.src;
var _img_id = this.id;
var _splits = _img_id.search("_"); //return the position of the FIRST "underscore ('_')
_pix_name = _img_id.substring(_splits + 1); //return the 'name' of the clicked image
//**CREATE A POPUP WINDOW...WHEN AN IMAGE IS 'CLICKED'
generator = window.open('', 'pops', 'height=400,width=500');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('<link rel="stylesheet" href="style.css">');
generator.document.write('</head><body>');
generator.document.write("<div>");
generator.document.write("<h1>Out with the old, in with the new!</h1>");
generator.document.write("</div>");
generator.document.write('</body></html>');
generator.document.close();
var sheet = generator.document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-image: _img_select; background-color: blue;}";
generator.document.body.appendChild(sheet);
//**
});
} //for loop
}The popup is created successfully however it does not close when the page is changed. The event listener for the 'onunload' does not seem to execute...since I am not seeing my message in the console to indicate that the function had fired...
Any suggestions greatly appreciated.