edit: la fenetre évènement bouge sur pc ^^ + ajustement responsive

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;

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;
+})

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);