feat: same size fonts, remember scroll, scrollbar for events, 'obviou…

…s' clickable event
key4hep · Jun 24, 2024 · e4bbac7 · e4bbac7
1 parent 055ca96
commit e4bbac7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/css/event.css b/css/event.css
@@ -23,21 +23,28 @@
 
 #selected-event {
   font-weight: 500;
-  font-size: 1.2em;
   cursor: pointer;
 }
 
+#selected-event:hover {
+  text-decoration: underline;
+  background-color: #d1d1d1;
+}
+
 #event-selector-menu {
   display: none;
   position: fixed;
   top: 32px;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   background-color: #e1e1e1;
-  width: 75px;
+  width: 100px;
   left: 50%;
   transform: translateX(-50%);
+  max-height: 175px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 5px;
 }
 
 .event-option {

diff --git a/css/main.css b/css/main.css
@@ -3,6 +3,7 @@ body {
   padding: 0;
   /* overflow: hidden; */
   font-family: sans-serif;
+  font-size: 16px;
 }
 
 .manipulation-tool {

diff --git a/js/main.js b/js/main.js
@@ -93,8 +93,8 @@ document.getElementById("input-file").addEventListener("change", (event) => {
         optionElementMenu.appendChild(document.createTextNode(option));
         eventSelectorMenu.appendChild(optionElementMenu);
         optionElementMenu.addEventListener("click", () => {
-          eventSelectorMenu.style.display = "none";
           renderEvent(option);
+          eventSelectorMenu.style.display = "none";
         });
       });
     });

diff --git a/js/menu/event-number.js b/js/menu/event-number.js
@@ -28,6 +28,8 @@ const manipulationTools = document.getElementsByClassName("manipulation-tool");
 
 let currentEvent;
 
+const scrollLocation = {};
+
 function updateEventNumber(newEventNumber) {
   if (eventNumber.firstChild) {
     eventNumber.removeChild(eventNumber.firstChild);
@@ -50,12 +52,17 @@ function start(currentObjects, visibleObjects) {
 export function renderEvent(eventNumber) {
   const data = jsonData.data[`Event ${eventNumber}`];
 
+  scrollLocation[currentEvent] = {
+    x: window.scrollX,
+    y: window.scrollY,
+  };
+
   if (data === undefined) {
     return;
   } else {
     currentEvent = eventNumber;
-    updateEventNumber(eventNumber);
     loadSelectedEvent(jsonData, selectedObjectTypes.types, eventNumber);
+    updateEventNumber(eventNumber);
   }
 }
 
@@ -85,7 +92,14 @@ export function loadSelectedEvent() {
   }
 
   start(currentObjects, visibleObjects);
-  window.scroll((canvas.width - window.innerWidth) / 2, 0);
+  if (scrollLocation[currentEvent] === undefined) {
+    scrollLocation[currentEvent] = {
+      x: (canvas.width - window.innerWidth) / 2,
+      y: 0,
+    };
+  }
+
+  window.scroll(scrollLocation[currentEvent].x, scrollLocation[currentEvent].y);
 
   for (const tool of manipulationTools) {
     tool.style.display = "flex";