Merge pull request #42 from brauliorivas/feat/contact-modal

dmX information modal
key4hep · Jun 28, 2024 · 0aa445b · 0aa445b
2 parents 0ad8a09 + cde2b3c
commit 0aa445b
Show file tree

Hide file tree

Showing 18 changed files with 290 additions and 18 deletions.
diff --git a/css/contact.css b/css/contact.css
@@ -0,0 +1,32 @@
+address {
+  display: inline-block;
+}
+
+.contact-element {
+  display: flex;
+  align-items: center;
+  margin: 5px 0;
+}
+
+.contact-element::before {
+  content: "•";
+  margin-right: 10px;
+  font-size: 1.2em;
+  color: black;
+}
+
+.copy-email-button img {
+  display: block;
+}
+
+.email {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.copy-infobox {
+  position: absolute;
+  background-color: #f1f1f1;
+  padding: 5px;
+  border-radius: 5px;
+}
diff --git a/css/filter.css b/css/filter.css
@@ -35,3 +35,14 @@
   flex-direction: column;
   padding: 10px 0;
 }
+
+.filter-action {
+  padding: 5px;
+  border-radius: 5px;
+  font-weight: 500;
+  border: 1px solid #000;
+}
+
+.filter-action:hover {
+  background-color: #c5c5c5;
+}
diff --git a/css/information.css b/css/information.css
@@ -0,0 +1,39 @@
+#information-icon {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 1;
+}
+
+#information-icon:hover {
+  cursor: pointer;
+}
+
+#close-information:hover {
+  cursor: pointer;
+}
+
+#close-information {
+  margin-left: auto;
+}
+
+#information-modal {
+  position: fixed;
+  z-index: 2;
+  display: none;
+  width: 500px;
+  height: 500px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-direction: column;
+  backdrop-filter: blur(10px);
+  background-color: rgba(225, 225, 225, 0.8);
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid black;
+}
+
+.info-modal-content {
+  width: 100%;
+}
diff --git a/css/logo.css b/css/logo.css
@@ -0,0 +1,22 @@
+.logo-letter {
+  font-style: italic;
+  font-size: 45px;
+  font-family: serif;
+}
+
+.e1 {
+  color: #6e84f8;
+}
+
+.e2 {
+  color: #2b3fa4;
+}
+
+.d {
+  color: #653668;
+}
+
+.e3 {
+  color: #9e2c2c;
+  font-size: 50px;
+}
diff --git a/css/main.css b/css/main.css
@@ -18,3 +18,15 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+a {
+  text-decoration: none;
+  color: #2b3fa4;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+}
diff --git a/css/modal.css b/css/modal.css
@@ -77,21 +77,6 @@ div.align-right {
   font-family: serif;
 }
 
-#logo-d {
-  color: #6e84f8;
-  font-style: italic;
-}
-
-#logo-m {
-  color: #2b3fa4;
-  font-style: italic;
-}
-
-#logo-x {
-  color: #9e2c2c;
-  font-size: 60px;
-}
-
 #logo-background {
   background-color: "#a6a6a6";
 }

diff --git a/favicon.ico b/favicon.ico
diff --git a/img/braulio-email.webp b/img/braulio-email.webp
diff --git a/img/close.svg b/img/close.svg
diff --git a/img/copy.svg b/img/copy.svg
diff --git a/img/dmx_logo.png b/img/dmx_logo.png
diff --git a/img/eede-logo.svg b/img/eede-logo.svg
diff --git a/img/information.svg b/img/information.svg
diff --git a/img/juraj-email.webp b/img/juraj-email.webp
diff --git a/img/thomas-email.webp b/img/thomas-email.webp
diff --git a/index.html b/index.html
@@ -8,19 +8,23 @@
   <link rel="icon" type="image/x-icon" href="./favicon.ico">
 
   <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/logo.css">
   <link rel="stylesheet" href="css/canvas.css">
   <link rel="stylesheet" href="css/modal.css">
   <link rel="stylesheet" href="css/toggle.css">
   <link rel="stylesheet" href="css/filter.css">
   <link rel="stylesheet" href="css/event.css">
+  <link rel="stylesheet" href="css/information.css">
+  <link rel="stylesheet" href="css/contact.css">
 </head>
 
 <body>
   <div id="input-modal" class="modal-background">
     <div class="modal-content">
 
       <p>Welcome to <span id="logo">
-          <span id="logo-d">d</span><span id="logo-m">m</span><span id="logo-x">X</span>
+          <span class="logo-letter e1">e</span><span class="logo-letter e2">e</span><span
+            class="logo-letter d">d</span><span class="logo-letter e3">E</span>
         </span></p>
 
       <div id="input-message">
