tibo
/
template
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

202511260751

evo4532
Thibaud 1 місяць тому
джерело
ddaccfed78
коміт
e5b744ca74
5 змінених файлів з 236 додано та 432 видалено
Розділений перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. +0
    -204
      frontend/protos/back/index.html
  2. +0
    -112
      frontend/protos/back/zones.css
  3. +0
    -56
      frontend/protos/back/zones.js
  4. +198
    -8
      frontend/protos/index.html
  5. +38
    -52
      frontend/protos/zones.js

+ 0
- 204
frontend/protos/back/index.html Переглянути файл

@ -1,204 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>template ZONES</title>
<meta name="description" content="PROTO">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Texte.woff2" crossorigin />
<link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Titre.woff2" crossorigin />
<link rel="stylesheet" type="text/css" href="zones.css">
</head>
<body>
<section id="header">HEADER</section>
<section id="navbar">NAVBAR</section>
<section id="synthese">SYNTHESE</section>
<section id="principale">PRINCIPALE</section>
<section id="footer">FOOTER</section>
</body>
<template id="zone">
<div id="div_before_zone"></div>
<div id="div_zone">zone</div>
<div id="div_after_zone"></div>
</template>
<script src="zones.js"></script>
<script>
function addClassToElement(id,className){
const element=document.querySelector(id);
if (element) element.classList.add(className);
}
function removeClassToElement(id,className){
const element=document.querySelector(id);
if (element) element.classList.remove(className);
}
function initZoneElements(zone) {
const element=document.querySelector('#div_'+zone);
if (element) {
element.innerHTML=zone;
addClassToElement('#div_before_'+zone,'div_before_section');
addClassToElement('#div_'+zone,'div_section');
addClassToElement('#div_after_'+zone,'div_after_section');
}
}
function initZone(zone) {
const sectionZone = document.querySelector('#'+zone);
if (sectionZone) {
const template = document.querySelector('#zone');
if (template) {
const contenu = document.importNode(template.content, true);
if (contenu) {
sectionZone.innerHTML='';
contenu.childNodes.forEach((element) => {if (element.id) element.id=element.id.replace('zone',zone)});
sectionZone.appendChild(contenu);
initZoneElements(zone);
}
}
}
}
initZone('header');
initZone('navbar');
initZone('synthese');
initZone('principale');
initZone('footer');
addClassToElement('#div_header','header');
addClassToElement('#div_navbar','navbar');
addClassToElement('#div_synthese','synthese');
addClassToElement('#div_principale','principale');
addClassToElement('#div_footer','footer');
const section_navbar=document.querySelector('#div_navbar');
const section_synthese=document.querySelector('#div_synthese');
const after_section_synthese=document.querySelector('#div_after_synthese');
function scrollToElement(elementSelector) {
const element = document.querySelector(elementSelector);
if (element) {
element.scrollIntoView();
logMsg('HtmlElement','scrollTo '+elementSelector);
}
}
function etatSections(etat) {
switch (etat) {
case 1 :
scrollToElement('#div_before_header');
section_synthese.style.display = "block";
removeClassToElement('#div_navbar','navbar_fixed');
removeClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
case 2 :
scrollToElement('#div_before_navbar');
section_synthese.style.display = "block";
addClassToElement('#div_navbar','navbar_fixed');
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
case 3 :
scrollToElement('#div_before_navbar');
section_synthese.style.display = "none";
addClassToElement('#div_navbar','navbar_fixed');
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
}
}
after_section_synthese.addEventListener("click", function() {
if (section_synthese.style.display === "block") {
etatSections(3);
} else {
etatSections(2);
}
});
function beforeHeaderVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (!_visible) {
etatSections(2);
}
}
function afterHeaderVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (_visible) {
etatSections(1);
}
}
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
addIntersectionObserverEntry("div_after_header", afterHeaderVisibility);
function beforeNavbarVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (!_visible) {
etatSections(3);
}
}
function afterNavbarVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (_visible) {
etatSections(2);
}
}
addIntersectionObserverEntry("div_before_navbar", beforeNavbarVisibility);
//addIntersectionObserverEntry("div_after_navbar", afterNavbarVisibility);
let yprev = window.pageYOffset;
const scrollHandler = () => {
const y = window.pageYOffset;
const ymax = document.documentElement.scrollHeight - window.innerHeight;
if (y > yprev) {
if (section_header.style.display !== "none") {
section_header.style.display="none";
} else {
if (section_synthese.style.display !== "none") {
section_synthese.style.display="none";
}
}
} else {
if (y < yprev) {
if (section_synthese.style.display !== "block") {
section_synthese.style.display="block";
} else {
if (section_header.style.display !== "block") {
section_header.style.display="block";
}
}
}
}
yprev = Math.min(Math.max(y, 0), ymax);
};
const throttleCallback = (callback, timeout) => {
let wait = false;
return () => {
if (wait) return;
callback.call();
wait = true;
setTimeout(() => { wait = false; }, timeout);
};
};
// window.addEventListener('scroll', throttleCallback(scrollHandler, 250));
</script>
</html>

