Merge pull request #4 from Kynlos/dev

Fixed modal windows not closing + more (see desctiption)
Kynlos · Jan 31, 2024 · f595ff3 · f595ff3
2 parents 3746194 + 39e325b
commit f595ff3
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 34 deletions.
diff --git a/src/index.html b/src/index.html
@@ -23,12 +23,13 @@
  <body>
   <div id="customCommandViewerModal" class="modal">
     <div class="modal-content">
-      <span class="close" onclick="closeCustomCommandViewerModal()">&times;</span>
+      <!-- Removed inline onclick handler and ensured class="close" is present -->
+      <span class="close">&times;</span>
       <iframe id="customCommandViewerFrame" src="commands.html" style="width:100%; height:80vh;" frameborder="0"></iframe>
     </div>
   </div>
   <!-- Sidebar -->
-  <div class="sidebar">
+  <div class="sidebar" id="sidebar">
    <nav class="sidebar-nav">
     <a class="sidebar-link" href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">
      <i class="fab fa-discord">
@@ -125,11 +126,7 @@ <h1>
      Command Context (Click an item to select):
     </label>
     <div class="context-options" id="contextOptions">
-     <div class="context-option" data-value="codebase" title="Include results from embeddings/keyword code search as snippets.">
-      <i class="fa fa-database">
-      </i>
-      codebase
-     </div>
+
      <div class="context-option" data-value="selection" title="Include currently selected code from editor.">
       <i class="fa fa-i-cursor">
       </i>
@@ -186,18 +183,19 @@ <h1>
     Show JSON Data
    </button>
 
-   <!-- JSON Modal -->
-   <div class="modal" id="jsonModal">
+  <!-- JSON Modal -->
+  <div class="modal" id="jsonModal">
     <div class="modal-content">
-     <span class="close">
-      ×
-     </span>
-     <pre id="jsonDisplay"></pre>
-     <button id="copyJsonButton">
-      Copy JSON
-     </button>
+      <!-- Ensure class="close" is present -->
+      <span class="close">
+        ×
+      </span>
+      <pre id="jsonDisplay"></pre>
+      <button id="copyJsonButton">
+        Copy JSON
+      </button>
     </div>
-   </div>
+  </div>
 
    <!-- Create Command Button -->
    <button id="createCommand" title="Click to create the command and prompt to save as a JSON file.">

diff --git a/src/scripts.js b/src/scripts.js
@@ -11,10 +11,7 @@
         gtag('js', new Date());
         gtag('config', 'G-FT7YJ8S06W');
 
-        // Function to toggle the sidebar
-        function toggleSidebar() {
-            document.body.classList.toggle('body-sidebar-open');
-        }
+
 
         // Get the context options element
         const contextOptions = document.getElementById('contextOptions');
@@ -47,10 +44,13 @@
                 return;
             }
 
+            // Filter out 'codebase' from the selected contexts
+            const filteredContexts = selectedContexts.filter(context => context !== 'codebase');
+
             const commandData = {
                 command_name: commandName,
                 prompt: commandPrompt,
-                context: selectedContexts,
+                context: filteredContexts, // Use the filtered contexts here
                 slashCommand: slashCommand,
                 note: commandNote
             };
@@ -175,10 +175,13 @@
                 return null;
             }
 
+            // Filter out 'codebase' from the selected contexts
+            const filteredContexts = selectedContexts.filter(context => context !== 'codebase');
+
             const commandData = {
                 command_name: commandName,
                 prompt: commandPrompt,
-                context: selectedContexts,
+                context: filteredContexts, // Use the filtered contexts here
                 slashCommand: slashCommand,
                 note: commandNote
             };
@@ -211,16 +214,7 @@
             modal.style.display = "none";
         }
 
-        // Close modal when clicked outside the modal
-        window.onclick = function(event) {
-            if (event.target == modal) {
-                modal.style.display = "none";
-            }
-            var modal = document.getElementById('customCommandViewerModal');
-            if (event.target == modal) {
-            modal.style.display = 'none';
-            }
-        }
+
 
         // Function to copy JSON to clipboard
         function copyJsonToClipboard() {
@@ -291,6 +285,47 @@
             modal.style.display = 'none';
         }
 
-        // Close the modal if the user clicks outside of it
+        // Close modals when clicked outside of them
+        window.onclick = function(event) {
+            var jsonModal = document.getElementById('jsonModal');
+            var customCommandViewerModal = document.getElementById('customCommandViewerModal');
 
+            if (event.target == jsonModal) {
+                jsonModal.style.display = "none";
+            } else if (event.target == customCommandViewerModal) {
+                customCommandViewerModal.style.display = 'none';
+            }
+        }
+
+        // Function to close a given modal
+        function closeModal(modalId) {
+            var modal = document.getElementById(modalId);
+            if (modal) {
+                modal.style.display = "none";
+            }
+        }
+
+        // Attach close function to the close button of jsonModal
+        var jsonModalCloseBtn = document.querySelector("#jsonModal .close");
+        jsonModalCloseBtn.onclick = function() {
+            closeModal('jsonModal');
+        }
 
+        // Attach close function to the close button of customCommandViewerModal
+        var customCommandViewerModalCloseBtn = document.querySelector("#customCommandViewerModal .close");
+        customCommandViewerModalCloseBtn.onclick = function() {
+            closeModal('customCommandViewerModal');
+        }
+
+        // Function to toggle the sidebar
+        function toggleSidebar() {
+            var sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active'); // Use the appropriate class that shows/hides the sidebar
+        }
+
+        function toggleSidebar() {
+            var sidebar = document.getElementById('sidebar');
+            //console.log('Before toggle, active class:', sidebar.classList.contains('active'));
+            sidebar.classList.toggle('active'); // Use the appropriate class that shows/hides the sidebar
+            //console.log('After toggle, active class:', sidebar.classList.contains('active'));
+        }
diff --git a/src/server.py b/src/server.py
@@ -0,0 +1,14 @@
+import http.server
+import socketserver
+
+port = 8000
+
+handler = http.server.SimpleHTTPRequestHandler
+
+with socketserver.TCPServer(("", port), handler) as httpd:
+    print(f"Serving on port {port}")
+
+    try:
+        httpd.serve_forever()
+    except KeyboardInterrupt:
+        print("\nServer stopped by user.")
diff --git a/src/styles.css b/src/styles.css
@@ -168,6 +168,11 @@
             transform: translateX(0);
         }
 
+        /* Styles for the sidebar when active class is present */
+        .sidebar.active {
+            transform: translateX(0);
+        }
+
         /* Styles for the modal */
         .modal {
             display: none;