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