bigEdit: ajout des composants, contenu et interactivité pour la partie extra (partie fixe, plutôt informative)

2026-03-05 04:41:59 +01:00
parent 64d43d7942
commit 153fedf413
9 changed files with 651 additions and 26 deletions
@@ -0,0 +1,143 @@
+<template>
+  <div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
+    <Moveable
+        className="moveable"
+        :target="$refs.aboutPannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <div class="titleContent">
+        <p>./About.333</p>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
+      </div>
+    </div>
+    <p id="about_text">
+      si vous êtes là c'est que vous voulez en savoir plus,
+      <br>
+      alors voici quelques infos sur mes pratiques :
+      <br><br>
+      je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller
+      <br>
+      PENDANT DES SIÈCLES!
+      <br><br>
+      je travaille une esthétique punk, brutaliste
+      <br>
+      et maximaliste, et utilise une matière première
+      <br>
+      de seconde main, voire recyclée, trouvée dans la rue,
+      <br>
+      les poubelles, etc.
+      <br><br>
+      je produit des accessoires à partir de rien (vraiment !)
+      <br>
+      et je custom des vêtements, découper, recoudre, rajouter, enlever, teinter, décolorer, démonter pour ré-assembler, tout est permis ^^
+      <br><br>
+      je travaille UNIQUEMENT sur commande ! x333
+      <br><br>
+      tout est vendu à un prix libre, convenu à l'avance,
+      <br>
+      en fonction des moyens de chacun.x.s
+      <br><br>
+      le troc d'objet, de service ou de conaissances
+      <br>
+      est également bienvenu, et peut remplacer
+      <br>
+      COMPLÈTEMENT un paiement monnayé
+      <br><br>
+      l'upcycling est un mythe vendu par des prétentieu.x.s
+    </p>
+  </div>
+</template>
+
+<style scoped>
+  /*=====================AboutPannel CSS*/
+  #aboutPannel{
+    background-color: var(--dark-color);
+    position:absolute;
+    cursor:grab;
+
+  }
+  #about_text{
+    position:relative;
+    padding: 10px;
+    font-family: 'velvelyne';
+    font-size:16px;
+    color: var(--light-color);
+    font-weight: lighter;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    pointer-events: all;
+    cursor: ns-resize;
+  }
+
+  /*=====================format pc*/
+  @media(min-width:800px){
+    #aboutPannel{
+      width: 333px;
+      height: 60%;
+    }
+  }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+    #aboutPannel{
+      position:fixed;
+      width: 333px;
+      height: 80%;
+    }
+
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'AboutPannel',
+    components:{
+      Moveable
+    },
+    emits: ["focus","close"],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      observeContainer(){
+        const container = document.getElementById("contentContainer");
+
+        if(!container){
+          console.error("container not found");
+          return
+        }
+
+        const observer = new ResizeObserver(entries=>{
+          const rect = entries[0].contentRect;
+
+          this.bodyWidth = rect.width;
+          this.bodyHeight = rect.height;
+
+          this.coordX = Math.random()*(this.bodyWidth-333);
+          this.coordY = Math.random()*(this.bodyHeight-333);
+        });
+
+        observer.observe(container);
+      }
+  },
+  data(){
+    return {
+      bodyHeight:0,
+      bodyWidth:0,
+      coordX:0,
+      coordY:0,
+    }
+  },
+  mounted(){
+    this.$nextTick(() => {
+        this.observeContainer()
+    });
+    console.log('coord:', this.coordX, this.coordY);
+    console.log("Contact pannel is loaded!");
+  }
+};
+</script>