Joaktree pour J4/5, voire 6 ! à venir ? (ça avance...)

[RobertG]

Bonjour,

Si j'ai bien compris, en ce qui concerne les listes alphabétiques, elles gèrent l'affichage de zones accordéon que le clic sur le titre active pour afficher le contenu, en désactivant et donc masquant les autres. Mais comme j'ai déjà dû le dire, dans le code sources de la page affichée, aucun événement n'est lié au bouton, contrairement à ce qui se passe en J3.

Le bouton de modification dans les fiches individuelles révèle en J3 une série de boutons destinés à des modifications ciblées, il est sans effet en J4/5 avec de nouveau une erreur

Uncaught TypeError: document.getElementById(...).getElements is not a function

mettant en cause deux fichiers spécifiques au composant (toggle.js et jtajax.js)

Pour ce qui est des boutons de modification, ajout et suppression, ils font appel à Joomla/listItemTask() (media/system/js/core.js) qui est bien utilisé (vérifié avec un "alert"), mais rien ne se passe alors que le code passé correspond bien à la fonction

onclick="return Joomla.listItemTask('newitem', 'edit');"

J'ai beau multiplier les recherches en ligne, je ne vois pas d'issue.

J'oubliais : j'ai la même erreur getElementById sur les onglets de la fiche individuelle, ça ne concerne pas que le bouton/onglet "Modifier", mais ça n'impacte pas l'affichage du contenu des onglets autres que "Modifier".

[RobertG]

Je continue à chercher...
Il me faut comprendre comment est géré le changement de contenu lors du clic sur une plage de lettres, ici pour l'index alphabétique des individus :

La désactivation de l'appel à la "function addScript()" dans le fichier de vue ne change pas l'affichage à la première ouverture de la page, et les liens (URLs standard, sans onclick) vers les individus fonctionnent.
Les boutons en question ayant une classe définie incluant le mot "accordion", Bootstrap entre en jeu pour changer le curseur, montrant ainsi qu'il faut que je trouve quel code utiliser pour intercepter le clic et charger les données correspondantes afin de changer le contenu, remplaçant l'ancien script.

[RobertG]

Bonjour,

J'ai trouvé comment utiliser des bribes de script dans un fichier JS externe pour récupérer un paramètre des boutons pour pouvoir ensuite utiliser ce paramètre dans la zone où doit s'afficher le résultat, mais je ne suis pas plus avancé en ce qui concerne la récupération de ces données...
Curieusement, en version J3, les zones (Ajax ?) où doivent s'afficher ces données sont vides si on affiche le code source de la page, mais ont un contenu visible depuis les outils de développement de Firefox. Elles restent vides en J4.

