Infrastructure: Codepen button should show only when resources loaded (pull #1533)

* Code pen button should show only when resources loaded
* Switch log to warn

Co-authored-by: Matt King <[email protected]>

Author: spectranaut

examples/js/examples.js

@@ -380,6 +380,8 @@ function addOpenInCodePenForm(
 
   var button = document.createElement('button');
   button.innerText = 'Open In CodePen';
+  button.id = buttonId;
+  button.style.display = 'none';
 
   form.appendChild(input);
   form.appendChild(button);
@@ -425,32 +427,36 @@ function addOpenInCodePenForm(
         }
         totalFetchedFiles++;
       } else {
-        hideButton(buttonId, 'Could not load resource: ' + href);
+        console.warn(
+          "Not showing 'Open in Codepen' button. Could not load resource: " +
+            href
+        );
       }
     };
     request.onerror = function () {
-      hideButton(buttonId, 'Could not load resource: ' + fileLink.href);
+      console.warn(
+        "Not showing 'Open in Codepen' button. Could not load resource: " +
+          fileLink.href
+      );
     };
     request.send();
   }
 
   var timerId = setInterval(() => {
-    console.log(totalFetchedFiles);
     if (totalFetchedFiles === fileLinks.length) {
-      document.getElementById(jsonInputId).value = JSON.stringify(postJson);
       clearInterval(timerId);
+      document.getElementById(jsonInputId).value = JSON.stringify(postJson);
+      var button = document.getElementById(buttonId);
+      button.style.display = '';
     }
   }, 500);
 
   setTimeout(() => {
     clearInterval(timerId);
+    console.warn(
+      "Not showing 'Open in Codepen' button. Timeout when loading resource."
+    );
   }, 10000);
 }
 
-function hideButton(buttonId, errorMsg) {
-  let button = document.querySelector(buttonId);
-  button.style.display = 'none';
-  console.log("Removing 'Open in Codepen button'. " + errorMsg);
-}
-
 var sourceCode = new aria.widget.SourceCode();