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

package/src/components/AppBasePage.vue

@@ -1,57 +1,64 @@
 <!--
- @ Description: Root component for  creation a page for an activity
+ @  Description: a prototype to test refactoring of pageMixin paradigm and fonctionality
  @ What it does: The component received a data and validate the type of page that will be created
                   The component update the store information for the  type of page created and also the timeline
 @Note: Page not created with this component will not have the data automatically traked by the application
 -->
 <template>
-  <div :id="page.id" class="app-page" role="main">
-    <slot v-if="!errorPage.length" name="content">
-      Page
-    </slot>
-    <b-row v-else-if="errorPage.length > 0" class="warning-error">
-      <b-col class="box-error">
-        <div class="yellow-box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Erreure: Création de PAGE!
-          </h2>
-          <p>
-            Vous avez une/des erreur(s) dans la création de votre PAGE. Veuillez
-            corriger les erreurs ci-dessous:
-            <br />
-          </p>
-          <ul>
-            <li v-for="(err, index) in errorPage" :key="`error_type_${index}`">
-              {{ err }}
-            </li>
-          </ul>
-        </div>
-        <div class="box">
-          <p class="doc">
-            Visitez
-            <a href="https://fcaddocumentation.netlify.app/" target="blank">
-              la documentation
-            </a>
-            pour plus de details
-          </p>
-        </div>
-      </b-col>
-    </b-row>
+  <div :id="pageData.id" :key="pageData.id" class="app-page" role="main">
+    <div v-if="appDebugMode" class="debug-pageInfo" :class="{open : push}" >
+      <button class="w-btn" @click="push = !push"> < </button>
+      <div class="ctn">Activity info: 
+
+        Route : {{ $route.path }}<br/>
+
+        Activity id : {{ getDebugModeInfo.id }}<br/>
+        Nombre de page : {{ getDebugModeInfo.size }}<br/>
+        Page complete :
+        <ul>
+          <li v-for="(value, key) in getDebugModeInfo.progression" :key="key">
+            {{value }}
+          </li>
+        </ul>
+      </div>
+
+    </div>
+    <slot v-if="!errorPage.length" name="content">Page</slot>
+    <app-base-error-display
+      v-else
+      :error-group="'component'"
+      :error-title="'ERREUR: CRÉATION DE LA PAGE'"
+      :errors-list="errorPage"
+      :error-text="`Vous avez une/des erreur(s) dans la création de votre PAGE. Veuillez
+            corriger les erreurs ci-dessous:`"
+    />
+    <span
+      id="page_info"
+      ref="page_info"
+      class="sr-only"
+      aria-hidden="true"
+    ></span>
+    <div id="hiddenAlertContainer" role="alert" class="sr-only"></div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAppStore } from '../module/stores/appStore'
+import { mapState, mapActions } from 'pinia'
+
 export default {
+  provide() {
+    return { userInteraction: computed(() => this.userInteraction) }
+  },
   props: {
-    page: {
+    pageData: {
       type: Object,
       required: true,
 
       validator(value) {
         let isValid = true
-        if (process.env.NODE_ENV === 'development') {
+        if (import.meta.env.DEV) {
           const requiredPageKeys = ['id', 'activityRef', 'type']
           let requiredTypeValues = [
             'pg_normal',
@@ -86,23 +93,100 @@ export default {
       }
     }
   },
+  setup(props) {
+    const store = useAppStore()
+    const { activityRef, id: pageID, type: pageType } = props.pageData
+
+    //Getting initial existing userIntaction from store
+    const { userInteraction: previousInteraction = {} } =
+      store.getPageInteraction(activityRef, pageID)
+
+    return { store, previousInteraction, pageID, pageType }
+  },
+
   data() {
     return {
-      pageData: null,
-      getHash: null
+      getHash: null,
+      //========PageMisins values ===================
+      userInteraction: this.previousInteraction,
+      state: null,
+      anchorEnable: true,
+      anchorInfo: null,
+      drModeActive: null,
+      error: null,
+      id: this.pageID,
+      type: this.pageType,
+      push:false
+
+      //======== End PageMisins values ===================
     }
   },
   computed: {
-    ...mapGetters([
-      'getRouteHistory',
-      'getAllActivitiesState',
-      'getAllCompleted',
-      'getErrorChoiceDetect'
+    ...mapState(useAppStore, [
+      'getDataNoteCredit',
+      'getAllActivities',
+      'getApplicationSettings',
+      'getAppDebugMode'
     ]),
+
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    getRouteHistory() {
+      return this.store.getRouteHistory
+    },
+    getAllActivitiesState() {
+      return this.store.getAllActivitiesState
+    },
+
+    getAllCompleted() {
+      return this.store.getAllCompleted
+    },
+    getErrorChoiceDetect() {
+      return this.store.getErrorChoiceDetect
+    },
+    getUserInteraction() {
+      return this.store.getUserInteraction
+    },
+    getPageInteraction() {
+      return this.store.getPageInteraction
+    },
+
+    getCurrentPage() {
+      return this.store.getCurrentPage
+    },
+
+    getCurrentBranching() {
+      return this.store.getCurrentBranching
+    },
+    updateCurrentBranching() {
+      return this.store.updateCurrentBranching
+    },
+    getModuleInfo() {
+      return this.store.getModuleInfo
+    },
+
+    getAllActivities() {
+      return this.store.getAllActivities()
+    },
+    getConnectionInfo() {
+      return this.store.getConnectionInfo
+    },
+
+    getAnchorsForActivity() {
+      return this.store.getAnchorsForActivity()
+    },
+    getBifChoice() {
+      return this.store.getBifChoice
+    },
+
+    isBranchingPage() {
+      return this.$route.meta.type === 'branching' && this.type !== 'pg_branch'
+    },
+
+    //================================================
     settingsOptions() {
-      return this.$store.state.isDr
-        ? this.settingsOptionsEL
-        : this.settingsOptionsELPlus
+      return this.settingsOptionsELPlus
     },
 
     settingsSelected() {
@@ -112,7 +196,7 @@ export default {
 
     errorPage() {
       let err = false
-      if (process.env.NODE_ENV === 'development') {
+      if (import.meta.env.DEV) {
         const requiredPageKeys = ['id', 'activityRef', 'type']
         const errorList = []
         let count = 0
@@ -126,25 +210,25 @@ export default {
 
         requiredPageKeys.forEach((key) => {
           // required key is missing in $data that was passed for the page
-          if (!Object.keys(this.page).includes(key)) {
+          if (!Object.keys(this.pageData).includes(key)) {
             errorList.push(`Missing page ${key} in $data`)
           }
           // Validator value for type
           else if (
             key === 'type' &&
-            !requiredTypeValues.includes(this.page[key])
+            !requiredTypeValues.includes(this.pageData[key])
           ) {
             errorList.push(`Invalid value assigment for page type in $data`)
           } else if (count < 1) {
             let errString = null
             const requiredValues = ['video', 'audio']
-            switch (this.page.type) {
+            switch (this.type) {
               // validation for animation page type content
 
               case 'pg_animation':
-                if (!this.page.animation)
+                if (!this.pageData.animation)
                   errString = `Missing >>information in $data<< for animation type page`
-                if (this.page.animation && !this.page.animation.refName)
+                if (this.pageData.animation && !this.pageData.animation.refName)
                   errString = `Missing >>refName<< for your animation `
                 if (errString) {
                   errorList.push(errString)
@@ -157,8 +241,8 @@ export default {
               // valdation for media page type content
               case 'pg_media':
                 if (
-                  !this.page.mediaData ||
-                  Object.keys(this.page.mediaData).length < 1
+                  !this.pageData.mediaData ||
+                  Object.keys(this.pageData.mediaData).length < 1
                 ) {
                   errString = `Missing >>media information<< for media type page`
                   errorList.push(errString)
@@ -168,13 +252,8 @@ export default {
                   )
                 } else {
                   // validation for mediaData content. Must have mType && mSource
-                  const {
-                    mType,
-                    mSources,
-                    mSubtitle,
-                    mTranscript,
-                    mPoster
-                  } = this.page.mediaData
+                  const { mType, mSources, mSubtitle, mTranscript, mPoster } =
+                    this.pageData.mediaData
                   if (!mType || !mSources) {
                     errString = `Missing key(s) in mediaData declaration for media`
                     errorList.push(errString)
@@ -251,9 +330,76 @@ export default {
         if (errorList.length > 0) err = errorList
       }
       return err
+    },
+
+    pgNumber() {
+      if (!this.pageData.id) return
+      let n = parseInt(this.pageData.id.replace('P', ''))
+      return n
+    },
+
+    A11yPageInfo() {
+      if (!this.$route || !this.$route.path) return ''
+
+      let A11YTxt = ''
+      const path = this.$route.path
+      let reg = /[/|-]/g
+
+      A11YTxt = path.replaceAll(reg, ' ') // replace all '/' and '-' by space
+
+      if (A11YTxt.includes('activite'))
+        A11YTxt = A11YTxt.replace('activite', this.$t('text.activity'))
+
+      return A11YTxt.toLowerCase()
+    }, 
+
+    getDebugModeInfo(){
+      const allActivitiesState = JSON.parse(
+          JSON.stringify(this.getAllActivitiesState)
+        )
+        let size = allActivitiesState[this.pageData.activityRef]
+          ? allActivitiesState[this.pageData.activityRef].size
+          : 0
+
+        let Pprogress = allActivitiesState[this.pageData.activityRef].progressions
+       
+      let info = {
+        id: this.pageData.activityRef,
+        size : size,
+        progression : Pprogress
+      }
+     
+
+      return info
+    }
+  },
+  watch: {
+    userInteraction: {
+      async handler(newValue) {
+        /**
+         * Observe changes in the number of poperties to dispatch updates in the userdata in the Store
+         */
+
+        if (newValue && Object.entries(this.userInteraction).length) {
+          await this.store.updateUserMetaData({
+            activityRef: this.pageData.activityRef,
+            id: this.pageData.id,
+            userInteraction: { ...this.userInteraction }
+          })
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    'store.userDataLoaded': {
+      async handler() {
+        if (!this.store.userDataLoaded) return
+        this.userInteraction = await this.setInitialInteraction()
+      },
+      immediate: true,
+      deep: true
     }
   },
-  watch: {},
   created() {
     /*
      * Create a custome object for this page that will be added in the collection
@@ -262,29 +408,406 @@ export default {
      * will update the store information for the currentPage
      * wil update the store information for the currentTimeline (GSap animation)
      */
-    if (this.page && this.errorPage === false) {
-      this.pageData = this.page
-      // Update the store with the current page information
-      this.$store.dispatch('updateCurrentPage', {
-        activity_Id: this.page.activityRef,
-        page_Id: this.page.id
-      })
+
+    if (this.pageData && this.errorPage === false) {
       // Handeling presence of animation in the page
       if (this.pageData.animation) {
         // update the store with the information of currentTimeline
-        this.$store.dispatch(
-          'updateCurrentTimeline',
-          this.$gsap.timeline({ paused: true })
-        )
       }
+
+      if (this.type == 'pg_branch') {
+        // Update the store with the current page information when branching page is created
+        // Note: Branching doesn't trigger router navigation so is done directly here
+        this.store.updateCurrentPage({
+          activity_Id: this.pageData.activityRef,
+          page_Id: this.pageData.id
+        })
+        this.$bus.$on('branch-page-viewed', this.completePageBranching)
+      }
+    }
+
+    if (this.isBranchingPage) this.updateCurrentBranching(this.$data)
+    this.$bus.$on('media-viewed', this.setMediaViewed)
+    this.$bus.$on('manage-media-players', this.managePlayingMedia)
+    this.$bus.$on('video-transcript-toggle', this.onVideoTranscriptToggle)
+    this.$bus.$on('save-quiz-answers', this.saveQuizAnswers)
+  },
+  mounted() {
+    //Fix for firefox not updating aria-labelledby (was stuck saying Activite 1, page 1 on every pages)
+    this.$refs['page_info'].innerHTML = this.A11yPageInfo
+
+    // scrolling to top of only when is normal page
+    if (this.pageData && this.type === 'pg_normal')
+      this.$bus.$emit('move-to-target', 'page_info_section')
+
+    // set the state of the page when page is mounted : started or completed
+    if (this.userInteraction && this.userInteraction.state)
+      this.state = this.userInteraction.state
+    else if (
+      this.type === 'pg_menu' &&
+      this.userInteraction.state !== 'completed'
+    ) {
+      this.state = 'completed' // set menu page state to completed
+    } else this.state = 'started' // set the default state to started
+
+    this.userInteraction['state'] = this.state // add the state to the userInteraction
+    // handle completion status of the page.
+    if (
+      document.documentElement.scrollHeight <=
+        document.documentElement.clientHeight + 20 &&
+      this.type !== 'pg_branch'
+    ) {
+      this.completePage()
     }
 
-    //window.scrollTo(0, 0)
+    if (this.type === 'pg_branch') {
+      this.updateCurrentBranchPage(this.$data)
+    }
+
+    if (this.type == 'pg_branch') return //do not proceed to add listener when branch page
+
+    window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
   },
-  mounted() {},
+  unmounted() {
+    //cleaning up all the event listener
+    this.$bus.$off('branch-page-viewed', this.completePageBranching)
+    this.$bus.$off('media-viewed', this.setMediaViewed)
+    this.$bus.$off('manage-media-players', this.managePlayingMedia)
+    this.$bus.$off('video-transcript-toggle', this.onVideoTranscriptToggle)
+    if (!this.isBranchingPage && this.type !== 'pg_branch')
+      this.updateCurrentBranching(null) //unset current branching when leaving a branching page
+    if (this.type == 'pg_branch') this.updateCurrentBranchPage(null) //unset current branch page when leaving a branch page
+    this.$bus.$off('save-quiz-answers', this.saveQuizAnswers)
+    window.removeEventListener('scroll', this.onFirstScroll, { once: true }) //in case user did not scroll
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateCurrentBranchPage']),
+    //==============================================================
+    onFirstScroll() {
+      window.addEventListener('scroll', this.handleScroll)
+    },
+    /**
+     * @description to handle the complete state for the gauge
+     */
+
+    handleScroll(event) {
+      event
+      /*
+       * DocumentElement properties does not alway work properly on all Browser.
+       * To Ensure reliable value of its properties on all.
+       * Browser we will calculate the Document Height by taking the maximum of
+       * body and documentElement height poperties.
+       * ref:https://javascript.info/size-and-scroll-window
+       */
+
+      let scrollHeight = null
+      let clientHeight = null
+      let scrollTop = null
+      scrollHeight = Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.offsetHeight,
+        document.body.clientHeight,
+        document.documentElement.clientHeight
+      )
+      clientHeight = document.documentElement.clientHeight
+      scrollTop = window.scrollY
+
+      // //Set scroll limit reached at 150px above the document height.
+      let scrollLimit = scrollHeight - 150
+      let fullyScrolled = Math.round(clientHeight + scrollTop)
+
+      //consider page completed when scolled value has reached or passed set limit
+      if (fullyScrolled >= scrollLimit && this.state !== 'completed') {
+        this.completePage()
+      }
+    },
+    /**
+     * @description set the state of the page to complete
+     * @fires send-xapi-statement to AppBaseModule.vue
+     */
+    completePage() {
+      if (
+        ['pg_menu', 'pg_branch'].includes(this.type) ||
+        this.state == 'completed' ||
+        this.isBranchingPage
+      )
+        return
+
+      this.state = 'completed'
+      this.userInteraction.state = this.state
+    },
 
-  beforeDestroy() {
-    this.pageData = null
+    /**
+     * @description set the state of the branching page to complete
+     * @fires send-xapi-statement to AppBaseModule.vue
+     */
+    completePageBranching() {
+      //Get the current branching from the  store
+      const currentBranching = this.getCurrentBranching
+      if (!currentBranching || currentBranching.id !== this.$route.meta.id)
+        return
+      if (currentBranching.state === 'completed') return
+
+      const children = this.$route.meta.children
+      let count = 0
+      children.forEach((c) => {
+        let progress = this.getProgress(c._ref)
+
+        if (progress.state == 'completed') count += 1
+      })
+
+      if (count !== children.length) return
+
+      currentBranching.state = 'completed' //set the state of the page to completed
+      currentBranching.userInteraction.state = currentBranching.state // update the useInteraction state
+    },
+    /**
+     * @description Get the user progress for the current page
+     * @param {string} id (Otpional) - the id of the targeted page
+     * @return {Oject} - the existing user data for the current page
+     */
+    getProgress(id) {
+      id = id || this.pageData.id
+
+      const record = this.getPageInteraction(this.pageData.activityRef, id)
+
+      if (Object.entries(record).length) {
+        const { userInteraction } = record
+        return userInteraction
+      }
+      return {}
+    },
+
+    anchorProgress() {
+      const anchors = document.querySelectorAll('.anchor') // look for anchor
+      const options = {
+        root: null,
+        threshold: 0
+      }
+
+      let anchorsComplete
+      let indexStrt
+      let anchorString
+      let indexEnd
+      let anchorComplete
+
+      let target = document.querySelector('#App-base')
+      // get anchor already seen
+      anchorsComplete = this.getAnchorComplete()
+
+      const observer = new IntersectionObserver((entries) => {
+        // everytime the page passes a anchor
+        observer.observe(target)
+
+        entries.forEach((entry) => {
+          // when it's visable in the page
+
+          if (entry.isIntersecting) {
+            // get the target
+
+            this.anchorInfo = entry.target.classList
+            indexStrt = this.anchorInfo.value.indexOf('anchor-')
+            // work the string to get juste the anchor tag
+            // must be the same as the class
+            if (indexStrt == -1) {
+              return
+            }
+
+            anchorString = this.anchorInfo.value.substring(indexStrt)
+
+            indexEnd = anchorString.indexOf(' ')
+            if (indexEnd != -1) {
+              anchorComplete = anchorString.slice(0, indexEnd)
+            } else {
+              anchorComplete = anchorString
+            }
+
+            //get all the anchors of the current activity
+            const anchors_list = this.getAnchorsForActivity(
+              this.pageData.activityRef
+            )
+
+            //search for the current ancor
+            const anc = anchors_list.find((a) => a.anchorTag === anchorComplete)
+            //dispatch the  current anchor to the store
+            if (anc) {
+              // update the store value for current section
+              // this.updateCurrentSection(anc)
+              // Ask bread scrumb to update its information
+
+              this.$bus.$emit('anchor-seen', anchorComplete)
+            } else {
+              if (import.meta.env.DEV)
+                console.warn(
+                  `%c WARNING!>>> Anchor handeling: 👉${anchorComplete}👈 doesn't exist. Please provide a valid anchor.`,
+                  'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                )
+
+              return
+            }
+
+            // if you didn't aldreay seen anchors
+            if (anchorsComplete != undefined) {
+              // look if you already saw this anchor
+              if (anc && !anchorsComplete.includes(anchorComplete)) {
+                // push it in the array them in the store
+                anchorsComplete.push(anchorComplete)
+                this.$set(this.userInteraction, 'anchors', anchorsComplete)
+              }
+            } else {
+              // if you never saw any anchor
+              // push it in the array them in the store
+              anchorsComplete = []
+              if (anc) anchorsComplete.push(anchorComplete)
+              this.$set(this.userInteraction, 'anchors', anchorsComplete)
+            }
+          }
+        })
+      }, options)
+
+      // observer call llok for each anchor in page
+      anchors.forEach((anchor) => {
+        observer.observe(anchor)
+      })
+    },
+    getAnchorComplete() {
+      const records = this.getPageInteraction(
+        this.pageData.activityRef,
+        this.pageData.id
+      )
+
+      // Verify if the element existe
+      if (
+        records &&
+        records.userInteraction &&
+        records.userInteraction.anchors
+      ) {
+        // if you already saw anchors return them
+
+        return records.userInteraction.anchors
+      }
+    },
+    showChoiceBif(data) {
+      // check if you made a choice
+      if (
+        typeof this.getBifChoice === 'undefined' ||
+        Object.keys(this.getBifChoice).length === 0
+      ) {
+        return data['A']
+      } else {
+        if (this.getBifChoice.choix) {
+          // get the choise from store
+          if (data.hasOwnProperty(this.getBifChoice.choix)) {
+            let choice = data[this.getBifChoice.choix]
+            //return choice
+            return choice
+          }
+        }
+      }
+    },
+    openPopup(data) {
+      this.$bus.$emit('open-popup', data)
+    },
+    /**
+     * @description Send to the bd that the media have been view by the user- Add the id of the media to the
+     * userInteraction of the page
+     */
+    setMediaViewed(mediaID) {
+      // Should get the userData to check if current mediaElement has entry
+      let { mediasViewed } = this.userInteraction
+
+      // Should create entry for medias viewed in userInteraction if none
+      if (!mediasViewed) {
+        mediasViewed = []
+
+        this.userInteraction.mediasViewed = mediasViewed
+      }
+
+      //Should add ID in media viewed list if viewed for the 1st time
+      if (mediasViewed.includes(mediaID)) return
+
+      mediasViewed.push(mediaID)
+
+      this.userInteraction.mediasViewed = mediasViewed //Update the userInteraction data of the page
+    }, //
+
+    /**
+     * @description - Method to manage the playing state of media element in the page.
+     *                Only one media should play at a time. When receives signal of new media playing
+     *                get the reference of the previous media in play from the store and
+     *                put it in stop state. Also closes the transcript sidebar if it is open.
+     * @param {HTMLElement} media - the actual media that is playing
+     */
+    managePlayingMedia(media) {
+      if (!media) return
+      //Should get all the media of the page from store
+      const { mElements } = this.getCurrentPage
+      if (!mElements || !mElements.length) return
+
+      // // Should stop any media playing
+      mElements.forEach((m) => {
+        if (m.id == media.id) return
+
+        const attrKeys = Object.keys(m) //
+        const playbarInstance = m[attrKeys[3]]
+        const HTMLmediaElement = m[attrKeys[1]]
+
+        //Close the transcript sidebar if it is open
+        if (playbarInstance.transcriptEnabled) {
+          playbarInstance.toggleViewTranscript()
+        }
+        //Check if the media is playing to stop it. Playing state is given by the instance of the target play-bar
+        if (playbarInstance.isPlaying) {
+          HTMLmediaElement.pause() // target the HTMLmediaElement to control it state
+          playbarInstance.isPlaying = false //change this isPlaying value of the instance
+
+          playbarInstance.timer.pause() // pause the timer of the instance
+        }
+      })
+    },
+    /**
+     * @description - Method to manage the state of the transcript and fullscreen buttons.
+     *                Disables those buttons on other media playbar when a transcript sidebar is open.
+     *
+     * @param {HTMLElement} media - the actual media that is playing
+     * @param {Boolean} transcriptShown - current status of the transcript sidebar
+     */
+    onVideoTranscriptToggle(media, transcriptShown) {
+      if (!media) return
+      //Should get all the media of the page from store
+      const { mElements } = this.getCurrentPage
+      if (!mElements || !mElements.length) return
+      mElements.forEach((m) => {
+        if (m.id == media.id) return
+        const attrKeys = Object.keys(m)
+        const playbarInstance = m[attrKeys[3]]
+        playbarInstance.otherVideoTranscriptShown = transcriptShown
+      })
+    },
+    setInitialInteraction() {
+      const { activityRef, id: pageID } = this.pageData
+      const { userInteraction: previousInteraction = {} } =
+        this.getPageInteraction(activityRef, pageID)
+
+      return previousInteraction
+    },
+    saveQuizAnswers(el, quiz) {
+      if (!this.userInteraction.quizAnswers)
+        return (this.userInteraction.quizAnswers = { ...quiz })
+      const quizID = Object.keys(quiz)[0]
+
+      if (!this.userInteraction.quizAnswers[quizID])
+        return (this.userInteraction.quizAnswers = {
+          ...this.userInteraction.quizAnswers,
+          ...quiz
+        })
+      const quizValue = Object.values(quiz)[0]
+      this.userInteraction.quizAnswers[quizID] = quizValue
+      // const {}
+    }
   }
 }
 </script>
@@ -305,8 +828,39 @@ export default {
   }
 }
 
-.overlay-close-widget {
-  width: 100%;
-  height: 100%;
+.debug-pageInfo{
+  position: fixed;
+  right: -250px;
+  bottom: 20px;
+  
+  color: #333;  
+  background-color: rgba(#eaabb6b3, 0.9);
+
+  display:flex;
+  flex-direction: row;
+
+  &.open{
+    right: 0;
+  }
+  
+  .w-btn{
+    padding: 10px;
+    height: 100%;
+    cursor: pointer;
+    background: rgba(#fff, 0.05);
+    
+    &:hover{
+      background: rgba(#fff, 0.1  );
+    }
+  }
+
+  .ctn{
+    padding: 24px;
+    width: 250px;
+
+    ul{
+      margin-left: 15px;
+    }
+  }
 }
 </style>