tykayn/oedb-backend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

embed share

Browse source
This commit is contained in:
Tykayn 2025-11-03 00:08:06 +01:00 • committed by tykayn
parent 5d636b0027
commit f8abb4d11a
20 changed files with 1040 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

67
frontend/src/app/pages/embed/embed.ts
View file

@ -12,6 +12,7 @@ interface EmbedConfig {
width: string;
height: string;
theme: string;
embedType: 'script' | 'iframe';
}
@Component({
@ -23,14 +24,15 @@ interface EmbedConfig {
})
export class Embed {
config = signal<EmbedConfig>({
apiUrl: 'https://api.openenventdatabase.org',
apiUrl: 'https://api.openeventdatabase.org',
what: 'culture',
start: '',
end: '',
limit: 50,
width: '100%',
height: '400px',
theme: 'light'
theme: 'light',
embedType: 'iframe'
});
generatedCode = signal<string>('');
@ -49,29 +51,46 @@ export class Embed {
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());
if (config.limit) params.set('limit', config.limit.toString());
const queryString = params.toString();
const scriptUrl = `${window.location.origin}/embed.js`;
return `<!-- OpenEventDatabase Embed start-->
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}',
params: {
${queryString ? queryString.split('&').map(param => `'${param.split('=')[0]}': '${param.split('=')[1]}'`).join(',\n ') : ''}
},
theme: '${config.theme}'
${paramsCode} theme: '${config.theme}'
});
</script>
<!--OpenEventDatabase Embed end-->
`;
<!-- OpenEventDatabase Embed end -->`;
}
}
copyToClipboard() {
@ -93,19 +112,37 @@ export class Embed {
<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%; }
.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();
}
}
}
}