+ 0
- 112
frontend/protos/back/zones.css Переглянути файл

@ -1,112 +0,0 @@
:root {
--dark-mode: 1;
--r-sombre: 0;
--g-sombre: 0;
--b-sombre: 0;
--r-clair: 245;
--g-clair: 245;
--b-clair: 240;
--rgb-sombre: var(--r-sombre), var(--g-sombre), var(--b-sombre);
--rgb-clair: var(--r-clair), var(--g-clair), var(--b-clair);
--couleur-sombre: rgb(var(--rgb-sombre));
--couleur-clair: rgb(var(--rgb-clair));
--couleur-texte: black;
--couleur-fond: var(--couleur-clair);
--marker-before-height: 5px;
--marker-after-height: 12px;
--section-min-height: 80px;
--section-header-min-height: 120px;
--section-synthese-min-height: 120px;
--section-principale-min-height: 800px;
}
@font-face {
font-family: 'Fonte-Texte';
font-display: fallback;
/* Penser à bien héberger la font sur le même domaine que mon site */
src: url(../fonts/Fonte-Texte.woff2) format('woff2');
/* Réutiliser ici exactement la même liste unicode que ci-dessus */
unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}
@font-face {
font-family: 'Fonte-Titre';
font-display: fallback;
/* Penser à bien héberger la font sur le même domaine que mon site */
src: url(../fonts/Fonte-Titre.woff2) format('woff2');
/* Réutiliser ici exactement la même liste unicode que ci-dessus */
unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}
html {
font-family: Fonte-Texte, monospace;
width: 95%;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
background: var(--couleur-fond);
color: var(--couleur-texte);
}
body {
padding: 0;
margin: 0;
min-height:1000px;
}
.div_before_section {
color: var(--couleur-texte);
background-color: black;
height: var(--marker-before-height);
}
.div_section {
min-height: var(--section-min-height);
}
.div_after_section {
color: var(--couleur-texte);
background-color: red;
height: var(--marker-after-height);
}
.header {
min-height: var(--section-header-min-height);
background-color: aqua;
}
.navbar {
background-color: yellow;
}
.navbar_fixed {
position: fixed;
top: 0;
width: 70%;
}
.div_before_synthese_when_navbar_fixed {
height: var(--section-min-height);
}
.synthese {
background-color: pink;
min-height: var(--section-synthese-min-height);
}
.principale {
min-height: var(--section-principale-min-height);
}
.footer {
background-color: greenyellow;
}

+ 0
- 56
frontend/protos/back/zones.js Переглянути файл

@ -1,56 +0,0 @@
function logMsg(section, message){
console.log(section, ' : ', message)
}
function intersectionObserverLog(message) {
logMsg('intersectionObserver', message);
}
function intersectionObserverLogVisibility(_id, _visible) {
if (_visible) {
intersectionObserverLog(_id + ' is Visible');
} else {
intersectionObserverLog(_id + ' is NOT Visible');
}
}
const intersectionObserverRegistry = new Object();
function setIntersectionObserverRegistry(parametre, valeur)
{
intersectionObserverRegistry[parametre] = valeur;
}
function getIntersectionObserverRegistry(parametre)
{
return intersectionObserverRegistry[parametre];
}
function entryVisiblity(_id, _visible) {
let entry=getIntersectionObserverRegistry(_id);
if (entry) return entry(_visible);
return intersectionObserverLogVisibility(_id, _visible)
}
// Create a function that will handle any intersection between some elements and the viewport.
const handleIntersectionObserverEntries = function (entries) {
entries.forEach(entry => {
intersectionObserverLog(entry.target.id+' ratio '+entry.intersectionRatio);
if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
});
}
const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries,{
// Dès qu'il y a ne serait-ce qu'un pixel au dessus de la ligne rouge
// => donc threshold = 1
threshold: 0,
// On met la hauteur en pixel entre la fin de l'image et la ligne rouge
// C'est négatif parce qu'on entre à l'intérieur de l'image. Si le nombre
// était positif, alors la ligne rouge se retrouverait sous l'image
rootMargin: '-1px 0px'
});
function addIntersectionObserverEntry(_id, _func)
{
let item = document.querySelector('#'+_id);
if ((item) && (intersectionObserver)) {
setIntersectionObserverRegistry(_id, _func);
intersectionObserver.observe(item);
logMsg('intersectionObserver', 'Add entry for '+ _id);
}
}

