148 lines
4.5 KiB
TypeScript
148 lines
4.5 KiB
TypeScript
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<EmbedConfig>({
|
|
apiUrl: 'https://api.openeventdatabase.org',
|
|
what: 'culture',
|
|
start: '',
|
|
end: '',
|
|
limit: 50,
|
|
width: '100%',
|
|
height: '400px',
|
|
theme: 'light',
|
|
embedType: 'iframe'
|
|
});
|
|
|
|
generatedCode = signal<string>('');
|
|
|
|
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 `<!-- OpenEventDatabase Embed (iframe) -->
|
|
<iframe
|
|
src="${embedUrl}"
|
|
width="${config.width}"
|
|
height="${config.height}"
|
|
frameborder="0"
|
|
scrolling="auto"
|
|
style="border: 1px solid #ddd; border-radius: 8px;">
|
|
</iframe>
|
|
<!-- OpenEventDatabase Embed end -->`;
|
|
} 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 `<!-- OpenEventDatabase Embed (script) -->
|
|
<div id="oedb-events" style="width: ${config.width}; height: ${config.height}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;"></div>
|
|
<script src="${scriptUrl}"></script>
|
|
<script>
|
|
OEDBEmbed.init({
|
|
container: '#oedb-events',
|
|
apiUrl: '${config.apiUrl}',
|
|
${paramsCode} theme: '${config.theme}'
|
|
});
|
|
</script>
|
|
<!-- OpenEventDatabase Embed end -->`;
|
|
}
|
|
}
|
|
|
|
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(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Aperçu OEDB Embed</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
|
|
.preview-container { max-width: 100%; margin-top: 20px; }
|
|
h2 { color: #2c3e50; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Aperçu de l'intégration</h2>
|
|
<p>Voici comment l'intégration apparaîtra sur votre site :</p>
|
|
<div class="preview-container">
|
|
${code}
|
|
</div>
|
|
${config.embedType === 'script' ? `
|
|
<script>
|
|
// Attendre que le DOM soit chargé pour les scripts
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Le script embed.js se chargera automatiquement
|
|
});
|
|
}
|
|
</script>
|
|
` : ''}
|
|
</body>
|
|
</html>
|
|
`);
|
|
// Si c'est un iframe, le charger après que le document soit écrit
|
|
if (config.embedType === 'iframe') {
|
|
previewWindow.document.close();
|
|
}
|
|
}
|
|
}
|
|
}
|