Le script ci-dessous affiche en permanence l’info-bulle dans le plugin d’emplacement et lui donne des couleurs pour les trier selon leur type (événements, lieux, etc.). Je travaille sur une légende et peut-être un filtre.
La situation est que cela fonctionne, mais seulement après avoir actualisé la page ; cela ne fonctionne pas lorsque l’on arrive sur la page depuis l’URL.
Il n’y a pas de différence dans les erreurs de la console dans les deux cas et l’ajout d’un délai plus long à la fonction ne change rien.
Quelqu’un a-t-il déjà rencontré cela lors de l’ajout de JS dans l’en-tête depuis le menu d’édition de thème et trouvé une solution ?
<script>
document.addEventListener('DOMContentLoaded', function() {
// Appliquer le CSS pour changer le style du texte alternatif
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
/* Assurer que le texte alternatif est en gras, souligné et a une couleur conditionnelle */
.leaflet-marker-pane img[alt] {
font-weight: bold !important; /* Mettre le texte en gras */
text-decoration: underline !important; /* Souligner le texte */
white-space: nowrap; /* Empêcher le texte de passer à la ligne suivante */
}
`;
document.head.appendChild(style);
// Laisser à la page un moment pour charger et aux images pour être rendues
setTimeout(function() {
var images = document.querySelectorAll('.leaflet-marker-pane img');
images.forEach(function(img) {
var title = img.getAttribute('title');
if (title) {
title = title.length > 10 ? title.substring(0, 10) + '..' : title;
img.setAttribute('alt', title);
img.setAttribute('title', title);
if (title.includes('/')) {
img.style.color = 'white';
} else {
img.style.color = 'black';
}
}
img.setAttribute('src', '');
});
}, 1000); // Retarder l'exécution de 1 seconde (1000 ms)
});
</script>
Si je ne me trompe pas, comme Discourse est une application monopage, je pense que vous devrez utiliser api.onPageChange() de l’API de plugin pour cela.
Bon à savoir, je ne m’embêterai pas à utiliser un window.location.reload(true) adapté dans l’en-tête pour un framework ember.js qui aurait pu être une solution à cela.
Le champ d’en-tête est-il déprécié pour des raisons de sécurité ? Le fait est qu’il est toujours pratique de tester du javascript vanilla dedans.
ok si javascript dans les en-têtes est bientôt déprécié, je devrai adapter quelques éléments, peut-être que ce champ d’en-tête pourrait comporter une note concernant cette situation à venir.
Je suppose qu’il y a des raisons à cela, mais ce serait dommage car les scripts dans les en-têtes sont utiles, permettant des ajustements rapides pour l’administrateur, comme : fermer l’enregistrement d’un événement lorsqu’un nombre spécifique est atteint par une fonction javascript pour une catégorie spécifique.
Désolé, j’ai répondu à Jay au lieu de vous, qui dit que les scripts vont être dépréciés. J’imagine qu’il parle des scripts d’en-tête qui sont très pratiques à utiliser pour des modifications rapides, comme dans n’importe quel CMS de site web.
J’ai en fait trouvé une solution qui ne recharge que la page « carte » à chaque fois que vous y allez.
Je me demande maintenant si cela vaut la peine d’être partagé ici si les scripts d’en-tête vont être dépréciés ? Le script de ce post permet des catégories de couleurs selon le contenu d’un titre d’événement sur la carte, cela devrait être modifiable rapidement et non via la fonctionnalité de l’API.
Je pense que vous m’avez mal compris. Je voulais dire que les balises de script dans l’en-tête comme <script type="text/discourse-plugin"> et <script type="text/x-handlebars"> sont obsolètes, et non les balises <script> normales.
Oui, merci pour la clarification, je suis content que nous puissions intégrer du JavaScript. Jetez un œil au code que j’ai laissé si vous avez le temps, il pourrait encore être utile dans les environnements Ember, il recharge la page pour que le JS soit appliqué. Ce n’est pas le plus élégant, mais cela fonctionne bien pour la page du plugin de carte !
