resolve merge conflicts

## Modification XSL

Éditer ou remplacer le fichier *2html.xsl*. La tranformation fournie (issue de https://github.com/ncbi/JATSPreviewStylesheets/blob/master/xslt/main/jats-html.xsl) prend du XML JATS en entrée.

Éditer ou remplacer le fichier *2html.xsl*. 

Deux transformations sont fournies : 

- prenant du XML JATS en entrée (issue de https://github.com/ncbi/JATSPreviewStylesheets/blob/master/xslt/main/jats-html.xsl) ;

- prenant du XML TEI *Commons Publishing*  (`tei2html.xsl`).

 - l'archive est dézippée dans le dossier du zip

 - le dossier décompressé est renommé avec l'id unique généré par ojs

 - le fichier xml est rennomé avec ce même identifiant : `[id]/[id].xml`

 - les urls des images sont de la forme [idarticle]/zimage/[id1]/[id2][nom_image].[extension]

 - les urls des images sont de la forme `[idarticle]/zimage/[id1]/[id2][nom_image].[extension]`

## Interactivité de la page web (javascript)

- Tables des matières cliquable

- Circulation depuis les appels de notes faire les notes et retour

- Figures

  - circulation depuis les titres des images vers les images (panneau latéral)

- Tableaux, double mode de visualisation

  - Seul le titre est affiché,  cliquer sur le titre pour afficher le contenu dans le corps du texte.

  - Cliquer sur l'îcone <span style="font-weight:bold;color:#0a84ff;">↗</span> pour ouvrir le tableau dans une fenêtre externe.

- Références bibliographiques : navigation des liens de références courtes vers les références longues.

- Index : listes dépliables des index, lien pour chaque occurrence avec retour au texte.

- Dark mode : mode de lecture sombre.

**Roadmap**

- Figures : affichage des illustrations dans une fenêtre externe (visualiseur IIIF).

- Plusieurs jeux de notes

- Division de la fenêtre principale (texte et panneaux) redimensionnable.

## Fonctionnement utilisateur : procédure de chargement des fichiers

## Fonctionnement utilisateur [OMP] : procédure de chargement des fichiers

Ces étapes sont réalisées à l'étapes de *Publication* > onglet *Publication Formats*.

window.addEventListener('DOMContentLoaded', (event) => {

    lang = lang.split('_')[0];

    translatePage(lang);

    bindFootnotes();

    // Appel fonction traitant ensemble notes et figures : 

    bindFootnotesAndImages();

    // Appel fonction pour tableaux déroulants 

    initialiseTableaux();

    // index collapsible

    initializeCollapsibleLists();

    // open new windows

    //openFigureWindow(); 

    //toc hightlighing on scroll

    document.querySelector('.left-contents').addEventListener("scroll", () => {

        let scrollTop = document.querySelector('.left-contents').scrollTop;

    document.body.classList.toggle('dark');

}

function bindFootnotes() {

    document.querySelectorAll('.xref-call').forEach((xrefc) => {

        let focusTarget = document.getElementById(xrefc.dataset.target)

        xrefc.addEventListener('click', () => {

            if(xrefc.classList.contains('fn-call')) {

/////////////////////////////////////////////////////////////////

//////    Fonction pour figures et notes ensemble  [XG]   ///////

/////////////////////////////////////////////////////////////////

function bindFootnotesAndImages() {

    let figAppels = document.getElementsByClassName('fig-call');

    let notesAppels = document.getElementsByClassName('xref-call');

    // fusionne les deux tableaux ('arrays') dans un 3e : 

    let tousLesAppels = [...figAppels, ...notesAppels];

    for (let i=0 ; i < tousLesAppels.length ; i++) {

        let focusTarget = document.getElementById(tousLesAppels[i].dataset.target);

        tousLesAppels[i].addEventListener('click', () => {

            if(tousLesAppels[i].classList.contains('fn-call')) {

                openTab('footnotes');

            }

            else {

            } else if (tousLesAppels[i].classList.contains('fig-call')){

                let cible = tousLesAppels[i].getAttribute('data-target');

                openTab('figures');

                scrollToElementById(cible);

            } else {

                openTab('refs');

            }

            document.getElementById(xrefc.dataset.target).scrollIntoView({

            document.getElementById(tousLesAppels[i].dataset.target).scrollIntoView({

                block: 'center',

                behavior: "smooth"

            });

        });

        //click on footnote label will focus to the footnote call anchor

        if(xrefc.classList.contains('fn-call')) {

        if(tousLesAppels[i].classList.contains('fn-call')) {

            let footnoteLabel = focusTarget.querySelector('span.label');

            footnoteLabel.addEventListener('click', () => {

                xrefc.scrollIntoView({

                tousLesAppels[i].scrollIntoView({

                    block: 'start',

                    behavior: "smooth"

                });

            })

        }

    })

    }

}

function scrollToElementById(elementId) {

    const targetElement = document.getElementById(elementId);

    if (targetElement) {

        targetElement.scrollIntoView({ behavior: 'smooth' });

    }

}

////////////////////////////////////////////////

//////    Fonctions pour les tables   [XG]   ///

////////////////////////////////////////////////

// [EC 4/9/23] table collapsible – v. draft - version XG - même effet, approche différente.

	let figTables;

	function initialiseTableaux() {

	figTables = document.getElementsByClassName("fig-table");

	for (let i = 0; i<figTables.length; i++ ) {

    let labels = figTables[i].getElementsByTagName("label");

    labels[0].setAttribute('onclick', "afficheTableau('"+i+"');");

    }    

}

function afficheTableau(numero) {

    let tableCourante = figTables[numero].getElementsByTagName("table")[0];

    if (tableCourante.style.display === 'none' || tableCourante.style.display === '') {

        tableCourante.style.display = 'table'; 

        tableCourante.style.backgroundColor = 'white';

    } else {

        tableCourante.style.display = 'none';

    }

}

/////////////////////////////////////////////////////////////

//////    Fonctions pour les index (collapsible)   [EC]   ///

/////////////////////////////////////////////////////////////

function initializeCollapsibleLists() {

  var toggleButtons = document.querySelectorAll('.toggle-button');

  toggleButtons.forEach(function (button) {

    button.addEventListener('click', function () {

      var parentLi = this.closest('li'); // Get the parent <li> element

      var indexLevel2Elements = parentLi.querySelectorAll('.index-level2'); // Get descendant elements with class .index-level2

      indexLevel2Elements.forEach(function (element) {

        element.style.display = (element.style.display === 'none' || element.style.display === '') ? 'block' : 'none'; // Toggle display

      });

      // Toggle button text on the clicked toggle button

      this.textContent = (indexLevel2Elements[0].style.display === 'none') ? '[+]' : '[-]'; // Use the first element's display property

    });

  });

}

///////////////////////////////////////////////////////

//////    Fonctions pour fenêtres externes   [EC]   ///

///////////////////////////////////////////////////////

function openFigureWindow(elementId) {

  // Create a new window with specific dimensions and position

  const newWindow = window.open('', '_blank', 'width=900,height=600');

  // Check if the window was opened successfully

  if (newWindow) {

    // Access the document of the new window

    const newWindowDocument = newWindow.document;

    // Create a <style> element for custom CSS

    const styleElement = newWindowDocument.createElement('style');

    // Define your custom CSS styles

    const customStyles = `

      /* Add your CSS styles here */

      * {font-family: "Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;}

      figure {

            width: 100%;

            min-height: 100px;

            display:flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            color: #999;

            margin: 25px 0px;

        }

      label {background-color: #454545;width:90%;}

      table {

            max-width:90%

        }

      td,th {

            border-bottom:1px solid #ccc;

            font-size:1.2rem;

        }

        .fig-table label {

            padding: 10px;

            margin: 0;

            cursor: pointer;

        }

        .credits {

            margin: 0 5 5 20px;

            font-size:smaller;

            align-self: flex-start;

        }

        .table-call-window,

        .fig-call-window {

            display:none;

        }

    `;

    // Set the CSS content of the <style> element

    styleElement.textContent = customStyles;

    // Append the <style> element to the new window's document head

    newWindowDocument.head.appendChild(styleElement);

    // Find the element with the specified ID in the current document

    const elementToClone = document.getElementById(elementId);

    // Clone the element to the new window's document

    const clonedElement = elementToClone.cloneNode(true);

    // Append the cloned element to the new window's document body

    newWindowDocument.body.appendChild(clonedElement);

  }

}

    padding: calc(var(--btn-tabs-height) + 10px) 20px;

}

.content-tab .bibliography {

    border:none;

}

.focus-tab{

    background-color: black;

    color: white;

    /*line-height: 15%;*/

}

/************/

figure {

    width: 100%;

    min-height: 100px;

    background-color: #454545;

    display:flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #999;

    margin: 25px 0px;

    background-color: #454545;

}

img {

    width: 100%;

}

.caption {

    padding: 8px;

}

.fig-call-window,

.fig-call-window a,

.fig-call-window a:visited,

/*.figure-call

.table-call,*/

.table-call-window,

.table-call-window a,

.table-call-window a:visited {

    color:var(--third-color);  

    text-decoration: none;

}

.table-call-window {

    position: relative;

/*    background-color: red;*/

    top: -10px;

    left: 355px;

    margin-top: -26px;

}

/* tables */

table caption {

    font-size: 1.2rem;

    font-style: italic;

}

table {

    border-collapse: collapse;

    margin: 25px 0px;

    display: none;

    width: 100%;

}

td,th {

    border:1px solid #ccc;

    border-bottom:1px solid #ccc;

    font-size:1.2rem;

    padding:5px;

/*    padding:5px;*/

}

th{

    background-color: #2b2b2b;

    color: #ccc;

.fig-table label {

    padding: 10px;

    margin: 0;

    cursor: pointer;

}

.credits {

    margin: 0 5 5 20px;

    font-size:smaller;

    align-self: flex-start;

}

/*counters*/

section.body {

section.body h4:not(div.boxed-text *){

    counter-reset: subsubsubsection;

}

/*

section.body h2:not(div.boxed-text *):before{

    counter-increment: section;

    content: counter(section) ". ";

    counter-increment: subsubsection;

    content: counter(section)"."counter(subsection)"."counter(subsubsection)" ";

}

*/

/* biblio bas de page */

.bibliography {

    margin-top:4ex;

    border-top:1px solid #efefef;

}

section.bibliography h2 {

    font-size: 2rem;

}

section.bibliography h3 {

    font-size: 1.8rem;

}

section.bibliography ul {

    list-style-type: none;

    margin-left: 0;

}

section.bibliography li.bibl {

    font-size:1.3rem;

}

/************/

#toc li {

    background-color: var(--dark-theme-txt);

}

#toc ol {

    list-style-type: none;

}

#toc .section2 {

    margin-left:5%;

}

#toc .section3 {

    margin-left:10%;

}

#toc .section4 {

    margin-left:15%;

}

#toc .section5 {

    margin-left:20%;

}

/***********/

span.fn-call, sup{ /** must not affect line height **/

span[class*="fn-call"], sup{ /** must not affect line height **/

    font-size: .60em;

    vertical-align: 0.65em;

    line-height: 0;

}

span.fn-call {

span[class*="fn-call"] {

    /*font-variant-position: super;*/

    color: var(--third-color);

    cursor: pointer;

    cursor: pointer;

}

#footnotes ul {

div[id^="footnotes"] ul,

div[id^="footnotes"] ul {

    list-style-type: none;

}

#footnotes li{

div[id^="footnotes"] li{

    box-sizing: border-box;

    padding: 20px 10px 20px 10px;

    border-bottom: 1px solid #888;

}

#footnotes li.focus, #refs .ref.focus{

div[id^="footnotes"] li.focus, #refs .ref.focus{

    border-right: 5px solid var(--third-color);

}

#footnotes li .label {

div[id^="footnotes"] li .label {

    display: inline-block;

    margin-right:10px;

    cursor: pointer;

}

#footnotes li .label:hover{

div[id^="footnotes"] li .label:hover{

    color: var(--grey-color);

}

#footnotes li .label:before {

div[id^="footnotes"] li .label:before {

    content: '[';

}

#footnotes li .label:after {

div[id^="footnotes"] li .label:after {

    content: ']';

}

/*

#footnotes .label {

    color:var(--third-color);

}

*/

div[id^="footnotes"] .label {

    color:var(--third-color);

}

.mixed-citation {

    margin-top: 10px;

    margin-bottom: 10px;

    border-bottom: 1px solid #888;

}

.dark #footnotes li, .dark .mixed-citation {

.dark div[id^="footnotes"] li, .dark .mixed-citation {

    border-bottom: 1px solid var(--dark-theme-txt);

}

/******************************************/

#index .index-level1 {

    list-style-type: none;

    margin-top: 3%;

    font-weight: bold;

}

#index .index-level2 {

    list-style-type: none;

    margin-top: 1%;

    margin-left: 5%;

    font-weight: normal;

}

#index .index-level3 {

    list-style-type: none;

    margin-top: 1%;

    margin-left: 5%;

    font-weight: normal;

}

.index-anchor {

    color:var(--third-color);

    font-size: 75%;

}

.index-link:first-of-type {

    margin-left: 12px;

}

/* collapse via toggle-button */

.index-level2 {

  display: none;

}

.toggle-button {

  cursor: pointer;

  color:var(--third-color);

}

.expanded .toggle-button::after {

  content: "[-]";

}

.collapsed .toggle-button::after {

  content: "[+]";

}

/******************************************/

.journal-meta {

    padding: 10px;

div.item.galleys ul {

    list-style-type: none;

}

/******************************/

disp-quote {

    display: block;

    text-align:right;

}

blockquote {

    background-color:aliceblue;

    padding-left: 5%;

}

/******************************************/

ul, ol {

    margin-top:2ex; 

    margin-bottom:2ex;

    line-height: 150% ;

}

 No newline at end of file