diff --git a/affiches/test/index.html b/affiches/test/index.html index f3d7cf0..5bd48aa 100644 --- a/affiches/test/index.html +++ b/affiches/test/index.html @@ -5,15 +5,17 @@ TEST EVENT - -
+

test affiche !

-
+ diff --git a/affiches/test333/index.html b/affiches/test333/index.html index 08ecf35..9f13c5b 100644 --- a/affiches/test333/index.html +++ b/affiches/test333/index.html @@ -8,10 +8,10 @@ TEST EVENT 333 - -
+

test affiche 333 !

-
+ diff --git a/index.html b/index.html index e8c9450..f13382c 100644 --- a/index.html +++ b/index.html @@ -152,7 +152,16 @@

Test évènement 333

13/12

- + + + + + +
+
+

Test évènement

+

13/12/26

+ diff --git a/js/events.js b/js/events.js index f476493..8a66a09 100644 --- a/js/events.js +++ b/js/events.js @@ -1,5 +1,27 @@ export async function loadEvents(){ - let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle'); + let eventList = document.querySelectorAll('#eventSection > article'); + //console.log("event list: ", eventList); + + for (let event of eventList){ + let title = event.querySelector('h4'); + let date = event.querySelector('p.date'); + let posterLink = event.querySelector('a.iconBtnStyle').href; + let posterHTML = await getPoster(posterLink); + + let poster = posterHTML.querySelector('body > article'); + + let posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])') + + console.log('entry data :', title, date, poster, posterStyle); + + let selectedEntry = createEntry(title, date, poster, posterStyle) + + console.log('created new details :', selectedEntry); + + event.replaceChildren(selectedEntry); + } + + /* let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle'); //console.log("source buttons : ", btnList) @@ -83,5 +105,36 @@ export async function loadEvents(){ displayContainer.replaceChildren(content); }) }) - } + } */ +} + +async function getPoster(link){ + let res = await fetch(link); + 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 + } + +} + +function createEntry(title, date, html, style){ + let newEntry = document.createElement('details'); + let newSummary = document.createElement('summary'); + newSummary.append(title, date); + + newEntry.append(newSummary); + + newEntry.append(html); + + newEntry.name = "eventList" + + for(let el of style){ + document.head.append(el); + } + + return newEntry } diff --git a/js/main.js b/js/main.js index 10b2a25..1aad736 100644 --- a/js/main.js +++ b/js/main.js @@ -17,6 +17,7 @@ loadStatus() // ======================================== floating event window +/* let target = document.querySelector('#posterWindow'); let startTarget = target.querySelector('.posterTitle'); @@ -79,3 +80,4 @@ document.addEventListener('touchend', () => { console.log('STOP !') clicked = false; }) +*/ \ No newline at end of file diff --git a/readMe.MD b/readMe.MD index 74e2109..f5a7eeb 100644 --- a/readMe.MD +++ b/readMe.MD @@ -18,7 +18,9 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont > problème import css directement dans main.css -* [ ] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche +* [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche + +* [ ] tester section event avec des vraies affiches !!! * [x] performance arrière plan avec un shader > OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg diff --git a/style/main.css b/style/main.css index 69f08fd..ecae89d 100644 --- a/style/main.css +++ b/style/main.css @@ -353,6 +353,7 @@ main{ align-items: flex-start; gap: 0; padding-bottom: 16.1px; + padding-right: 16.1px; h3{ position: sticky; @@ -361,124 +362,59 @@ main{ .solidBox{ width: 100%; - height: 77px; + height: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; - padding-left: 16.1px; - padding-right: 33px; + padding: 16.1px; + + } - summary { - padding-left: 33px; - padding-top: 7.77px; - height:50px; - position: relative; - z-index: 0; - list-style-type: none; + .solidBox:has(details[open]){ + color: var(--back-color); + background-color: var(--main-color); + border-color: var(--back-color); + border-radius: 16.1px; + padding-bottom: 20px; + margin-bottom: 7.77px; + margin-top: 7.77px; + details{ + cursor: default; + } + } - .title{ - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; + .iconBtnStyle{ + width: 33px; + height: 33px; + } - width: 77%; - box-sizing: border-box; - height: 16.1px; - padding-top: 3.33px; - padding-left: 33px; - margin-bottom: 13.12px; + details{ + width: 100%; + cursor: copy; + summary{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 13.12px; + box-sizing: border-box; + list-style-type: none; + padding-right: 13.12px; + } - font-family: 'velvelyne'; - font-weight: bold; - font-size: 16.1px; - - p{ - margin: 0; - } - - h4{ - margin: 0; - font-family: 'velvelyne'; - font-weight: bold; - font-size: 16.1px; - } - } - - .resume{ - font-family: 'velvelyne'; - font-weight: bold; - font-size: 13.12px; - text-transform: none; - padding-left: 33px; - width: 90%; - height: 33px; - - border-radius: 16.1px; - border-style: solid; - border-width: thin; - border-color: var(--main-color); - box-sizing: border-box; - } - - } - - .description{ - margin-left: 44px; - margin-bottom: 33px; - height: auto; - width: 95%; - overflow-y: scroll; - background-color: var(--back-color); - border-radius: 16.1px; - border-style: solid; - border-width: thin; - border-color: var(--main-color); - - margin-top: 44px; - padding: 13.12px; - padding-right: 33px; - - box-sizing: border-box; - - - font-size: 13.12px; - font-family: 'velvelyne'; - font-weight: bold; - text-transform: none; - } - } - - details:hover{ - - } - - details[open]{ - height: auto; - border-color: var(--back-color); - color: var(--back-color); - background-color: var(--main-color); - - summary .resume{ - border-color: var(--back-color); - } - - ::marker{ - color: var(--main-color); - } - - .description{ - color: var(--main-color); - } - } + article{ + width: 100%; + cursor: default; + } + } } - } } } + #posterWindow{ visibility: collapse; top: 5vh;