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

package/src/components/AppCompNoteCredit.vue

@@ -1,292 +1,292 @@
-<!--
-  ----------------- 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>
+<!--
+  ----------------- 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>