Dans le cadre de l’expérimentation Dokiel pour notre documentation, nous avons une contrainte sur le projet où nos utilisateurs nous demandent d’identifier les éléments qui ont évolulé depuis la dernière mise en lige de la documentation (j’en parlais ici : Recherche sur des blocs contenant certaines balises).
La méthode choisie fonctionne bien (détournement de la balise < code class="txt_label_is ">) pour les rédacteurs (possibilité de rechercher les éléments modifiés, enlever les balises de l’ancienne version, mettre la balise sur les nouveautés).
Sauf que nous venons d’avoir un audit d’accessibilité qui nous indique que cette balise n’est pas optimale pour les lecteurs d’écran pour mettre en avant le contenu.
La préconisation serait d’utiliser la balise < mark > par exemple.
Du coup, y’aurait-il un moyen de « transformer » cette balise label en mark ?
Nous essayons de le faire en js, mais le code semble exécuté avant le chargement complet de la page. De fait, il ne détecte aucune balise à remplacer.
Nous avons essayé des choses de ce style pour charger la page d’abord, mais rien n’y fait :
window.addEventListener(‹ load ›, function () {
//code à rajouter
})
(testé dans paramètres JS du site et des pages).
Est-ce faisable ? Ou cela doit-il forcément passer pas une évolution (l’ajout de la balise < mark > depuis lIHM Dokiel au même titre que les autres éléments de mise en valeur) ?
Merci d’avance pour vos suggestions.
Cordialement,
Corentin
EDIT : je travaille sur le styler du site de référence et avec Dokiel 6.
Merci pour ton retour.
J’ai essayé ton code (dans JS du site puis des pages) mais j’ai toujours le même problème
Voici le code que nous essayons d’utiliser :
var numberCode = document.getElementsByTagName('code').length
alert(numberCode)
for (var i=0; i<numberCode; i++) {
var el = document.getElementsByTagName("code")[i];
if ((' ' + el.className + ' ').indexOf(' ' + "txt_label_is "+ ' ') > -1) {
alert(el.innerHTML )
var oldInnerHtml = el.innerHTML
const newItem = document.createElement('mark');
newItem.innerHTML = oldInnerHtml;
el.replaceWith(newItem)
}
}
Quand je charge la page, j’ai une pop-up qui m’indique 0 (alors que j’ai bien la balise txt_label_is sur la première page).
Et si je tente de réexécuter le code via la console du navigateur, j’ai 2 comportements :
Si je le lance directement, il me fait le même résultat (c’est à dire rien)
Si j’utilise l’inspecteur et que je fais un focus sur ma zone, puis que je relance le code, là ça me transforme la balise.
Donc le code en lui-même semble correct, le problème a l’air de plutôt venir de la détection de la zone à traiter (désolé, c’est pas très précis ce que je raconte ).
Je vous ai fait un zip de la page d’accueil du site en question (je n’ai laissé que la page d’accueil, il y a un exemple de balise à modifier) : Site Concours CE2-test_gen_referenceW.zip (403,8 Ko)
J’ai laissé la génération avec le code que j’ai mis (d’où la pop-up qui s’affiche dès l’ouverture de la page avec marqué « 0 »).
Vous utilisez la doc de référence de Dokiel qui est composée d’une page HTML contenant le plan et d’une iframe qui est un élément HTML se comportant comme une autre fenêtre du navigateur.
Votre code JS est mis dans frame.js qui est chargé dans la page principale. Il vous faut le déplacer dans page.js pour qu’il soit exécuté dans la page qui est chargé dans l’iframe.
Ensuite, les balises code étant présentes dans le html envoyé par le serveur (il n’est pas produit par du JS) et sachant que vous faites une modification de contenu qui a vocation à être faite le plus rapidement possible, à votre place je n’aurais pas mis ce code dans un onLoad.
Dernière chose, je pense que vous pouvez simplifier votre code comme suit :
J’ai ajouté votre code tel quel dans paramètres des pages (je ne sais pas si j’ai bien fait) :
(j’ai laissé le début qui est présent par défaut).
Mais malheureusement, la modification ne semble pas se faire :
Par ailleurs, j’ai le même comportement qu’avec l’autre code, à savoir que si je l’exécute dans la console du navigateur, il ne se passe rien dans un premier temps.
Par contre si je sélectionne l’élément avec l’inspecteur, puis que je relance le code, la modification fonctionne.
Pour la console, il faut changer le contexte d’execution de la console de « top » à « contentFrame(nom de page) » (exemples de nom pour un chrome en anglais).
Également, afin d’être certain que votre modification de skin a bien été prise en compte, vous pouvez ouvrir l’onglet Sources de la console développeur et chercher (ctrl+P sur chrome) « page.js ».
Vous pourrez voir si votre modification a bien été prise en compte. Sinon, je vous invite à :
Bien vérifier que le skin est installé et le site regénéré
Vous assurer que page.js a bien été rechargé par le navigateur (que ce n’est pas la version en cache qui est visible). Pour ça aller dans l’onglet « Network » de la console développeur et cocher « Disable cache ». Rechargez ensuite votre page.
Vérifiez bien le problème du cache. Par défaut les navigateurs n’appliquent pas les instructions de recharger sans cache (Ctrl+Shift+R ou Shift+F5) aux contenus des iframes de la page. Vous pensez donc recharger la page mais le navigateur continue de montrer la version qu’il a gardé en cache.
Si votre problème persiste une fois la page réellement rechargée, envoyez moi votre skinpack.
Le menu est créé dynamiquement… Alors rien d’impossible pour un développeur, mais il faut avoir en tête que ce code sera à adapter à chaque mise à jour de Dokiel.
Je vous donne une piste de départ mais il faudrait que vous ayez des ressources internes en développement pour terminer.
Il faudrait placer votre code dans frame.js.
Il faudra également le wrapper dans un onLoad comme suggéré par @lalejand pour attendre que le menu soit chargé avant de l’exécuter.
Il faudra ensuite traiter le HTML du menu dans le onLoad mais également faire un parcours récursifs du outMgr pour modifier le contenu des labels des entrées de menu qui ne sont pas encore produites en HTML.
À ce stade, la question de faire une dérivation de Dokiel en ajoutant du balisage inline commence sérieusement à se poser .
Il y avait un soucis dans l’extension de Styler de Lagoon avec les JS de page et de frame.
C’est corrigé sur la dernière version en téléchargement ici : DokielSkinLagoon
).
.