Optimize partial / page / script loader

kekefreedog · Dec 4, 2024 · fae8fe6 · fae8fe6
1 parent 85bc537
commit fae8fe6
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 31 deletions.
diff --git a/src/Front/Library/Crazypartial.ts b/src/Front/Library/Crazypartial.ts
@@ -30,6 +30,11 @@ export default abstract class Crazypartial {
      ******************************************************
      */
 
+    /**
+     * Input
+     */
+    public isReloaded:boolean = false;
+
     /**
      * Input
      */
@@ -85,11 +90,42 @@ export default abstract class Crazypartial {
             // Get content dom
             var contentDom = document.createRange().createContextualFragment(htmlString);
 
+            // Search partial
+            let partialEl = contentDom.querySelector("[partial]");
+
+            // Check partialEl and set id
+            partialEl && partialEl.setAttribute("data-partial-id", this.input.id.toString());
+
+            // Get parent
+            let parentEl = this.input.target.parentElement;
+
+            // Destroy previous instance
+            this.onDestroy();
+
             // Reload partial
             this.input.target.replaceWith(contentDom);
 
+            // Check parent el
+            if(parentEl){
+
+                // Get new element
+                let newTargetEl = parentEl.querySelector(`[data-partial-id="${this.input.id.toString()}"]`);
+
+                // Check new target el
+                if(newTargetEl){
+
+                    // Set input target
+                    this.input.target = newTargetEl;
+
+                }
+
+            }
+
         }
 
+        // Set is reloaded
+        this.isReloaded = true;
+
         // Execute on ready
         this.onReady();
 
@@ -106,6 +142,13 @@ export default abstract class Crazypartial {
 
     }
 
+    /**
+     * On Destroy
+     */
+    public onDestroy = () => {
+
+    }
+
     /**
      * Enable
      */

diff --git a/src/Front/Library/Loader/Page.ts b/src/Front/Library/Loader/Page.ts
@@ -63,6 +63,10 @@ export default class Page {
                 // Update Title
                 Page.updateTitle
             )
+            .then(
+                // Clean Potential Exisiting Partials
+                Page.cleanPotentialExisitingPartials
+            )
             .then(
                 // Load Style
                 Page.loadStyle
@@ -448,6 +452,36 @@ export default class Page {
 
     }
 
+    /**
+     * Clean Potential Exisiting Partials
+     * 
+     * Load Css styles of the page
+     * 
+     * @param options:LoaderPageOptions Options with all page details
+     * @return Promise<LoaderPageOptions>
+     */
+    public static cleanPotentialExisitingPartials = async(options:LoaderPageOptions):Promise<LoaderPageOptions> =>  {
+
+        // Set current page
+        let currentPage = window.Crazyobject.currentPage.get();
+
+        // Check current page
+        if(currentPage && currentPage.partials && Array.isArray(currentPage.partials) && currentPage.partials.length)
+
+            // Iteration partials
+            for(let partialObject of currentPage.partials)
+
+                // Check scriptRunning
+                if(partialObject.scriptRunning)
+
+                    // Execute destroy
+                    partialObject.scriptRunning.onDestroy();
+
+        // Return options
+        return options;       
+
+    }
+
     /**
      * Load Style
      * 

diff --git a/src/Front/Library/Loader/Script.ts b/src/Front/Library/Loader/Script.ts
@@ -44,52 +44,64 @@ export default class Script {
             // Try
             try {
 
-                // Create a htm element
-                const scriptEle: HTMLScriptElement = document.createElement("script");
+                // Check if script already exists
+                if(document.querySelector(`script#script-${id}`) !== null)
 
-                // Define the type
-                scriptEle.type = type;
+                    // Resolve status
+                    resolve({ 
+                        status: true
+                    });
 
-                // Set async
-                scriptEle.async = async;
+                else{
 
-                // Define utl
-                scriptEle.src = url;
+                    // Create a htm element
+                    const scriptEle: HTMLScriptElement = document.createElement("script");
 
-                // Check if id
-                if(id)
+                    // Define the type
+                    scriptEle.type = type;
 
-                    // Set id in scriptEle
-                    scriptEle.id = `script-${id}`;
+                    // Set async
+                    scriptEle.async = async;
 
-                // Event load
-                scriptEle.addEventListener("load", e => {
+                    // Define utl
+                    scriptEle.src = url;
+
+                    // Check if id
+                    if(id)
+
+                        // Set id in scriptEle
+                        scriptEle.id = `script-${id}`;
+
+                    // Event load
+                    scriptEle.addEventListener("load", e => {
+
+                        // Resolve status
+                        resolve({ 
+                            status: true
+                        });
 
-                    // Resolve status
-                    resolve({ 
-                        status: true
                     });
 
-                });
+                    // Event error
+                    scriptEle.addEventListener("error", e => {
 
-                // Event error
-                scriptEle.addEventListener("error", e => {
+                        // Set reject
+                        reject({
+
+                            // Set failed status
+                            status: false,
 
-                    // Set reject
-                    reject({
-
-                        // Set failed status
-                        status: false,
+                            // Set message
+                            message: `Failed to load the script ${url}`,
 
-                        // Set message
-                        message: `Failed to load the script ${url}`,
+                        });
 
                     });
 
-                });
-
-                // Add script in body of head
-                document[target].appendChild(scriptEle);
+                    // Add script in body of head
+                    document[target].appendChild(scriptEle);
+
+                }
 
             // Catch error
             } catch (error) {