Je viens de tenter sur un site utilisant l'IA pour convertir en JavaScript la fonction actuelle en J3, sauf que sur le point le plus gênant, celui d'une utilisation de MooTools, ça me dit d'installer la bibliothèque ou de remplacer le code, ce que je ne sais pas faire...
Qui saurait remplacer ces lignes faisant appel à la bibliothèque en question ? Il s'agit de code dans un fichier PHP qui va ensuite coller ce script dans le code source de la page html, dont je ne mets que le début.

    protected function addScript() {
        $script = array();
        $indCookie    = $this->params->get('indCookies', true);
        $script[] = 'window.addEventListener(\'domready\',function(){';
        $script[] = "  var jtAccordion = new Fx.Accordion($('jt-accordion'),'#jt-accordion .jt-content-accordion', '#jt-accordion .content', { ";
        $script[] = "    opacity: true, ";
        $script[] = "    initialDisplayFx : false, ";​

Fx.Accordion et initialDisplayFx semblent en effet correspondre à MooTools. Le fait que la div ait l'ID jt-accordion

<div id="jt-accordion">

fait que Bootstrap reconnaît les boutons comme cliquables

Merci de votre aide.

[RobertG]

Bonjour,

A force de patience et de multiples lectures, j'ai réussi à rendre le code JS fonctionnel pour les boutons de la liste alphabétique des deux pages d'index et des lieux, côté site.

Je n'ai cependant toujours pas trouvé par quoi remplacer ce code cité au-dessus et qui semble du Mootools.

En frontend, il me reste à afficher les cartes des lieux, mais le clic sur le nom est inopérant. Bien que pris en compte, il génère une erreur

Uncaught ReferenceError: Cookie is not defined

correspondant à cette ligne :

myCookie = Cookie.write('jt_loc_url', loc + '|' + url, {duration: 0});

Je suspecte là encore Cookie.write d'être du Mootools (mais je ne trouve rien sur mootools.com), et si je désactive les cookies dans la configuration de Joaktree, c'est une autre erreur concernant un "set" qu'il me faudra résoudre.

Une fois cette étape franchie, il faudra comprendre là encore pourquoi les boutons de modification, etc. sont eux aussi inactifs.

Et il restera le plus complexe : comprendre pourquoi certaines fonctions ne sont plus utilisables dans l'administration.

PS : il y a bien utilisation de Cookie.write dans J3, défini dans un fichier JS Mootools, plus dans J4, et pas la moindre info dans la page de rétrocompatibilité J3-J4

[pmleconte]

Bonjour Robert,

As-tu regardé https://www.w3schools.com/js/js_cookies.asp ?

Personnellement, dans les JS, j'utilise document.cookie

Pascal

[RobertG]

Merci Pascal,

Après mon précédent message, j'ai en effet déjà essayé document.cookie qui a supprimé l'erreur, mais un peu partout, c'est une variable "myCookie" qui est définie, donc je ne sais pas si ça va impacter le reste.
J'ai bien maintenant une erreur

Uncaught TypeError: MTitl.set is not a function

sur

MTitl.set('html', loc);

"loc" correspond à la localisation de la carte

MTitl est défini quelques lignes plus haut par

var MTitl = $('jt-map-title');

Au fait, ça tourne sans erreur PHP sous 8.3 et avec la version 5.2.0 alpha4-dev

[RobertG]

Bonjour,

A force de bricoler, j'ai réussi à gérer le clic sur les deux listes alphabétiques, puis l'affichage des cartes.

Je n'ai trouvé aucune solution pour le remplacement de

MTitl.set('html', loc);

lorsqu'on change de lieu pour voir sa carte, et j'ai donc essayé d'utiliser location.reload(), avec un gros inconvénient : cela recharge toute la page avec la nouvelle carte et l'onglet sélectionné (S-U par exemple) n'est pas conservé, on revient à celui par défaut (A-D), ce qui remet les données du premier au lieu de rester sur le choix précédent.
Le bouton sélectionné dans la liste alphabétique a pour nom de variable "bntSourcel" et je n'arrive pas à en conserver la nouvelle valeur, elle revient automatiquement à celle initialement définie par un "let", et si je ne la prédéfinis pas, elle ne sert qu'à charger la liste des lieux correspondant à la plage de lettres concernées.
Il faut que j'arrive à récupérer cet identifiant de bouton pour l'utiliser dans la fonction de chargement des lieux.

La carte étant affichée en iframe, j'ai tenté sans succès diverses solutions pour ne recharger que l'iframe, ce qui me permettrait de ne pas changer de liste des lieux.

[RobertG]

Bon il faut utiliser

MTitl.setAttribute('html', loc);

J'ai un autre souci de compréhension.
Dans le script j'ai

function loadData(Sourcel) {

qui me permet de charger une liste de lieux en fonction du bouton de plage de lieux sélectionné, par un "loadData(btnSourcel)". Cela fonctionne bien.
Dans une autre fonction, je veux recharger précisément cette liste en affichant la carte d'un lieu sélectionné, mais si j'appelle "loadData(btnSourcel)" sachant que la valeur de la variable "btnSourcel" est connue, dans la fonction loadData, "Sourcel" est considéré comme un objet Event au lieu d'une valeur

Dans cette image, j'ai la valeur du bouton, "5-jt-cnt" que je passe à loadData ou à location.reload, mais il est récupéré comme "0-jt-cnt" et je ne trouve pas où c'est réinitialisé au bouton par défaut (?-B), et je ne peux donc pas forcer l'affichage des lieux correspondant au bouton 5 (O-R).
La tentative de recharge seulement du contenu de l'iframe sans recharger toute la page est inactive

document.getElementById('jt-map-frame').contentDocument.location.reload(true);

jt-map-frame contient le titre du lieu et l'iframe. Comme on le voit dans l'image jointe, on a la liste "Annonay" alors qu'on devrait conserver celle de Roussillon sous la carte.
Comment puis-je faire ?

[RobertG]

Bonjour,

Après la pause "will be removed in 6.0", je reviens sur Joaktree avec toujours blocages côté site :

• impossible de conserver la liste des lieux lors du clic pour afficher la carte d'un lieu correspondant à un onglet autre que l'initial
• impossible d'ajouter des dépôts et d'ajouter, modifier et supprimer des sources, la fonction Joomla.listItemTask (dans core.js) appelée pour exécuter ces tâches rafraîchit la page sans charger le formulaire de création, modification ou suppression, ou peut-être en l'effaçant aussitôt chargé.
• le fonctionnement exige l'utilisation des cookies (dans le paramétrage général du composant)
• la réécriture d'URL est à exclure

Je rappelle quand même que sur le site :

• les affichages de l'index et de la liste des individus sont fonctionnels,
• les listes alphabétiques sont fonctionnelles,
• l'affichage des cartes Google interactives (pas les statiques) est fonctionnel
• l'affichage des fiches individuelles est fonctionnel, avec cartes interactives

Faute de pouvoir avancer sur l'affichage frontal, il va falloir que je passe au chantier de l'administration qui ne sera pas de tout repos, avec là encore essentiellement des soucis JavaScript.

PS : l'utilisation de cartes statiques dans les fiches individuelles fonctionne désormais (côté site donc)

[RobertG]

Qui pourrait m'expliquer pourquoi une adresse réécrite

index.php/liste/jt-0-a-7/6!I88

à partir de

/index.php?option=com_joaktree&view=joaktree&tech=a &Itemid=116&treeId=7&personId=6!I88&lang=fr

provoque une erreur dans "libraries/src/Router/Router.php" en conservant dans l'adresse la partie "jt-0-a-7/6!I88" en tant que "path", erreur bloquante. Si je neutralise ce blocage dans le fichier en question :

        if (\strlen($uri->getPath()) > 0) {
            throw new RouteNotFoundException(Text::_('JERROR_PAGE_NOT_FOUND'));
        }
​

la page s'affiche.
Je précise qu'il s'agit d'un lien interne à la page et que le lien de menu affichant cette page mère, "index.php/liste" comme "path" renvoie un "$uri->getPath())" vide.

Le problème est que je suis incapable de savoir où je pourrais obtenir le vidage de ce "path" pour faire disparaître cette erreur !

[RobertG]

Bonjour,

En ajoutant

namespace Joomla\CMS\Router;

en début de fichier (et en englobant - ou non - le code existant dans une classe JoaktreeRouter), l'erreur disparaît, mais la réécriture SEF (et au vol) n'est que partielle, ajoutant

?view=

suivi du type de vue, pourtant inutile puisque sa suppression dans l'adresse du navigateur affiche bien la même page.

index.php/liste?view=joaktreelist

En revanche, la réécriture d'une adresse de fiche individuelle passe de celle citée ci-dessus à

index.php/liste?view=joaktree&tech=a&treeId=7&personId=6!I88

alors qu'elle devrait être comme en version J3

index.php/liste/jt-0-a-7/6!I88

et ne pas provoquer d'erreur...

[RobertG]

Bonjour,

A tout hasard, je reviens sur une question précédente. Dans un script d'origine MooTools, j'ai

        $script[] = 'window.addEventListener(\'domready\',function(){';
        $script[] = "  const jtAccordion = new Fx.Accordion($('jt-accordion'),'#jt-accordion .jt-content-accordion', '#jt-accordion .content', { ";
​

Ensuite, il y a une gestion de boutons qui doivent être définis en classe jt-content-accordion ou jt-content-accordion-active, mais je ne trouve pas de classe jt-content-accordion-active dans le code source de la page générée.
Le boutons étant en classe accordion sont bien cliquables et fonctionnels.

Par quoi pourrais-je remplacer jtAccordion = new Fx.Accordion ?
Merci de vos conseils !

[RobertG]

Bon, un dernier point peut-être car je me demande si je ne vais pas finalement supprimer cette discussion ou en demander la suppression si je ne peux le faire moi-même.

Actuellement, sur mon site de test, site J3 migré avec ses données de généalogie, Joaktree fonctionne presque bien jusque sur la version 6 alpha et PHP 8.3 côté site (version PHP 8.3 et Joomla! 5.2.0-beta2-dev sur le site de mise au point) :

• cookies internes au composant nécessaires ;
• réécriture d'URL SEF et au vol sans erreur mais adresses incomplètement réécrites ;
• l'index, la liste des individus et les fiches individuelles fonctionnent correctement avec images et carte interactive, ancêtres et descendants inclus ;
• les lieux affichent leur carte interactive (Google seulement, avec clé API) ;
• les cartes interactives seules s'affichent aussi correctement, les cartes statiques sont en suspens ;
• dépôts : pas d'erreur d'affichage de la page ;
• sources affichage liste et pop-up OK ;
• gestion frontale (ajout, modification, suppression) non fonctionnelle, problème dans media/js/core.js à déterminer, le formulaire ne s'affiche pas.

Les modules et plugins ont été adaptés mais restent à valider (modules anniversaires du mois et derniers individus consultés actifs sur le site de mise au point).

En revanche, côté administration, beaucoup d'anomalies à commencer par des enregistrements de modifications qui échouent sans la moindre erreur (console vide notamment), d'autres avec des erreurs que je n'ai pas encore explorées ; plus grave, l'import et l'export des données GedCom tourne en boucle sans faire quoi que ce soit (problème JS encore, sans erreur dans la console), donc impossible de tester la version modifiée de Joaktree sur un site neuf.

En résumé, pour le moment, un site Joaktree J3 en version 1.5.5 (comportant un champ "category" ajouté par Niels dans sa dernière version 1.5, si je me souviens bien ; point à vérifier à partir d'une ancienne version 1.4, pour correction du code si besoin) peut être migré en J5 avec la version 2.0.0 du composant, mais il restera non modifiable, hélas.

[Fred2FR3]

Coucou,
Alors je te préviens tout de suite, j'ai le JS en horreur, je le maitrise pas, et il ne me maitrise pas non plus. J'ai des potes qui font des trucs de fou avec ca, mais moi je trouve cela imbuvable, bref ...
Ceci dit, avec un peu d'expérience, je peux "peut-être" te mettre sur une piste :
Le "#" est une ID et le "." est une classe en CSS et je pense que ton JS se déclenche avec une action précise (event). Je te propose donc de vérifier que tu as bien id="jt-accordion" ou/et class="jt-content-accordion" ou/et id="jt-accordion" class="content" dans ton code source.

1. id="jt-accordion"
2. class="jt-content-accordion"
3. id="jt-accordion" class="content"

Si cela peut aider...

[RobertG]

Merci Fred,

Cette question a finalement été réglée. "accordion" rend les boutons cliquables, et les définitions sont justes. C'est ensuite que ça se corsait. De plus, il y a dans le code une ancienne ligne qui définit en "active" le bouton cliqué, ce qui permettrait ensuite de récupérer cette caractéristique, mais qui ne fonctionne plus.

Le plus gros problème maintenant est l'absence de possibilité de débogage pour remonter à la cause des anomalies.
Quand on clique sur un lien de haut de page (enregistrer, etc.), c'est du JS qui gère la suite.
Et pour beaucoup de fonctions, quand on a une erreur signalée dans la console on a souvent du mal à trouver la cause et la solution, mais quand comme maintenant il n'y a aucune erreur, trouver où elle se produit est une sacrée galère.
Je vais attendre la prochaine version du bouquin sur JS de Christian Vigouroux, elle est prévue début octobre.

Mais je bloque aussi sur des trucs tout bêtes : récupérer une valeur d'ID (par exemple celle du bouton de sélection de la liste des lieux, une plage d'initiales) d'une fonction dans une autre. Habitué pendant des années au Basic puis Visual Basic, ensuite un peu moins avec PHP, l'utilisation des variables de leur portée dans JS est incompréhensible pour moi.