| class CustomImageGenerator extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: 'open' }); |
| } |
|
|
| connectedCallback() { |
| this.render(); |
| } |
|
|
| static get observedAttributes() { |
| return ['image-data']; |
| } |
|
|
| attributeChangedCallback(name, oldValue, newValue) { |
| if (oldValue !== newValue) { |
| this.render(); |
| } |
| } |
|
|
| render() { |
| const imageData = this.getAttribute('image-data') || ''; |
| const hasImage = imageData !== ''; |
|
|
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| } |
| |
| .header { |
| display: flex; |
| align-items: center; |
| margin-bottom: 1.5rem; |
| } |
| |
| .header i { |
| margin-right: 0.75rem; |
| color: #3b82f6; |
| } |
| |
| .header h2 { |
| font-size: 1.25rem; |
| font-weight: 600; |
| color: #1e293b; |
| } |
| |
| .image-container { |
| background-color: #f8fafc; |
| border-radius: 0.5rem; |
| padding: 1.5rem; |
| border: 1px solid #e2e8f0; |
| min-height: 300px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .generated-image { |
| max-width: 100%; |
| border-radius: 0.375rem; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| .placeholder { |
| text-align: center; |
| color: #64748b; |
| } |
| |
| .placeholder i { |
| font-size: 3rem; |
| margin-bottom: 1rem; |
| color: #cbd5e1; |
| } |
| |
| .image-actions { |
| display: flex; |
| margin-top: 1.5rem; |
| gap: 0.75rem; |
| } |
| |
| .action-button { |
| padding: 0.5rem 1rem; |
| background-color: #3b82f6; |
| color: white; |
| border: none; |
| border-radius: 0.375rem; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| } |
| |
| .action-button i { |
| margin-right: 0.5rem; |
| } |
| |
| .action-button.secondary { |
| background-color: #e2e8f0; |
| color: #1e293b; |
| } |
| </style> |
| |
| <div class="header"> |
| <i data-feather="image"></i> |
| <h2>Visualisation du Thème</h2> |
| </div> |
| |
| <div class="image-container"> |
| ${hasImage ? |
| `<img src="${imageData}" alt="Generated theme preview" class="generated-image">` : |
| `<div class="placeholder"> |
| <i data-feather="image"></i> |
| <p>Générez un thème pour voir la prévisualisation</p> |
| </div>` |
| } |
| </div> |
| |
| ${hasImage ? ` |
| <div class="image-actions"> |
| <button class="action-button"> |
| <i data-feather="download"></i> |
| Télécharger |
| </button> |
| <button class="action-button secondary"> |
| <i data-feather="refresh-cw"></i> |
| Régénérer |
| </button> |
| </div> |
| ` : ''} |
| `; |
| |
| feather.replace(); |
| } |
| } |
|
|
| customElements.define('custom-image-generator', CustomImageGenerator); |
