Merge remote-tracking branch 'origin/feat-highlight'

JoaoRoccella · Dec 26, 2023 · 36cc9b3 · 36cc9b3
2 parents 1b2f73f + 8ac05b3
commit 36cc9b3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,8 @@
 </head>
 
 <body>
+    <div id="overlay" class="oculto"></div>
+
     <img src="./img/all-the-glass.png" alt="Ilustração de um carro detalhado em partes e cortes" usemap="#carro-map">
 
     <!-- Image Map Generated by http://www.image-map.net/ -->
@@ -53,6 +55,7 @@ <h3>Espelho Retrovisor</h3>
     <script src="./scripts/imageMapResizer.min.js"></script>
     <script>
         imageMapResize();
+        document.querySelector('#overlay').style.height =  '1000px';
     </script>
 </body>
 

diff --git a/scripts/script.js b/scripts/script.js
@@ -1,18 +1,31 @@
+// Ao carregar a página ou redimensionar, define o tamanho do overlay igual ao da imagem carregada
+['load', 'resize'].forEach(event => {
+
+    addEventListener(event, () => {
+        document.querySelector('#overlay').style.height =  document.querySelector('img').clientHeight + 'px';
+    });
+
+});
+
 // Exibe uma determinada div de informação, baseada na área da imagem em que foi clicada
 document.addEventListener('click', e => {
 
     if (e.target.localName === 'area') {
 
         document.querySelectorAll('div.data').forEach(dataDiv => {
             dataDiv.classList.add('oculto');
+            document.querySelector('#overlay').classList.add('oculto');
         });
 
         document.getElementById(e.target.getAttribute('data-target')).classList.remove('oculto');
 
+        document.querySelector('#overlay').classList.remove('oculto');
+
     // caso contrário, ao clicar no X da div fecha o conteúdo
     } else if (e.target.classList.contains('close')) {
 
         e.target.closest('div').classList.add('oculto');
+        document.querySelector('#overlay').classList.add('oculto');
 
     }
 
@@ -25,8 +38,9 @@ document.addEventListener('keydown', e => {
 
         document.querySelectorAll('.data').forEach(dataDiv => {
             dataDiv.classList.add('oculto');
+            document.querySelector('#overlay').classList.add('oculto');
         })
 
     }
 
-});
+});
diff --git a/style.css b/style.css
@@ -14,6 +14,13 @@ body {
     overflow: hidden;
 }
 
+body {
+    display: flex;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+}
+
 img {
     height: 100%;
 }
@@ -22,6 +29,16 @@ img {
     display: none;
 }
 
+#overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #0008;
+    z-index: 1;
+    width: 100%;
+    animation: overlay .3s ease-out 1 forwards;
+}
+
 .data {
     position: absolute;
     width: 200px;
@@ -32,7 +49,7 @@ img {
     box-shadow: 10px 10px 40px -10px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 10px 10px 40px -10px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 10px 10px 40px -10px rgba(0, 0, 0, 0.5);
-    z-index: 1;
+    z-index: 2;
     animation: aparecer .3s ease-out 1 forwards;
 }
 
@@ -77,4 +94,15 @@ area {
         margin-left: 0;
         opacity: 1;
     }
-}
+}
+
+@keyframes overlay {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+