{"id":6269,"date":"2025-05-09T18:38:16","date_gmt":"2025-05-09T16:38:16","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=6269"},"modified":"2025-07-07T14:27:44","modified_gmt":"2025-07-07T12:27:44","slug":"editeur-hierarchique","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=6269","title":{"rendered":"Editeur hi\u00e9rarchique"},"content":{"rendered":"\n<link rel='stylesheet' id='4485-css'  href='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/4485.css?ver=1747039442' type='text\/css' media='all' \/>\n\n\n\n<link rel='stylesheet' id='6267-css'  href='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/6267.css?ver=1746808645' type='text\/css' media='all' \/>\n\n\n<script type='text\/javascript'>\nvar id = \"6265\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/6265.js?ver=1751893191'><\/script>\n\n\n<!-- Module d'edition hierarchique --> \r\n\r\n<!-- <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH\" crossorigin=\"anonymous\"> -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.3.1\/css\/all.css\"\/>\r\n<!-- <link rel=\"stylesheet\" href=\"bootstrap-iconpicker\/css\/bootstrap-iconpicker.min.css\">-->\r\n\r\n<style>\r\n#mydivCommandes{\r\n  position: fixed; \r\n  top: 150px;\r\n  left:150px;\r\n  z-index: 1000;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #d3d3d3;\r\n  text-align:left;\r\n}\r\n\r\n#mydivCommandesheader {\r\n  padding: 10px;\r\n  cursor: move;\r\n  z-index: 10;\r\n  font-size:16px;\r\n  background-color: #00c2a9; \/* #130b8c; *\/\r\n  color: #fff;\r\n}\r\n.span .txt .ms-2 {\r\n    font-size:8px;\r\n}\r\n\tinput {\r\n\t\twidth: 150px;\t\r\n\t}\r\n\r\n\r\n<\/style>\r\n\r\n<div id=\"mydivCommandes\"  class=\"card\" style=\"height:250px;width:300px;display:none\">\r\n    <div id=\"mydivCommandesheader\"  class=\"card border-primary\" >\r\n        Module edition des Items\r\n    <\/div>\t\r\n    <div class=\"card border-secondary mb-3\" style=\"height:200px;\" style=\"padding: -20px;\" >\r\n        <div class=\"card-body\">\r\n            <form id=\"frmEdit\" class=\"form-horizontal\">\r\n                <div class=\"form-group mb-3\">\r\n                    <label for=\"text\" class=\"form-label\" style=\"margin:20px;\">Item<\/label>\r\n                    <div class=\"input-group\">\r\n                        <input type=\"text\" class=\"form-control item-menu\" name=\"text\" id=\"text\" placeholder=\"Text\" style=\"margin:20px\" >\r\n                        <!-- <button type=\"button\" id=\"myEditor_icon\" class=\"btn btn-outline-secondary\"><\/button> -->\r\n                    <\/div>\r\n                    <!-- <input type=\"hidden\" name=\"icon\" class=\"item-menu\"> -->\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n        <div class=\"card-footer\" style=\"text-align:center;\">\r\n            <button type=\"button\" title=\"Mise \u00e0 jour de l'attribut\" id=\"btnUpdate\" class=\"btn btn-primary\" disabled><i class=\"fas fa-sync-alt\"><\/i> Update<\/button>\r\n            <!-- <button type=\"button\" id=\"btnAdd\" class=\"btn btn-success\"><i class=\"fas fa-plus\"><\/i> Add<\/button> -->\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n    \r\n<div class=\"container_ys\">\r\n    <div class=\"row\">\r\n        <div class=\"col-md-12\">\r\n\t\t\t<h2 style=\"text-align:center;\">SPGoO DeepBDD-Bddictionnairique 2025<\/h2>\r\n\t\t\t<h4 style=\"text-align:center;\">Collaboration avec JM Fournier (UT)<\/h4>\r\n\t\t\t<p>Solution de visualisation de donn\u00e9es sous forme hi\u00e8rarchique. Possiblit\u00e9 de d\u00e9placer et de modifier le contenu des hi\u00e9rarchies. Mise au point de la fonctionnalit\u00e9 de fusion entre plusieurs entr\u00e9es de mot. Cette solution sera int\u00e9gr\u00e9e dans deepBdd-Dictionnairique une fois valid\u00e9e.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"row\">\r\n        <div class=\"col-md-4\" >\r\n            <div class=\"card mb-3\">\r\n                <div class=\"card-header\" id=\"col_one\" ><h5 class=\"float-start\">Entr\u00e9e<\/h5>\r\n                    <div class=\"float-end\">\r\n                        <button id=\"btnWrite\"  title=\"Chargement\" class=\"btn btn-outline-secondary\" >\r\n                            <i class=\"fa fa-pen\"><\/i>\r\n                        <\/button>\t\t\t\t\t\t\r\n                       <button id=\"btnUndo\"  title=\"Chargement\" class=\"btn btn-outline-secondary\" >\r\n                            <i class=\"fa fa-undo\"><\/i>\r\n                        <\/button>\t\t\t\t\t\t\r\n                        <button id=\"btnReload\"  title=\"Chargement\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-upload\"><\/i>\r\n                        <\/button>\r\n                        <button id=\"btnExport\"   title=\"Export\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-file-export\"><\/i>\r\n                        <\/button>    \r\n                        <button id=\"btnClear\"  title=\"Efface\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-eraser\"><\/i>\r\n                        <\/button>    \r\n                        <button id=\"btnMerge\"  title=\"Merger les deux \u00e9l\u00e9ments\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa-solid fa-merge\"><\/i>Merge\r\n                        <\/button>    \r\n\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card-body\">\r\n                    <ul id=\"myEditor\" class=\"sortableLists list-group\">\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"col-md-4\" >\r\n            <div class=\"card mb-3\">\r\n                <div class=\"card-header\" id=\"col_two\"><h5 class=\"float-start\">Entr\u00e9e<\/h5>\r\n                    <div class=\"float-end\">\r\n                        <button id=\"btnUndo2\"  title=\"Chargement\" class=\"btn btn-outline-secondary\" >\r\n                            <i class=\"fa fa-undo\"><\/i>\r\n                        <\/button>\t\t\t\t\t\t\r\n                        <button id=\"btnReload2\"  title=\"Chargement\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-upload\"><\/i> \r\n                        <\/button>\r\n                        <button id=\"btnExport2\"  title=\"Export\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-file-export\"><\/i> \r\n                        <\/button>    \r\n                        <button id=\"btnClear2\"  title=\"Efface\"  class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-eraser\"><\/i>\r\n                        <\/button>    \r\n                        <button id=\"btnMerge2\"  title=\"Merger les deux \u00e9l\u00e9ments\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa-solid fa-merge\"><\/i>Merge\r\n                        <\/button>    \r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card-body\">\r\n                    <ul id=\"myEditor2\" class=\"sortableLists list-group\">\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"col-md-4\" >\r\n            <div class=\"card mb-3\">\r\n                <div class=\"card-header\" id=\"col_three\"><h5 class=\"float-start\">Entr\u00e9e merg\u00e9e<\/h5>\r\n                    <div class=\"float-end\">\r\n \t\t\t\t\t\t<button id=\"btnUndo3\"  title=\"Chargement\" class=\"btn btn-outline-secondary\" >\r\n                            <i class=\"fa fa-undo\"><\/i>\r\n                        <\/button>\t\t\t\t\t\t\t\r\n                        <button id=\"btnExport3\"  title=\"Export\" class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-file-export\"><\/i> \r\n                        <\/button>    \r\n                        <button id=\"btnClear3\"  title=\"Efface\"  class=\"btn btn-outline-secondary\">\r\n                            <i class=\"fa fa-eraser\"><\/i>\r\n                        <\/button>    \r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"card-body\">\r\n                    <ul id=\"myEditor3\" class=\"sortableLists list-group\">\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<!-- <script type=\"text\/javascript\" src='https:\/\/code.jquery.com\/jquery-3.7.1.min.js'><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.8\/dist\/umd\/popper.min.js\" integrity=\"sha384-I7E8VVD\/ismYTF4hNIPjVp\/Zjvgyol6VFvRkX\/vR+Vc4jQkC+hVqc2pM8ODewa9r\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy\" crossorigin=\"anonymous\"><\/script>\r\n<script type=\"text\/javascript\" src=\"jquery-menu-editor.js\"><\/script>  \r\n<script type=\"text\/javascript\" src=\"bootstrap-iconpicker\/js\/iconset\/fontawesome5-3-1.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"bootstrap-iconpicker\/js\/bootstrap-iconpicker.min.js\"><\/script> -->\r\n<style>\r\n    .ms-2 {\r\n        font-size : 12px;\r\n        color : blue;\r\n    }\r\n    <\/style>\r\n<script>\r\n\r\nconst abuse1='{\"mot\":{\\\"_id\\\": {\\\"$oid\\\": \\\"66311772e7a4a4c26952e3b5\\\"}, \\\"Head\\\": {\\\"HWD\\\": \\\"abuse\\\", \\\"head_s\\\": \\\"abuse\\\"}, \\\"DESC_0\\\": \\\"v\\\", \\\"PronCodes_0\\\": {\\\"PRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0z\\\", \\\"AMEPRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0z\\\"}, \\\"Derivative_0\\\": [{\\\"DERIV\\\": \\\"abused\\\", \\\"PronCodes\\\": {\\\"PRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0zd\\\"}}], \\\"Derivative_1\\\": [{\\\"DERIV\\\": \\\"abuses\\\", \\\"PronCodes\\\": {\\\"PRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0z \u026az\\\", \\\"VARPRON\\\": \\\"-\u0259z\\\"}}], \\\"Derivative_2\\\": [{\\\"DERIV\\\": \\\"abusing\\\", \\\"PronCodes\\\": {\\\"PRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0z \u026a\u014b\\\"}}], \\\"ide_deepbdd\\\": \\\"db85f348070b11efb38679ebf0dcdd62\\\"}}';\r\nconst abuse2='{\"mot\":{\\\"_id\\\": {\\\"$oid\\\": \\\"66311772e7a4a4c26952e3b6\\\"}, \\\"Head\\\": {\\\"HWD\\\": \\\"abuse\\\", \\\"head_s\\\": \\\"abuse\\\"}, \\\"DESC_0\\\": \\\"n\\\", \\\"PronCodes_0\\\": {\\\"PRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0s\\\", \\\"AMEPRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0s\\\"}, \\\"Derivative_0\\\": [{\\\"DERIV\\\": \\\"abuses\\\", \\\"PronCodes\\\": {\\\"PRON\\\": \\\"\u0259 \\\\u02c8bju\\\\u02d0s \u026az\\\", \\\"VARPRON\\\": \\\"-\u0259z\\\"}, \\\"DESC\\\": \\\"(NB verb \u2260 noun)\\\"}], \\\"ide_deepbdd\\\": \\\"db86121a070b11efb38679ebf0dcdd62\\\"}}';\r\n\r\nconst tab_merge={\"col1\":false, \"col2\":false};   \/\/ valeur \u00e0 true ou false en fonction des s\u00e9lections des merges\r\nconst pile={};\r\nlet mode_edition=false;\r\n\r\njQuery(document).ready(function () {\r\n        \/* =============== DEMO =============== *\/\r\n        \/\/ sortable list options\r\n        var sortableListOptions = {\r\n            placeholderCss: {'background-color': \"#cccc88\"}\r\n        };\r\n\r\n        var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions});\r\n\t\tpile[\"myEditor\"]=[];\r\n        editor.setForm(jQuery('#frmEdit'));\r\n        editor.setUpdateButton(jQuery('#btnUpdate'));\r\n        jQuery('#btnWrite').on('click', function () {\r\n            if (mode_edition) { \r\n                mode_edition=false;\r\n                this.style.background=\"rgba(33,37,41,0.03)\";\r\n            }\r\n            else { \r\n                mode_edition=true; \r\n                this.style.background=\"lightblue\";\r\n            }\r\n\r\n        });\t\r\n        jQuery('#btnUndo').on('click', function () {\r\n            \/\/ il faut verifier si il en reste au moins 1\r\n            const long=pile[\"myEditor\"].length;\r\n            if (long==0) return;\r\n            if (long>1) {\r\n                pile[\"myEditor\"].pop();\r\n            }\r\n            const arrayjson_new = pile[\"myEditor\"][pile[\"myEditor\"].length-1];\r\n            editor.setData(arrayjson_new, false);\r\n            activation_events();\r\n        });\t\r\n        jQuery('#btnReload').on('click', function () {\r\n            const arrayjson_new = adaptation_data(abuse1);\r\n\t\t\tconsole.log(arrayjson_new);\r\n            editor.setData(arrayjson_new);\r\n\t\t\tactivation_events();\r\n        });\r\n\r\n        jQuery('#btnClear').on('click', function () {\r\n            const edt=document.getElementById(\"myEditor\");\r\n            edt.innerHTML=\"\";\r\n        });\r\n\r\n       jQuery('#btnExport').on('click', function () {\r\n            var str = editor.getString();\r\n            export_data(str);\r\n            \/\/$(\"#out\").text(str);\r\n        });\r\n\r\n        jQuery(\"#btnUpdate\").click(function(){\r\n            editor.update();\r\n        });\r\n\r\n        jQuery(\"#btnMerge\").click(function(){\r\n            \/\/ change la couleur du board one \r\n            if (document.getElementById(\"col_one\").style.background==\"lightblue\") {\r\n                document.getElementById(\"col_one\").style.background=\"rgba(33,37,41,0.03)\";\r\n                tab_merge[\"col1\"]=false;\r\n            } else {\r\n                document.getElementById(\"col_one\").style.background=\"lightblue\";\r\n                tab_merge[\"col1\"]=true;\r\n            }\r\n            const isBelowThreshold = (currentValue) => currentValue == true;\r\n            if (Object.values(tab_merge).every(isBelowThreshold)) {\r\n                \/\/ on lance la fusion \r\n                \/\/console.log(\"on lance la fusion\"); \r\n                merge_data( editor.getString() , editor2.getString());\r\n\t\t\t\tactivation_events();\r\n            }\r\n        });\r\n      \r\n        var editor2 = new MenuEditor('myEditor2', {listOptions: sortableListOptions});\r\n\t\tpile[\"myEditor2\"]=[];\r\n        editor2.setForm(jQuery('#frmEdit'));\r\n        editor2.setUpdateButton(jQuery('#btnUpdate'));\r\n\t    jQuery('#btnUndo2').on('click', function () {\r\n            \/\/ il faut verifier si il en reste au moins 1\r\n            const long=pile[\"myEditor2\"].length;\r\n            if (long==0) return;\r\n            if (long>1) {\r\n                pile[\"myEditor2\"].pop();\r\n            }\r\n            const arrayjson_new = pile[\"myEditor2\"][pile[\"myEditor2\"].length-1];\r\n            editor2.setData(arrayjson_new, false);\r\n            activation_events();\r\n        });\r\n\t\r\n        jQuery('#btnReload2').on('click', function () {\r\n            const arrayjson_new = adaptation_data(abuse2);\r\n            editor2.setData(arrayjson_new);\r\n\t\t\tactivation_events();\r\n        });\r\n        jQuery('#btnClear2').on('click', function () {\r\n            const edt=document.getElementById(\"myEditor2\");\r\n            edt.innerHTML=\"\";\r\n        });\r\n        jQuery('#btnExport2').on('click', function () {\r\n            var str = editor2.getString();\r\n            export_data(str);\r\n            \/\/$(\"#out\").text(str);\r\n        });\r\n\r\n        jQuery(\"#btnUpdate\").click(function(){\r\n            editor2.update();\r\n        });\r\n\r\n        jQuery(\"#btnMerge2\").click(function(){\r\n            \/\/ change la couleur du board two \r\n            if (document.getElementById(\"col_two\").style.background==\"lightblue\") {\r\n                document.getElementById(\"col_two\").style.background=\"rgba(33,37,41,0.03)\";\r\n                tab_merge[\"col2\"]=false;\r\n            } else {\r\n                document.getElementById(\"col_two\").style.background=\"lightblue\";\r\n                tab_merge[\"col2\"]=true;\r\n            }\r\n            const isBelowThreshold = (currentValue) => currentValue == true;\r\n            if (Object.values(tab_merge).every(isBelowThreshold)) {\r\n                \/\/ on lance la fusion \r\n                \/\/console.log(\"on lance la fusion\"); \r\n                merge_data( editor.getString() , editor2.getString());\r\n\t\t\t\tactivation_events();\r\n            }\r\n            \/\/ si le premier est de la m\u00eame couleur on marge \r\n            \r\n        });\r\n\r\n        \/* ====================================== *\/\r\n\r\n        \/** PAGE ELEMENTS **\/\r\n        jQuery('[data-toggle=\"tooltip\"]').tooltip();\r\n    });\r\n\r\n    function isEmpty(obj) {\r\n        for (var prop in obj) {\r\n            if (obj.hasOwnProperty(prop)) {\r\n                return false;\r\n            }\r\n        }\r\n        return JSON.stringify(obj)===JSON.stringify({});\r\n    }\r\n\tconst attrib_lecture=[\"mot\",\"_id\",\"$oid\",\"ide_deepbdd\"]; \r\n\t\r\n    const lecture_recursive=function(id_zone, niveau,parente=null,chaine=[]) {\r\n        for (var elem in niveau) {\r\n            let cle=niveau[elem];\r\n\t\t\tlet lecture=false;\r\n\t\t\tif (attrib_lecture.indexOf(elem)!=-1)\r\n\t\t\t\tlecture=true;\r\n            let elem1=null;\r\n            if (niveau[elem]!=null && Object.keys(niveau[elem]).length>0 && typeof(niveau[elem])==\"object\") {\r\n                let struc=[];\r\n                chaine.push({\"text\":elem, href:lecture, \"children\":struc});\r\n                lecture_recursive(id_zone, niveau[elem], elem1, struc);\r\n            } else {\r\n                if (!isEmpty(niveau[elem])) {\r\n                    let struct=[{\"text\":niveau[elem],href:lecture}];\r\n                    chaine.push({\"text\" : elem, href:lecture,\"children\":struct});\r\n                }\r\n            }\r\n        }\r\n    }\r\n    \r\n    \/\/ -------------------------------------------------------------------------------\r\n    \/\/ fonction d'adaptation de l'entr\u00e9e au format de l'\u00e9diteur \r\n    \/\/ -------------------------------------------------------------------------------\r\n    const adaptation_data=function(entry) {\r\n        let nouv_format=[];\r\n        let MOT=JSON.parse(entry);\r\n        let CH=[];\r\n        lecture_recursive(\"zone\", MOT,null,CH);\r\n        return CH;\r\n    }\r\n\r\n    const reconstruction_recursif2=function(niveau,chaine,pre=\"\") {\r\n        for (let elem of niveau) {\r\n            let cle=elem[\"text\"];\r\n            pre=cle;\r\n            chaine[pre]={}\r\n            if (elem[\"children\"]!=null) {           \r\n                let chain=chaine[pre];\r\n                if (elem[\"children\"].length==1) {  \/\/ pas la peine de descendre plus bas \r\n                    chaine[pre]=elem[\"children\"][0][\"text\"];\r\n                }else {\r\n                    reconstruction_recursif(elem[\"children\"],chain,cle);\r\n                }\r\n            } \r\n        }    \r\n    }\r\n\r\n    const reconstruction_recursif=function(niveau,chaine) {\r\n        for (let elem of niveau) {\r\n            let cle=elem[\"text\"];\r\n            chaine[cle]={}\r\n            if (elem[\"children\"]!=null) {           \r\n                let chain=chaine[cle];\r\n                if (elem[\"children\"].length==1) {  \/\/ pas la peine de descendre plus bas \r\n                    chaine[cle]=elem[\"children\"][0][\"text\"];\r\n                }else {\r\n                    reconstruction_recursif(elem[\"children\"],chain,cle);\r\n                }\r\n            } \r\n        }    \r\n    }\r\n    \/\/ -------------------------------------------------------------------------------\r\n    \/\/ fonction d'exportation des donn\u00e9es vers <span class='tooltipsall tooltipsincontent classtoolTips3'>MongoDB<\/span> sous forme de structure r\u00e9duite \r\n    \/\/ -------------------------------------------------------------------------------\r\n    const export_data=function(data) {\r\n        \/\/ il faut supprimer les notions de children et les autres champs qui ne servent pas opour nous \r\n        \/\/ exemple \r\n        \/* \r\n            [{\"text\":\"mot\",\"href\":\"\",\"icon\":\"empty\",\"target\":\"_self\",\"title\":\"\",\r\n                 \"children\":[{\"text\":\"_id\",\"href\":\"\",\"icon\":\"empty\",\"target\":\"_self\",\"title\":\"\",\r\n                    \"children\":[{\"text\":\"$oid\",\"href\":\"\",\"icon\":\"empty\",\"target\":\"_self\",\"title\":\"\",\r\n                        \"children\":[{\"text\":\"66310758229a6b739fdbce3c\",\"href\":\"\",\"icon\":\"empty\",\"target\":\"_self\",\"title\":\"\"}\r\n                    ]}\r\n                ]},\r\n                {\"text\":\"Head\",\"href\":\"\",\"icon\":\"empty\",\"target\":\"_self\",\"title\":\"\",\"children\":[{\"text\":\"HWD\",\"href\":\"\",\"icon\":\"empty\",\"target\":\"_self\",\"title\":\"\",\"children\":\r\n        *\/\r\n        let structure_data={};\r\n        reconstruction_recursif(JSON.parse(data),structure_data);\r\n        \/\/console.log(JSON.stringify(structure_data));\r\n    }\r\n\r\n\tconst activation_events=function() {\r\n        const tab_li=document.querySelectorAll(\"li.list-group-item\");\r\n        \/\/console.log(\"activation des li\",tab_li);\r\n        tab_li.forEach(li=>{\r\n\t\t\tli.style.background=\"rgba(33,37,41,0.1)\";\r\n            li.addEventListener(\"mouseover\",function() {\r\n                li.style.background=\"rgba(19,45,11,0.2)\"; \/\/\"lightblue\";\r\n                li.style.cursor=\"pointer\";\r\n                const btns=li.children[0];\r\n                if (btns.childNodes.length==2)\r\n                    btns.childNodes[1].style.display=\"block\";\r\n                else \r\n                    btns.childNodes[2].style.display=\"block\";\r\n            });\r\n            li.addEventListener(\"mouseleave\",function() {\r\n                li.style.background=\"rgba(33,37,41,0.1)\"; \/\/\"#fff\";\r\n                li.style.cursor=\"default\";\r\n                const btns=li.children[0];\r\n                if (btns.childNodes.length==2)\r\n                    btns.childNodes[1].style.display=\"none\";\r\n                else \r\n                    btns.childNodes[2].style.display=\"none\";\r\n\r\n                \/\/ li.children[0].childNodes[2].style.display=\"none\";\r\n            });\r\n        })\r\n    }\r\n\t\r\n\t\r\n\t\r\n\r\n    const chargement_fusion=function(data) {\r\n        var sortableListOptions = {\r\n            placeholderCss: {'background-color': \"#cccc88\"}\r\n        };        \r\n        var editor3 = new MenuEditor('myEditor3', {listOptions: sortableListOptions});\r\n\t\tpile[\"myEditor3\"]=[];\r\n        editor3.setForm(jQuery('#frmEdit'));\r\n        editor3.setUpdateButton(jQuery('#btnUpdate'));\r\n\t\tjQuery('#btnUndo3').on('click', function () {\r\n            \/\/ il faut verifier si il en reste au moins 1\r\n            const long=pile[\"myEditor3\"].length;\r\n            if (long==0) return;\r\n            if (long>1) {\r\n                pile[\"myEditor3\"].pop();\r\n            }\r\n            const arrayjson_new = pile[\"myEditor3\"][pile[\"myEditor3\"].length-1];\r\n            editor3.setData(arrayjson_new, false);\r\n            activation_events();\r\n        });\t\r\n\t\t\r\n        jQuery('#btnClear3').on('click', function () {\r\n            const edt=document.getElementById(\"myEditor3\");\r\n            edt.innerHTML=\"\";\r\n        });\r\n\r\n        jQuery('#btnExport3').on('click', function () {\r\n            var str = editor3.getString();\r\n            export_data(str);\r\n            \/\/$(\"#out\").text(str);\r\n        });\r\n\r\n        jQuery(\"#btnUpdate\").click(function(){\r\n            editor3.update();\r\n        });\r\n        editor3.setData(data);\r\n\r\n    }\r\n    \r\n \/\/ recherche le nombre de valeur dans la structure \r\n    function getAllIndexes(arr, val) {\r\n        const chaine=JSON.stringify(arr);\r\n        var indexes = [], i = -1;\r\n        while ((i = chaine.indexOf(val, i+1)) != -1){\r\n            indexes.push(i);\r\n        }\r\n        return indexes.length;\r\n    }\r\n\r\n    \/\/ reporter le decalage des indices en fonction de l'attribut \r\n    const repercute_decalage_indice=function(struct1, structure, val ) {\r\n        \/\/ il faut modifier les indices \u00e0 la valeur +1 de tous les \u00e9l\u00e9ments en partant de 0 \r\n        \/\/ on recherche tout ce qui est _0 pour le remplacer \u00e0 la valeur +1 \r\n        const indice=getAllIndexes(struct1, val);\r\n        const nb_indice_changer=getAllIndexes(structure, val);\r\n        let chaine=JSON.stringify(structure);\r\n        \/\/ on commence par la fin \r\n        for (let i=nb_indice_changer-1;i>=0; i--) {\r\n            const ind=indice+i;\r\n            chaine=chaine.replace(val+i,val+ind);\r\n        }\r\n        return JSON.parse(chaine);\r\n    }\r\n\t\r\n    \/\/ --------------------------------------------------\r\n    \/\/ Fusion des deux listes avec les regles de fusion \r\n    \/\/ --------------------------------------------------\r\n    const merge_data=function(Sdata1, Sdata2) {\r\n \t\t\/\/ on commence par le premier \r\n        let Tfusion=JSON.parse(Sdata1);\r\n        let child1=Tfusion[0][\"children\"];\r\n        \/\/ on supprime l'element Head , _id et ide_deepbdd\r\n        child1.splice(child1.findIndex((e)=>e.text==\"_id\"),1);\r\n        child1.splice(child1.findIndex((e)=>e.text==\"ide_deepbdd\"),1);\r\n        \/\/ il faut compter si DESC_indice est present  pour d\u00e9caler les autres\r\n        \/\/ nettoyage de la deuxi\u00e8me liste \r\n        const Odata2= JSON.parse(Sdata2);\r\n        let child2=Odata2[0][\"children\"];\r\n        \/\/ on supprime l'element Head , _id et ide_deepbdd\r\n        child2.splice(child2.findIndex((e)=>e.text==\"Head\"),1);\r\n        child2.splice(child2.findIndex((e)=>e.text==\"_id\"),1);\r\n        child2.splice(child2.findIndex((e)=>e.text==\"ide_deepbdd\"),1);\r\n        \r\n        child2=repercute_decalage_indice(child1, child2,\"DESC_\");\r\n        child2=repercute_decalage_indice(child1, child2,\"PronCodes_\");\r\n        child2=repercute_decalage_indice(child1, child2,\"Derivative_\");\r\n        \r\n        \/\/ on fusionne les deux \r\n        Tfusion[0][\"children\"]=Tfusion[0][\"children\"].concat(child2); \r\n        \/\/ const Lfusionnee= fusion_liste(Odata1,Odata2);\r\n        console.log(Tfusion);\r\n        chargement_fusion(JSON.stringify(Tfusion));\r\n\t}\r\n\r\ndragElement(document.getElementById(\"mydivCommandes\"));\r\n\r\nfunction dragElement(elmnt) {\r\n    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;\r\n    if (document.getElementById(elmnt.id + \"header\")) {\r\n        \/\/ if present, the header is where you move the DIV from:\r\n        document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;\r\n    } else {\r\n        \/\/ otherwise, move the DIV from anywhere inside the DIV:\r\n        elmnt.onmousedown = dragMouseDown;\r\n    }\r\n\r\n    function dragMouseDown(e) {\r\n        e = e || window.event;\r\n        e.preventDefault();\r\n        \/\/ get the mouse cursor position at startup:\r\n        pos3 = e.clientX;\r\n        pos4 = e.clientY;\r\n        document.onmouseup = closeDragElement;\r\n        \/\/ call a function whenever the cursor moves:\r\n        document.onmousemove = elementDrag;\r\n    }\r\n\r\n    function elementDrag(e) {\r\n        e = e || window.event;\r\n        e.preventDefault();\r\n        \/\/ calculate the new cursor position:\r\n        pos1 = pos3 - e.clientX;\r\n        pos2 = pos4 - e.clientY;\r\n        pos3 = e.clientX;\r\n        pos4 = e.clientY;\r\n        \/\/ set the element's new position:\r\n        elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\r\n        elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\r\n    }\r\n\r\n    function closeDragElement() {\r\n        \/\/ stop moving when mouse button is released:\r\n        document.onmouseup = null;\r\n        document.onmousemove = null;\r\n    }\r\n}\t\r\n\r\n<\/script>\r\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Adaptation au contexte WordPress<\/summary>\n<p>La librairie utilis\u00e9e pour ce dispositif est disponible dans sa version initiale sur <a href=\"https:\/\/github.com\/davicotico\">https:\/\/github.com\/davicotico<\/a>. Pour int\u00e9grer cette librairie jquery-menu-editor \u00e0 notre contexte il a fallu modifier quelques parties. <\/p>\n\n\n\n<p>jemnu-query-editor<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La function menuEditor dans laquelle les \u00e9l\u00e9ments faisant r\u00e9f\u00e9rence \u00e0 iconPicker ont \u00e9t\u00e9 supprim\u00e9s car non utilis\u00e9s dans notre cas. <\/li>\n\n\n\n<li>L&#8217;ajout dans TButtonGroup d&#8217;un bouton nouveau \u00e9l\u00e9ment et les fonctions associ\u00e9es.<\/li>\n\n\n\n<li>Rendre le groupe des boutons par d\u00e9faut masqu\u00e9 : $divbtn[0].style.display=&#8221;none&#8221;;<\/li>\n\n\n\n<li>Le d\u00e9ploiement syst\u00e9matique des menus a \u00e9t\u00e9 ajout\u00e9 dans createMenu par l&#8217;ajout de la classe sortableListsOpen<\/li>\n\n\n\n<li>La m\u00e9morisation des diff\u00e9rentes configuration dans une structure de type pile setData, updateButtons.<\/li>\n\n\n\n<li>resetForm a \u00e9t\u00e9 modifi\u00e9 pour enlever la partie iconPicker.<\/li>\n<\/ul>\n\n\n\n<p>Dans la partie code de la page  : <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00e9veloppement d&#8217;une fonction d\u00e9di\u00e9e pour la fusion de deux structures de mots.<\/li>\n\n\n\n<li>Fonction de conversion du format deepbdd de <span class='tooltipsall tooltipsincontent classtoolTips3'>MongoDB<\/span> au format de la librairie dans les deux sens.<\/li>\n\n\n\n<li>Fonction activation_events qui permet de rendre visible les boutons et le couleur du fond de la zone de travail.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const activation_events=function() {\n    const tab_li=document.querySelectorAll(\"li.list-group-item\");\n    tab_li.forEach(li=&gt;{\n       li.style.background=\"rgba(33,37,41,0.05)\";\n       li.addEventListener(\"mouseover\",function() {\n           li.style.background=\"rgba(33,37,41,0.2)\";\n           li.style.cursor=\"pointer\";\n           const btns=li.children&#91;0];\n           if (btns.childNodes.length==2)\n               btns.childNodes&#91;1].style.display=\"block\";\n           else\n               btns.childNodes&#91;2].style.display=\"block\";\n      });\n      li.addEventListener(\"mouseleave\",function() {\n           li.style.background=\"rgba(33,37,41,0.05)\";\n           li.style.cursor=\"default\";\n           const btns=li.children&#91;0];\n           if (btns.childNodes.length==2)\n               btns.childNodes&#91;1].style.display=\"none\";\n           else\n               btns.childNodes&#91;2].style.display=\"none\";\n      });\n    })\n}\n<\/code><\/pre>\n\n\n\n<p class=\"has-pale-cyan-blue-color has-text-color has-link-color has-medium-font-size wp-elements-fc919fb429e50980f9f315975fe981db\">Am\u00e9nagements suppl\u00e9mentaires du code<\/p>\n\n\n\n<p>Fonction merge : fonction qui consiste \u00e0 fusionner les deux listes selon des r\u00e8gles pr\u00e9cises. Dans notre cas les r\u00e8gles sont pour le moment int\u00e9gr\u00e9es directement dans le code. Elles consistent \u00e0 indiquer comment doit se passer la fusion : quels sont les attributs \u00e0 enlever, les attributs \u00e0 r\u00e9indexer et les attributs \u00e0 associer.<\/p>\n\n\n\n<p>Ajout \u00e9galement de la possibilit\u00e9 d&#8217;\u00e9diter directement les \u00e9l\u00e9ments, en effet la solution de d\u00e9part consistait \u00e0 saisir tous les champs \u00e0 partir d&#8217;un module d&#8217;\u00e9dition, ce qui dans notre cas peut \u00eatre fastidieux car le nombre de modification est important. Dans ce cas, nous avons rajout\u00e9 \u00e0 la sortie des fonctions extensions du plugin sortedListClass la cr\u00e9ation d&#8217;une zone d&#8217;input permettant de saisir les \u00e9l\u00e9ments. Sur cette nouvelle zone, deux \u00e9v\u00e9nementiels ont \u00e9t\u00e9 ajout\u00e9 pour traiter la validation de la saisie par la touche Enter ou la validation par le d\u00e9placement de la souris (sortie de la zone input). <\/p>\n\n\n\n<p>Modification du comportement + pour permettre l&#8217;ajout dans le groupe courant <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n$main.on('click', '.btnAjout', function (e) {\n........\nlet ligne=itemEditing.children().last(); \n\/\/ attention si le dernier element est de type div, il faut ajouter l'interm\u00e9diaire ul \nif (ligne&#91;0].localName==\"div\") {\n\t\/\/ creation d'une rubrique ul avant \n\titemEditing =  jQuery(this).parent().parent().parent();\n\tvar $ul = jQuery('&lt;ul&gt;').addClass('list-unstyled').css('padding-top', '10px');\n        itemEditing.append($ul);\n        $ul.append($li);\n        itemEditing.addClass('sortableListsOpen');\n        TOpener(itemEditing);\n} else {\n\tligne.append($li);\n}\n.....\n}<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"801\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/07\/deepbdd_modele_hieirarchique-1.webp\" alt=\"\" class=\"wp-image-8121\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/07\/deepbdd_modele_hieirarchique-1.webp 941w, https:\/\/spgoo.org\/wp-content\/uploads\/2025\/07\/deepbdd_modele_hieirarchique-1-300x255.webp 300w, https:\/\/spgoo.org\/wp-content\/uploads\/2025\/07\/deepbdd_modele_hieirarchique-1-768x654.webp 768w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/figure>\n<\/div><\/details>\n<script type=\"text\/javascript\"> toolTips('.classtoolTips3','<a style=\"text-decoration: none;\" href=\"https:\/\/www.mongodb.com\/fr-fr\"><img style=\"width: 180px; height: 50px;\" src=\"\/wp-content\/uploads\/2025\/01\/mongodb-logo-rgb-scaled.jpg\" \/><\/a>'); <\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6269","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/6269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6269"}],"version-history":[{"count":25,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/6269\/revisions"}],"predecessor-version":[{"id":8123,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/6269\/revisions\/8123"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}