up embed, add export docs
This commit is contained in:
Tykayn
tykayn
parent
912b4da08e
commit
b18c2c5aec
7 changed files with 414 additions and 33 deletions
|
|
@ -9,7 +9,8 @@
|
|||
// Configuration par défaut
|
||||
const defaultConfig = {
|
||||
apiUrl: 'https://api.openenventdatabase.org',
|
||||
theme: 'light',
|
||||
homeUrl: '/', // URL de la page home pour les liens vers les détails d'événements
|
||||
theme: 'auto', // 'auto', 'light', ou 'dark' - auto détecte depuis la préférence système
|
||||
limit: 50,
|
||||
width: '100%',
|
||||
height: '400px',
|
||||
|
|
@ -42,12 +43,22 @@
|
|||
this.container = typeof container === 'string' ? document.querySelector(container) : container;
|
||||
this.config = { ...defaultConfig, ...config };
|
||||
// Fusionner les params si présents
|
||||
if (config.params) {
|
||||
if (config && config.params) {
|
||||
this.config = { ...this.config, ...config.params };
|
||||
}
|
||||
|
||||
// Détecter le thème système si 'auto' ou si non spécifié
|
||||
const themeWasAuto = this.config.theme === 'auto' || !this.config.theme;
|
||||
if (this.config.theme === 'auto' || !this.config.theme) {
|
||||
this.config.theme = this.detectSystemTheme();
|
||||
}
|
||||
|
||||
this.events = [];
|
||||
this.isLoading = false;
|
||||
this.refreshTimer = null;
|
||||
this.map = null;
|
||||
this.themeMediaQuery = null;
|
||||
this.handleThemeChange = null;
|
||||
|
||||
if (!this.container) {
|
||||
console.error('OEDB Embed: Container not found');
|
||||
|
|
@ -55,6 +66,51 @@
|
|||
}
|
||||
|
||||
this.init();
|
||||
|
||||
// Écouter les changements de thème si auto
|
||||
if (themeWasAuto) {
|
||||
this.setupThemeListener();
|
||||
}
|
||||
}
|
||||
|
||||
detectSystemTheme() {
|
||||
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
return 'light';
|
||||
}
|
||||
|
||||
setupThemeListener() {
|
||||
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||
this.themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.handleThemeChange = (e) => {
|
||||
this.config.theme = e.matches ? 'dark' : 'light';
|
||||
this.injectStyles();
|
||||
if (this.map) {
|
||||
// Mettre à jour le style de la carte si nécessaire
|
||||
const mapStyle = this.config.theme === 'dark'
|
||||
? 'https://tiles.openfreemap.org/styles/dark'
|
||||
: 'https://tiles.openfreemap.org/styles/liberty';
|
||||
try {
|
||||
if (this.map.getStyle() && this.map.getStyle().name !== mapStyle) {
|
||||
this.map.setStyle(mapStyle);
|
||||
}
|
||||
} catch (err) {
|
||||
// Si on ne peut pas obtenir le style, réinitialiser la carte
|
||||
if (this.map.isStyleLoaded()) {
|
||||
this.map.setStyle(mapStyle);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Support moderne et ancien
|
||||
if (this.themeMediaQuery.addEventListener) {
|
||||
this.themeMediaQuery.addEventListener('change', this.handleThemeChange);
|
||||
} else if (this.themeMediaQuery.addListener) {
|
||||
this.themeMediaQuery.addListener(this.handleThemeChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
|
|
@ -68,7 +124,11 @@
|
|||
}
|
||||
|
||||
injectStyles() {
|
||||
if (document.getElementById('oedb-embed-styles')) return;
|
||||
// Supprimer les anciens styles s'ils existent
|
||||
const oldStyles = document.getElementById('oedb-embed-styles');
|
||||
if (oldStyles) {
|
||||
oldStyles.remove();
|
||||
}
|
||||
|
||||
const theme = themes[this.config.theme] || themes.light;
|
||||
const styles = `
|
||||
|
|
@ -103,7 +163,7 @@
|
|||
.oedb-embed-map {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
background: #f8f9fa;
|
||||
background: ${this.config.theme === 'dark' ? '#1a1a1a' : '#f8f9fa'};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -123,14 +183,18 @@
|
|||
}
|
||||
|
||||
.oedb-event-item {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid ${theme.border};
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.oedb-event-item:hover {
|
||||
background: ${theme.border};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.oedb-event-title {
|
||||
|
|
@ -158,8 +222,8 @@
|
|||
.oedb-error {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #e74c3c;
|
||||
background: #fdf2f2;
|
||||
color: ${this.config.theme === 'dark' ? '#ff6b6b' : '#e74c3c'};
|
||||
background: ${this.config.theme === 'dark' ? '#3d2525' : '#fdf2f2'};
|
||||
}
|
||||
|
||||
.oedb-no-events {
|
||||
|
|
@ -173,7 +237,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background: #f8f9fa;
|
||||
background: ${this.config.theme === 'dark' ? '#1a1a1a' : '#f8f9fa'};
|
||||
color: ${theme.secondary};
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -253,26 +317,35 @@
|
|||
const date = event.properties?.start || event.properties?.when || '';
|
||||
const location = event.properties?.where || '';
|
||||
const type = event.properties?.what || '';
|
||||
// L'ID peut être à la racine du Feature ou dans properties.id
|
||||
const eventId = event.id || event.properties?.id || '';
|
||||
const eventUrl = eventId ? `${this.config.homeUrl}?id=${encodeURIComponent(eventId)}` : '#';
|
||||
|
||||
return `
|
||||
<div class="oedb-event-item" data-event-id="${event.id || ''}">
|
||||
<a href="${eventUrl}" class="oedb-event-item" data-event-id="${eventId}" ${eventId ? '' : 'onclick="return false;"'}>
|
||||
<div class="oedb-event-title">${this.escapeHtml(title)}</div>
|
||||
<div class="oedb-event-meta">
|
||||
${date ? `<div>📅 ${this.formatDate(date)}</div>` : ''}
|
||||
${location ? `<div>📍 ${this.escapeHtml(location)}</div>` : ''}
|
||||
${type ? `<div>🏷️ ${this.escapeHtml(type)}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
listContainer.innerHTML = eventsHtml;
|
||||
|
||||
// Ajouter les événements de clic
|
||||
// Ajouter les événements de clic pour l'événement personnalisé (optionnel)
|
||||
listContainer.querySelectorAll('.oedb-event-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
item.addEventListener('click', (e) => {
|
||||
const eventId = item.dataset.eventId;
|
||||
this.onEventClick(eventId);
|
||||
if (eventId) {
|
||||
// Émettre un événement personnalisé pour permettre l'écoute externe
|
||||
const customEvent = new CustomEvent('oedb-event-click', {
|
||||
detail: { eventId, event: this.events.find(e => e.id === eventId) }
|
||||
});
|
||||
this.container.dispatchEvent(customEvent);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -286,23 +359,209 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Pour l'instant, afficher un placeholder
|
||||
// Dans une vraie implémentation, on utiliserait Leaflet ou une autre librairie de cartes
|
||||
mapContainer.innerHTML = `
|
||||
<div class="oedb-map-placeholder">
|
||||
Carte interactive<br>
|
||||
${this.events.length} événement(s) trouvé(s)
|
||||
</div>
|
||||
`;
|
||||
// Initialiser MapLibre GL JS si disponible
|
||||
if (typeof maplibregl === 'undefined') {
|
||||
this.initMapLibre().then(() => {
|
||||
this.createMap(mapContainer);
|
||||
}).catch(err => {
|
||||
console.error('Failed to load MapLibre GL:', err);
|
||||
mapContainer.innerHTML = `
|
||||
<div class="oedb-map-placeholder">
|
||||
Carte interactive<br>
|
||||
${this.events.length} événement(s) trouvé(s)<br>
|
||||
<small>Chargement de la bibliothèque de cartes...</small>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
this.createMap(mapContainer);
|
||||
}
|
||||
}
|
||||
|
||||
async initMapLibre() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Vérifier si MapLibre est déjà chargé
|
||||
if (typeof maplibregl !== 'undefined') {
|
||||
return resolve();
|
||||
}
|
||||
|
||||
// Charger le CSS
|
||||
const css = document.createElement('link');
|
||||
css.rel = 'stylesheet';
|
||||
css.href = 'https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css';
|
||||
document.head.appendChild(css);
|
||||
|
||||
// Charger le JavaScript
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js';
|
||||
script.onload = () => resolve();
|
||||
script.onerror = () => reject(new Error('Failed to load MapLibre GL'));
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
createMap(mapContainer) {
|
||||
// Nettoyer le conteneur
|
||||
mapContainer.innerHTML = '';
|
||||
|
||||
// Créer la FeatureCollection GeoJSON
|
||||
// Filtrer les événements qui ont des coordonnées valides
|
||||
const geojson = {
|
||||
type: 'FeatureCollection',
|
||||
features: this.events
|
||||
.filter(event => {
|
||||
// Vérifier que l'événement a une géométrie valide avec des coordonnées
|
||||
if (!event.geometry || !event.geometry.coordinates) return false;
|
||||
const coords = event.geometry.coordinates;
|
||||
return Array.isArray(coords) && coords.length >= 2 &&
|
||||
typeof coords[0] === 'number' && typeof coords[1] === 'number' &&
|
||||
!isNaN(coords[0]) && !isNaN(coords[1]) &&
|
||||
coords[0] !== 0 && coords[1] !== 0; // Exclure les coordonnées 0,0 par défaut
|
||||
})
|
||||
.map(event => {
|
||||
// L'ID peut être à la racine du Feature ou dans properties.id
|
||||
const eventId = event.id || event.properties?.id || '';
|
||||
return {
|
||||
type: 'Feature',
|
||||
geometry: event.geometry,
|
||||
properties: {
|
||||
id: eventId,
|
||||
label: event.properties?.label || event.properties?.name || 'Événement',
|
||||
what: event.properties?.what || '',
|
||||
start: event.properties?.start || event.properties?.when || ''
|
||||
}
|
||||
};
|
||||
})
|
||||
};
|
||||
|
||||
// Calculer les bounds si on a des événements avec coordonnées valides
|
||||
let bounds = null;
|
||||
if (geojson.features.length > 0) {
|
||||
const coordinates = geojson.features
|
||||
.map(f => f.geometry?.coordinates)
|
||||
.filter(c => c && Array.isArray(c) && c.length >= 2);
|
||||
|
||||
if (coordinates.length > 0) {
|
||||
const lons = coordinates.map(c => c[0]);
|
||||
const lats = coordinates.map(c => c[1]);
|
||||
bounds = [
|
||||
[Math.min(...lons), Math.min(...lats)],
|
||||
[Math.max(...lons), Math.max(...lats)]
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
// Centre par défaut (Paris)
|
||||
const center = bounds
|
||||
? [(bounds[0][0] + bounds[1][0]) / 2, (bounds[0][1] + bounds[1][1]) / 2]
|
||||
: [2.3522, 48.8566];
|
||||
|
||||
// Déterminer le style de carte selon le thème
|
||||
const mapStyle = this.config.theme === 'dark'
|
||||
? 'https://tiles.openfreemap.org/styles/dark'
|
||||
: 'https://tiles.openfreemap.org/styles/liberty';
|
||||
|
||||
// Créer la carte
|
||||
this.map = new maplibregl.Map({
|
||||
container: mapContainer,
|
||||
style: mapStyle,
|
||||
center: center,
|
||||
zoom: bounds ? this.calculateZoom(bounds) : 5
|
||||
});
|
||||
|
||||
this.map.on('load', () => {
|
||||
// Ajouter la source GeoJSON
|
||||
this.map.addSource('events', {
|
||||
type: 'geojson',
|
||||
data: geojson
|
||||
});
|
||||
|
||||
// Ajouter les marqueurs
|
||||
this.map.addLayer({
|
||||
id: 'events-points',
|
||||
type: 'circle',
|
||||
source: 'events',
|
||||
paint: {
|
||||
'circle-radius': 6,
|
||||
'circle-color': '#667eea',
|
||||
'circle-stroke-width': 2,
|
||||
'circle-stroke-color': '#ffffff'
|
||||
}
|
||||
});
|
||||
|
||||
// Ajouter les popups avec lien vers la page home
|
||||
this.map.on('click', 'events-points', (e) => {
|
||||
const feature = e.features[0];
|
||||
const props = feature.properties;
|
||||
const eventId = props.id || '';
|
||||
const eventUrl = eventId ? `${this.config.homeUrl}?id=${encodeURIComponent(eventId)}` : '#';
|
||||
|
||||
const popupContent = eventId
|
||||
? `<div style="padding: 8px;">
|
||||
<strong><a href="${eventUrl}" style="color: inherit; text-decoration: none;">${props.label || 'Événement'}</a></strong><br>
|
||||
${props.what ? `<small>${props.what}</small><br>` : ''}
|
||||
${props.start ? `<small>📅 ${this.formatDate(props.start)}</small>` : ''}
|
||||
${eventId ? `<br><small><a href="${eventUrl}" style="color: #667eea;">Voir les détails →</a></small>` : ''}
|
||||
</div>`
|
||||
: `<div style="padding: 8px;">
|
||||
<strong>${props.label || 'Événement'}</strong><br>
|
||||
${props.what ? `<small>${props.what}</small><br>` : ''}
|
||||
${props.start ? `<small>📅 ${this.formatDate(props.start)}</small>` : ''}
|
||||
</div>`;
|
||||
|
||||
new maplibregl.Popup()
|
||||
.setLngLat(e.lngLat)
|
||||
.setHTML(popupContent)
|
||||
.addTo(this.map);
|
||||
});
|
||||
|
||||
// Changer le curseur au survol
|
||||
this.map.on('mouseenter', 'events-points', () => {
|
||||
this.map.getCanvas().style.cursor = 'pointer';
|
||||
});
|
||||
this.map.on('mouseleave', 'events-points', () => {
|
||||
this.map.getCanvas().style.cursor = '';
|
||||
});
|
||||
|
||||
// Ajuster la vue si on a des bounds
|
||||
if (bounds) {
|
||||
this.map.fitBounds(bounds, {
|
||||
padding: 50,
|
||||
maxZoom: 15
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
calculateZoom(bounds) {
|
||||
const width = bounds[1][0] - bounds[0][0];
|
||||
const height = bounds[1][1] - bounds[0][1];
|
||||
const maxDimension = Math.max(width, height);
|
||||
|
||||
if (maxDimension > 10) return 4;
|
||||
if (maxDimension > 5) return 5;
|
||||
if (maxDimension > 2) return 6;
|
||||
if (maxDimension > 1) return 7;
|
||||
if (maxDimension > 0.5) return 8;
|
||||
if (maxDimension > 0.2) return 9;
|
||||
if (maxDimension > 0.1) return 10;
|
||||
if (maxDimension > 0.05) return 11;
|
||||
return 12;
|
||||
}
|
||||
|
||||
onEventClick(eventId) {
|
||||
// Émettre un événement personnalisé
|
||||
// Émettre un événement personnalisé (déjà fait dans renderEvents)
|
||||
// Cette méthode peut être utilisée pour des actions personnalisées
|
||||
const event = new CustomEvent('oedb-event-click', {
|
||||
detail: { eventId, event: this.events.find(e => e.id === eventId) }
|
||||
});
|
||||
this.container.dispatchEvent(event);
|
||||
}
|
||||
|
||||
getEventUrl(eventId) {
|
||||
if (!eventId) return '#';
|
||||
return `${this.config.homeUrl}?id=${encodeURIComponent(eventId)}`;
|
||||
}
|
||||
|
||||
startAutoRefresh() {
|
||||
if (this.refreshTimer) {
|
||||
|
|
@ -323,6 +582,18 @@
|
|||
|
||||
destroy() {
|
||||
this.stopAutoRefresh();
|
||||
if (this.map) {
|
||||
this.map.remove();
|
||||
this.map = null;
|
||||
}
|
||||
// Supprimer le listener de thème
|
||||
if (this.themeMediaQuery && this.handleThemeChange) {
|
||||
if (this.themeMediaQuery.removeEventListener) {
|
||||
this.themeMediaQuery.removeEventListener('change', this.handleThemeChange);
|
||||
} else if (this.themeMediaQuery.removeListener) {
|
||||
this.themeMediaQuery.removeListener(this.handleThemeChange);
|
||||
}
|
||||
}
|
||||
this.container.innerHTML = '';
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue