edit: passage contenu artistes et autres dans DATA pour modif facile + gestion ouverture image (gestion multi icon x4 à faire + panneau liens)

v1-com-officielle/src/indieComponents/ArtistPannel.vue

@@ -4,6 +4,7 @@
   import FileIcon from '../assets/icons/file.svg'
   import ReloadIcon from '../assets/icons/reload.svg'
   import BackIcon from '../assets/icons/back.svg'
+  import { loadPeopleData } from '@/data/peopleData.js'
 </script>
 
 <template>
@@ -16,9 +17,9 @@
       />
       <div class="windowTitle">
         <p>
-          <b class="windowTitleLower">À PROPOS DE</b>
+          <b class="windowTitleLower">À PROPOS DE NOUS</b>
           <br>
-          Nous, Nos Artistes, etc.
+          {{fileName}}
         </p>
         <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
         <div class="dblBtnContainer">
@@ -141,6 +142,8 @@
     padding-left: 2%;
     padding-right: 3.33%;
     overflow-y: scroll;
+
+    white-space: pre-line;
   }
 
   .itemStyle{
@@ -221,56 +224,7 @@
 
 <script>
   import Moveable from 'vue3-moveable';
-  const linksData = [
-    {
-      type: "folder",
-      isSelected: false,
-      caption: "Folder001",
-      description: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-      children: [{
-        type: "folder",
-        isSelected: false,
-        caption: "test-open",
-        description: "Nothing for now x333",
-        children: []
-      },
-      {
-        type: "file",
-        isSelected: false,
-        caption: "READ-ME002.txt",
-        description: "Nothing for now x333",
-        src: ""
-      }]
-    },
-    {
-      type: "folder",
-      isSelected: false,
-      caption: "Folder002",
-      description: "Nothing for now x333",
-      children: []
-    },
-    {
-      type: "folder",
-      isSelected: false,
-      caption: "Folder333",
-      description: "Nothing for now x333",
-      children: []
-    },
-    {
-      type: "folder",
-      isSelected: false,
-      caption: "test",
-      description: "Nothing for now x333",
-      children: []
-    },
-    {
-      type: "file",
-      isSelected: false,
-      caption: "READ-ME.txt",
-      description: "Nothing for now x333",
-      src: ""
-    }
-  ]
+  import { dataStorage } from '../dataExchange.js'
 
   export default {
     name : 'ArtistPannel',
@@ -280,6 +234,7 @@
     data(){
       return{
         target: null,
+        linksData: [],
         lastClickedItem: null,
         dblClickTimer: null,
         displayedItems: null,
@@ -290,39 +245,40 @@
         isNotRoot : false
       }
     },
-    emits: ['close','focus'],
+    emits: ['close','focus','openImg'],
     methods:{
       onDrag({ target, transform }) {
         target.style.transform = transform;
       },
       dataFirstLoad(){
-        this.displayedItems = [...linksData];
+        this.displayedItems = [...this.linksData];
         console.log(this.displayedItems);
         this.isNotRoot = false;
         this.checkEmptyFolder();
         this.displayedItems.forEach(it => {
           it.isSelected = false;
         });
-        this.displayedDescription = "Click an item to get more info !";
-        this.fileName = "ExternalLinks.333";
+        this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
+        this.fileName = "./";
       },
       openFile(e){
         this.$emit('focus');
         if(e.type === 'folder'){
-          this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName});
+          this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
           this.displayedItems = [...e.children];
           this.checkEmptyFolder();
           this.isNotRoot = true;
           this.displayedDescription = e.description
-          if (this.bodyWidth>this.bodyHeight){
-            console.log('container dimensions:', this.bodyWidth, this.bodyHeight);
-            this.fileName =".../"+ e.caption;
-          }else{
-            this.fileName += "/" + e.caption;
-          }
-        } else {
-
+          this.fileName += e.caption + '/';
         }
+        if(e.type === 'image'){
+            this.$emit('openImg');
+            dataStorage.selectedImg = {
+              src: e.src,
+              caption: e.caption
+            }
+        }
+
       },
       selectFile(e){
         this.$emit('focus');
@@ -360,6 +316,7 @@
         let rootDepth = this.rootFolderContent.length-1;
         this.displayedItems = this.rootFolderContent[rootDepth].content;
         this.fileName = this.rootFolderContent[rootDepth].directory;
+        this.displayedDescription = this.rootFolderContent[rootDepth].description;
         this.rootFolderContent.splice(rootDepth,1);
         rootDepth = this.rootFolderContent.length
         if (rootDepth === 0){
@@ -372,7 +329,8 @@
         this.$emit('close');
       }
     },
-    mounted(){
+    async mounted(){
+      this.linksData = await loadPeopleData();
       this.target = this.$refs.artistPannel;
       this.dataFirstLoad();
       console.log("Artist pannel is loaded!");