From 13552b7d7f4543f85e105cbaf22269fd7f5209ba Mon Sep 17 00:00:00 2001 From: Edith Cannet <edith.cannet@unicaen.fr> Date: Wed, 20 Dec 2023 08:06:43 +0100 Subject: [PATCH] =?UTF-8?q?m=C3=A0j=20des=20resources=20javascript=20et=20?= =?UTF-8?q?styles=20li=C3=A9es=20=C3=A0=20la=20structure=20de=20la=20page?= =?UTF-8?q?=20HTML=20via=20import=20TEI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/javascript/xml_2_html.js | 188 ++++++++++++++++++++++++--- resources/styles/xml_2_html.css | 202 +++++++++++++++++++++++++---- 2 files changed, 350 insertions(+), 40 deletions(-) diff --git a/resources/javascript/xml_2_html.js b/resources/javascript/xml_2_html.js index e870f99..c8e55c3 100644 --- a/resources/javascript/xml_2_html.js +++ b/resources/javascript/xml_2_html.js @@ -11,8 +11,20 @@ window.addEventListener('DOMContentLoaded', (event) => { // if(document.querySelector("div.item.galleys")) // document.querySelector(".left-contents").prepend(document.querySelector("div.item.galleys")) - //footnotes binding - 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", () => { @@ -38,9 +50,6 @@ window.addEventListener('DOMContentLoaded', (event) => { - - - function openTab(tabName) { let i; let tabs = document.querySelectorAll(".content-tab"); @@ -68,18 +77,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" }); @@ -90,11 +111,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" }); @@ -105,5 +125,139 @@ 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); + } } diff --git a/resources/styles/xml_2_html.css b/resources/styles/xml_2_html.css index be83df5..ab87a3a 100644 --- a/resources/styles/xml_2_html.css +++ b/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{ +/************/ +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{ +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{ +table caption { font-size: 1.2rem; font-style: italic; } -table{ - border-collapse: collapse; - margin: 25px 0px; + +table { + 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 -- GitLab