From 5c1b0fbf6216b2e3a30e6e556ea1fcd14138208e Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Wed, 4 Dec 2024 11:19:58 +0100
Subject: [PATCH] update index

---
 www/index.html | 121 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 111 insertions(+), 10 deletions(-)

diff --git a/www/index.html b/www/index.html
index de0552b..e32aa6f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -2703,6 +2703,10 @@
             },
             "resetPreview" : function(el) {
               return new Promise(function(resolve, reject) {
+                if (el.contentDocument.childNodes[0].innerText == "") {
+                  resolve(el);
+                  return;
+                }
                 var newRunner = el.cloneNode(false);
                 newRunner.addEventListener("load", function() {
                   resolve(newRunner);
@@ -2832,6 +2836,7 @@
               }
               simplyApp.commands.codeMirrorInit();
               simplyApp.commands.autoRunTests();
+              simplyApp.commands.autoRunPreviews();
             },
             "collapseMenu" : function(el) {
               if (!el.hasAttribute("open")) {
@@ -3167,11 +3172,6 @@
                 editor.pageData.parts = parts;
                 editor.pageData.count = count;
                 editor.pageData.page = "Edit component";
-              })
-                .then(function() {
-                setTimeout(function() { // FIXME: Wait for the CSS to be available;
-                  simplyApp.commands.autoRunPreviews();
-                }, 1000);
               });
             },
             "#pages/:component" : function(params) {
@@ -3218,11 +3218,6 @@
                 editor.pageData.parts = parts;
                 editor.pageData.count = count;
                 editor.pageData.page = "Edit page";
-              })
-                .then(function() {
-                setTimeout(function() { // FIXME: Wait for the CSS to be available;
-                  simplyApp.commands.autoRunPreviews();
-                }, 1000);
               });
             },
             "#base" : function() {
@@ -4499,6 +4494,21 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentRawApi"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20base%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentHeadHtml"></simply-render>
+      <simply-render rel="componentBodyHtml"></simply-render>
+      <simply-render rel="componentFootHtml"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentRawApi"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
@@ -4545,6 +4555,23 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentComponentTemplate"></simply-render>
+      <simply-render rel="componentComponentCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
@@ -4592,6 +4619,23 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20page">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentPageTemplate"></simply-render>
+      <simply-render rel="componentPageCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Edit page frame">
       <main>
       <div class="simplycode-header">
@@ -5184,6 +5228,63 @@ <h1>App preview</h1>
         }
       });
     </script>
+    <!-- Auto%20run%20preview -->
+    <script>
+      document.addEventListener("simply-data-changed", function(event) {
+        if (
+          (event.data.dataBinding.parentKey == "/component/parts/") ||
+          (event.data.dataBinding.parentKey.indexOf("/component/parts/") == 0)
+        ) {
+          // Handle changes of the part name
+          var component = event.data.dataBinding.parentKey.split("/")[3];
+          var componentNameField = simplyApp.actions.getComponentNameField(component);
+          
+          if (event.data.arguments[0] == componentNameField) {
+            var newname = event.data.arguments[1];
+            var oldname = event.data.arguments[2];
+    
+            editor.pageData.app[component].forEach(function(appPart) {
+              if (appPart[componentNameField] == oldname) {
+                appPart[componentNameField] = newname;
+              }
+            });
+          }
+    
+          if (typeof autoRunPreviewTimeout !== "undefined") {
+            window.clearTimeout(autoRunPreviewTimeout);
+          }
+          autoRunPreviewTimeout = window.setTimeout(function() {
+            // Update the app data for the preview
+            for (component in editor.pageData.component.parts) {
+              if (!editor.pageData.app[component]) {
+                editor.pageData.app[component] = [];
+              }
+              var componentNameField = simplyApp.actions.getComponentNameField(component);
+              editor.pageData.component.parts[component].forEach(function(part) {
+                var found = false;
+                editor.pageData.app[component].forEach(function(appPart, appIndex) {
+                  if (part[componentNameField] && (appPart[componentNameField] == part[componentNameField])) {
+                    for (i in part) {
+                      editor.pageData.app[component][appIndex][i] = part[i];
+                    }
+                    found = true;
+                  }
+                });
+                if (!found) {
+                  editor.pageData.app[component].push(JSON.parse(JSON.stringify(part)));
+                }
+              });
+            }
+    
+            document.querySelectorAll("[data-simply-transformer=simplyPreviewComponent]").forEach(function(element) {
+              element.innerHTML = editor.transformers.simplyPreviewComponent.render.call(element, element.dataBinding.get());
+            });
+    
+            simplyApp.commands.autoRunPreviews()
+          }, 500);
+        }
+      });
+    </script>
     <!-- Auto run tests -->
     <script>
       document.addEventListener("simply-data-changed", function(event) {