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

package/src/components/AppCompNoteCredit.vue

@@ -6,159 +6,486 @@
  @ 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 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 {
-      notes: null,
-      credits: null,
       current: false,
-      jsons: null,
-      showWidget: false
+      showWidget: false,
+      sideBarIsOpen: null,
+      prevNote: null,
+      shouldDeactivate: false,
+      errorData: [],
+      notes: null,
+      credits: null
     }
   },
   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
-    }
+    ...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)
   },
-  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
-    })
-
+    this.$bus.$on('toggle-widget', this.onToggleWidget)
     //close widget
-    this.$bus.$on('close-widget', (data) => {
-      this.showWidget = false
-    })
-
+    this.$bus.$on('close-widget', this.close)
     // show widget when note click and higligth note
-    this.$bus.$on('note-to-show', (el) => {
+    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('dataRef')
+        let ref = el.getAttribute('data-Ref')
 
-        this.removefocus()
+        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')
-        var arr = Array.from(elAtt)
+        let arr = Array.from(elAtt)
 
         for (let element of arr) {
           if (ref == element.getAttribute('id')) {
-            element.setAttribute('dataCurrent', true)
+            element.setAttribute('datacurrent', true)
+            element.focus()
           }
         }
       }
-    })
-  },
-  methods: {
-    //close widget
-    close() {
+    },
+
+    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
     },
-    removefocus() {
-      let elAtt = document.querySelectorAll("[dataCurrent='true']")
+    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)
+      }
 
-      var arr = Array.from(elAtt)
+      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)
+        element.setAttribute('datacurrent', false)
       }
     },
-    focusNote(el) {
+
+    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')
-      let t = el.target.getAttribute('noteref')
+
+      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)
-        if (element.id === t) {
-          element.setAttribute('dataCurrentnote', true)
+        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 {
+#noteCredit {
+  display: none;
+  pointer-events: none;
   position: absolute;
+  left: 75px;
   top: 0;
-  left: 200%;
-  display: none;
-  opacity: 0;
+  width: 419px;
+  transition: left 0.5s ease-in-out;
 
   &.openW {
+    pointer-events: all;
     display: block;
     opacity: 1;
   }
 
-  span {
-    pointer-events: none;
+  #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>