Make omggif.js available as an independent resource, improved sequential loading in cpal (#5362)

* take omggif out of pixelforge.htm, improved sequential loading in cpal

* add js_omggif.h to build output list

Author: DedeHai

tools/cdata.js

@@ -26,7 +26,7 @@ const packageJson = require("../package.json");
 // Export functions for testing
 module.exports = { isFileNewerThan, isAnyFileInFolderNewerThan };
 
-const output = ["wled00/html_ui.h", "wled00/html_pixart.h", "wled00/html_cpal.h", "wled00/html_edit.h", "wled00/html_pxmagic.h", "wled00/html_pixelforge.h", "wled00/html_settings.h", "wled00/html_other.h", "wled00/js_iro.h"]
+const output = ["wled00/html_ui.h", "wled00/html_pixart.h", "wled00/html_cpal.h", "wled00/html_edit.h", "wled00/html_pxmagic.h", "wled00/html_pixelforge.h", "wled00/html_settings.h", "wled00/html_other.h", "wled00/js_iro.h", "wled00/js_omggif.h"]
 
 // \x1b[34m is blue, \x1b[36m is cyan, \x1b[0m is reset
 const wledBanner = `
@@ -271,6 +271,20 @@ writeChunks(
   "wled00/js_iro.h"
 );
 
+writeChunks(
+  "wled00/data/pixelforge",
+  [
+    {
+      file: "omggif.js",
+      name: "JS_omggif",
+      method: "gzip",
+      filter: "js-minify",
+      mangle: (s) => s.replace(/^\/\*![\s\S]*?\*\//, '') // remove license comment at the top
+    }
+  ],
+  "wled00/js_omggif.h"
+);
+
 writeChunks(
   "wled00/data",
   [

wled00/data/cpal/cpal.htm

@@ -73,28 +73,15 @@
 		let maxCol; // max colors to send out in one chunk, ESP8266 is limited to ~50 (500 bytes), ESP32 can do ~128 (1340 bytes)
 
 		// load external resources in sequence to avoid 503 errors if heap is low, repeats indefinitely until loaded
-		// load CSS
-		const l1 = document.createElement('link');
-		l1.rel = 'stylesheet';
-		l1.href = 'style.css';
-		l1.onload = () => {
-			// load iro.js
-			const l2 = document.createElement('script');
-			l2.src = 'iro.js';
-			l2.onload = () => {
-				// load common.js
-				const l3 = document.createElement('script');
-				l3.src = 'common.js';
-				// initialize when all documents are loaded
-				l3.onload = () => document.readyState === 'complete' ? init() : window.addEventListener('load', init);
-				l3.onerror = () => setTimeout(() => document.head.appendChild(l3), 100);
-				document.head.appendChild(l3);
+		(function loadFiles() {
+			const s = document.createElement('script');
+			s.src = 'common.js';
+			s.onerror = () => setTimeout(loadFiles, 100);
+			s.onload = () => {
+				loadResources(['style.css', 'iro.js'], init);
 			};
-			l2.onerror = () => setTimeout(() => document.head.appendChild(l2), 100);
-			document.head.appendChild(l2);
-		};
-		l1.onerror = () => setTimeout(() => document.head.appendChild(l1), 100);
-		document.head.appendChild(l1);
+			document.head.appendChild(s);
+		})();
 
 		// main init function, called when all resources are loaded
 		function init() {