Skip to content

Commit

Permalink
made changes in popup component
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdityaSingh-7
AdityaSingh-7 committed Jan 13, 2025
1 parent edf5a0a commit e1e8f98
Showing 1 changed file with 110 additions and 121 deletions.
231 changes: 110 additions & 121 deletions src/components/Popup.astro
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
---
---

<div id="state-popup">
<span class="close-popup">&times;</span>
<div id="popup-state-name">State Name</div>
<img id="popup-state-image" src="" alt="State Image">
<div id="popup-state-info">State Information</div>
<div id="pop-up-buttons">
<button class="copy-button">Copy Info</button>
<button id="see-more-button">See More</button>
<!-- HTML Structure -->
<div class="state-popup">
<span class="state-popup__close">&times;</span>
<div class="state-popup__name">State Name</div>
<img class="state-popup__image" src="" alt="State Image">
<div class="state-popup__info">State Information</div>
<div class="state-popup__buttons">
<button class="state-popup__button state-popup__button--copy">Copy Info</button>
<button class="state-popup__button state-popup__button--more">See More</button>
</div>
</div>

<script>
// Initialize DOM elements once
const popup = document.getElementById('state-popup') as HTMLElement;
const popupStateName = document.getElementById('popup-state-name') as HTMLElement;
const popupStateInfo = document.getElementById('popup-state-info') as HTMLElement;
const popupStateImage = document.getElementById('popup-state-image') as HTMLElement;
const seeMoreButton = document.getElementById('see-more-button') as HTMLElement;
const closePopup = document.querySelector('.close-popup') as HTMLElement;
const copyButton = document.querySelector('.copy-button') as HTMLElement;
// Initialize DOM elements using classes
const popup = document.querySelector('.state-popup') as HTMLElement;
const popupStateName = document.querySelector('.state-popup__name') as HTMLElement;
const popupStateInfo = document.querySelector('.state-popup__info') as HTMLElement;
const popupStateImage = document.querySelector('.state-popup__image') as HTMLElement;
const seeMoreButton = document.querySelector('.state-popup__button--more') as HTMLElement;
const closePopup = document.querySelector('.state-popup__close') as HTMLElement;
const copyButton = document.querySelector('.state-popup__button--copy') as HTMLElement;

function showPopup(event: MouseEvent, stateInfo: any) {
// Update popup content
Expand All @@ -29,11 +27,9 @@
popupStateImage.src = `/map_assets/images/${stateInfo.image}`;
popupStateImage.alt = `${stateInfo.name} state image`;


const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;


popup.style.display = 'flex';
const popupWidth = popup.offsetWidth;
const popupHeight = popup.offsetHeight;
Expand All @@ -42,27 +38,23 @@
const clickX = event.clientX;
const clickY = event.clientY;


let left = clickX;
let top = clickY + 20;


if (left + popupWidth > viewportWidth - 20) {
left = viewportWidth - popupWidth - 20;
}
if (left < 20) {
left = 20;
}


if (top + popupHeight > viewportHeight - 20) {
top = clickY - popupHeight - 20;
}
if (top < 20) {
top = 20;
}


popup.style.left = `${left}px`;
popup.style.top = `${top}px`;
popup.style.opacity = '1';
Expand Down Expand Up @@ -111,107 +103,104 @@
</script>

<style>
#state-popup {
display: none;
flex-direction: column;
position: absolute;
background-color: #fff;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 12px;
width: 90%;
max-width: 400px;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
max-height: 90vh;
overflow-y: auto;
}

#popup-state-name {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}

#popup-state-info {
font-size: 1.4rem;
margin: 12px 0;
color: #444;
line-height: 1.4;
}

#state-popup img {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
margin: 10px 0;
}

.close-popup {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.8rem;
cursor: pointer;
color: #666;
transition: color 0.2s ease;
}

.close-popup:hover {
color: #333;
}

#pop-up-buttons {
display: flex;
gap: 12px;
margin-top: 15px;
}

.copy-button,
#see-more-button {
flex: 1;
padding: 10px 16px;
font-size: 1.2rem;
cursor: pointer;
border: none;
border-radius: 8px;
transition: all 0.2s ease;
}

.copy-button {
background-color: #4caf50;
color: white;
}

#see-more-button {
background-color: #007bff;
color: white;
}

.copy-button:hover,
#see-more-button:hover {
transform: translateY(-2px);
opacity: 0.9;
}

@media (max-width: 768px) {
#state-popup {
width: 85%;
padding: 15px;
margin: 0 auto;
.state-popup {
display: none;
flex-direction: column;
position: absolute;
background-color: #fff;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 12px;
width: 90%;
max-width: 400px;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
max-height: 90vh;
overflow-y: auto;
}

.state-popup__name {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}

.state-popup__info {
font-size: 1.4rem;
margin: 12px 0;
color: #444;
line-height: 1.4;
}

.state-popup__image {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
margin: 10px 0;
}

.state-popup__close {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.8rem;
cursor: pointer;
color: #666;
transition: color 0.2s ease;
}

.state-popup__close:hover {
color: #333;
}

#popup-state-name {
font-size: 1.6rem;
.state-popup__buttons {
display: flex;
gap: 12px;
margin-top: 15px;
}

#popup-state-info {
.state-popup__button {
flex: 1;
padding: 10px 16px;
font-size: 1.2rem;
cursor: pointer;
border: none;
border-radius: 8px;
transition: all 0.2s ease;
}

.state-popup__button--copy {
background-color: #4caf50;
color: white;
}

.state-popup__button--more {
background-color: #007bff;
color: white;
}

.state-popup__button:hover {
transform: translateY(-2px);
opacity: 0.9;
}
}

@media (max-width: 768px) {
.state-popup {
width: 85%;
padding: 15px;
margin: 0 auto;
}

.state-popup__name {
font-size: 1.6rem;
}

.state-popup__info {
font-size: 1.2rem;
}
}
</style>

0 comments on commit e1e8f98

Please sign in to comment.