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; } @Component({ selector: 'app-embed', standalone: true, imports: [CommonModule, FormsModule, Menu], templateUrl: './embed.html', styleUrl: './embed.scss' }) export class Embed { config = signal({ apiUrl: 'https://api.openenventdatabase.org', what: 'culture', start: '', end: '', limit: 50, width: '100%', height: '400px', theme: 'light' }); 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(); const scriptUrl = `${window.location.origin}/embed.js`; 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

${code}

`); } } }