Script XML pour navigateur en html,css, js

[Fortare]

Bonjour,

Je viens à vous car je rencontre un petit souci que je n'arrive pas à résoudre après plusieurs jours de recherche.
En effet, je dispose d un fichier xml et je voudrais intégrer le code XML dans mon site web.
Un peu dans ce genre-là, avec une des petites flèches pour cacher, reveler certaines parties ( voir photo), il y aura sans doute du code js.



Voici comment j'ai essayé de procéder :
- J'ai ouvert mon fichier source XML avec google chrome.
- J'ai ensuite fait une inspection de la page
- J'ai recopié le scripte HTML, Css et je l'ai injecté dans mon code.


Malheureusement, ça ne marche pas du tout.
J'ai aussi essayé de chercher des générateurs de code HTML à partir d un fichier XML, mais je n'ai pas trouvé.

Merci, ça fait vraiment un moment que je n avance plus ....
-----

[vgondr98]

Avec Angular, tu as la librairie @angular/material, https://stackoverflow.com/questions/...g-possibilites

[JPL]

Les codes doivent être publiés en mode texte entourés de la balise Code, et non sous forme d’images.

[Fortare]

vgondr98 : Je vais voir ca, merci.

JPL : 1000 excuses

Mon code XML source :

<td:UUT>
    <td:Description>
      <c:Definition xsi:type="uut:UUTDescription">
        <c:Identification>
          <c:ModelName>DemoUut2</c:ModelName>
        </c:Identification>
        <hc:Interface>
          <c:Ports>
            <c:Port name="P1" direction="Bi-Directional">
              <c:ConnectorPins>
                <c:ConnectorPin xsi:type="uut:UUTConnectorLocation" connectorID="J1" pinID="1">
                  <uut:Function>
                    <uut:SignalInformation>
                      <uut:SignalName>Vi</uut:SignalName>
                      <uut:SignalType>Input</uut:SignalType>
                      <uut:SignalDefinition>Input signal</uut:SignalDefinition>
                    </uut:SignalInformation>
                  </uut:Function>
                </c:ConnectorPin>
                <c:ConnectorPin xsi:type="uut:UUTConnectorLocation" connectorID="J1" pinID="2">
                  <uut:Function>
                    <uut:SignalInformation>
                      <uut:SignalName>Vo</uut:SignalName>
                      <uut:SignalType>Output</uut:SignalType>
                      <uut:SignalDefinition>Output signal</uut:SignalDefinition>
                    </uut:SignalInformation>

