Clipping is now less bad.

client/src/controls/dropdown.ts

@@ -8,15 +8,61 @@ export class Dropdown {
     
     constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
     {
-        this.#element = <HTMLElement>document.getElementById(ID);
-        this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
-        this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
+        this.#element      = <HTMLElement>document.getElementById(ID);
+        this.#options      = <HTMLElement>this.#element.querySelector(".ol-select-options");
+        this.#value        = <HTMLElement>this.#element.querySelector(".ol-select-value");
         this.#defaultValue = this.#value.innerText;
-        this.#callback = callback;
-        if (options != null)
+        this.#callback     = callback;
+        
+        if (options != null) {
             this.setOptions(options);
+        }          
+
+        this.#value.addEventListener( "click", ev => {
+            
+            this.#element.classList.toggle( "is-open" );
+            this.#clip();
+
+        });
+
+        this.#element.addEventListener("mouseleave", ev => {
+            this.#close();
+        });
+
     }
 
+    #clip() {
+
+        const options = this.#options;
+        const bounds  = options.getBoundingClientRect();
+
+        this.#element.dataset.position = ( bounds.bottom > window.innerHeight ) ? "top" : "";
+
+    }
+
+
+    #close() {
+        this.#element.classList.remove( "is-open" );
+        this.#element.dataset.position = "";
+    }
+
+
+    #open() {
+        this.#element.classList.add( "is-open" );
+    }
+
+
+    #toggle() {
+        
+        if ( this.#element.classList.contains( "is-open" ) ) {
+            this.#close();
+        } else {
+            this.#open();
+        }
+
+    }
+
+
     setOptions(optionsList: string[])
     {
         this.#optionsList = optionsList;
@@ -26,8 +72,10 @@ export class Dropdown {
             button.textContent = option;
             div.appendChild(button);
             button.addEventListener("click", (e: MouseEvent) => {
+                e.stopPropagation();
                 this.#value.innerText = option;
-                this.#callback(option);
+                this.#close();
+                this.#callback( option, e );
             });
             return div;
         }));

client/src/index.ts

@@ -213,27 +213,6 @@ function setupEvents() {
             el.classList.toggle( "hide" );
         })
     });
-
-    /**  Olympus UI ***/
-    document.querySelectorAll(".ol-select").forEach(select => {
-
-        //  Do open/close toggle
-        select.addEventListener("click", ev => {
-
-            if ( ev.target instanceof HTMLElement && ev.target.nodeName !== "A" ) {
-                ev.preventDefault();
-            }
-            
-            ev.stopPropagation();
-            select.classList.toggle("is-open");
-        });
-
-        //  Autoclose on mouseleave
-        select.addEventListener("mouseleave", ev => {
-            select.classList.remove("is-open");
-        });
-
-    });
 }
 
 export function getMap() {