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

package/src/components/AppCompNoteCredit.vue

@@ -17,80 +17,205 @@
       </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)"
+      <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)}`"
             >
-              <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 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,
-      showWidget: false
+      showWidget: false,
+      sideBarIsOpen: null,
+      prevNote: null,
+      shouldDeactivate: false,
+      errorData: [],
+      notes: null,
+      credits: null
     }
   },
   computed: {
-    ...mapState(useAppStore, ['getDataNoteCredit']),
-    getNote() {
-      return this.error(this.getDataNoteCredit.note)
-    },
-    getCredit() {
-      return this.getDataNoteCredit.credit
-    }
+    ...mapState(useAppStore, [
+      'getDataNoteCredit',
+      'getAllActivities',
+      'getCurrentPage',
+      'getNotes',
+      'getCredits'
+    ])
   },
-  async created() {},
+  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('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.onCloseWidget)
+    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)
@@ -98,6 +223,13 @@ export default {
       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')
@@ -105,29 +237,20 @@ export default {
 
         for (let element of arr) {
           if (ref == element.getAttribute('id')) {
-            element.setAttribute('dataCurrent', true)
+            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 (data.type !== 'noteCredit') return (this.showWidget = false)
+      const { notes, credits } = data.content
 
-        if (this.showWidget) this.updateWidgetOpen(true)
-      } else {
-        this.showWidget = false
-      }
+      this.setPageNotesAndCredits({ notes, credits })
+      this.showWidget = !this.showWidget
+      this.updateWidgetOpen(this.showWidget) //update data in store
     },
     close() {
       let elNote = document.getElementsByClassName('widget-note')
@@ -137,63 +260,123 @@ export default {
       let arrCall = Array.from(elCall)
 
       for (let element of arrNote) {
-        element.setAttribute('dataCurrent', false)
+        element.setAttribute('datacurrent', false)
       }
 
       for (let element of arrCall) {
         element.setAttribute('datacurrentnote', false)
       }
-      this.showWidget = !this.showWidget
-      this.$bus.$emit('close-widget')
+      this.showWidget = false
+      this.updateWidgetOpen(false)
     },
     removehighlight() {
-      let elAtt = document.querySelectorAll("[dataCurrent='true']")
+      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')
-      let s = document.querySelectorAll(`[dataref="${t}"]`)
-      s[0].setAttribute('dataCurrent', true)
+
+      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.childNodes[0].focus()
-        }
+        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)
+        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
+
+    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
       }
-      return returnArray.length === 0 ? null : returnArray
+
+      this.prevNote = elTarget
     }
   }
 }
@@ -225,9 +408,9 @@ export default {
     }
   }
 
-  .note-txt {
-    pointer-events: none;
-  }
+  // .note-txt {
+  //   pointer-events: none;
+  // }
 
   .box-nc {
     margin-top: 54px;
@@ -241,35 +424,50 @@ export default {
     }
 
     #notes-list {
-      margin-bottom: 10px;
+      .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;
+        }
 
-      li {
         .backToNoteRef {
-          text-align: left;
+          width: 90%;
+          margin-left: 5px;
+          padding-left: 5px;
+
+          .btref-content {
+            text-align: left;
+          }
         }
       }
     }
   }
 
-  ul#credits-list {
+  #credits-list {
     list-style-type: none;
     padding: 0;
     margin: 0;
   }
-  ol#notes-list {
-    list-style-position: inside;
+  #notes-list {
     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;
+
+      .btref-content {
+        pointer-events: none;
       }
     }
   }

package/src/components/AppCompPlayBar.vue

@@ -292,7 +292,7 @@ mediaMixins is used for all the methods/data shared between audio and video. In
             class="btn subtitleBtns"
             :aria-label="ccLabel"
             :data-title="`${ccLabel} (c)`"
-            :disabled="!hasSubtitle"
+            :aria-disabled="!hasSubtitle"
             :class="{
               md_disabled: !hasSubtitle,
               displayLabel: btnsLabelDisplay['btn-subtitles'] === true
@@ -320,7 +320,7 @@ mediaMixins is used for all the methods/data shared between audio and video. In
             class="btn-transcript"
             :aria-label="transcriptLabel"
             :data-title="`${transcriptLabel} (t)`"
-            :disabled="!hasTranscript || fullscreenOn"
+            :aria-disabled="!hasTranscript || fullscreenOn"
             :class="{
               md_disabled: !hasTranscript || fullscreenOn,
               displayLabel: btnsLabelDisplay['btn-transcript'] === true
@@ -350,7 +350,7 @@ mediaMixins is used for all the methods/data shared between audio and video. In
             ref="$btn-fullscreen"
             class="fullscreenBtns"
             :aria-label="fullscreenLabel"
-            :disabled="transcriptEnabled"
+            :aria-disabled="transcriptEnabled"
             :class="{
               md_disabled: transcriptEnabled,
               displayLabel: btnsLabelDisplay['btn-fullscreen'] === true
@@ -491,9 +491,8 @@ export default {
     if (this.firefoxTrack) {
       this.firefoxTrack.removeEventListener('cuechange', this.fireFoxMoveCC)
     }
-    //this.$bus.$off('play-media', this.handleMediaControls)
+
     this.$bus.$off('transcript-hidden', this.resetTranscript)
-    return this.$bus.$off('close-sidebar', 'ctxTranscript')
   },
   methods: {
     ...mapActions(useAppStore, [