La librairie utilisée pour ce dispositif est disponible dans sa version initiale sur https://github.com/davicotico. Pour intégrer cette librairie jquery-menu-editor à notre contexte il a fallu modifier quelques parties.

jemnu-query-editor

• La function menuEditor dans laquelle les éléments faisant référence à iconPicker ont été supprimés car non utilisés dans notre cas.
• L’ajout dans TButtonGroup d’un bouton nouveau élément et les fonctions associées.
• Rendre le groupe des boutons par défaut masqué : $divbtn[0].style.display=”none”;
• Le déploiement systématique des menus a été ajouté dans createMenu par l’ajout de la classe sortableListsOpen
• La mémorisation des différentes configuration dans une structure de type pile setData, updateButtons.
• resetForm a été modifié pour enlever la partie iconPicker.

Dans la partie code de la page :

• Développement d’une fonction dédiée pour la fusion de deux structures de mots.
• Fonction de conversion du format deepbdd de MongoDB au format de la librairie dans les deux sens.
• Fonction activation_events qui permet de rendre visible les boutons et le couleur du fond de la zone de travail.

const activation_events=function() {
    const tab_li=document.querySelectorAll("li.list-group-item");
    tab_li.forEach(li=>{
       li.style.background="rgba(33,37,41,0.05)";
       li.addEventListener("mouseover",function() {
           li.style.background="rgba(33,37,41,0.2)";
           li.style.cursor="pointer";
           const btns=li.children[0];
           if (btns.childNodes.length==2)
               btns.childNodes[1].style.display="block";
           else
               btns.childNodes[2].style.display="block";
      });
      li.addEventListener("mouseleave",function() {
           li.style.background="rgba(33,37,41,0.05)";
           li.style.cursor="default";
           const btns=li.children[0];
           if (btns.childNodes.length==2)
               btns.childNodes[1].style.display="none";
           else
               btns.childNodes[2].style.display="none";
      });
    })
}

Aménagements supplémentaires du code

Fonction merge : fonction qui consiste à fusionner les deux listes selon des règles précises. Dans notre cas les règles sont pour le moment intégrées directement dans le code. Elles consistent à indiquer comment doit se passer la fusion : quels sont les attributs à enlever, les attributs à réindexer et les attributs à associer.

Ajout également de la possibilité d’éditer directement les éléments, en effet la solution de départ consistait à saisir tous les champs à partir d’un module d’édition, ce qui dans notre cas peut être fastidieux car le nombre de modification est important. Dans ce cas, nous avons rajouté à la sortie des fonctions extensions du plugin sortedListClass la création d’une zone d’input permettant de saisir les éléments. Sur cette nouvelle zone, deux événementiels ont été ajouté pour traiter la validation de la saisie par la touche Enter ou la validation par le déplacement de la souris (sortie de la zone input).