vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: tout prêt niveau front sans contenu ??? (à verifier) + orga js

Browse Source
This commit is contained in:
vgaNAR6ta
2026-07-27 23:41:50 +02:00
parent 6d95e9d80c
commit 27f4c25b10
10 changed files with 170 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+3 -2
View File
@@ -10,8 +10,9 @@
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/responsive.css">
<!-- TEST CCS OUVERTURE -->
<!-- TEST CCS OUVERTURE
<link rel="stylesheet" href="status/openStyle.css">
-->
<!--
<link rel="stylesheet" href="affiches/perm.css">
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
@@ -132,7 +133,7 @@
Fermé ...
</h3>
-->
<a href="./status/index.html" class="textBtnStyle">Vérifier si le local <br> est ouvert &rarr; &rarr; &rarr;</a>
<a href="./status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section>
<section id="extraContent">
<section id="aboutSection" class="solidBox">
js/events.js
+82
View File
@@ -0,0 +1,82 @@
export async function loadEvents(){
let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
//console.log("source buttons : ", btnList)
let displayWindow = document.querySelector('#posterWindow');
let displayContainer = document.querySelector('#posterContainer');
let closeBtn = document.querySelector('#posterCloseBtn');
closeBtn.addEventListener('click', () => {
displayWindow.style.visibility = 'collapse';
displayContainer.replaceChildren();
})
async function getPoster(src){
let res = await fetch(src);
if (res.ok){
let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html");
return html
} else{
console.log('error 333');
return
}
}
let eventList = [];
if( btnList.length > 0 ){
for (let btn of btnList ){
let link = btn.children[0];
link.style.pointerEvents = 'none';
//console.log(link.href);
let posterPage = await getPoster(link.href);
//console.log('selected poster: ', posterPage)
let titleData = posterPage.querySelector('title');
//console.log(titleData);
let styleList = Array.from(posterPage.querySelectorAll('head > style'));
//console.log(styleList)
styleList.splice(0,1);
//console.log(styleList)
eventList.push(
{
content: posterPage.querySelector('main'),
title: titleData.innerText,
stylesheet: styleList,
sourceBtn: btn
}
);
}
}
//console.log("event list : ", eventList);
if (eventList.length > 0){
eventList.forEach( (obj) =>{
let btn = obj.sourceBtn;
let content = obj.content;
let title = obj.title;
for (let style of obj.stylesheet){
document.head.append(style);
}
btn.addEventListener( 'click', () => {
console.log("selection :", content)
displayWindow.style.visibility = 'visible';
let targetTitle = displayWindow.querySelector('h4');
targetTitle.innerText = title;
displayContainer.replaceChildren(content);
})
})
}
}
js/main.js
+4 -70
View File
@@ -1,71 +1,5 @@
let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
import { loadEvents } from './events.js'
import { loadStatus } from './status.js'
console.log("source buttons : ", btnList)
let displayWindow = document.querySelector('#posterWindow');
let displayContainer = document.querySelector('#posterContainer');
let closeBtn = document.querySelector('#posterCloseBtn');
closeBtn.addEventListener('click', () => {
displayWindow.style.visibility = 'collapse';
displayContainer.replaceChildren();
})
async function getPoster(src){
let res = await fetch(src);
if (res.ok){
let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html");
return html
} else{
console.log('error 333');
return
}
}
let eventList = [];
if( btnList.length > 0 ){
for (let btn of btnList ){
let link = btn.children[0];
link.style.pointerEvents = 'none';
console.log(link.href);
let posterPage = await getPoster(link.href);
//console.log('selected poster: ', posterPage)
let styleList = Array.from(posterPage.querySelectorAll('head > style'));
//console.log(styleList)
styleList.splice(0,1);
//console.log(styleList)
eventList.push(
{
content: posterPage,
stylesheet: styleList,
sourceBtn: btn
}
);
}
}
console.log(eventList);
if (eventList.length > 0){
for (let obj of eventList){
let btn = obj.sourceBtn;
let content = obj.content;
for (let style of obj.stylesheet){
document.head.append(style);
}
obj.sourceBtn.addEventListener( 'click', () => {
displayWindow.style.visibility = 'visible';
displayContainer.replaceChildren(obj.content.querySelector('main'));
})
}
}
loadEvents();
loadStatus();
js/status.js
+22
View File
@@ -0,0 +1,22 @@
export async function loadStatus(){
let res = await fetch('/status/index.ouvert.html');
let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html");
let target = document.querySelector('#statuSection');
let hiddenBtn = target.querySelector('a');
hiddenBtn.style.visibility = 'collapse';
let status = html.querySelector('#lolStatus');
let icon = html.querySelector('link[rel="icon"]');
let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
console.log("selected style : ", style);
document.head.append(icon);
document.head.append(style);
target.appendChild(status);
}
readMe.MD
+8 -2
View File
@@ -1,9 +1,15 @@
Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL :
> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" je comprends pas comment mettre ça en place mais du coup j'ai fait 2 pages pour le statut tous seul, je sait juste pas quoi mettre dans le lien
>si possible écrire tous les noms de variables en Pascal Case (pas sur du nom maisUnTrucCommeCa), je trouve ça plus lisible
> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" je comprends pas comment mettre ça en place mais du coup j'ai fait 2 pages pour le statut tous seul, je sait juste pas quoi mettre dans le lien
> j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ?
> je sais tjrs pas comment désactiver la video pour les personnes qui veulent pas d'effets visuels
> ajout du bouton plus pour les évènements, ok en version degradée, gros problème d'itération et style qui ne change pas dans la partie avec js
> ajout du bouton plus pour les évènements => création d'event sur des pages séparées, importées avec js (remplacé par lien en version dégradé )
> mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale
changer le fetch dans status.js
status/index.fermé.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon.svg" />
<link rel="stylesheet" href="./closedStyle.css">
<link rel="stylesheet" href="/status/closedStyle.css">
<link rel="stylesheet" href="../style/animation.css">
<link rel="stylesheet" href="/style/typo.css">
<title>Le LOL est Fermé ...</title>
status/index.ouvert.html
+3 -1
View File
@@ -4,7 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon_open.svg" />
<link rel="stylesheet" href="./openStyle.css">
<!-- STYLE A IMPORTER EN 1ER -->
<link rel="stylesheet" href="/status/openStyle.css">
<link rel="stylesheet" href="../style/animation.css">
<title>Le LOL est Ouvert</title>
</head>
style/common.css
+3 -1
View File
@@ -1,5 +1,7 @@
.textBtnStyle{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
@@ -112,7 +114,7 @@
position: fixed;
z-index: 3333;
width: 90vw;
width: auto;
height: auto;
top: 5vh;
style/main.css
+12 -8
View File
@@ -273,27 +273,32 @@ main{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
padding: 0;
height: 20vh;
.textBtnStyle{
width: 33vw;
width: 66px;
font-size: 11px;
margin-right: 7.77px;
}
#statusDesc{
width: 90%;
width: 77%;
padding: 7.77px;
padding-right: 13.12px;
font-size: 13.12px;
font-size: 12px;
line-height: 1em;
}
h3{
width: 77%;
#lolStatus{
position: relative;
z-index: 33;
width: 33%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
font-family: 'karrik';
text-transform: uppercase;
@@ -301,7 +306,6 @@ main{
line-height: 1em;
padding-left: 16.1px;
padding-top: 13.12px;
box-sizing: border-box;
border-radius: 22px 0 0 22px;
@@ -376,7 +380,7 @@ main{
z-index: 34;
width: 33px;
height: 33px;
right: 7.77px;
right: 1%;
top: 33px;
}
style/responsive.css
+32 -18
View File
@@ -80,24 +80,36 @@
padding-top: 33px;
}
}
#statuSection{
.textBtnStyle{
font-size: 16.1px;
}
}
#extraContent{
#aboutSection{
}
#statuSection{
.textBtnStyle{
font-size: 16.1px;
width: 117px;
margin-right: 33px;
}
#eventSection{
#statusDesc{
font-size: 16.1px;
}
}
}
#extraContent{
#aboutSection{
}
#eventSection{
#eventContent{
li{
.iconBtnStyle{
right: 3.33%;
}
}
}
}
}
}
}
@@ -171,9 +183,11 @@
padding-left: 77px;
font-size: 20px;
}
h3{
#lolStatus{
font-size: 33px;
padding-top: 7.77px;
height: 77px;
width: 50%;
border-radius: 33px 0 0 33px;
margin-left: -88px;
}
@@ -200,7 +214,7 @@
width: 44px;
height: 44px;
border-radius: 22px;
right: 13.12px;
right: 1.61%;
}
.icon{