+ 198
- 8
frontend/protos/index.html Переглянути файл

@ -8,22 +8,212 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Texte.woff2" crossorigin />
<link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Titre.woff2" crossorigin />
<link rel="stylesheet" type="text/css" href="zones.css">
</head>
<body>
<header></header>
<nav></nav>
<section id="synthese"></section>
<section id="header">HEADER</section>
<section id="principale"></section>
<section id="navbar">NAVBAR</section>
<section id="synthese">SYNTHESE</section>
<section id="principale">PRINCIPALE</section>
<footer></footer>
<section id="footer">FOOTER</section>
</body>
<template id="zone">
<div id="div_before_zone"></div>
<div id="div_zone">zone</div>
<div id="div_after_zone"></div>
</template>
<script src="zones.js"></script>
<script>
logMsgAddActiveSection('intersectionObserver');
logMsgAddActiveSection('HtmlElement');
</script>
<script>
const scrollThrottleCallback = (callback, timeout) => {
let wait = false;
return () => {
if (wait) return;
callback.call();
wait = true;
setTimeout(() => { wait = false; }, timeout);
};
};
function addClassToElement(id,className){
const element=document.querySelector(id);
if (element) element.classList.add(className);
}
function removeClassToElement(id,className){
const element=document.querySelector(id);
if (element) element.classList.remove(className);
}
function initZoneElements(zone) {
const element=document.querySelector('#div_'+zone);
if (element) {
element.innerHTML=zone;
addClassToElement('#div_before_'+zone,'div_before_section');
addClassToElement('#div_'+zone,'div_section');
addClassToElement('#div_after_'+zone,'div_after_section');
}
}
function initZone(zone) {
const sectionZone = document.querySelector('#'+zone);
if (sectionZone) {
const template = document.querySelector('#zone');
if (template) {
const contenu = document.importNode(template.content, true);
if (contenu) {
sectionZone.innerHTML='';
contenu.childNodes.forEach((element) => {if (element.id) element.id=element.id.replace('zone',zone)});
sectionZone.appendChild(contenu);
initZoneElements(zone);
}
}
}
}
initZone('header');
initZone('navbar');
initZone('synthese');
initZone('principale');
initZone('footer');
addClassToElement('#div_header','header');
addClassToElement('#div_navbar','navbar');
addClassToElement('#div_synthese','synthese');
addClassToElement('#div_principale','principale');
addClassToElement('#div_footer','footer');
const section_navbar=document.querySelector('#div_navbar');
const section_synthese=document.querySelector('#div_synthese');
const after_section_synthese=document.querySelector('#div_after_synthese');
function scrollToElement(elementSelector) {
const element = document.querySelector(elementSelector);
if (element) {
element.scrollIntoView();
logMsg('HtmlElement','scrollTo '+elementSelector);
}
}
function etatSections(etat) {
switch (etat) {
case 1 :
scrollToElement('#div_before_header');
section_header.style.display = "block";
section_synthese.style.display = "block";
removeClassToElement('#div_navbar','navbar_fixed');
removeClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
case 2 :
scrollToElement('#div_before_navbar');
section_synthese.style.display = "block";
addClassToElement('#div_navbar','navbar_fixed');
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
case 3 :
scrollToElement('#div_before_navbar');
section_synthese.style.display = "none";
addClassToElement('#div_navbar','navbar_fixed');
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
}
}
let currentEtat=1;
function changeEtatUp() {
if (++currentEtat > 3) currentEtat = 3;
etatSections(currentEtat);
}
function changeEtatDown(){
if (--currentEtat > 3) currentEtat = 1;
etatSections(currentEtat);
}
after_section_synthese.addEventListener("click", function() {
if (section_synthese.style.display === "block") {
section_synthese.style.display = "none";
} else {
section_synthese.style.display = "block";
}
});
function beforeHeaderVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (!_visible) {
changeEtatUp();
}
}
function afterHeaderVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (_visible) {
changeEtatDown();
}
}
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
addIntersectionObserverEntry("div_after_header", afterHeaderVisibility);
function beforeNavbarVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (!_visible) {
changeEtatUp();
}
}
function afterNavbarVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (_visible) {
changeEtatDown();
}
}
addIntersectionObserverEntry("div_before_navbar", beforeNavbarVisibility);
//addIntersectionObserverEntry("div_after_navbar", afterNavbarVisibility);
let yprev = window.pageYOffset;
const scrollHandler = () => {
const y = window.pageYOffset;
const ymax = document.documentElement.scrollHeight - window.innerHeight;
if (y > yprev) {
if (section_header.style.display !== "none") {
section_header.style.display="none";
} else {
if (section_synthese.style.display !== "none") {
section_synthese.style.display="none";
}
}
} else {
if (y < yprev) {
if (section_synthese.style.display !== "block") {
section_synthese.style.display="block";
} else {
if (section_header.style.display !== "block") {
section_header.style.display="block";
}
}
}
}
yprev = Math.min(Math.max(y, 0), ymax);
};
// window.addEventListener('scroll', throttleCallback(scrollHandler, 250));
</script>
</html>