</span><div class="folder" id="folder1"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;td:UUT&gt;</span></div><div class="opened"><span>
    </span><div class="folder" id="folder2"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;td:Description&gt;</span></div><div class="opened"><span>
      </span><div class="folder" id="folder3"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;c:Definition<span class="html-attribute"> <span class="html-attribute-name">xsi:type</span>="<span class="html-attribute-value">uut:UUTDescription</span>"</span>&gt;</span></div><div class="opened"><span>
        </span><div class="folder" id="folder4"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;c:Identification&gt;</span></div><div class="opened"><span>
          </span><div class="line"><span class="html-tag">&lt;c:ModelName&gt;</span><span>DemoUut2</span><span class="html-tag">&lt;/c:ModelName&gt;</span></div><span>
        </span></div><span class="folded hidden">...</span><div class="line"><span class="html-tag">&lt;/c:Identification&gt;</span></div></div><span>
        </span><div class="folder" id="folder5"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;hc:Interface&gt;</span></div><div class="opened"><span>
          </span><div class="folder" id="folder6"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;c:Ports&gt;</span></div><div class="opened"><span>
            </span><div class="folder" id="folder7"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;c:Port<span class="html-attribute"> <span class="html-attribute-name">name</span>="<span class="html-attribute-value">P1</span>"</span><span class="html-attribute"> <span class="html-attribute-name">direction</span>="<span class="html-attribute-value">Bi-Directional</span>"</span>&gt;</span></div><div class="opened"><span>
              </span><div class="folder" id="folder8"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;c:ConnectorPins&gt;</span></div><div class="opened"><span>
                </span><div class="folder" id="folder9"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;c:ConnectorPin<span class="html-attribute"> <span class="html-attribute-name">xsi:type</span>="<span class="html-attribute-value">uut:UUTConnectorLocation</span>"</span><span class="html-attribute"> <span class="html-attribute-name">connectorID</span>="<span class="html-attribute-value">J1</span>"</span><span class="html-attribute"> <span class="html-attribute-name">pinID</span>="<span class="html-attribute-value">1</span>"</span>&gt;</span></div><div class="opened"><span>
                  </span><div class="folder" id="folder10"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;uut:Function&gt;</span></div><div class="opened"><span>
                    </span><div class="folder" id="folder11"><div class="line"><span class="folder-button fold"></span><span class="html-tag">&lt;uut:SignalInformation&gt;</span></div><div class="opened"><span>
                      </span><div class="line"><span class="html-tag">&lt;uut:SignalName&gt;</span><span>Vi</span><span class="html-tag">&lt;/uut:SignalName&gt;</span></div><span>
                      </span><div class="line"><span class="html-tag">&lt;uut:SignalType&gt;</span><span>Input</span><span class="html-tag">&lt;/uut:SignalType&gt;</span></div><span>
                      </span><div class="line"><span class="html-tag">&lt;uut:SignalDefinition&gt;</span><span>Input signal</span><span class="html-tag">&lt;/uut:SignalDefinition&gt;</span></div><span>
                    </span></div><span class="folded hidden">...</span><div class="line"><span class="html-tag">&lt;/uut:SignalInformation&gt;</span></div></div><span>
                  </span></div><span class="folded hidden">...</span><div class="line"><span class="html-tag">&lt;/uut:Function&gt;</span></div></div><span>
                </span></div><span class="folded hidden">...</span><div class="line"><span class="html-tag">&lt;/c:ConnectorPin&gt;</span></div></div><span>

Pour le CSS

div.header {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
    margin: 10px;
}

div.folder > div.hidden {
    display:none;
}

div.folder > span.hidden {
    display:none;
}

.pretty-print {
    margin-top: 1em;
    margin-left: 20px;
    font-family: monospace;
    font-size: 13px;
}

#webkit-xml-viewer-source-xml {
    display: none;
}

.opened {
    margin-left: 1em;
}

.comment {
    white-space: pre;
}

.html-tag {
    color: rgb(136, 18, 128);
}

.html-attribute-value {
    color: rgb(26, 26, 166);
}

.html-attribute-name {
    color: rgb(153, 69, 0);
}


.folder-button {
    -webkit-user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-left: -10px;
    width: 10px;
    background-repeat: no-repeat;
    background-position: left top;
    vertical-align: bottom;
}

.fold {
   { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23909090' width='10' height='10'><path d='M0 0 L8 0 L4 7 Z'/></svg>"); 
    height: 10px;
}

.open {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23909090' width='10' height='10'><path d='M0 0 L0 8 L7 4 Z'/></svg>");
    height: 10px;
}

[A voir en vidéo sur Futura]

[Ikhar84]

Bonjour,

Pourquoi vouloir afficher le contenu xml brut (par curiosité) ?

Ça va vraiment pas faire raccord dans un site moderne, amha...

Tu as un paquet de bibliothèque js pour le faire :
Exemples non exhaustifs
Tree-XML-viewer
JSTree (un peu vielliote, je crois, risque de poser problème avec une version récente de JQuery
Etc ...

Tentes une recherche avec

Javascript XML tree viewer

Edit: les lib trouvées vont probablement toutes nécessiter JQuery, et de mémoire, les lib modernes ont plutôt tendance à s'en passer...

[Fortare]

Super merci Ikhar84,

J'ai pris le premier, ça a l'air de bien fonctionner. J'utilisais déjà JQuery de toute façon donc ça a été rapide a implementer.
Je veux afficher du XML brut car je fais une sorte de site web tuto, donc j'ai besoin d'afficher du XML sous forme d'arbre et un peu de couleur.