fcad-core-dragon 2.1.0 → 2.1.2

package/src/components/AppCompNoteCredit.vue

@@ -1,491 +1,496 @@
-<!--
-  ----------------- 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')"
-      :aria-label="$t('button.closePopUp')"
-      @click="close()"
-    >
-      <svg aria-hidden="true" focusable="false">
-        <use href="#close-square-icon" />
-      </svg>
-    </app-base-button>
-    <div class="box-nc">
-      <app-base-error-display
-        v-if="errorData.length"
-        :error-group="'component'"
-        :error-title="'ERREUR: NOTES ET CREDITS'"
-        :errors-list="errorData"
-        :error-text="`Vous avez une/des erreur(s) dans la création des notes/crédits.`"
-      ></app-base-error-display>
-      <template v-else>
-        <div v-if="notes" class="ctn-note">
-          <p class="t-note">{{ $t('text.title_note') }}</p>
-          <div id="notes-list">
-            <template
-              v-for="(note, index) of notes"
-              :key="`nt_${note.page_ref}__${note.id.substring(3)}`"
-            >
-              <div class="note-item">
-                <span>{{ index + 1 }}.</span>
-                <app-base-button
-                  :id="`nt_${note.page_ref}__${note.id.substring(3)}`"
-                  type="button"
-                  :title="$t('text.title_link_bas')"
-                  class="backToNoteRef"
-                  :data-ref="`rnt_${note.page_ref}__${note.id.substring(3)}`"
-                  :note-ref="`rnt_${note.page_ref}__${note.id.substring(3)}`"
-                  :pageref="note.page_ref"
-                  :class="
-                    note.hasError ? 'widget-note note-error' : 'widget-note'
-                  "
-                  @click="
-                    handleNoteDisplay(
-                      `nt_${note.page_ref}__${note.id.substring(3)}`
-                    )
-                  "
-                >
-                  <div
-                    class="btref-content"
-                    data-content=""
-                    v-html="`${note.text}`"
-                  ></div>
-                </app-base-button>
-              </div>
-            </template>
-          </div>
-        </div>
-        <div v-if="credits" class="ctn-credit">
-          <p class="t-crdt">{{ $t('text.title_credit') }}</p>
-
-          <ul id="credits-list">
-            <li
-              v-for="(credit, index) of credits"
-              :key="`credit_${index + 1}`"
-              :ref="`#nt_${index + 1}`"
-              v-html="credit"
-            ></li>
-          </ul>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import { validateObjType } from '../shared/validators'
-
-export default {
-  props: {},
-  data() {
-    return {
-      current: false,
-      showWidget: false,
-      sideBarIsOpen: null,
-      prevNote: null,
-      shouldDeactivate: false,
-      errorData: [],
-      notes: null,
-      credits: null
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getDataNoteCredit',
-      'getAllActivities',
-      'getCurrentPage',
-      'getNotes',
-      'getCredits'
-    ])
-  },
-  created() {},
-  beforeUnmount() {
-    this.$bus.$off('credit-note', this.onCreditNote)
-    this.$bus.$off('toggle-widget', this.onToggleWidget)
-    this.$bus.$off('close-widget', this.close)
-    this.$bus.$off('note-to-show', this.onNoteToShow)
-    this.$bus.$off('side-bar-open', this.onSidebarVisible)
-  },
-  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.close)
-    // show widget when note click and higligth note
-    this.$bus.$on('note-to-show', this.onNoteToShow)
-    this.$bus.$on('side-bar-open', this.onSidebarVisible)
-  },
-  methods: {
-    ...mapActions(useAppStore, ['updateWidgetOpen']),
-    getPageNotes(data) {
-      if (!data) return
-      const _notes = data
-      let formatedNotes = []
-      _notes.forEach((g) => {
-        let count = 0
-        Object.values(g)[0].map((n) => {
-          count++
-          if (
-            this.validateData('note', {
-              n,
-              details: `${count} ${Object.keys(g)[0]} `
-            })
-          )
-            return
-          n['page_ref'] = `${Object.keys(g)[0]}`
-        })
-        //Add all the note to the temp array
-        formatedNotes.push(...Object.values(g)[0])
-      })
-
-      return formatedNotes
-    },
-
-    getPageCredits(data) {
-      if (!data) return
-
-      let credits = data
-      let count = 0
-      for (const c of credits) {
-        count++
-        if (this.validateData('credit', { c, details: count })) return
-      }
-
-      return credits
-    },
-    setPageNotesAndCredits(data) {
-      const { notes, credits } = data
-      this.notes = this.getPageNotes(notes)
-      this.credits = this.getPageCredits(credits)
-    },
-    /**
-     * @description method to validate that the data for the note and credit.
-     * @param {String} ctx context of the validation : credit | note.
-     * @param {String| Object} data the data to be validate-  Object type for note and String type for credit
-     * @return {boolean}
-     */
-    validateData(ctx, data) {
-      let errConsole = []
-      if (this.errorData.length) this.errorData = [] //reset the error tracker
-
-      switch (ctx) {
-        case 'note': {
-          if (data.constructor !== Object) {
-            this.errorData.push(
-              "Mauvais d'éclaration de la note. Doit être de type <i>Objet</i>"
-            )
-            throw Error(
-              `Unexpected definition the note. Expecting Object but received ${typeof data}`
-            )
-          }
-
-          let stringType = ['id', 'text'] //expected attribute in the note declaration
-
-          let { errorInConsole, errorList } = validateObjType(
-            data.n,
-            {
-              stringType
-            },
-            null,
-            `Note ${data.details}`
-          )
-
-          if (errorInConsole.length) errConsole.push(...errorInConsole)
-          if (errorList.length) this.errorData.push(...errorList)
-          break
-        }
-        case 'credit':
-          if (data.c.constructor !== String) {
-            this.errorData.push(
-              `Mauvaise déclaration du <b>crédit ${data.details}</b>. Doit être de type <i>String</i>`
-            )
-            console.warn(
-              `\n 💥 Invalid type declaration for 👉\x1B[1mcredit ${data.details} 👈\x1B[0m. Expecting type String  \uD83D\uDEABtype ${typeof data.c}`
-            )
-          }
-      }
-      if (errConsole.length) {
-        errConsole.forEach((err) => console.warn(err))
-      }
-      return this.errorData.length
-    },
-    onNoteToShow(el) {
-      this.showWidget = true
-      this.updateWidgetOpen(true)
-
-      if (el) {
-        let ref = el.getAttribute('data-Ref')
-
-        const reg1 = /.*(P\d{2}(_E\d{2})?).*/gm //reg for the content of data-ref
-        const id = `$1`
-        const pageRef = ref.replace(reg1, id) //replace all to page id
-
-        if (this.sideBarIsOpen && pageRef.length == 3)
-          this.$bus.$emit('close-sidebar', 'ctxBranching') //send close signal if sibebar is open and note to focus is in parent page
-
-        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()
-          }
-        }
-      }
-    },
-
-    onToggleWidget(data) {
-      if (data.type !== 'noteCredit') return (this.showWidget = false)
-      const { notes, credits } = data.content
-
-      this.setPageNotesAndCredits({ notes, credits })
-      this.showWidget = !this.showWidget
-      this.updateWidgetOpen(this.showWidget) //update data in store
-    },
-    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 = false
-      this.updateWidgetOpen(false)
-    },
-    removehighlight() {
-      let elAtt = document.querySelectorAll("[datacurrent='true']")
-
-      let arr = Array.from(elAtt)
-
-      for (let element of arr) {
-        element.setAttribute('datacurrent', false)
-      }
-    },
-
-    focusNote(el, page) {
-      this.remove()
-      const DOMPages = document.getElementsByClassName(`app-page`)
-      const targetPage = DOMPages.namedItem(page) //get the desired page
-
-      let e = document.getElementsByClassName('callEndNote')
-
-      if (!targetPage) return
-      let nts = targetPage.getElementsByClassName('callEndNote')
-
-      let t = el.getAttribute('note-ref')
-      let s = document.querySelectorAll(`[data-ref="${t}"]`)
-
-      if (s && s[0]) s[0].setAttribute('datacurrent', true)
-
-      for (let element of e) {
-        element.setAttribute('datacurrentnote', false) //reset the data attribute of all notes
-      }
-      let targetNote = nts.namedItem(t)
-
-      if (targetNote) {
-        targetNote.setAttribute('datacurrentnote', true)
-
-        targetNote.childNodes[0].focus()
-      } else {
-        el.setAttribute('aria-disabled', 'true')
-        el.setAttribute('disabled', 'true')
-        el.querySelector('.btref-content').setAttribute(
-          'data-content',
-          '\u26A0\uFE0F'
-        )
-        el.querySelector('div').style =
-          'color:red; text-decoration:line-through;'
-        el.style.color = 'red'
-
-        el.removeEventListener('click', this.handleNoteDisplay)
-      }
-      this.prevNote = el
-    },
-
-    remove() {
-      let e = document.getElementsByClassName('widget-note')
-      for (let element of e) {
-        element.setAttribute('datacurrent', false)
-      }
-    },
-
-    onSidebarVisible(state) {
-      this.sideBarIsOpen = state
-    },
-
-    /**
-     *  @description method handle the behavior of note displaying
-     *  @param {Object} evt - the event that trigger the action
-     *  @emits event - 'open-sidebar' to display notes in branch | 'close-sidebar' to display not in parent when branch open
-     *
-     */
-    handleNoteDisplay(ref) {
-      /*
-       * Note:
-       * Element target (button) is wrongly referenced when Screen-reader is active and element selected With TAB
-       * The Div in the button is selected not the button.
-       * This ensure that the button is always set as targeted element
-       */
-      const widgetContent = document.getElementsByClassName('backToNoteRef') //target all the button of in the notes widget
-      const elTarget = widgetContent.namedItem(ref) // Target current button
-      const pageRef = elTarget.getAttribute('pageref')
-
-      if (!this.sideBarIsOpen) this.prevNote = null //reset previous when sidebar is opened
-
-      let prevPageref = this.prevNote
-        ? this.prevNote.getAttribute('pageref')
-        : null
-
-      switch (true) {
-        case pageRef && pageRef.length > 3: {
-          //this is the branching page Send message to open the side bar
-          this.$bus.$emit('open-sidebar', {
-            ctx: 'ctxBranching',
-            e: pageRef,
-            persist: this.sideBarIsOpen || pageRef == prevPageref //this will prevent the sidebar to close when the note is in same page
-          })
-          //Should set focus after side bar is opened. Need to delay to not interfere with side bar focus
-          pageRef == prevPageref
-            ? setTimeout(() => this.focusNote(elTarget, pageRef), 100)
-            : setTimeout(() => this.focusNote(elTarget, pageRef), 400)
-
-          break
-        }
-        default:
-          //Should have the side bar close if it is opened and note is in parent page
-          if (this.sideBarIsOpen && pageRef.length == 3)
-            this.$bus.$emit('close-sidebar', 'ctxBranching')
-
-          return setTimeout(() => this.focusNote(elTarget, pageRef), 100) //Need to delay to not have side bar close animation finished
-      }
-
-      this.prevNote = elTarget
-    }
-  }
-}
-</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 {
-      .note-item {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        margin-bottom: 5px;
-
-        color: #deeff8;
-
-        span {
-          font-size: 0.65rem;
-          padding: 8px 0 0 0;
-        }
-
-        .backToNoteRef {
-          width: 90%;
-          margin-left: 5px;
-          padding-left: 5px;
-
-          .btref-content {
-            text-align: left;
-          }
-        }
-      }
-    }
-  }
-
-  #credits-list {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-  #notes-list {
-    padding: 0;
-    margin: 0;
-
-    .widget-note {
-      padding: 5px 0;
-
-      &.note-error {
-        background-color: firebrick;
-      }
-
-      .btref-content {
-        pointer-events: none;
-      }
-    }
-  }
-  .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')"
+      :aria-label="$t('button.closePopUp')"
+      @click="close()"
+    >
+      <svg aria-hidden="true" focusable="false">
+        <use href="#close-square-icon" />
+      </svg>
+    </app-base-button>
+    <div class="box-nc">
+      <app-base-error-display
+        v-if="errorData.length"
+        :error-group="'component'"
+        :error-title="'ERREUR: NOTES ET CREDITS'"
+        :errors-list="errorData"
+        :error-text="`Vous avez une/des erreur(s) dans la création des notes/crédits.`"
+      ></app-base-error-display>
+      <template v-else>
+        <div v-if="notes" class="ctn-note">
+          <p class="t-note">{{ $t('text.title_note') }}</p>
+          <div id="notes-list">
+            <template
+              v-for="(note, index) of notes"
+              :key="`nt_${note.page_ref}__${note.id.substring(3)}`"
+            >
+              <div class="note-item">
+                <span>{{ index + 1 }}.</span>
+                <app-base-button
+                  :id="`nt_${note.page_ref}__${note.id.substring(3)}`"
+                  type="button"
+                  :title="$t('text.title_link_bas')"
+                  class="backToNoteRef"
+                  :data-ref="`rnt_${note.page_ref}__${note.id.substring(3)}`"
+                  :note-ref="`rnt_${note.page_ref}__${note.id.substring(3)}`"
+                  :pageref="note.page_ref"
+                  :class="
+                    note.hasError ? 'widget-note note-error' : 'widget-note'
+                  "
+                  @click="
+                    handleNoteDisplay(
+                      `nt_${note.page_ref}__${note.id.substring(3)}`
+                    )
+                  "
+                >
+                  <div
+                    class="btref-content"
+                    data-content=""
+                    v-html="`${note.text}`"
+                  ></div>
+                </app-base-button>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div v-if="credits" class="ctn-credit">
+          <p class="t-crdt">{{ $t('text.title_credit') }}</p>
+
+          <ul id="credits-list">
+            <li
+              v-for="(credit, index) of credits"
+              :key="`credit_${index + 1}`"
+              :ref="`#nt_${index + 1}`"
+              v-html="credit"
+            ></li>
+          </ul>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { validateObjType } from '../shared/validators'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  props: {},
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      current: false,
+      showWidget: false,
+      sideBarIsOpen: null,
+      prevNote: null,
+      shouldDeactivate: false,
+      errorData: [],
+      notes: null,
+      credits: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getDataNoteCredit',
+      'getAllActivities',
+      'getCurrentPage',
+      'getNotes',
+      'getCredits'
+    ])
+  },
+  created() {},
+  beforeUnmount() {
+    this.$bus.$off('credit-note', this.onCreditNote)
+    this.$bus.$off('toggle-widget', this.onToggleWidget)
+    this.$bus.$off('close-widget', this.close)
+    this.$bus.$off('note-to-show', this.onNoteToShow)
+    this.$bus.$off('side-bar-open', this.onSidebarVisible)
+  },
+  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.close)
+    // show widget when note click and higligth note
+    this.$bus.$on('note-to-show', this.onNoteToShow)
+    this.$bus.$on('side-bar-open', this.onSidebarVisible)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateWidgetOpen']),
+    getPageNotes(data) {
+      if (!data) return
+      const _notes = data
+      let formatedNotes = []
+      _notes.forEach((g) => {
+        let count = 0
+        Object.values(g)[0].map((n) => {
+          count++
+          if (
+            this.validateData('note', {
+              n,
+              details: `${count} ${Object.keys(g)[0]} `
+            })
+          )
+            return
+          n['page_ref'] = `${Object.keys(g)[0]}`
+        })
+        //Add all the note to the temp array
+        formatedNotes.push(...Object.values(g)[0])
+      })
+
+      return formatedNotes
+    },
+
+    getPageCredits(data) {
+      if (!data) return
+
+      let credits = data
+      let count = 0
+      for (const c of credits) {
+        count++
+        if (this.validateData('credit', { c, details: count })) return
+      }
+
+      return credits
+    },
+    setPageNotesAndCredits(data) {
+      const { notes, credits } = data
+      this.notes = this.getPageNotes(notes)
+      this.credits = this.getPageCredits(credits)
+    },
+    /**
+     * @description method to validate that the data for the note and credit.
+     * @param {String} ctx context of the validation : credit | note.
+     * @param {String| Object} data the data to be validate-  Object type for note and String type for credit
+     * @return {boolean}
+     */
+    validateData(ctx, data) {
+      let errConsole = []
+      if (this.errorData.length) this.errorData = [] //reset the error tracker
+
+      switch (ctx) {
+        case 'note': {
+          if (data.constructor !== Object) {
+            this.errorData.push(
+              "Mauvais d'éclaration de la note. Doit être de type <i>Objet</i>"
+            )
+            throw Error(
+              `Unexpected definition the note. Expecting Object but received ${typeof data}`
+            )
+          }
+
+          let stringType = ['id', 'text'] //expected attribute in the note declaration
+
+          let { errorInConsole, errorList } = validateObjType(
+            data.n,
+            {
+              stringType
+            },
+            null,
+            `Note ${data.details}`
+          )
+
+          if (errorInConsole.length) errConsole.push(...errorInConsole)
+          if (errorList.length) this.errorData.push(...errorList)
+          break
+        }
+        case 'credit':
+          if (data.c.constructor !== String) {
+            this.errorData.push(
+              `Mauvaise déclaration du <b>crédit ${data.details}</b>. Doit être de type <i>String</i>`
+            )
+            console.warn(
+              `\n 💥 Invalid type declaration for 👉\x1B[1mcredit ${data.details} 👈\x1B[0m. Expecting type String  \uD83D\uDEABtype ${typeof data.c}`
+            )
+          }
+      }
+      if (errConsole.length) {
+        errConsole.forEach((err) => console.warn(err))
+      }
+      return this.errorData.length
+    },
+    onNoteToShow(el) {
+      this.showWidget = true
+      this.updateWidgetOpen(true)
+
+      if (el) {
+        let ref = el.getAttribute('data-Ref')
+
+        const reg1 = /.*(P\d{2}(_E\d{2})?).*/gm //reg for the content of data-ref
+        const id = `$1`
+        const pageRef = ref.replace(reg1, id) //replace all to page id
+
+        if (this.sideBarIsOpen && pageRef.length == 3)
+          this.$bus.$emit('close-sidebar', 'ctxBranching') //send close signal if sibebar is open and note to focus is in parent page
+
+        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()
+          }
+        }
+      }
+    },
+
+    onToggleWidget(data) {
+      if (data.type !== 'noteCredit') return (this.showWidget = false)
+      const { notes, credits } = data.content
+
+      this.setPageNotesAndCredits({ notes, credits })
+      this.showWidget = !this.showWidget
+      this.updateWidgetOpen(this.showWidget) //update data in store
+    },
+    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 = false
+      this.updateWidgetOpen(false)
+    },
+    removehighlight() {
+      let elAtt = document.querySelectorAll("[datacurrent='true']")
+
+      let arr = Array.from(elAtt)
+
+      for (let element of arr) {
+        element.setAttribute('datacurrent', false)
+      }
+    },
+
+    focusNote(el, page) {
+      this.remove()
+      const DOMPages = document.getElementsByClassName(`app-page`)
+      const targetPage = DOMPages.namedItem(page) //get the desired page
+
+      let e = document.getElementsByClassName('callEndNote')
+
+      if (!targetPage) return
+      let nts = targetPage.getElementsByClassName('callEndNote')
+
+      let t = el.getAttribute('note-ref')
+      let s = document.querySelectorAll(`[data-ref="${t}"]`)
+
+      if (s && s[0]) s[0].setAttribute('datacurrent', true)
+
+      for (let element of e) {
+        element.setAttribute('datacurrentnote', false) //reset the data attribute of all notes
+      }
+      let targetNote = nts.namedItem(t)
+
+      if (targetNote) {
+        targetNote.setAttribute('datacurrentnote', true)
+
+        targetNote.childNodes[0].focus()
+      } else {
+        el.setAttribute('aria-disabled', 'true')
+        el.setAttribute('disabled', 'true')
+        el.querySelector('.btref-content').setAttribute(
+          'data-content',
+          '\u26A0\uFE0F'
+        )
+        el.querySelector('div').style =
+          'color:red; text-decoration:line-through;'
+        el.style.color = 'red'
+
+        el.removeEventListener('click', this.handleNoteDisplay)
+      }
+      this.prevNote = el
+    },
+
+    remove() {
+      let e = document.getElementsByClassName('widget-note')
+      for (let element of e) {
+        element.setAttribute('datacurrent', false)
+      }
+    },
+
+    onSidebarVisible(state) {
+      this.sideBarIsOpen = state
+    },
+
+    /**
+     *  @description method handle the behavior of note displaying
+     *  @param {Object} evt - the event that trigger the action
+     *  @emits event - 'open-sidebar' to display notes in branch | 'close-sidebar' to display not in parent when branch open
+     *
+     */
+    handleNoteDisplay(ref) {
+      /*
+       * Note:
+       * Element target (button) is wrongly referenced when Screen-reader is active and element selected With TAB
+       * The Div in the button is selected not the button.
+       * This ensure that the button is always set as targeted element
+       */
+      const widgetContent = document.getElementsByClassName('backToNoteRef') //target all the button of in the notes widget
+      const elTarget = widgetContent.namedItem(ref) // Target current button
+      const pageRef = elTarget.getAttribute('pageref')
+
+      if (!this.sideBarIsOpen) this.prevNote = null //reset previous when sidebar is opened
+
+      let prevPageref = this.prevNote
+        ? this.prevNote.getAttribute('pageref')
+        : null
+
+      switch (true) {
+        case pageRef && pageRef.length > 3: {
+          //this is the branching page Send message to open the side bar
+          this.$bus.$emit('open-sidebar', {
+            ctx: 'ctxBranching',
+            e: pageRef,
+            persist: this.sideBarIsOpen || pageRef == prevPageref //this will prevent the sidebar to close when the note is in same page
+          })
+          //Should set focus after side bar is opened. Need to delay to not interfere with side bar focus
+          pageRef == prevPageref
+            ? setTimeout(() => this.focusNote(elTarget, pageRef), 100)
+            : setTimeout(() => this.focusNote(elTarget, pageRef), 400)
+
+          break
+        }
+        default:
+          //Should have the side bar close if it is opened and note is in parent page
+          if (this.sideBarIsOpen && pageRef.length == 3)
+            this.$bus.$emit('close-sidebar', 'ctxBranching')
+
+          return setTimeout(() => this.focusNote(elTarget, pageRef), 100) //Need to delay to not have side bar close animation finished
+      }
+
+      this.prevNote = elTarget
+    }
+  }
+}
+</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 {
+      .note-item {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 5px;
+
+        color: #deeff8;
+
+        span {
+          font-size: 0.65rem;
+          padding: 8px 0 0 0;
+        }
+
+        .backToNoteRef {
+          width: 90%;
+          margin-left: 5px;
+          padding-left: 5px;
+
+          .btref-content {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+
+  #credits-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  #notes-list {
+    padding: 0;
+    margin: 0;
+
+    .widget-note {
+      padding: 5px 0;
+
+      &.note-error {
+        background-color: firebrick;
+      }
+
+      .btref-content {
+        pointer-events: none;
+      }
+    }
+  }
+  .overlay-w {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.app-nav {
+  &.show,
+  &:hover {
+    .ctn-w {
+      #noteCredit {
+        left: 120px;
+      }
+    }
+  }
+}
+</style>