+ 38
- 52
frontend/protos/zones.js Переглянути файл

@ -1,3 +1,29 @@
const logMsgActivesSections = new Set();
function logMsgAddActiveSection(sectionName) {
logMsgActivesSections.add(sectionName);
}
function logMsgRemoveActiveSection(sectionName) {
logMsgActivesSections.delete(sectionName);
}
function logMsg(section, message){
if (logMsgActivesSections.has(section))
console.log(section, ' : ', message)
}
function intersectionObserverLog(message) {
logMsg('intersectionObserver', message);
}
function intersectionObserverLogVisibility(_id, _visible) {
if (_visible) {
intersectionObserverLog(_id + ' is Visible');
} else {
intersectionObserverLog(_id + ' is NOT Visible');
}
}
const intersectionObserverRegistry = new Object();
function setIntersectionObserverRegistry(parametre, valeur)
{
@ -10,16 +36,25 @@ function getIntersectionObserverRegistry(parametre)
function entryVisiblity(_id, _visible) {
let entry=getIntersectionObserverRegistry(_id);
if (entry) return entry(_visible);
return consoleLog (_id, _visible)
return intersectionObserverLogVisibility (_id, _visible)
}
// Create a function that will handle any intersection between some elements and the viewport.
const handleIntersectionObserverEntries = function (entries) {
entries.forEach(entry => {
intersectionObserverLog(entry.target.id+' ratio '+entry.intersectionRatio);
if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
});
}
const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries);
const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries,{
// Dès qu'il y a ne serait-ce qu'un pixel au dessus de la ligne rouge
// => donc threshold = 1
threshold: 0,
// On met la hauteur en pixel entre la fin de l'image et la ligne rouge
// C'est négatif parce qu'on entre à l'intérieur de l'image. Si le nombre
// était positif, alors la ligne rouge se retrouverait sous l'image
rootMargin: '-1px 0px'
});
function addIntersectionObserverEntry(_id, _func)
{
@ -27,55 +62,6 @@ function addIntersectionObserverEntry(_id, _func)
if ((item) && (intersectionObserver)) {
setIntersectionObserverRegistry(_id, _func);
intersectionObserver.observe(item);
logMsg('intersectionObserver', 'Add entry for '+ _id);
}
}
function consoleLog(_id, _visible) {
if (_visible) {
console.log(_id + ' is Visible');
} else {
console.log(_id + ' is NOT Visible');
}
}
function scrollToElement(elementSelector) {
let element = document.querySelector(elementSelector);
if (element) element.scrollIntoView({ behavior: 'smooth' });
}
function beforeHeaderVisibility(_visible) {
console.log('TRIGGER beforeHeaderVisibility');
if (_visible) {
console.log('HEADER is Visible');
} else {
console.log('HEADER is NOT Visible');
scrollToElement('#before_nav');
}
}
function afterHeaderVisibility(_visible) {
console.log('TRIGGER afterHeaderVisibility');
if (_visible) {
scrollToElement('#before_header');
} else {
console.log('HEADER is NOT Visible');
}
}
function beforeNavVisibility(_visible) {
console.log('TRIGGER beforeNavVisibility');
let synthese=document.querySelector('#synthese');
if (synthese) {
if (_visible) {
synthese.style.display="block";
} else {
synthese.style.display="none";
}
}
}
/*
addIntersectionObserverEntry("before_header", beforeHeaderVisibility);
addIntersectionObserverEntry("after_header", afterHeaderVisibility);
addIntersectionObserverEntry("before_nav", beforeNavVisibility);
*/

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти