adding dropdown close

jaiminmoslake7020 · Nov 29, 2024 · bd0e94e · bd0e94e
1 parent fde6acf
commit bd0e94e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 10 deletions.
diff --git a/app/components/AppLevelTypeDropdown.ts b/app/components/AppLevelTypeDropdown.ts
@@ -7,31 +7,76 @@ export const AppLevelTypeDropdown = (contextsData: InitializeContextsFunctionTyp
 
   const { getAppLevelType } = useContextAppLevelType(contextsData);
 
-  const onLevelSelected = (btn:HTMLButtonElement, dropdownDiv: HTMLDivElement) => {
+  let opened : boolean = false;
+
+  const getOpened = () : boolean => {
+    return opened;
+  }
+
+  const setOpened = (item:boolean) => {
+    opened = item;
+  }
+
+  let dropdownDivHtml : HTMLDivElement | undefined ;
+
+  const getDropdownDivHtml = () : HTMLDivElement | undefined => {
+    return dropdownDivHtml;
+  }
+
+  const setDropdownDivHTML = (item:HTMLDivElement | undefined) => {
+    dropdownDivHtml = item;
+  }
+
+  const onLevelSelected = (btn:HTMLButtonElement) => {
     btn.innerHTML = getAppLevelType();
-    dropdownDiv.remove();
+    document.removeEventListener('click', clickFunction );
+    remove();
+    setOpened(false);
     onLevelChange();
   }
 
+  const clickFunction = (e:any) : void => {
+    const target = e.target as Element;
+    const currentOpened = getOpened();
+    if (currentOpened) {
+      if (!target?.closest('.dropdown')) {
+        document.removeEventListener('click', clickFunction );
+        remove();
+        setOpened(false);
+      }
+    }
+  }
+
   const render = () => {
     const dropdownContainer = DropdownContainer('dropdown-container-app-level-selector-box');
 
-    const b = Button( getAppLevelType(), 'btn' , (e) => {
+    const b = Button(getAppLevelType(), 'btn', (e) => {
       const btn = e.target as HTMLButtonElement;
       const dropdownDiv = Dropdown('dropdown-app-level-selector-box');
-      const a = AskForAppLevelType( onLevelSelected.bind(null, btn, dropdownDiv), true , contextsData);
+      const a = AskForAppLevelType(onLevelSelected.bind(null, btn), true, contextsData);
       const d = a.render();
+      setDropdownDivHTML(dropdownDiv);
+      document.addEventListener('click', clickFunction );
       if (d) {
         dropdownDiv.append(d);
         dropdownContainer.append(dropdownDiv);
-
+        setTimeout(() => {
+          setOpened(true);
+        }, 50);
       }
     });
 
     dropdownContainer.append(b);
     return dropdownContainer;
   }
 
+  const remove = () => {
+   if ( getDropdownDivHtml() ) {
+     (getDropdownDivHtml() as HTMLDivElement).remove();
+   }
+    setDropdownDivHTML(undefined);
+  }
+
   return {
     render
   }

diff --git a/app/components/RestartGameButton.ts b/app/components/RestartGameButton.ts
@@ -13,11 +13,6 @@ const RestartGameButtonController = () : RestartGameButtonControllerType => {
   const getButtonEnabled = () => buttonEnabled
 
   const setButtonEnabled = (item:boolean) => {
-    if (item) {
-      console.log('Auto Restart is turned on')
-    } else {
-      console.log('Auto Restart is turned off')
-    }
     buttonEnabled = item;
   }