Skip to content
Snippets Groups Projects
Commit 13552b7d authored by Edith Cannet's avatar Edith Cannet
Browse files

màj des resources javascript et styles liées à la structure de la page HTML via import TEI

parent 6e7fe525
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
resources/javascript/xml_2_html.js
+ 171
− 17
View file @ 13552b7d
......@@ -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);
}
}
resources/styles/xml_2_html.css
+ 179
− 23
View file @ 13552b7d
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment