Merge pull request #59 from UMB-CS-682-Team-03/fix_browser_strangeness

addresses the different behaviors of the browsers when opening a popup and populating the popup DOM through the main window.

In Linux Firefox and Linux Chrome, this behavior deferred as popup.document.readyState was not complete in Firefox while it was in Linux Chrome.

While developing I primarily used Firefox as the main browser neglecting to verify in Chrome resulting in a solution of using DOM event "load" to populate the popup with javascript-generated DOM.

very late into the project, this issue was found in some browsers getting the load event handler working while some browsers were left with blank popup. (windows chrome, edge, brave, linux chrome).

The best possible guess I think is the speed of the js executed in Chrome V8 resulting in the load event being already fired when the event handler was successfully attached to listen for "load" event.

To solve this bizarre case the merge request in openPopup method generates a document fragment and dispatches customEvent to replace the empty popup DOM with one inside the document Fragment.

if popup document readyState is not "completed" the load event will be fired next (MDN)[https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState#complete]

multiple event being fired is possible when "load" event callback was executed before the manually dispatching of custom event but, the subsequent call will have the documentFragment content consumed and the event handler is just a no-op.

Author: malvpatel

html/classhelper.js

@@ -178,6 +178,14 @@ class ClassHelper extends HTMLElement {
                 });
         };
 
+        const handlePopupReadyEvent = (event) => {
+            // we get a document Fragment in event.detail we replace it with the root
+            // replaceChild method consumes the documentFragment content, subsequent calls will be no-op.
+            if (e.detail.childElementCount === 1) {
+                this.popupRef.document.replaceChild(event.detail, this.popupRef.document.documentElement);
+            }
+        }
+
         const handleNextPageEvent = (event) => {
             this.pageChange(event.detail.value, this.helpurlProps)
                 .catch(error => {
@@ -233,6 +241,7 @@ class ClassHelper extends HTMLElement {
         }
 
         this.addEventListener("click", handleClickEvent);
+        this.addEventListener("popupReady", handlePopupReadyEvent);
         this.addEventListener("prevPage", handlePrevPageEvent);
         this.addEventListener("nextPage", handleNextPageEvent);
         this.addEventListener("valueSelected", handleValueSelectedEvent);
@@ -303,7 +312,7 @@ class ClassHelper extends HTMLElement {
             throw new Error(message);
         }
 
-        ClassHelper.translations = translations;
+        ClassHelper.translations = json;
     }
 
     async fetchDropdownsData() {
@@ -904,49 +913,70 @@ class ClassHelper extends HTMLElement {
             throw new Error("Browser Failed to open Popup Window");
         }
 
-        this.popupRef.addEventListener("load", (event) => {
-            const doc = event.target;
-            const body = doc.body;
+        // Create the popup root level page
+        const page = document.createDocumentFragment();
+        const html = document.createElement("html");
+        const head = document.createElement("head");
+        const body = document.createElement("body");
 
-            const itemDesignator = window.location.pathname.split("/").at(-1);
-            let title = `${itemDesignator} - Classhelper`;
+        body.classList.add("flex-container");
 
-            if (props.formProperty) {
-                const label = document.getElementsByName(props.formProperty).item(0).parentElement.previousElementSibling;
-                title = label.textContent + " - " + title;
-            }
+        const itemDesignator = window.location.pathname.split("/").at(-1);
+        let titleText = `${itemDesignator} - Classhelper`;
+        if (props.formName) {
+            // main window lookup for the label of the form property
+            const label = document.getElementsByName(props.formProperty).item(0).parentElement.previousElementSibling;
+            titleText = label.textContent + " - " + titleText;
+        }
 
-            doc.title = title;
+        const titleTag = document.createElement("title");
+        titleTag.textContent = titleText;
 
-            // Add external classhelper stylesheet to head
-            const styleSheet = doc.createElement("link");
-            styleSheet.rel = "stylesheet";
-            styleSheet.type = "text/css";
-            styleSheet.href = this.trackerBaseURL + '/' + CSS_STYLESHEET_FILE_NAME;
-            doc.head.appendChild(styleSheet);
+        const styleSheet = document.createElement("link");
+        styleSheet.rel = "stylesheet";
+        styleSheet.type = "text/css";
+        styleSheet.href = this.trackerBaseURL + '/' + CSS_STYLESHEET_FILE_NAME;
 
-            body.classList.add("flex-container");
+        head.appendChild(titleTag);
+        head.appendChild(styleSheet);
 
-            if (this.dataset.searchWith) {
-                const searchFrag = this.getSearchFragment(null);
-                body.appendChild(searchFrag);
-            }
+        if (this.dataset.searchWith) {
+            const searchFrag = this.getSearchFragment(null);
+            body.appendChild(searchFrag);
+        }
 
-            const paginationFrag = this.getPaginationFragment(prevPageURL, nextPageURL, props.pageIndex, props.pageSize, collection.length);
-            body.appendChild(paginationFrag);
+        const paginationFrag = this.getPaginationFragment(prevPageURL, nextPageURL, props.pageIndex, props.pageSize, collection.length);
+        body.appendChild(paginationFrag);
 
-            const tableFrag = this.getTableFragment(props.fields, collection, preSelectedValues, !!props.formProperty);
-            body.appendChild(tableFrag);
+        const tableFrag = this.getTableFragment(props.fields, collection, preSelectedValues, !!props.formProperty);
+        body.appendChild(tableFrag);
 
-            const separator = doc.createElement("div");
-            separator.classList.add("separator");
-            body.appendChild(separator);
+        const separator = document.createElement("div");
+        separator.classList.add("separator");
+        body.appendChild(separator);
 
-            if (props.formProperty) {
-                const accumulatorFrag = this.getAccumulatorFragment(preSelectedValues);
-                body.appendChild(accumulatorFrag);
-            }
-        });
+        if (props.formProperty) {
+            const accumulatorFrag = this.getAccumulatorFragment(preSelectedValues);
+            body.appendChild(accumulatorFrag);
+        }
+
+        html.appendChild(head);
+        html.appendChild(body);
+        page.appendChild(html);
+
+        const dispatchPopupReady = () => this.dispatchEvent(new CustomEvent("popupReady", { detail: page }));
+
+        // Wait for the popup window to load, onload fire popupReady event on the classhelper
+        this.popupRef.addEventListener("load", dispatchPopupReady);
+
+        // If load event was already fired way before the event listener was attached
+        // we need to trigger it manually if popupRef is readyState complete
+        if (this.popupRef.document.readyState === "complete") {
+            dispatchPopupReady();
+            // if we did successfully trigger the event, we can remove the event listener
+            // else wait for it to be removed with closing of popup window, this cleaning up closure
+            this.popupRef.removeEventListener("load", dispatchPopupReady);
+        }
 
         this.popupRef.addEventListener("keydown", (e) => {
             if (e.key === "ArrowDown") {