modals :D

Gimbardo · Jul 15, 2024 · af6e1ae · af6e1ae
1 parent e9d43af
commit af6e1ae
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/_includes/spells-tooltip.html b/_includes/spells-tooltip.html
@@ -1,3 +1,4 @@
+<div class="overlay" id="overlay" onclick="hide_tooltip()"></div>
 <div id="spell-tooltip" class="tooltip">
 
   <div class="row">

diff --git a/assets/css/post.css b/assets/css/post.css
@@ -209,14 +209,16 @@ main {
 .tooltip {
   display: none;
   position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
   background-color: #333;
   color: #fff;
   padding: 5px;
   border-radius: 5px;
   font-size: 12px;
   white-space: nowrap;
   z-index: 1000;
-  max-width: 500px;
+  max-width: 50%;
 }
 
 .tooltip-visible {
@@ -229,6 +231,17 @@ main {
   max-width: fit-content;
 }
 
+.overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  z-index: 500;
+}
+
 #spell-tooltip table {
   max-width: fit-content;
   align-self: center;

diff --git a/assets/js/spells.js b/assets/js/spells.js
@@ -11,6 +11,7 @@ schools_map = {
 }
 
 let tooltip
+let overlay
 let close_button
 let default_tooltip_text
 let clicked = false
@@ -28,6 +29,7 @@ function init_spells() {
 // Tooltip
 
 function init_tooltip() {
+  overlay = document.getElementById('overlay');
   tooltip = document.getElementById('spell-tooltip');
   close_button = document.getElementById('close-tooltip');
   default_tooltip_text = tooltip.innerHTML;
@@ -38,6 +40,7 @@ function hide_tooltip()
   clicked = false
   tooltip.innerHTML = default_tooltip_text
   tooltip.classList.remove('tooltip-visible');
+  overlay.style.display = 'none';
 }
 
 function view_tooltip(event, spell){
@@ -52,8 +55,12 @@ function view_tooltip(event, spell){
   to_replace = to_replace.split("[[SPELL-ENTRIES]]").join(spell.entries_s())
 
   tooltip.innerHTML = to_replace
-  tooltip.style.left = event.pageX + 20 + 'px';
-  tooltip.style.top = event.pageY - 100 + 'px';
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  const modalHeight = tooltip.offsetHeight;
+  tooltip.style.top = (window.innerHeight / 2 - modalHeight / 2 + scrollTop) + 'px';
+  overlay.style.display = 'block';
+  //tooltip.style.left = event.pageX + 20 + 'px';
+  //tooltip.style.top = event.pageY - 100 + 'px';
   tooltip.classList.add('tooltip-visible');
 }
 
@@ -101,24 +108,24 @@ class Spell{
       clicked = true
     }, false);
 
-    spellLink.addEventListener('mouseover', (event) => {
-      if(clicked)
-        return
-      view_tooltip(event, this)
-    });
-
-    spellLink.addEventListener('mouseout', () => {
-      if(clicked)
-        return
-      hide_tooltip()
-    });
-
-    spellLink.addEventListener('mousemove', (event) => {
-      if(clicked)
-        return
-      tooltip.style.left = event.pageX + 20 + 'px';
-      tooltip.style.top = event.pageY - 100 + 'px';
-    });
+    //spellLink.addEventListener('mouseover', (event) => {
+    //  if(clicked)
+    //    return
+    //  view_tooltip(event, this)
+    //});
+//
+    //spellLink.addEventListener('mouseout', () => {
+    //  if(clicked)
+    //    return
+    //  hide_tooltip()
+    //});
+
+    //spellLink.addEventListener('mousemove', (event) => {
+    //  if(clicked)
+    //    return
+    //  tooltip.style.left = event.pageX + 20 + 'px';
+    //  tooltip.style.top = event.pageY - 100 + 'px';
+    //});
   }
 
   level_s() {