fcad-core-dragon 2.1.0-beta.4 → 2.1.0

package/src/components/AppBaseFlipCard.vue

@@ -1,84 +1,84 @@
-<template>
-  <!--
-     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
-    -->
-  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
-    <div class="inside-card" :class="{ flip: isFlipped }">
-      <div class="front-card" name="front-card">
-        <slot name="front-card" />
-      </div>
-      <div class="back-card">
-        <slot name="back-card" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  data() {
-    return {
-      isFlipped: false
-    }
-  },
-  methods: {
-    /**
-     * @fires click to parent componant or page
-     */
-    fnClick() {
-      this.$emit('click', this.$el)
-      this.isFlipped = !this.isFlipped
-    }
-  }
-}
-</script>
-<style lang="scss">
-.flip-card {
-  height: auto;
-  cursor: pointer;
-
-  /***** Parameretre modifiable *****/
-  perspective: 100%;
-  width: 90%;
-
-  .inside-card {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    /***** Parameretre modifiable *****/
-    transform-style: preserve-3d;
-    transition: transform 0.5s;
-
-    &.flip {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-
-    .front-card,
-    .back-card {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
-
-      .img-flip-card {
-        width: 90%;
-        height: auto;
-      }
-    }
-
-    .back-card {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-  }
-}
-</style>
+<template>
+  <!--
+     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
+    -->
+  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
+    <div class="inside-card" :class="{ flip: isFlipped }">
+      <div class="front-card" name="front-card">
+        <slot name="front-card" />
+      </div>
+      <div class="back-card">
+        <slot name="back-card" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  data() {
+    return {
+      isFlipped: false
+    }
+  },
+  methods: {
+    /**
+     * @fires click to parent componant or page
+     */
+    fnClick() {
+      this.$emit('click', this.$el)
+      this.isFlipped = !this.isFlipped
+    }
+  }
+}
+</script>
+<style lang="scss">
+.flip-card {
+  height: auto;
+  cursor: pointer;
+
+  /***** Parameretre modifiable *****/
+  perspective: 100%;
+  width: 90%;
+
+  .inside-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    /***** Parameretre modifiable *****/
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+
+    &.flip {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+
+    .front-card,
+    .back-card {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+
+      .img-flip-card {
+        width: 90%;
+        height: auto;
+      }
+    }
+
+    .back-card {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+  }
+}
+</style>

package/src/components/AppBaseModule.vue

@@ -29,6 +29,8 @@
       />
     </nav>
     <base-module :m-data="$data">
+          
+
       <v-container
         id="wrapper-content"
         fluid
@@ -184,7 +186,6 @@ export default {
     appReady() {
       return this.getAppStatus === 'ready' ? true : false
     },
-
     hasMedia() {
       return typeof this.hasMediaElOrTimeline === 'object'
     },
@@ -203,7 +204,6 @@ export default {
         return true
       else return false
     },
-
     /**
      * @description Set the id the module
      */
@@ -233,7 +233,6 @@ export default {
         description = this.moduleConfig.description
       return description
     },
-
     /**
      * @description set Previous/Next can allow navigation between activities.
      *
@@ -338,7 +337,6 @@ export default {
 
       return sidebarSettings
     },
-
     navigationHistory() {
       return this.getRouteHistory
     }
@@ -521,7 +519,7 @@ export default {
     lessonLabel = this.$t('text.lesson')
     lessonNumber = this.moduleConfig.id.replace('module_', '')
     lessonTitle = this.theTitle
-    titleString = lessonLabel + ' ' + lessonNumber + ' : ' + lessonTitle
+    titleString = lessonLabel + ' ' + lessonNumber + ' – ' + lessonTitle
 
     //Remove prefix for introduction or conclusion, according to isIntroConclu setting in Module.vue
     if (typeof this.moduleConfig.isIntroConclu !== 'undefined') {
@@ -626,7 +624,7 @@ export default {
     async handleKeyboardControls(evt) {
       let { code } = evt
 
-      if (code === 'Escape' && this.rightSidebarVisible){
+      if (code === 'Escape' && this.rightSidebarVisible) {
         this.closeSidebar(this.dynamicSidebarContent._context)
       }
     },
@@ -661,15 +659,15 @@ export default {
       //delay animation
       this.rightSidebarVisible = true
       this.updatesideBIsOpen(this.rightSidebarVisible)
-      setTimeout(() => {
-        const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
-        if (!rightSidebarContent) return
-        rightSidebarContent.scrollTop = 0
-        const rSidebar = document.querySelector('#right-sidebar') // the sidebar
-        rSidebar.dispatchEvent(this.rightSidebarEvent)
-        rSidebar.setAttribute('tabindex', -1)
-        this.resetFocus(rSidebar) //set focus on the sidebar
-      }, 100)
+      // setTimeout(() => {
+      const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
+      if (!rightSidebarContent) return
+      rightSidebarContent.scrollTop = 0
+      const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+      rSidebar.dispatchEvent(this.rightSidebarEvent)
+      rSidebar.setAttribute('tabindex', -1)
+      this.resetFocus(rSidebar) //set focus on the sidebar
+      // }, 100)
     },
     /**
      * @description close the right sidebar component
@@ -682,6 +680,7 @@ export default {
       this.rightSidebarVisible = false //
       setTimeout(() => {
         const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+        if (!rSidebar) return
         rSidebar.setAttribute('style', 'display:none')
         rSidebar.dispatchEvent(this.rightSidebarEvent) //this will allow to run the animation of sidebar closing 1rst
       }, 100)
@@ -785,7 +784,6 @@ export default {
     openBranchContent(branchID) {
       this.branchingVisible = true
       this.compID = branchID //set compenent ID
-
       setTimeout(() => {
         const rightSidebar = this.getRightSidebar()
         //Should indicate that page is completed when the Rightsidebar content heigh is less then window height
@@ -847,7 +845,7 @@ export default {
 
       return new Promise((res) => {
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
-        this.updateCurrentTimeline('')
+        this.updateCurrentTimeline(null)
         this.updateCurrentMediaElements([])
         // this.updateCurrentPage({})
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')