@@ -67,8 +71,8 @@
       <div id="filters">
       </div>
       <div>
-        <button id="filter-apply">Apply</button>
-        <button id="filter-reset">Reset</button>
+        <button id="filter-apply" class="filter-action">Apply</button>
+        <button id="filter-reset" class="filter-action">Reset</button>
       </div>
     </div>
   </div>
@@ -84,11 +88,71 @@
       width="20" height="20" />
   </div>
 
+  <img id="information-icon" src="img/information.svg" alt="Information" width="35" height="35" />
+
+  <div id="information-modal">
+    <img id="close-information" src="img/close.svg" alt="Close" width="35" height="35" />
+    <div class="info-modal-content">
+      <span class="logo-letter e1">e</span><span class="logo-letter e2">e</span><span
+        class="logo-letter d">d</span><span class="logo-letter e3">E</span>
+      <p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
+          href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
+        Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
+          rel="noopener noreferrer">EDM4hep</a> website.
+      </p>
+      <p>
+        Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
+          target="_blank" rel="noopener noreferrer">issue</a>.
+      </p>
+      <p>Contact:</p>
+      <ul>
+        <li class="contact-element">Juraj Smiesko:
+          <address class="email">
+            <a href="mailto:[email protected]">
+              <img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
+            </a>
+          </address>
+          <button class="copy-email-button" data-email="[email protected]">
+            <abbr title="Copy to Clipboard">
+              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+            </abbr>
+          </button>
+
+        </li>
+        <li class="contact-element">Thomas Madlener:
+          <address class="email">
+            <a href="mailto:[email protected]">
+              <img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
+            </a>
+          </address>
+          <button class="copy-email-button" data-email="[email protected]">
+            <abbr title="Copy to Clipboard">
+              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+            </abbr>
+          </button>
+        </li>
+        <li class="contact-element">Braulio Rivas:
+          <address class="email">
+            <a href="mailto:[email protected]">
+              <img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
+            </a>
+          </address>
+          <button class="copy-email-button" data-email="[email protected]">
+            <abbr title="Copy to Clipboard">
+              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+            </abbr>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+
   <canvas id="canvas" width="100vw" height="100vh"></canvas>
 
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
   <script type="module" src="js/main.js"></script>
   <script type="module" src="js/menu/filter/filter.js"></script>
+  <script type="module" src="js/information.js"></script>
 </body>
 
 </html>
diff --git a/js/information.js b/js/information.js
@@ -0,0 +1,58 @@
+const infoIcon = document.getElementById("information-icon");
+const closeIcon = document.getElementById("close-information");
+const copyToClipboardButtons =
+  document.getElementsByClassName("copy-email-button");
+
+Array.from(copyToClipboardButtons).forEach((button) => {
+  button.addEventListener("click", () => {
+    const email = button.getAttribute("data-email");
+    copyEmailAddress(email)
+      .then(() => {
+        showCopyInfo(button, "Copied!");
+      })
+      .catch((error) => {
+        showCopyInfo(button, "Error!");
+        console.error("Failed to copy email address: ", error);
+      });
+  });
+});
+
+function showCopyInfo(button, message) {
+  const copyDiv = document.createElement("div");
+  copyDiv.className = "copy-infobox";
+  copyDiv.appendChild(document.createTextNode(message));
+  button.appendChild(copyDiv);
+  setTimeout(() => {
+    button.removeChild(copyDiv);
+  }, 500);
+}
+
+function copyEmailAddress(address) {
+  return navigator.clipboard.writeText(address);
+}
+
+const showModal = () => {
+  const modal = document.getElementById("information-modal");
+  modal.style.display = "flex";
+};
+
+const hideModal = () => {
+  const modal = document.getElementById("information-modal");
+  modal.style.display = "none";
+};
+
+infoIcon.addEventListener("click", showModal);
+closeIcon.addEventListener("click", hideModal);
+
+window.addEventListener("click", (event) => {
+  const modal = document.getElementById("information-modal");
+
+  if (
+    event.target !== modal &&
+    !modal.contains(event.target) &&
+    event.target !== infoIcon &&
+    modal.style.display === "flex"
+  ) {
+    hideModal();
+  }
+});
diff --git a/js/main.js b/js/main.js
@@ -107,6 +107,12 @@ document
   .getElementById("visualize-button")
   .addEventListener("click", (event) => {
     event.preventDefault();
+
+    if (jsonData.data === undefined) {
+      errorMsg("No data loaded!");
+      return;
+    }
+
     const eventNum = document.getElementById("event-number").value;
 
     hideInputModal();