Minor cleanup to example

uniform quote usage naming closer to conventions add event only to relevant element
webui-dev · Sep 22, 2023 · f049e5f · f049e5f
1 parent b0885e7
commit f049e5f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 43 deletions.
diff --git a/examples/C/text-editor/text-editor.c b/examples/C/text-editor/text-editor.c
@@ -15,7 +15,7 @@ int main() {
     int MainWindow = webui_new_window();
 
     // Bind HTML element IDs with a C functions
-    webui_bind(MainWindow, "Close", Close);
+    webui_bind(MainWindow, "close-button", Close);
 
     // Show a new window
     webui_set_root_folder(MainWindow, "ui");

diff --git a/examples/C/text-editor/ui/MainWindow.html b/examples/C/text-editor/ui/MainWindow.html
@@ -10,12 +10,6 @@
         <link rel="stylesheet" href="css/lucario.css">
         <link rel="stylesheet" href="css/codemirror.min.css">
         <link rel="stylesheet" href="css/all.min.css">
-        <script src="js/codemirror.min.js"></script>
-        <script src="js/xml.min.js"></script>
-        <script src="js/css.min.js"></script>
-        <script src="js/javascript.min.js"></script>
-        <script src="js/clike.min.js"></script>
-        <script src="js/python.min.js"></script>
     </head>
     <body>
         <div class="topbar"></div>
@@ -24,14 +18,14 @@
                 <li>
                     <a onclick="OpenFile();"><i class="fas fa-folder-open"></i></a>
                 </li>
-                <li id="SaveLi" style="pointer-events: none; color: #7ca0df;">
+                <li id="save-button" style="pointer-events: none; color: #7ca0df;">
                     <a onclick="SaveFile();"><i class="fa fa-floppy-disk"></i></a>
                 </li>
                 <li>
-                    <a id="Close"><i class="fas fa-circle-xmark"></i></a>
+                    <a id="close-button"><i class="fas fa-circle-xmark"></i></a>
                 </li>
                 <li>
-                    <a id="About"><i class="fas fa-question-circle"></i></a>
+                    <a id="about-button"><i class="fas fa-question-circle"></i></a>
                 </li>
             </ul>
         </nav>
@@ -46,6 +40,12 @@ <h1>WebUI Text Editor</h1>
                 <p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2023 Hassan Draga</p>
             </div>
         </div>
+        <script src="js/codemirror.min.js"></script>
+        <script src="js/xml.min.js"></script>
+        <script src="js/css.min.js"></script>
+        <script src="js/javascript.min.js"></script>
+        <script src="js/clike.min.js"></script>
+        <script src="js/python.min.js"></script>
         <script src="js/ui.js"></script>
     </body>
 </html>
diff --git a/examples/C/text-editor/ui/js/ui.js b/examples/C/text-editor/ui/js/ui.js
@@ -1,66 +1,62 @@
 // Text Editor
 
 // Elements
-let About = document.getElementById("About");
-let aboutBox = document.getElementById("about-box");
+const aboutBtn = document.getElementById('about-button');
+const aboutBox = document.getElementById('about-box');
+const saveBtn = document.getElementById('save-button');
 let fileHandle = null;
 
 // About show
-About.onclick = function() {
-    // Open ABout
-    aboutBox.style.display = "block";
-}
+aboutBtn.onclick = function() {
+    aboutBox.style.display = 'block';
+};
 
 // About hide
-window.onclick = function(event) {
-    if (event.target == aboutBox) {
-        // Close About
-        aboutBox.style.display = "none";
-    }
-}
+aboutBox.onclick = function(event) {
+    aboutBox.style.display = 'none';
+};
 
 // Create the editor
-const editor = document.getElementById("editor");
+const editor = document.getElementById('editor');
 const codeMirrorInstance = CodeMirror.fromTextArea(editor, {
-    mode: "text/x-csrc",
+    mode: 'text/x-csrc',
     lineNumbers: true,
     tabSize: 4,
     indentUnit: 2,
     lineWrapping: true,
-    theme: "lucario"
+    theme: 'lucario',
 });
 
 // Change editor language
 function SetFileModeExtension(extension) {
-    let mode = "";
+    let mode = '';
     switch (extension) {
-        case "js":
-            mode = "text/javascript";
+        case 'js':
+            mode = 'text/javascript';
             break;
-        case "c":
-        case "cpp":
-        case "h":
-            mode = "text/x-csrc";
+        case 'c':
+        case 'cpp':
+        case 'h':
+            mode = 'text/x-csrc';
             break;
-        case "py":
-            mode = "text/x-python";
+        case 'py':
+            mode = 'text/x-python';
             break;
-        case "html":
-            mode = "text/html";
+        case 'html':
+            mode = 'text/html';
             break;
         default:
-            mode = "text/x-csrc";
+            mode = 'text/x-csrc';
     }
-    codeMirrorInstance.setOption("mode", mode);
+    codeMirrorInstance.setOption('mode', mode);
 }
 
 // Add full text to the editor
 function addText(text) {
     codeMirrorInstance.setValue(text);
 
-    const element = document.getElementById('SaveLi');
-    element.style.color = '#ddecf9';
-    element.style.pointerEvents = 'all';
+    saveBtn.style.color = '#ddecf9';
+    saveBtn.style.pointerEvents = 'all';
 }
 
 async function OpenFile() {
@@ -87,6 +83,8 @@ async function SaveFile() {
     await writableStream.close();
 }
 
-window.addEventListener("DOMContentLoaded", (event) => {
-    codeMirrorInstance.setSize("100%", "99%");
+window.addEventListener('DOMContentLoaded', () => {
+    codeMirrorInstance.setSize('100%', '99%');
 });
+
+