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,95 @@
+<template>
+  <div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
+    <Moveable
+        className="moveable"
+        :target="$refs.linkPannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <div class="titleContent">
+        <p>./ExternalLinks.333</p>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+  /*=====================LinkPannel CSS*/
+  #linkPannel{
+    background-color: var(--dark-color);
+    position:absolute;
+    cursor:grab;
+  }
+
+  /*=====================format pc*/
+  @media(min-width:800px){
+    #linkPannel{
+      width:666px;
+      height:666px;
+    }
+  }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+    #linkPannel{
+      width:333px;
+      height:333px;
+    }
+
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'LinkPannel',
+    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>