docs: add config builder page to demo (#564)

subugoe · Feb 10, 2025 · 5aa9b03 · 5aa9b03
1 parent fca7650
commit 5aa9b03
Show file tree

Hide file tree

Showing 14 changed files with 1,050 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -296,9 +296,9 @@ There are options to
 | panels                                  | PanelConfig[] | &darr;    | Defines an array of panel objects. The panels will appear in the same order.                                                                                                                                                    |
 | panels[i].label                         | String        | `Panel i` | Sets the label which appears in the panel header. If there is only one view in the panel then the view label will be displayed instead. Translatable.                                                                           |
 | panels[i].views                         | ViewConfig[]  | &darr;    | Defines an array of views inside of a panel. If there are multiple views, we display them in tabs. If there is only one view we omit the tabs and display the view directly inside the panel.                                   |
+| panels[i].width                         | Number        | 1         | Defines a width multiplier to a panel default width. Values between 1 and 10 are allowed. Float values allowed. Causes horizontal overflow. Ignored on mobile screens since the default width takes the whole screen width.     |
 | panels[i].views[j].id                   | String        | `view-j`  | Unique identifier for the view across the app.                                                                                                                                                                                  |
 | panels[i].views[j].label                | String        | `View j`  | Sets the label which appears in the tab header. If there is only one view then this label will be displayed as panel header label. Translatable.                                                                                |
-| panels[i].views[j].width                | Number        | 1         | Defines a width multiplier to a panel default width. Values between 1 and 10 are allowed. Float values allowed. Causes horizontal overflow. Ignored on mobile screens since the default width takes the whole screen width.     |
 | panels[i].views[j].default              | Boolean       | `false`   | Specifies whether this view should be visible at the initial start of the app. If no `default` keys provided on views or all `default` keys are set to `false`, then the first view will be considered as default.              |
 | panels[i].views[j].connector            | Object        | &darr;    | Defines which view component and its options. Each view can have its own arbitrary config options.                                                                                                                              |
 | panels[i].views[j].connector.id         | Number        | null      | Defines the component id which will be rendered dynamically for this view. See view connectors.                                                                                                                                 |

diff --git a/examples/ahiqar-arabic-karshuni.html b/examples/ahiqar-arabic-karshuni.html
@@ -7,7 +7,7 @@
   <meta name="msapplication-tap-highlight" content="no">
   <meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
   <link rel="stylesheet" href="dist/tido.css">
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 <noscript><strong>We're sorry but TIDO doesn't work properly without JavaScript enabled. Please enable it to

diff --git a/examples/ahiqar-syriac.html b/examples/ahiqar-syriac.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="dist/tido.css">
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 <noscript><strong>We're sorry but TIDO doesn't work properly without JavaScript enabled. Please enable it to

diff --git a/examples/config-builder/index.html b/examples/config-builder/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dynamic Form Builder</title>
+  <link rel="stylesheet" href="../css/pico.min.css">
+  <link rel="stylesheet" href="../css/config-builder-style.css">
+
+  <script src="./js/script.js" type="module"></script>
+</head>
+<body>
+  <main class="container">
+    <div class="header">
+      <h1>Create your TIDO config</h1>
+    </div>
+    <div class="split-view">
+      <div class="form-container">
+        <div id="app"></div>
+      </div>
+      <div class="json-container">
+        <button id="copy" class="outline">Copy</button>
+        <pre id="jsonOutput"></pre>
+      </div>
+    </div>
+
+  </main>
+</body>
+</html>
diff --git a/examples/config-builder/js/confetti.js b/examples/config-builder/js/confetti.js
@@ -0,0 +1,28 @@
+function triggerConfetti() {
+  const confettiCount = 50; // Number of confetti pieces
+  const explosionOriginX = window.innerWidth / 2; // Center of screen
+  const explosionOriginY = window.innerHeight; // Bottom of screen
+
+  for (let i = 0; i < confettiCount; i++) {
+    let confetti = document.createElement("div");
+    confetti.className = "confetti";
+    document.body.appendChild(confetti);
+
+    // Random trajectory
+    let x = (Math.random() - 0.5) * window.innerWidth + "px"; // Spread horizontally
+    let y = (Math.random() * -(window.innerHeight)) + "px"; // Upward explosion
+
+    confetti.style.setProperty('--x', x);
+    confetti.style.setProperty('--y', y);
+    confetti.style.left = `${explosionOriginX}px`;
+    confetti.style.top = `${explosionOriginY}px`;
+    confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; // Random colors
+
+    // Remove confetti after animation
+    setTimeout(() => confetti.remove(), 1500);
+  }
+}
+
+export {
+  triggerConfetti
+}