diff --git a/index.html b/index.html index d216bc8..2a5d3e4 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,9 @@ - + - Vérifier si le local
est ouvert → → → + Vérifier
si c'est
ouvert
→ → →
diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..17503f0 --- /dev/null +++ b/js/events.js @@ -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); + }) + }) + } +} diff --git a/js/main.js b/js/main.js index 27b2d87..594bba7 100644 --- a/js/main.js +++ b/js/main.js @@ -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(); diff --git a/js/status.js b/js/status.js new file mode 100644 index 0000000..2416c4f --- /dev/null +++ b/js/status.js @@ -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); +} diff --git a/readMe.MD b/readMe.MD index 5361ab8..ac37942 100644 --- a/readMe.MD +++ b/readMe.MD @@ -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 diff --git a/status/index.fermé.html b/status/index.fermé.html index 35d621b..0952296 100644 --- a/status/index.fermé.html +++ b/status/index.fermé.html @@ -4,7 +4,7 @@ - + Le LOL est Fermé ... diff --git a/status/index.ouvert.html b/status/index.ouvert.html index b495dd8..c58dd41 100644 --- a/status/index.ouvert.html +++ b/status/index.ouvert.html @@ -4,7 +4,9 @@ - + + + Le LOL est Ouvert diff --git a/style/common.css b/style/common.css index 6b97a81..c005d83 100644 --- a/style/common.css +++ b/style/common.css @@ -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; diff --git a/style/main.css b/style/main.css index dbc1418..e7fc767 100644 --- a/style/main.css +++ b/style/main.css @@ -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; } diff --git a/style/responsive.css b/style/responsive.css index 9133729..a00c3a9 100644 --- a/style/responsive.css +++ b/style/responsive.css @@ -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{