fix: amélioration gestion footer (hide, setContent, resize)

Author: eyssette

js/processMarkdown/yaml.js

@@ -2,7 +2,7 @@ import { config } from "../config.js";
 import { load as loadYAML } from "../externals/js-yaml.js";
 import { loadScript, loadCSS } from "../utils/urls.js";
 import { deepMerge } from "../utils/objects.js";
-import { footerElement, hideFooter } from "../utils/ui.js";
+import { hideFooter, setContentOfFooter } from "../utils/ui.js";
 import { decodeApiKey } from "../LLM/decodeApiKey.js";
 
 export let yaml = {
@@ -152,9 +152,10 @@ export function processYAML(markdownContent) {
 				}
 			}
 			if (yaml.footer === false) {
-				hideFooter(yaml.userInput);
+				const isUserInputVisible = yaml.userInput;
+				hideFooter(isUserInputVisible);
 			} else if (typeof yaml.footer == "string") {
-				footerElement.innerHTML = yaml.footer;
+				setContentOfFooter(yaml.footer);
 			}
 			if (yaml.theme) {
 				const cssFile = yaml.theme.endsWith(".css")

js/utils/ui.js

@@ -29,17 +29,34 @@ export function scrollWindow(option) {
 	}
 }
 
-export const footerElement = document.getElementById("footer");
+// Pour redimensionner le footer sur des petits écrans
+function resizeFooterForSmallScreenToSpecificHeight(CSSheight) {
+	const style = document.createElement("style");
+	style.id = "styleControlsIfNoFooter";
+	style.textContent = `
+		@media screen and (max-width: 500px) {
+			#controls {
+				height: ${CSSheight}!important;
+			}
+		}
+	`;
+	document.head.appendChild(style);
+}
 
 // Pour cacher le footer
-export function hideFooter(userInput) {
+export function hideFooter(isUserInputVisible) {
 	const controlsElement = document.getElementById("controls");
+	const footerElement = document.getElementById("footer");
+
 	footerElement.style.display = "none";
-	controlsElement.style.height = "70px!important";
-	const styleControls = userInput
-		? "@media screen and (max-width: 500px) { #controls {height:110px!important}}"
-		: "@media screen and (max-width: 500px) { #controls {height:70px!important}}";
-	const styleSheet = document.createElement("style");
-	styleSheet.innerText = styleControls;
-	document.head.appendChild(styleSheet);
+	controlsElement.style.height = "70px";
+
+	const smallScreenFooterHeight = isUserInputVisible ? "110px" : "50px";
+	resizeFooterForSmallScreenToSpecificHeight(smallScreenFooterHeight);
+}
+
+// Pour définir le contenu du footer
+export function setContentOfFooter(html) {
+	const footerElement = document.getElementById("footer");
+	footerElement.innerHTML = html;
 }