Aperçu OEDB Embed

import { Component, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Menu } from '../home/menu/menu'; interface EmbedConfig { apiUrl: string; what: string; start: string; end: string; limit: number; width: string; height: string; theme: string; embedType: 'script' | 'iframe'; } @Component({ selector: 'app-embed', standalone: true, imports: [CommonModule, FormsModule, Menu], templateUrl: './embed.html', styleUrl: './embed.scss' }) export class Embed { config = signal({ apiUrl: 'https://api.openeventdatabase.org', what: 'culture', start: '', end: '', limit: 50, width: '100%', height: '400px', theme: 'light', embedType: 'iframe' }); generatedCode = signal(''); constructor() { this.updateConfig(); } updateConfig() { const config = this.config(); const code = this.generateEmbedCode(config); this.generatedCode.set(code); } private generateEmbedCode(config: EmbedConfig): string { const params = new URLSearchParams(); if (config.what) params.set('what', config.what); if (config.start) params.set('start', config.start); if (config.end) params.set('end', config.end); if (config.limit) params.set('limit', config.limit.toString()); const queryString = params.toString(); if (config.embedType === 'iframe') { // Générer du code iframe qui pointe vers une page embed spéciale const embedUrl = `${window.location.origin}/embed/view?${queryString}`; return ` `; } else { // Code script (ancienne méthode) const scriptUrl = `${window.location.origin}/embed.js`; const paramsObj = queryString ? queryString.split('&').map(param => { const [key, value] = param.split('='); return ` '${key}': '${decodeURIComponent(value || '')}'`; }).join(',\n') : ''; const paramsCode = paramsObj ? ` params: {\n${paramsObj}\n },\n` : ''; return `

`; } } copyToClipboard() { const code = this.generatedCode(); navigator.clipboard.writeText(code).then(() => { // Optionnel : afficher une notification de succès console.log('Code copié dans le presse-papiers'); }); } preview() { // Ouvrir une nouvelle fenêtre avec un aperçu const previewWindow = window.open('', '_blank', 'width=800,height=600'); if (previewWindow) { const config = this.config(); const code = this.generateEmbedCode(config); previewWindow.document.write(` Aperçu OEDB Embed

Aperçu de l'intégration

Voici comment l'intégration apparaîtra sur votre site :

${code}

${config.embedType === 'script' ? ` ` : ''} `); // Si c'est un iframe, le charger après que le document soit écrit if (config.embedType === 'iframe') { previewWindow.document.close(); } } } }