màj des resources javascript et styles liées à la structure de la page HTML via import TEI (13552b7d) · Commits · FNSO / FAIREST / xml2html-pkp-plugin

resources/javascript/xml_2_html.js

+171 −17

Changes for resources/javascript/xml_2_html.js: 171 added lines, 17 removed lines.
Original line number	Diff line number	Diff line
		@@ -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

+175 −19

Changes for resources/styles/xml_2_html.css: 175 added lines, 19 removed lines.
Original line number	Diff line number	Diff line
		@@ -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