fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/AppCompNoteCredit.vue

@@ -1,164 +1,292 @@
-<!--
-  ----------------- MUST ADD ERROR GESTION ------------------
-  ----------------- MUST ADD css ------------------
-
- @ Description:
- @ What it does:
--->
-<template>
-  <div class="noteCredit" :class="{ openW: showWidget }">
-    <app-base-button id="close-toc" @click="close()">X</app-base-button>
-
-    <div>
-      <p>{{ $t('text.title_credit') }}</p>
-
-      <ul v-if="credits != null">
-        <li
-          v-for="(credit, index) of credits"
-          :key="`note_${index}`"
-          :ref="`#nt_${index + 1}`"
-          v-html="credit"
-        ></li>
-      </ul>
-      <p v-else>{{ $t('text.no_credit') }}</p>
-    </div>
-    <div>
-      <p>{{ $t('text.title_note') }}</p>
-      <ul v-if="notes != null">
-        <li
-          v-for="(note, index) of notes"
-          :id="`nt_${index + 1}`"
-          :key="`note_${index}`"
-          :dataRef="`rnt_${index + 1}`"
-          class="widget-note"
-        >
-          <button
-            :noteRef="`rnt_${index + 1}`"
-            class="btn backToNoteRef"
-            @click="focusNote($event)"
-          >
-            <span v-html="note"></span>
-          </button>
-        </li>
-      </ul>
-
-      <p v-else>{{ $t('text.no_note') }}</p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      notes: null,
-      credits: null,
-      current: false,
-      jsons: null,
-      showWidget: false
-    }
-  },
-  computed: {
-    error() {
-      // ---------------- MUST BE REDO BECAUSE INFO CHANGE ----------------------
-      let er = false
-      // let info = this.jsons
-      // if (info) {
-      //   if (Object.keys(info.note).length === 0) {
-      //     er = true
-      //     console.warn(
-      //       '%c WARNING!>>> AppCompNoteFin: Your note file is empty.',
-      //       'background: orange; color: white; display: block; margin:5px;'
-      //     )
-      //   }
-      // }
-      return er
-    }
-  },
-  async created() {},
-  mounted() {
-    this.$bus.$on('credit-note', (data) => {
-      this.notes = data.note
-      this.credits = data.credit
-    })
-
-    // close or open widget depending which btn was click
-    this.$bus.$on('toggle-widget', (data) => {
-      if (data == 'noteCredit') this.showWidget = !this.showWidget
-      else this.showWidget = false
-    })
-
-    //close widget
-    this.$bus.$on('close-widget', (data) => {
-      this.showWidget = false
-    })
-
-    // show widget when note click and higligth note
-    this.$bus.$on('note-to-show', (el) => {
-      this.showWidget = true
-
-      if (el) {
-        let ref = el.getAttribute('dataRef')
-
-        this.removefocus()
-
-        let elAtt = document.getElementsByClassName('widget-note')
-        var arr = Array.from(elAtt)
-
-        for (let element of arr) {
-          if (ref == element.getAttribute('id')) {
-            element.setAttribute('dataCurrent', true)
-          }
-        }
-      }
-    })
-  },
-  methods: {
-    //close widget
-    close() {
-      this.showWidget = !this.showWidget
-    },
-    removefocus() {
-      let elAtt = document.querySelectorAll("[dataCurrent='true']")
-
-      var arr = Array.from(elAtt)
-
-      for (let element of arr) {
-        element.setAttribute('dataCurrent', false)
-      }
-    },
-    focusNote(el) {
-      let e = document.getElementsByClassName('callEndNote')
-      let t = el.target.getAttribute('noteref')
-      for (let element of e) {
-        element.setAttribute('dataCurrentnote', false)
-        if (element.id === t) {
-          element.setAttribute('dataCurrentnote', true)
-        }
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-.noteCredit {
-  position: absolute;
-  top: 0;
-  left: 200%;
-  display: none;
-  opacity: 0;
-
-  &.openW {
-    display: block;
-    opacity: 1;
-  }
-
-  span {
-    pointer-events: none;
-  }
-
-  .overlay-w {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
+<!--
+  ----------------- MUST ADD ERROR GESTION ------------------
+  ----------------- MUST ADD css ------------------
+
+ @ Description:
+ @ What it does:
+-->
+<template>
+  <div id="noteCredit" :class="{ openW: showWidget }">
+    <app-base-button
+      id="close-nc"
+      :title="$t('button.closePopUp')"
+      @click="close()"
+    >
+      <svg>
+        <use href="#close-square-icon" />
+      </svg>
+    </app-base-button>
+    <div class="box-nc">
+      <div v-if="getNote != null" class="ctn-note">
+        <p class="t-note">{{ $t('text.title_note') }}</p>
+        <ol id="notes-list">
+          <li
+            v-for="(note, index) of getNote"
+            :id="`nt_${index + 1}`"
+            :key="`note_${index}`"
+            :dataRef="`rnt_${index + 1}`"
+            :class="note.hasError ? 'widget-note note-error' : 'widget-note'"
+          >
+            <button
+              :noteRef="`rnt_${index + 1}`"
+              class="btn backToNoteRef"
+              :title="$t('text.title_link_bas')"
+              @click="focusNote($event)"
+            >
+              <span class="note-txt" v-html="note.text"></span>
+            </button>
+          </li>
+        </ol>
+      </div>
+      <div v-if="getCredit != null" class="ctn-credit">
+        <p class="t-crdt">{{ $t('text.title_credit') }}</p>
+
+        <ul id="credits-list">
+          <li
+            v-for="(credit, index) of getCredit"
+            :key="`note_${index}`"
+            :ref="`#nt_${index + 1}`"
+            v-html="credit"
+          ></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+export default {
+  data() {
+    return {
+      notes: null,
+      credits: null,
+      current: false,
+      showWidget: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['getDataNoteCredit']),
+    getNote() {
+      return this.error(this.getDataNoteCredit.note)
+    },
+    getCredit() {
+      return this.getDataNoteCredit.credit
+    }
+  },
+  async created() {},
+  beforeUnmount() {
+    this.$bus.$off('credit-note', this.onCreditNote)
+    this.$bus.$off('toggle-widget', this.onToggleWidget)
+    this.$bus.$off('close-widget', this.onCloseWidget)
+    this.$bus.$off('note-to-show', this.onNoteToShow)
+  },
+  mounted() {
+    // close or open widget depending which btn was click
+    this.$bus.$on('toggle-widget', this.onToggleWidget)
+    //close widget
+    this.$bus.$on('close-widget', this.onCloseWidget)
+    // show widget when note click and higligth note
+    this.$bus.$on('note-to-show', this.onNoteToShow)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateWidgetOpen']),
+    onNoteToShow(el) {
+      this.showWidget = true
+      this.updateWidgetOpen(true)
+
+      if (el) {
+        let ref = el.getAttribute('data-Ref')
+
+        this.removehighlight()
+
+        let elAtt = document.getElementsByClassName('widget-note')
+        let arr = Array.from(elAtt)
+
+        for (let element of arr) {
+          if (ref == element.getAttribute('id')) {
+            element.setAttribute('dataCurrent', true)
+            element.focus()
+          }
+        }
+      }
+    },
+    onCloseWidget() {
+      this.showWidget = false
+      this.updateWidgetOpen(false)
+      let el = document.getElementsByClassName('widget-note')
+
+      for (let element of el) {
+        element.setAttribute('datacurrent', false)
+      }
+    },
+    onToggleWidget(data) {
+      if (data == 'noteCredit') {
+        this.showWidget = !this.showWidget
+
+        if (this.showWidget) this.updateWidgetOpen(true)
+      } else {
+        this.showWidget = false
+      }
+    },
+    close() {
+      let elNote = document.getElementsByClassName('widget-note')
+      let elCall = document.getElementsByClassName('callEndNote')
+
+      let arrNote = Array.from(elNote)
+      let arrCall = Array.from(elCall)
+
+      for (let element of arrNote) {
+        element.setAttribute('dataCurrent', false)
+      }
+
+      for (let element of arrCall) {
+        element.setAttribute('datacurrentnote', false)
+      }
+      this.showWidget = !this.showWidget
+      this.$bus.$emit('close-widget')
+    },
+    removehighlight() {
+      let elAtt = document.querySelectorAll("[dataCurrent='true']")
+
+      let arr = Array.from(elAtt)
+
+      for (let element of arr) {
+        element.setAttribute('dataCurrent', false)
+      }
+    },
+    focusNote(el) {
+      this.remove()
+      let e = document.getElementsByClassName('callEndNote')
+      let t = el.target.getAttribute('noteref')
+      let s = document.querySelectorAll(`[dataref="${t}"]`)
+      s[0].setAttribute('dataCurrent', true)
+
+      for (let element of e) {
+        element.setAttribute('dataCurrentnote', false)
+        if (element.id === t) {
+          element.setAttribute('dataCurrentnote', true)
+          element.childNodes[0].focus()
+        }
+      }
+    },
+    remove() {
+      let e = document.getElementsByClassName('widget-note')
+      for (let element of e) {
+        element.setAttribute('dataCurrent', false)
+      }
+    },
+    error(e) {
+      const returnArray = []
+      // ---------------- MUST BE REDO BECAUSE INFO CHANGE ----------------------
+      let arr = e
+      let err = false
+      if (e) {
+        arr.forEach((element, index) => {
+          err = false
+          if (!document.getElementById(`rnt_${index + 1}`)) {
+            err = true
+          }
+          returnArray.push({
+            text: err ? `${element} : ${this.$t('text.err_credit')}` : element,
+            hasError: err
+          })
+        })
+      }
+      return returnArray.length === 0 ? null : returnArray
+    }
+  }
+}
+</script>
+<style lang="scss">
+#noteCredit {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  left: 75px;
+  top: 0;
+  width: 419px;
+  transition: left 0.5s ease-in-out;
+
+  &.openW {
+    pointer-events: all;
+    display: block;
+    opacity: 1;
+  }
+
+  #close-nc {
+    padding: 11px;
+    position: absolute;
+    right: 24px;
+    margin-bottom: 0;
+
+    &:focus {
+      box-shadow: inherit !important;
+    }
+  }
+
+  .note-txt {
+    pointer-events: none;
+  }
+
+  .box-nc {
+    margin-top: 54px;
+    overflow-y: auto;
+    min-height: 160px;
+    max-height: 321px;
+    padding-right: 26px;
+
+    .t-note {
+      margin-bottom: 8px;
+    }
+
+    #notes-list {
+      margin-bottom: 10px;
+
+      li {
+        .backToNoteRef {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  ul#credits-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  ol#notes-list {
+    list-style-position: inside;
+    padding: 0;
+    margin: 0;
+    .widget-note {
+      padding: 5px 0;
+      &.note-error {
+        background-color: firebrick;
+      }
+      .backToNoteRef {
+        display: inline-block;
+        width: 90%;
+        vertical-align: top;
+        padding: 0 4px;
+      }
+    }
+  }
+  .overlay-w {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.app-nav {
+  &.show,
+  &:hover {
+    .ctn-w {
+      #noteCredit {
+        left: 120px;
+      }
+    }
+  }
+}
+</style>