resolve merge conflicts

README.md

@@ -32,7 +32,12 @@ Activer le plugin depuis la section *admin > website > plugins* d'OJS ou OMP
 
 ## 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`).
 
 
 
@@ -46,11 +51,34 @@ Dans le second cas :
  - 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*.
 

resources/javascript/xml_2_html.js

@@ -25,7 +25,19 @@ function translatePage(newLang){
 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;
@@ -74,18 +86,30 @@ function darkMode(bool) {
     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"
             });
@@ -96,11 +120,10 @@ function bindFootnotes() {
 
         });
 
-        //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"
                 });
@@ -111,7 +134,141 @@ function bindFootnotes() {
             })
         }
 
-    })
+    }
+}
+
+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);
+  }
 }
 
 

resources/styles/xml_2_html.css

@@ -182,6 +182,10 @@ section.front ol, section.front ol {
     padding: calc(var(--btn-tabs-height) + 10px) 20px;
 }
 
+.content-tab .bibliography {
+    border:none;
+}
+
 .focus-tab{
     background-color: black;
     color: white;
@@ -230,43 +234,75 @@ section.body h4 {
     /*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 {
@@ -282,6 +318,7 @@ section.body h3:not(div.boxed-text *){
 section.body h4:not(div.boxed-text *){
     counter-reset: subsubsubsection;
 }
+/*
 section.body h2:not(div.boxed-text *):before{
     counter-increment: section;
     content: counter(section) ". ";
@@ -294,7 +331,30 @@ section.body h4:not(div.boxed-text *):before{
     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 {
@@ -328,14 +388,34 @@ section.body h4:not(div.boxed-text *):before{
     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;
@@ -346,38 +426,49 @@ span.bibr-call{
     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;
@@ -385,10 +476,57 @@ span.bibr-call{
     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;
@@ -467,3 +605,21 @@ div.item.galleys h2 {
 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

tei2html.xsl

+<?xml version="1.0"?>
+
+<xsl:stylesheet version="1.0"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                xmlns:mml="http://www.w3.org/1998/Math/MathML"
+                xmlns:xs="http://www.w3.org/1999/XSL/Transform"
+                xmlns:xsl-="http://www.w3.org/1999/XSL/Transform"
+                xmlns:tei="http://www.tei-c.org/ns/1.0"
+                exclude-result-prefixes="xlink mml">
+
+
+    <!--<xsl:output doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"-->
+                <!--doctype-system="http://www.w3.org/TR/html4/loose.dtd"-->
+                <!--encoding="UTF-8"/>-->
+
+    <xsl:output method="html"
+        encoding="UTF-8" indent="no"/>
+
+    <xsl:strip-space elements="*"/>
+
+    <!-- Space is preserved in all elements allowing #PCDATA -->
+    <!--<xsl:preserve-space-->
+            <!--elements="abbrev abbrev-journal-title access-date addr-line-->
+              <!--mml:annotation mml:ci mml:cn mml:csymbol mml:mi mml:mn-->
+              <!--mml:mo mml:ms mml:mtext"/>-->
+
+
+    <xsl:template match="node() | @*">
+        <xsl:copy>
+            <xsl:apply-templates select="@* | node()"/>
+        </xsl:copy>
+    </xsl:template>
+
+
+    <xsl:template match="/">
+        <!-- start : to delete 
+        <html xml:lang="en-US" lang="en-US">
+            <head>
+                <meta charset="utf-8"/>
+                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+                <title>Presses universitaires de Caen</title>
+                <link rel="stylesheet" type="text/css" href="styles/xml_2_html.css"/>
+                <script src="javascript/xml_2_html.js"/>
+            </head>
+            <body>
+         end : to delete -->
+        <div class="wrap">
+            <div id="mode-color-btns">
+                <button id="sun" onclick="darkMode(true)">
+                    <svg style="" class="icon" focusable="false" viewBox="0 0 32 32">
+                        <path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
+                              fill="#adbac7"></path>
+                        <path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="#adbac7"></path>
+                        <path d="M2 15.005h5v2H2z" fill="#adbac7"></path>
+                        <path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="#adbac7"></path>
+                        <path d="M15 25.005h2v5h-2z" fill="#adbac7"></path>
+                        <path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="#adbac7"></path>
+                        <path d="M25 15.005h5v2h-5z" fill="#adbac7"></path>
+                        <path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="#adbac7"></path>
+                        <path d="M15 2.005h2v5h-2z" fill="#adbac7"></path>
+                    </svg>
+                </button>
+                <button id="moon" onclick="darkMode(false)" style="display:none;">
+                    <svg style="" class="icon" focusable="false" viewBox="0 0 32 32">
+                        <path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138
+                    0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096
+                    0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0
+                    0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="#adbac7">
+                        </path>
+                    </svg>
+                </button>
+            </div>
+
+            <xsl:apply-templates/>
+        </div>
+        <!-- start : to delete 
+        </body>
+        </html>
+         end : to delete -->
+    </xsl:template>
+
+    <xsl:template match="tei:TEI">
+        <div class="article-and-metas">
+            <div class="left-contents">
+                <div class="article-wrap">
+                    <h1>
+                        <xsl:apply-templates select=".//tei:p[@rend='title-main']"/>
+                    </h1>
+                    <xsl:if test=".//tei:p[@rend='title-sub']">
+                        <p class="{@rend}"><xsl:apply-templates select=".//tei:p[@rend='title-sub']"/></p>
+                    </xsl:if>
+                    <xsl:apply-templates select=".//tei:body"/>
+                </div>
+            </div>
+            <div class="right-contents">
+                <xsl:apply-templates select=".//tei:front"/>
+            </div>
+        </div>
+    </xsl:template>
+
+
+    <xsl:template match="tei:body">
+        <section>
+            <xsl:attribute name="class">
+                <xsl:value-of select="local-name(.)"></xsl:value-of>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+            <xsl:apply-templates select="following-sibling::tei:back"/>
+        </section>
+    </xsl:template>
+    
+    <xsl:template match="tei:back">
+        <xsl:apply-templates select="child::tei:div[@type='bibliography']"/>
+    </xsl:template>
+
+    <xsl:template match="tei:front">
+        <section class="front">
+
+            <div class="button-tabs">
+                <xsl:if test="//tei:div[starts-with(@type,'section')]">
+                    <button id="tabtn-toc" class="tab-btn focus-tab" onclick="openTab('toc')">Table des matières</button>
+                </xsl:if>
+                <xsl:if test="//tei:figure[not(child::tei:table)]">
+                    <button id="tabtn-figures" class="tab-btn" onclick="openTab('figures')">Figures</button>
+                </xsl:if>
+                <xsl:if test="//tei:note">
+                    <button id="tabtn-footnotes" class="tab-btn" onclick="openTab('footnotes')">Notes</button>
+                </xsl:if>
+                 <xsl:if test="//tei:div[@type='bibliography']">
+                    <button id="tabtn-refs" class="tab-btn" onclick="openTab('refs')">Références</button>
+                </xsl:if>
+                <xsl:if test="//tei:div[@type='index']">
+                    <button id="tabtn-index" class="tab-btn" onclick="openTab('index')">Index</button>
+                </xsl:if>
+                <button id="tabtn-metas" class="tab-btn" onclick="openTab('metas')">i</button>
+            </div>
+
+            <div id="toc" class="content-tab">
+                <div id="toc-contents">
+
+                    <ol>
+                        <xsl:for-each select="../tei:body//tei:div|../tei:back//tei:div[@type='bibliography']|../tei:back//tei:listBibl">
+                            <xsl:call-template name="sec-toc-item">
+                                <xsl:with-param name="item" select="."/>
+                            </xsl:call-template>
+                        </xsl:for-each>
+                    </ol>
+
+                </div>
+            </div>
+            
+            <div id="figures" class="content-tab" style="display:none">
+                <xsl:for-each select="..//tei:figure[not(child::tei:table)]">
+                    <xsl:apply-templates select="." mode="panel"/>
+                </xsl:for-each>
+            </div>
+            
+            <div id="footnotes" class="content-tab" style="display:none">
+                <ul>
+                    <xsl:for-each select="..//tei:note">
+                        <xsl:apply-templates select="." mode="noteContent"/>
+                    </xsl:for-each>
+                </ul>
+            </div>
+
+            <div id="refs" class="content-tab" style="display:none">
+                <ul>
+                    <xsl:for-each select="../tei:back//tei:listBibl">
+                        <xsl:apply-templates select="."/>
+                    </xsl:for-each>
+                </ul>
+            </div>
+            
+            <div id="index" class="content-tab" style="display:none">
+                <xsl:for-each select="..//tei:div[@type='index']">
+                    <xsl:apply-templates select="."/>
+                </xsl:for-each>    
+            </div>
+
+            <div id="metas" class="content-tab" style="display:none">
+                <div>
+                    <xsl:apply-templates select="preceding::tei:teiHeader"/>
+<!--
+                    <xsl:apply-templates select="./journal-meta"/>
+                    <xsl:apply-templates select="./article-meta"/>
+-->
+                </div>
+            </div>
+
+
+        </section>
+    </xsl:template>
+
+    <!--footnote-->
+    <xsl:template match="tei:note">
+        <span class="xref-call fn-call">
+            <xsl:attribute name="data-target">
+                <xsl:value-of select="@xml:id"/>
+            </xsl:attribute>
+            <xsl:value-of select="@n"/>
+        </span>
+    </xsl:template>
+    
+    <xsl:template match="tei:note" mode="noteContent">
+        <li class="footnote">
+            <xsl:attribute name="id">
+                <xsl:value-of select="@xml:id"/>
+            </xsl:attribute>
+            <span class="label" title="voir"><xsl:value-of select="@n"/></span>
+            <xsl:apply-templates/>
+        </li>
+    </xsl:template>
+    
+    <xsl:template match="tei:note/tei:p">
+        <span>
+            <xsl:apply-templates/>
+        </span>
+    </xsl:template>
+
+    <!-- link -->
+    <xsl:template match="tei:ref[@target]">
+        <xsl:choose>
+            <xsl:when test="@type='index'">
+                <span class="index-link">
+                    <a href="{@target}"><xsl:number/></a>
+                </span>
+             </xsl:when>
+            <xsl:otherwise>
+                <a target="_blank">
+                    <xsl:apply-templates/>
+                </a>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    
+    <xsl:template match="tei:anchor"><span id="{@xml:id}">
+            <xsl:attribute name="class">
+                <xsl:choose>
+                    <xsl:when test="starts-with(@n,'index')">index-anchor</xsl:when>
+                    <xsl:otherwise>anchor</xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <xsl:text>#</xsl:text>
+        </span>
+    </xsl:template>
+
+    <!-- bibr -->
+    <xsl:template match="xref[@ref-type='bibr']">
+        <span class="xref-call bibr-call">
+            <xsl:attribute name="data-target">
+                <xsl:value-of select="@rid"/>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </span>
+    </xsl:template>
+
+    <!--references-->
+    <xsl:template match="ref[mixed-citation]">
+        <div class="ref">
+            <xsl:attribute name="id">
+                <xsl:value-of select="@id"/>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+
+    <xsl:template match="tei:listBibl">
+        <div class="listBibl">
+            <ul>
+                <xsl:apply-templates/>
+            </ul>
+        </div>
+    </xsl:template>
+    
+    <xsl:template match="tei:bibl[ancestor::tei:back]">
+        <li class="bibl">
+            <xsl:apply-templates/>
+        </li>
+    </xsl:template>
+
+
+    <!-- sec toc -->
+    <xsl:template name="sec-toc-item">
+        <xsl:param name="item"/>
+        <li>
+            <xsl:attribute name="class">
+                <xsl:choose>
+                    <xsl:when test="local-name()='listBibl'">
+                        <xsl:text>section2</xsl:text>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:value-of select="@type"/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <a role="button">
+                <xsl:attribute name="href">
+                    <xsl:value-of select="concat('#title-', count(preceding::tei:head))"/>
+                </xsl:attribute>
+                <xsl:apply-templates select="$item/tei:head/node()"/>
+                <xsl:if test="count($item/sec)>=1">
+                    <ol>
+                        <xsl:for-each select="$item/sec">
+                            <xsl:call-template name="sec-toc-item">
+                                <xsl:with-param name="item" select="."/>
+                            </xsl:call-template>
+                        </xsl:for-each>
+                    </ol>
+                </xsl:if>
+            </a>
+        </li>
+
+    </xsl:template>
+
+    <!--generic meta template (block) <=> teiHeader -->
+    <xsl:template match="tei:teiHeader|tei:fileDesc|tei:titleStmt|tei:publicationStmt|tei:persName|tei:surname|tei:ab|tei:bibl|tei:publisher|tei:availability|tei:licence|tei:distributor|tei:date|tei:dim">
+        <xsl:apply-templates/>
+    </xsl:template>
+    
+    <xsl:template match="tei:author|tei:editor| journal-id | journal-title-group | publisher | title-group | article-title
+        | publisher-name | article-categories | subj-group | subject | subtitle | trans-title-group | trans-title
+        | abstract | trans-abstract | pub-date | kwd-group">
+        <div>
+            <xsl:attribute name="class">
+                <xsl:value-of select="concat(local-name(.),' meta-field')"></xsl:value-of>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+    
+    <xsl:template match="tei:forename">
+        <xsl:apply-templates/><xsl:text> </xsl:text>
+    </xsl:template>
+    
+    <xsl:template match="tei:ab[@type='book']">
+        <div class="ab-book-meta-field">
+<!--            <node><xsl:copy-of select="current()"/></node>-->
+            <xsl:if test="descendant::tei:dim[@type='pagination']/text() != ''">
+                <xsl:text>Pagination : </xsl:text>
+                <xsl:value-of select="descendant::tei:dim[@type='pagination']"/>
+            </xsl:if>
+        </div>
+    </xsl:template>
+    
+    <!-- ignored teiHeader elements -->
+    <xsl:template match="tei:sourceDesc|tei:encodingDesc|tei:profileDesc|tei:revisionDesc|tei:ab[@type='digital_download']"/>
+
+
+    <!--generic inline template -->
+    <xsl:template match="kwd | underline">
+        <span>
+            <xsl:attribute name="class">
+                <xsl:value-of select="local-name(.)"></xsl:value-of>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </span>
+    </xsl:template>
+    
+    <xsl:template match="tei:hi[@rend='italic']">
+        <em>
+            <xsl:apply-templates/>
+        </em>
+    </xsl:template>
+
+    <xsl:template match="tei:hi[@rend='bold']">
+        <strong>
+            <xsl:apply-templates/>
+        </strong>
+    </xsl:template>
+    
+    <xsl:template match="tei:hi[@rend='sup']">
+        <sup>
+            <xsl:apply-templates/>
+        </sup>
+    </xsl:template>
+
+    <xsl:template match="styled-content">
+        <span>
+            <xsl:attribute name="class">
+                <xsl:value-of select="@style-type"></xsl:value-of>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </span>
+    </xsl:template>
+
+    <xsl:template match="tei:index">
+<!--        <span class="term"><xsl:apply-templates/></span>-->
+    </xsl:template>
+    
+    <xsl:template match="tei:label[ancestor::tei:div[@type='index']]">
+        <xsl:apply-templates/>
+        <xsl:if test="parent::tei:item[parent::tei:list[@type='level1']]">
+            <span class="toggle-button"> [+]</span>
+        </xsl:if>
+    </xsl:template>
+
+    <xsl:template match="article-id">
+        <div>
+            <xsl:attribute name="class">
+                <xsl:value-of select="@pub-id-type"></xsl:value-of>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+
+    <xsl:template match="contrib-group">
+        <div class="contrib-group meta-field">
+            <xsl:for-each select="./contrib">
+                <div class="contrib">
+                    <span class="surname">
+                        <xsl:value-of select="./name/surname"></xsl:value-of>
+                    </span>
+                    <xsl:text> </xsl:text>
+                    <span class="given-names">
+                        <xsl:value-of select="./name/given-names"></xsl:value-of>
+                    </span>
+                    <xsl:for-each select="./xref">
+                        <span>
+                            <xsl:attribute name="class">
+                                <xsl:value-of select="concat(@ref-type,' xref')"></xsl:value-of>
+                            </xsl:attribute>
+                            <xsl:value-of select="."></xsl:value-of>
+                        </span>
+                    </xsl:for-each>
+                </div>
+            </xsl:for-each>
+        </div>
+    </xsl:template>
+
+
+    <xsl:template match="article-meta">
+        <div>
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+
+    <xsl:template match="journal-title">
+        <h1>
+            <xsl:apply-templates/>
+        </h1>
+    </xsl:template>
+
+    <xsl:template match="tei:div">
+        <section>
+            <xsl:if test="@type">
+                <xsl:attribute name="class">
+                    <xsl:value-of select="@type"/>
+                </xsl:attribute>
+            </xsl:if>
+            <xsl:attribute name="id">
+                <xsl:choose>
+                    <xsl:when test="@xml:id">
+                        <xsl:value-of select="@xml:id"/>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:value-of select="child::tei:head"/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </section>
+    </xsl:template>
+    
+    <xsl:template match="tei:p">
+        <p>
+            <xsl:apply-templates/>
+        </p>
+    </xsl:template>
+    
+    <xsl:template match="tei:lb"><br/></xsl:template>
+
+    <xsl:template match="tei:figure">
+        <figure id="{concat('main-',@xml:id)}">
+            <xsl:attribute name="class">
+                <xsl:choose>
+                    <xsl:when test="child::tei:table">fig-table</xsl:when>
+                    <xsl:when test="child::tei:formula">fig-formula</xsl:when>
+                    <xsl:otherwise>fig-ill</xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <xsl:apply-templates/>
+        </figure>
+    </xsl:template>
+    
+    <xsl:template match="tei:figure" mode="panel">
+        <figure id="{@xml:id}" class="figure">
+            <xsl:apply-templates mode="panel"/>
+        </figure>
+    </xsl:template>
+
+    <xsl:template match="tei:figure//tei:head" mode="panel">
+        <label>
+            <xsl:apply-templates/>
+        </label>
+    </xsl:template>
+    
+    <xsl:template match="tei:figure[not(child::tei:table)]//tei:head">
+        <label>
+            <span class="fig-call" data-target="{parent::tei:figure/@xml:id}"><xsl:apply-templates/></span>
+            <span class="fig-call-window">
+            <a href="#" id="openFigureLink">
+                <xsl:attribute name="onclick">
+                    <xsl:value-of select='concat("openFigureWindow&#40;&apos;",parent::tei:figure/@xml:id,"&apos;&#41;")'/>
+                </xsl:attribute>
+                <xsl:text>     ↗ </xsl:text>
+                </a>
+            </span>
+        </label>
+    </xsl:template>
+
+    <xsl:template match="tei:graphic" mode="panel">
+        <img>
+            <xsl:attribute name="src">
+                <xsl:value-of select="@url"/>
+            </xsl:attribute>
+        </img>
+    </xsl:template>
+    
+    <xsl:template match="tei:p[@rend='caption' or @rend='credits']">
+        <p class="{@rend}">
+            <xsl:apply-templates/>
+        </p>
+    </xsl:template>
+    
+    <!-- table -->
+    <xsl:template match="tei:figure[child::tei:table]//tei:head"/>
+    
+    <xsl:template match="tei:figure[child::tei:table]//tei:head" mode="titleUp">
+        <xsl:apply-templates/>
+    </xsl:template>
+        
+    <xsl:template match="tei:table">
+        <xsl:if test="parent::tei:figure/tei:head">
+            <label><!--span class="table-call"><xsl:text> ↓ </xsl:text></span--><xs:apply-templates select="parent::tei:figure/tei:head" mode="titleUp"/><!--span class="table-call"><xsl:text> ↓ </xsl:text></span--></label>
+            <span class="table-call-window"><a href="#" id="openFigureLink">
+                <xsl:attribute name="onclick"><xsl:value-of select='concat("openFigureWindow&#40;&apos;main-",parent::tei:figure/@xml:id,"&apos;&#41;")'/></xsl:attribute>
+<!--                ="openFigureWindow('main-figure1')">-->
+                <xsl:text> ↗ </xsl:text></a></span>
+        </xsl:if>
+        <table>
+            <xsl:choose>
+                <xsl:when test="label or title">                                
+                    <caption>
+                        <xsl:value-of select="label"/>
+                        <xsl:text> </xsl:text>
+                        <xsl:apply-templates select=".//tei:head"/>
+                    </caption>
+                    <xsl:apply-templates/>
+                </xsl:when>
+                <xsl:otherwise>
+                    <xsl:apply-templates/>
+                </xsl:otherwise>
+            </xsl:choose>
+        </table>
+    </xsl:template>
+
+    <xsl:template match="tei:row">
+        <tr><xsl:apply-templates/></tr>
+    </xsl:template>
+    
+    <xsl:template match="tei:cell">
+        <td>
+            <xsl:if test="@cols"><xsl:attribute name="colspan" select="@cols"/></xsl:if>
+            <xsl:if test="@rows"><xsl:attribute name="rowspan" select="@rows"/></xsl:if>
+            <xsl:apply-templates/>
+        </td>
+    </xsl:template>
+
+    <!-- head -->
+    <xsl:template match="tei:head[not(parent::tei:figure)]">
+        <xsl:variable name="ancestors">
+            <xs:value-of select="count(ancestor::tei:div) + count(ancestor::tei:listBibl)"/>
+            <!--  + count(ancestor::caption) -->
+        </xsl:variable>
+
+        <xsl:variable name="n">
+            <xs:value-of select="count(preceding::tei:head)"/>
+        </xsl:variable>
+
+        <xsl:choose>
+            <xsl:when test="parent::tei:div[@type='index'] and text()='Index'"/>
+            <xsl:otherwise>
+                <xsl:element name="h{$ancestors + 1}">
+                    <xsl:attribute name="id"><xsl-:value-of select="concat('title-',$n)"/></xsl:attribute>
+                    <xsl:apply-templates/>
+                </xsl:element>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+
+    <!-- boxed-text -->
+    <xsl:template match="tei:floatingText">
+        <div class="boxed-text">
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+
+    <!-- list -->
+    <xsl:template match="tei:list[@type='ordered']">
+        <ol>
+            <xsl:apply-templates/>
+        </ol>
+    </xsl:template>
+
+    <xsl:template match="tei:list[@type='unordered']">
+        <ul>
+            <xsl:apply-templates/>
+        </ul>
+    </xsl:template>
+    
+    <!-- index -->
+    <xsl:template match="tei:list[contains(@type,'level')]">
+        <ul class="{concat('index-',@type)}">
+             <xsl:apply-templates/>
+        </ul>
+    </xsl:template>
+
+    <xsl:template match="tei:item">
+        <li><xsl:apply-templates/></li>
+    </xsl:template>
+    
+    <!-- citations -->
+    <xsl:template match="tei:cit">
+        <blockquote><xsl:apply-templates/></blockquote>
+    </xsl:template>
+    
+    <xsl:template match="tei:quote">
+        <p><xsl:apply-templates/></p>
+    </xsl:template>
+    
+    <!-- mathml -->
+    <xsl:template match="disp-formula[@content-type='math/mathml']">
+        <div class="disp-formula">
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+
+
+    <xsl:template match="mml:*">
+        <xsl:element name="{local-name(.)}">
+            <xsl:apply-templates select="@*|*|text()"/>
+        </xsl:element>
+    </xsl:template>
+
+</xsl:stylesheet>