diff --git a/index.html b/index.html index 2a5d3e4..44452a1 100644 --- a/index.html +++ b/index.html @@ -118,21 +118,13 @@

- Le LOL peut ouvrir en dehors des horaires habituels.
- En fonction de nos envies et disponibilités.
  + Le LOL peut ouvrir en dehors des horaires habituels. + En fonction de nos envies et disponibilités.

-   Un capteur sur la porte d'entrée indique
  si le local est ouvert: + Un capteur sur la porte d'entrée indique si le local est ouvert:

- Vérifier
si c'est
ouvert
→ → →
diff --git a/js/events.js b/js/events.js index 17503f0..f476493 100644 --- a/js/events.js +++ b/js/events.js @@ -9,7 +9,12 @@ export async function loadEvents(){ let closeBtn = document.querySelector('#posterCloseBtn'); - closeBtn.addEventListener('click', () => { + closeBtn.addEventListener('mousedown', () => { + displayWindow.style.visibility = 'collapse'; + displayContainer.replaceChildren(); + }) + + closeBtn.addEventListener('touchstart', () => { displayWindow.style.visibility = 'collapse'; displayContainer.replaceChildren(); }) @@ -71,7 +76,7 @@ export async function loadEvents(){ document.head.append(style); } btn.addEventListener( 'click', () => { - console.log("selection :", content) + //console.log("selection :", content) displayWindow.style.visibility = 'visible'; let targetTitle = displayWindow.querySelector('h4'); targetTitle.innerText = title; diff --git a/js/main.js b/js/main.js index 594bba7..ca42fe1 100644 --- a/js/main.js +++ b/js/main.js @@ -3,3 +3,64 @@ import { loadStatus } from './status.js' loadEvents(); loadStatus(); + +let target = document.querySelector('#posterWindow'); + +let startTarget = target.querySelector('.posterTitle'); + +console.log('selected target :', startTarget); + +let startX, startY; +let clicked = false; + +startTarget.addEventListener('mousedown', (event) => { + startX = event.pageX; + startY = event.pageY; + clicked = true; + console.log('clicking...') +}) + +startTarget.addEventListener('touchstart', (event) => { + startX = event.pageX; + startY = event.pageY; + clicked = true; + console.log('touching...') +}) + +document.addEventListener('mousemove', (event) => { + if(clicked){ + console.log('moving...') + let currentX = event.pageX; + let currentY = event.pageY; + let moveX = target.offsetLeft + currentX - startX; + target.style.left = moveX + 'px'; + let moveY = target.offsetTop + currentY - startY; + target.style.top = moveY + 'px'; + startX = currentX; + startY = currentY; + } +}); + +document.addEventListener('touchmove', (event) => { + if(clicked){ + console.log('moving...') + let currentX = event.pageX; + let currentY = event.pageY; + let moveX = target.offsetLeft + currentX - startX; + target.style.left = moveX + 'px'; + let moveY = target.offsetTop + currentY - startY; + target.style.top = moveY + 'px'; + startX = currentX; + startY = currentY; + } +}); + +document.addEventListener('mouseup', () => { + console.log('STOP !') + clicked = false; +}) + +document.addEventListener('touchend', () => { + console.log('STOP !') + clicked = false; +}) diff --git a/js/status.js b/js/status.js index 2416c4f..e96c3e7 100644 --- a/js/status.js +++ b/js/status.js @@ -13,7 +13,7 @@ export async function loadStatus(){ 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); + //console.log("selected style : ", style); document.head.append(icon); document.head.append(style); diff --git a/readMe.MD b/readMe.MD index ac37942..d532ff6 100644 --- a/readMe.MD +++ b/readMe.MD @@ -2,7 +2,7 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont >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 +> à 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" voir dernière entrée (***) > j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ? @@ -10,6 +10,6 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont > 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) +>(***) 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/style/common.css b/style/common.css index c005d83..a4df6cc 100644 --- a/style/common.css +++ b/style/common.css @@ -117,9 +117,6 @@ width: auto; height: auto; - top: 5vh; - left: 5vw; - background-color: var(--back-color); border-color: var(--main-color); border-radius: 16.1px; @@ -138,7 +135,7 @@ position: relative; top: 0; width: 100%; - height: 44px; + height: 77px; background-color: var(--main-color); color: var(--back-color); @@ -157,6 +154,11 @@ padding-right: 16.1px; box-sizing: border-box; + cursor: move; + + h4{ + pointer-events: none; + } .iconBtnStyle{ width: 33px; diff --git a/style/default.css b/style/default.css index 169e4aa..1e31795 100644 --- a/style/default.css +++ b/style/default.css @@ -26,6 +26,7 @@ p,h1,h2,h3,h4{ pointer-events: none !important; padding: 0; margin: 0; + user-select: none; } ul,ol { diff --git a/style/main.css b/style/main.css index e7fc767..162c8a0 100644 --- a/style/main.css +++ b/style/main.css @@ -123,7 +123,7 @@ main{ overflow: hidden; #homeContent{ - height: 80vh; + height: 66vh; width: 100%; position:relative; z-index: 0; @@ -286,15 +286,20 @@ main{ #statusDesc{ width: 77%; padding: 7.77px; - padding-right: 13.12px; - font-size: 12px; - line-height: 1em; + padding-right: 16.1px; + font-size: 16.1px; + line-height: 1.1em; + + small{ + font-size: 13.12px; + line-height: 0.333em; + } } #lolStatus{ position: relative; z-index: 33; - width: 33%; + width: 40%; height: 50px; display: flex; flex-direction: row; @@ -520,6 +525,8 @@ main{ #posterWindow{ visibility: collapse; + top: 5vh; + left: 5vw; } #posterContainer{