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

section évènement v2 article avec lien vers affiche qui devient details avec import de l'affiche avec js

Browse Source
This commit is contained in:
vgaNAR6ta
2026-08-03 02:39:52 +02:00
parent e6c2fbf4d3
commit 906c3a3ae2
7 changed files with 123 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
affiches/test/index.html
+8 -6
View File
@@ -5,15 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon.svg" />
<title>TEST EVENT</title>
<style>
<style data-import="no-import">
/*=========================== INFROMATIONS AFFICHES :
la première balise style est filtrée
ici on place les eléments qui entre en conflit avec la page principale
le style 'no-import' est filtrée
ici on place les eléments qui entre en conflit avec
la page principale
les suivant sont inclus
IMPORTANT : il faut nommer le main avec un id unique pour éviter les conflit avec les reste du site
IMPORTANT : il faut nommer le <article> avec un id unique
pour éviter les conflit avec les reste du site
====================================================*/
@@ -42,8 +44,8 @@
</style>
</head>
<body>
<main id="testAffiche">
<article id="testAffiche">
<p>test affiche !</p>
</main>
</article>
</body>
</html>
affiches/test333/index.html
+4 -4
View File
@@ -8,10 +8,10 @@
<link rel="stylesheet" href="../style/animation.css">
<link rel="stylesheet" href="/style/typo.css">
<title>TEST EVENT 333</title>
<style>
<style data-import="no-import">
/*=========================== INFROMATIONS AFFICHES :
la première balise style est filtrée
la balise style data-import="no-import" est filtrée
ici on place les eléments qui entre en conflit avec la page principale
les suivant sont inclus
@@ -45,8 +45,8 @@
</style>
</head>
<body>
<main id="testAffiche333">
<article id="testAffiche333">
<p>test affiche 333 !</p>
</main>
</article>
</body>
</html>
index.html
+10 -1
View File
@@ -152,7 +152,16 @@
<article class="solidBox">
<h4>Test évènement 333</h4>
<p class="date">13/12</p>
<a href="./affiches/test333/" class="iconBtnStyle" target="_blank">
<a href="/affiches/test333/" class="iconBtnStyle" target="_blank">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</a>
</article>
<article class="solidBox">
<h4>Test évènement</h4>
<p class="date">13/12/26</p>
<a href="/affiches/test/" class="iconBtnStyle" target="_blank">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
js/events.js
+55 -2
View File
@@ -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
}
js/main.js
+2
View File
@@ -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;
})
*/
readMe.MD
+3 -1
View File
@@ -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
style/main.css
+41 -105
View File
@@ -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;