close search results when leaving the menu

editor.css

@@ -120,6 +120,15 @@ body {
   stroke: rgb(117, 117, 117);
 }
 
+#search-results {
+  display: none;
+  position: relative;
+  min-height: 20px;
+  padding: 20 20 20 20;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .submenu {
   font-family: 'Inter';
   width: fit-content;

editor.html

@@ -128,7 +128,7 @@
         <div class="menubutton">Search</div>
         <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
           <div id="search-container">
-            <input type="text" placeholder="Nodes, Edges, ...">
+            <input type="text" placeholder="Nodes, Edges, ..." onclick="showSearchResults()">
             <span class="search-button">
               <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
@@ -136,6 +136,7 @@
               </svg>
             </span>
           </div>
+          <div id="search-results"></div>
         </div>
       </div>
       <div class="menuitem">

editor.js

@@ -68,7 +68,7 @@ function openMenuItem(menuitem) {
     other.classList.remove('selectedmenuitem');
     Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0, step: 0.1}));
   });
-  fadeOut(...fadeOuts);
+  fadeOut(null, ...fadeOuts);
   menuitem.classList.add('selectedmenuitem');
   var fadeIns = [{element: submenuBackdrop, max: 1}];
   var lastSubMenu = null;
@@ -95,7 +95,7 @@ function openMenuItem(menuitem) {
 function closeContextMenus(...menus) {
   var items = []
   menus.forEach(menu => items.push({element: menu, min: 0, step: 0.1}));
-  fadeOut(...items);
+  fadeOut(null, ...items);
 }
 
 function closeMenuItem() {
@@ -103,7 +103,7 @@ function closeMenuItem() {
   selectedMenuItem.classList.remove('selectedmenuitem');
   var fadeOuts = [{element: submenuBackdrop, min: 0, step: 0.1}];
   Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0, step: 0.1}));
-  fadeOut(...fadeOuts);
+  fadeOut(() => searchResults.style.display = 'none', ...fadeOuts);
   selectedMenuItem = null;
 }
 
@@ -133,6 +133,10 @@ function openSearchMenu(menuitem) {
 
 document.getElementById('filepanel').style.opacity = 0;
 
+function showSearchResults() {
+  searchResults.style.display = 'block';
+}
+
 function openFileDisplay() {
   deselect();
   function callback() {
@@ -150,7 +154,7 @@ function openFileDisplay() {
 function closeFileDisplay() {
   var panel = document.getElementById('filepanel');
   var curtain = document.getElementById('curtain');
-  fadeOut({element: panel, min: 0, step: 0.025}, {element: curtain, min: 0, step: 0.025});
+  fadeOut(null, {element: panel, min: 0, step: 0.025}, {element: curtain, min: 0, step: 0.025});
 }
 
 function fadeIn(callback, ...items) {
@@ -173,7 +177,7 @@ function fadeIn(callback, ...items) {
   requestAnimationFrame(fade);
 }
 
-function fadeOut(...items) {
+function fadeOut(callback, ...items) {
   function fade() {
     var proceed = false;
     items.forEach(i => {
@@ -188,6 +192,7 @@ function fadeOut(...items) {
       }
     });
     if (proceed) requestAnimationFrame(fade);
+    else if (callback) requestAnimationFrame(callback);
   }
   requestAnimationFrame(fade);
 }
@@ -311,7 +316,9 @@ const fileButtons = document.getElementById('filebuttons');
 const contextMenuBg = document.getElementById('ctmenubg'); //Click on background
 const contextMenuSt = document.getElementById('ctmenust'); //Click on state
 const contextMenuEd = document.getElementById('ctmenued'); //Click on edge
+//Search
 const searchContainer = document.getElementById('search-container');
+const searchResults   = document.getElementById('search-results');
 // Counters for placeholder IDs of states/actions added via GUI
 var stateIdCounter  = 0;
 var actionIdCounter = 0;
@@ -319,7 +326,7 @@ var stateAbbreviations = [];
 var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new state
 
 sidePanel.style.top = mainMenu.offsetHeight + 15;
-// searchContainer.style.left = mainMenu.offsetWidth / 2 - searchContainer.offsetWidth / 2;
+
 
 /**
  * Marks the given item as selected.
@@ -355,14 +362,14 @@ function select(item) {
     fadeIn(callback, {element: sidePanel, max: 1});
     
   } else {
-    fadeOut({element: sidePanel, min: 0});
+    fadeOut(null, {element: sidePanel, min: 0});
     // sidePanel.style.display = 'none';
   }
   console.log(item);
 }
 
 function deselect() {
-  fadeOut({element: sidePanel, min: 0});
+  fadeOut(null, {element: sidePanel, min: 0});
   // sidePanel.style.display = 'none';
   selection = null;
 }