Spaces:
Running
Running
File size: 3,791 Bytes
adedd68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
class ArtworkModal extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
:host([open]) {
opacity: 1;
pointer-events: all;
}
.modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.modal-container {
position: relative;
width: 90%;
max-width: 1200px;
max-height: 90vh;
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
z-index: 1;
}
:host([open]) .modal-container {
transform: scale(1);
}
.modal-content {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
.modal-image {
height: 100%;
background-size: cover;
background-position: center;
}
.modal-details {
padding: 3rem;
overflow-y: auto;
}
.close-button {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.close-button:hover {
transform: rotate(90deg);
}
</style>
<div class="modal-backdrop"></div>
<div class="modal-container">
<button class="close-button">
<i data-feather="x"></i>
</button>
<div class="modal-content">
<div class="modal-image"></div>
<div class="modal-details">
<h3 class="artwork-title"></h3>
<p class="artwork-meta"></p>
<p class="artwork-description"></p>
</div>
</div>
</div>
`;
this.closeButton = this.shadowRoot.querySelector('.close-button');
this.closeButton.addEventListener('click', () => this.close());
this.shadowRoot.querySelector('.modal-backdrop').addEventListener('click', () => this.close());
}
open(artworkData) {
const image = this.shadowRoot.querySelector('.modal-image');
const title = this.shadowRoot.querySelector('.artwork-title');
const meta = this.shadowRoot.querySelector('.artwork-meta');
const desc = this.shadowRoot.querySelector('.artwork-description');
image.style.backgroundImage = `url(${artworkData.image})`;
title.textContent = artworkData.title;
meta.textContent = `${artworkData.medium} | ${artworkData.year}`;
desc.textContent = artworkData.description;
this.setAttribute('open', '');
document.body.style.overflow = 'hidden';
feather.replace();
}
close() {
this.removeAttribute('open');
document.body.style.overflow = '';
}
}
customElements.define('artwork-modal', ArtworkModal); |