edit: un peu de rangement, ajout bouton plus évènement, ok en version dégradée, problème itération (ne garde pas en mémoire les poster des évènements, null au 2e tour) et style qui ne change pas dans js

2026-07-27 22:00:13 +02:00
parent ad50dd36cb
commit 6d95e9d80c
52 changed files with 307 additions and 20 deletions
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <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" />
+    <title>TEST EVENT</title>
+    <style>
+      /*=========================== INFROMATIONS AFFICHES :
+
+      la première balise style 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
+
+      ====================================================*/
+
+      body{
+        width: 100%;
+        height: 100%;
+        background-color: black;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+      }
+    </style>
+
+    <style media="screen">
+      #testAffiche{
+        width: 333px;
+        height:  333px;
+        background-color: green;
+      }
+
+      #testAffiche p{
+        color: black;
+        font-size: 33px;
+      }
+    </style>
+</head>
+<body>
+    <main id="testAffiche">
+        <p>test affiche !</p>
+    </main>
+</body>
+</html>
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <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="../style/animation.css">
+    <link rel="stylesheet" href="/style/typo.css">
+    <title>TEST EVENT 333</title>
+    <style>
+      /*=========================== INFROMATIONS AFFICHES :
+
+      la première balise style 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
+
+      ====================================================*/
+
+      body{
+        width: 100%;
+        height: 100%;
+        background-color: black;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+      }
+    </style>
+
+    <style media="screen">
+      #testAffiche333{
+        width: 333px;
+        height:  333px;
+        background-color: red;
+      }
+
+      #testAffiche333 p{
+        color: black;
+        font-size: 33px;
+      }
+    </style>
+</head>
+<body>
+    <main id="testAffiche333">
+        <p>test affiche 333 !</p>
+    </main>
+</body>
+</html>
@@ -3,19 +3,20 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/style/typo.css">
+    <link rel="stylesheet" href="style/typo.css">
    <link rel="stylesheet" href="style/default.css">
    <link rel="stylesheet" href="style/common.css">
    <link rel="stylesheet" href="style/animation.css">
    <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">
    	<link rel="stylesheet" href="affiches/algorave.css">
+    -->
    <title>L(. O.)L &mdash; Laboratoire Ouvert Lyonnais</title>
  <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
 </head>
@@ -156,11 +157,13 @@
        <section id="eventSection" class="transparentBox">
  			       <h3>Événements <small>à venir</small></h3>
               <ul id="eventContent" class="borderBox">
-                 <li>
-                   <button type="button" name="more" class="iconBtnStyle">
+                 <li class="eventEntry">
+                   <button type="button" name="plus" class="iconBtnStyle">
+                     <a href="./affiches/test/" 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>
                   </button>
                   <details closed name="event">
                     <summary>
@@ -175,6 +178,27 @@
                     </p>
                   </details>
                 </li>
+                 <li class="eventEntry">
+                   <button type="button" name="plus" class="iconBtnStyle">
+                     <a href="./affiches/test333/" 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>
+                   </button>
+                   <details closed name="event">
+                     <summary>
+                       <div class="title">
+                         <h4>Test évènement 333</h4>
+                         <p class="date">13/12</p>
+                       </div>
+                       <p class="resume">Résumé de l'évènement </p>
+                     </summary>
+                     <p class="description">
+                       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                     </p>
+                   </details>
+                 </li>
               </ul>
                    <!--
          			<article class="event affiche-perm affiche" property="event" typeof="Event">
@@ -467,5 +491,20 @@
      <video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
      <video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
    </main>
+
+    <section class="floatingWindow" id="posterWindow">
+      <div class="posterTitle">
+        <h4>test</h4>
+        <button type="button" name="close" class="iconBtnStyle" id="posterCloseBtn">
+          <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>
+        </button>
+      </div>
+      <article id="posterContainer"></article>
+    </section>
+    <!-- SCRIPT PRINCIPAL -->
+        <script type="module" src="./js/main.js"></script>
+
 </body>
 </html>
@@ -0,0 +1,71 @@
+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 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'));
+    })
+  }
+}
@@ -1,10 +1,9 @@
 Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL :

-<VEGA>
 > à 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

-</VEGA>
+> 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
@@ -107,3 +107,59 @@

  box-sizing: border-box;
 }
+
+.floatingWindow{
+  position: fixed;
+  z-index: 3333;
+
+  width: 90vw;
+  height: auto;
+
+  top: 5vh;
+  left: 5vw;
+
+  background-color: var(--back-color);
+  border-color: var(--main-color);
+  border-radius: 16.1px;
+  border-style: solid;
+  border-width: thin;
+
+  overflow: hidden;
+  box-sizing: content-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  .posterTitle{
+    position: relative;
+    top: 0;
+    width: 100%;
+    height: 44px;
+
+    background-color: var(--main-color);
+    color: var(--back-color);
+
+    text-transform: none;
+    font-size: 15px;
+    font-family: 'velvelyne';
+    font-weight: bold;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: 33px;
+    padding-right: 16.1px;
+
+    box-sizing: border-box;
+
+    .iconBtnStyle{
+      width: 33px;
+      height: 33px;
+    }
+
+  }
+}
@@ -21,7 +21,7 @@ a button{
  cursor: inherit;
 }

-p,h1,h2,h3{
+p,h1,h2,h3,h4{
  cursor: inherit;
  pointer-events: none !important;
  padding: 0;
@@ -362,8 +362,16 @@ main{
                          position: relative;
                          z-index: 33;

+                          a{
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: space-around;
+                          }
+
                          .iconBtnStyle{
-                            visibility: visible;
                            position: absolute;
                            z-index: 34;
                            width: 33px;
@@ -374,6 +382,7 @@ main{

                          .icon{
                            transform: rotate(45deg);
+                            pointer-events: none;
                          }
                        }

@@ -503,5 +512,17 @@ main{
                }
              }
      }
-
+}
+
+#posterWindow{
+  visibility: collapse;
+}
+
+#posterContainer{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
 }
@@ -1,33 +1,33 @@
@font-face {
  font-family: 'karrik';
-  src: url('./assets/typo/Karrik-Italic.woff2') format('woff2');
+  src: url('typo/Karrik-Italic.woff2') format('woff2');
  font-style: italic;
 }

@font-face {
  font-family: 'karrik';
-  src: url('./assets/typo/Karrik-Regular.woff2') format('woff2');
+  src: url('typo/Karrik-Regular.woff2') format('woff2');
  font-style: normal;
 }

@font-face {
  font-family: 'velvelyne';
-  src: url('./assets/typo/Velvelyne-Book.ttf') format('truetype');
+  src: url('typo/Velvelyne-Book.ttf') format('truetype');
  font-weight: normal;
 }

@font-face {
  font-family: 'avara';
-  src: url('./assets/typo/Avara-Black.woff2') format('woff2');
+  src: url('typo/Avara-Black.woff2') format('woff2');
 }

@font-face {
  font-family: 'pressStart';
-  src: url('./assets/typo/PressStart2P-Regular.ttf');
+  src: url('typo/PressStart2P-Regular.ttf');
 }

@font-face {
  font-family: 'velvelyne';
-  src:url('./assets/typo/Velvelyne-Bold.ttf') format('truetype');
+  src:url('typo/Velvelyne-Bold.ttf') format('truetype');
  font-weight: bold;
 }