@ecored-sena/base-kit 0.0.1

package/plugin/components/plantilla/BarraAvance.vue

@@ -0,0 +1,379 @@
+<template lang="pug">
+.barra-avance(:class="[showBarra ? 'barra-avance--open' : 'barra-avance--close']")
+
+  router-link.boton.barra-avance__boton--regresar(
+    :class="[!controlLinks.back.name && 'barra-avance__boton--disable']"
+    :to="{name: controlLinks.back.name, hash: controlLinks.back.hash ? `#${controlLinks.back.hash}` : ''}"
+  )
+    i.me-2(class="fas fa-angle-left")
+    span Regresar
+  
+  //- .barra-avance__barra
+  //-   .barra-avance__barra--blanca
+  //-   .barra-avance__barra--amarilla
+
+  router-link.boton(
+    :class="[!controlLinks.next.name && 'barra-avance__boton--disable']"
+    :to="{name: controlLinks.next.name, hash: controlLinks.next.hash ? `#${controlLinks.next.hash}` : ''}"
+  )
+    span.me-2 Continuar
+    i(class="fas fa-angle-right")
+
+</template>
+
+<script>
+export default {
+  name: 'BarraAvance',
+  data: () => ({
+    cursoSelection: null,
+    idSelecctionArr: [],
+  }),
+  computed: {
+    menuData() {
+      return this.$config.menuPrincipal.menu
+    },
+    showBarra() {
+      const enIntro = this.$route.fullPath.includes('/introduccion')
+      const enCurso = this.$route.fullPath.includes('/curso')
+      const haveControls =
+        (this.controlLinks.next && this.controlLinks.next.name) ||
+        (this.controlLinks.back && this.controlLinks.back.name)
+      return !this.menuOpen && (enIntro || enCurso) && haveControls
+    },
+    // controlLinks() {
+    //   const menuObject = this.menuData.find(
+    //     item => item.nombreRuta === this.$route.name,
+    //   )
+    //   if (this.$route.name === 'introduccion') {
+    //     // SI ESTOY EN INTRODUCCION
+    //     const tema1 = this.menuData.find(item => item.nombreRuta === 'tema1')
+    //     return {
+    //       next: {
+    //         name: tema1.nombreRuta,
+    //         hash: '',
+    //       },
+    //       back: {
+    //         name: '',
+    //         hash: '',
+    //       },
+    //     }
+    //   } else if (!menuObject) {
+    //     // SI NO ESTOY EN UN TEMA O SI NO HAY SUBTEMAS --ERROR FALLBACK
+    //     return {
+    //       next: {
+    //         name: '',
+    //         hash: '',
+    //       },
+    //       back: {
+    //         name: '',
+    //         hash: '',
+    //       },
+    //     }
+    //   } else {
+    //     // SI ESTOY EN UN TEMA
+
+    //     let routeObj = {}
+    //     const idxOfMenuItem = this.menuData
+    //       .map(item => item.nombreRuta)
+    //       .indexOf(this.$route.name)
+
+    //     if (menuObject.subMenu) {
+    //       // MENU ITEM TIENE SUBMENU
+    //       const idxCurrentHash = menuObject.subMenu
+    //         .map(item => item.hash)
+    //         .indexOf(this.$route.hash.replace('#', ''))
+
+    //       // back logic
+    //       if (idxCurrentHash <= 0) {
+    //         // SI NO HAY SELECCIONADO UN HASH O ESTA SELECCIONADO EL PRIMERO
+    //         const backMenuItem = this.menuData[idxOfMenuItem - 1]
+
+    //         const backIsTheme =
+    //           backMenuItem && backMenuItem.nombreRuta.includes('tema')
+    //         const backIsIntro =
+    //           backMenuItem && backMenuItem.nombreRuta.includes('introduccion')
+
+    //         if (backIsTheme || backIsIntro) {
+    //           // si el anterior objeto es un tema o introduccion
+    //           routeObj.back = {
+    //             name: backMenuItem.nombreRuta,
+    //             hash: '',
+    //           }
+    //         } else {
+    //           // si el objeto anterior no es tema o introduccion
+    //           routeObj.back = {
+    //             name: '',
+    //             hash: '',
+    //           }
+    //         }
+    //       } else if (idxCurrentHash === menuObject.subMenu.length - 1) {
+    //         // SI EL ULTIMO HASH ESTA SELECCIONADO
+    //         const backHash = menuObject.subMenu[idxCurrentHash - 1].hash
+
+    //         routeObj.back = {
+    //           name: this.$route.name,
+    //           hash: backHash,
+    //         }
+    //       } else {
+    //         // SI ESTOY ENMEDIO DE LOS HASH
+    //         routeObj.back = {
+    //           name: this.$route.name,
+    //           hash: menuObject.subMenu[idxCurrentHash - 1].hash,
+    //         }
+    //       }
+
+    //       // Next Logic
+    //       if (idxCurrentHash === menuObject.subMenu.length - 1) {
+    //         // es el ultimo hash seleccionado
+    //         const nextMenuItem = this.menuData[idxOfMenuItem + 1]
+
+    //         const nextIsTheme =
+    //           nextMenuItem && nextMenuItem.nombreRuta.includes('tema')
+
+    //         if (nextIsTheme) {
+    //           // el siguiente objeto del menu es tema
+    //           routeObj.next = {
+    //             name: nextMenuItem.nombreRuta,
+    //             hash: '',
+    //           }
+    //         } else {
+    //           // si es el ultimo tema
+    //           routeObj.next = {
+    //             name: '',
+    //             hash: '',
+    //           }
+    //         }
+    //       } else {
+    //         // no estoy en el ultimo hash
+    //         const nextSubMenuItem = menuObject.subMenu[idxCurrentHash + 1]
+    //         const nextHash = nextSubMenuItem.hash
+    //         routeObj.next = {
+    //           name: this.$route.name,
+    //           hash: nextHash,
+    //         }
+    //       }
+    //     } else {
+    //       // MENU ITEM NO TIENE SUBMENU
+
+    //       // Back logic
+    //       const backMenuItem = this.menuData[idxOfMenuItem - 1]
+
+    //       const backIsTheme =
+    //         backMenuItem && backMenuItem.nombreRuta.includes('tema')
+    //       const backIsIntro =
+    //         backMenuItem && backMenuItem.nombreRuta.includes('introduccion')
+
+    //       if (backIsTheme || backIsIntro) {
+    //         // si el anterior objeto es un tema o introduccion
+    //         routeObj.back = {
+    //           name: backMenuItem.nombreRuta,
+    //           hash: '',
+    //         }
+    //       } else {
+    //         // si el objeto anterior no es tema o introduccion
+    //         routeObj.back = {
+    //           name: '',
+    //           hash: '',
+    //         }
+    //       }
+
+    //       // Next logic
+    //       const nextMenuItem = this.menuData[idxOfMenuItem + 1]
+
+    //       const nextIsTheme =
+    //         nextMenuItem && nextMenuItem.nombreRuta.includes('tema')
+
+    //       if (nextIsTheme) {
+    //         // el siguiente objeto del menu es tema
+    //         routeObj.next = {
+    //           name: nextMenuItem.nombreRuta,
+    //           hash: '',
+    //         }
+    //       } else {
+    //         // si es el ultimo tema
+    //         routeObj.next = {
+    //           name: '',
+    //           hash: '',
+    //         }
+    //       }
+    //     }
+    //     return routeObj
+    //   }
+    // },
+    controlLinks() {
+      const menuObject = this.menuData.find(
+        item => item.nombreRuta === this.$route.name,
+      )
+      if (this.$route.name === 'introduccion') {
+        // SI ESTOY EN INTRODUCCION
+        const tema1 = this.menuData.find(item => item.nombreRuta === 'tema1')
+        return {
+          next: {
+            name: tema1.nombreRuta,
+            hash: '',
+          },
+          back: {
+            name: '',
+            hash: '',
+          },
+        }
+      } else if (!menuObject) {
+        // SI NO ESTOY EN UN TEMA O SI NO HAY SUBTEMAS --ERROR FALLBACK
+        return {
+          next: {
+            name: '',
+            hash: '',
+          },
+          back: {
+            name: '',
+            hash: '',
+          },
+        }
+      } else {
+        let routeObj = {}
+        const idxOfMenuItem = this.menuData
+          .map(item => item.nombreRuta)
+          .indexOf(this.$route.name)
+
+        // Back logic
+        const backMenuItem = this.menuData[idxOfMenuItem - 1]
+
+        const backIsTheme =
+          backMenuItem && backMenuItem.nombreRuta.includes('tema')
+        const backIsIntro =
+          backMenuItem && backMenuItem.nombreRuta.includes('introduccion')
+
+        if (backIsTheme || backIsIntro) {
+          // si el anterior objeto es un tema o introduccion
+          routeObj.back = {
+            name: backMenuItem.nombreRuta,
+            hash: '',
+          }
+        } else {
+          // si el objeto anterior no es tema o introduccion
+          routeObj.back = {
+            name: '',
+            hash: '',
+          }
+        }
+
+        // Next logic
+        const nextMenuItem = this.menuData[idxOfMenuItem + 1]
+
+        const nextIsTheme =
+          nextMenuItem && nextMenuItem.nombreRuta.includes('tema')
+
+        if (nextIsTheme) {
+          // el siguiente objeto del menu es tema
+          routeObj.next = {
+            name: nextMenuItem.nombreRuta,
+            hash: '',
+          }
+        } else {
+          // si es el ultimo tema
+          routeObj.next = {
+            name: '',
+            hash: '',
+          }
+        }
+        return routeObj
+      }
+    },
+    menuOpen() {
+      return this.$store.getters.isMenuOpen
+    },
+  },
+  // created() {
+  //   document.addEventListener('scroll', this.trackIds)
+  // },
+  // mounted() {
+  //   this.cursoSelection = document.querySelector('#curso')
+  //   const subMenuSelected = this.menuData.find(
+  //     item => item.nombreRuta === this.$route.name,
+  //   ).subMenu
+  //   this.idSelecctionArr = subMenuSelected
+  //     ? subMenuSelected.map(item => document.querySelector(`#${item.hash}`))
+  //     : []
+  // },
+  // methods: {
+  //   trackIds() {
+  //     if (!this.idSelecctionArr.length) return
+  //     this.idSelecctionArr.forEach(item => {
+  //       console.log(item.scrollTop)
+  //     })
+  //     const mao = document.querySelector('#t_1_5')
+  //     console.log(this.cursoSelection.clientHeight)
+  //     console.log(window.innerHeight, window.scrollY, mao.offsetTop)
+  //   },
+  // },
+}
+</script>
+
+<style lang="sass">
+.barra-avance
+  display: flex
+  align-items: center
+  justify-content: space-between
+  position: fixed
+  bottom: 0
+  left: 0
+  width: 100%
+  padding: 10px
+  background-color: $color-sistema-e
+  transition: transform 0.5s ease-in-out
+  z-index: 100000
+
+  &__barra
+    margin: 0 20px
+    flex: 1
+    position: relative
+    max-width: 800px
+
+    &--blanca, &--amarilla
+      height: 4px
+
+      &:before, &:after
+        content: ''
+        display: block
+        width: 10px
+        height: 10px
+        border-radius: 50%
+        position: absolute
+        top: 50%
+
+      &:before
+        left: 0
+        transform: translate(-50%,-50%)
+
+      &:after
+        right: 0
+        transform: translate(50%,-50%)
+
+    &--blanca
+      background-color: $white
+      &:before, &:after
+        background-color: $white
+
+    &--amarilla
+      position: absolute
+      width: 100%
+      top: 0
+      background-color: $color-acento-botones
+      &:before, &:after
+        background-color: $color-acento-botones
+
+  &__boton
+    &--regresar
+      background-color: $color-sistema-c
+      span
+        color: $color-sistema-a !important
+    &--disable
+      opacity: 0
+      pointer-events: none
+
+  &--open
+    transform: translateY(0)
+
+  &--close
+    transform: translateY(100%)
+</style>

package/plugin/components/plantilla/Curso.vue

@@ -0,0 +1,12 @@
+<template lang="pug">
+#curso.curso
+  router-view
+</template>
+
+<script>
+export default {
+  name: 'Curso',
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/plantilla/Footer.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+footer.container.footer.tarjeta.p-3.px-sm-5.py-sm-4(:class="[allRound && 'footer__all-round']")
+  .row.align-items-center.justify-content-center
+    .col-auto.mb-2.mb-sm-0
+      img(src="@/assets/bullets/cc.svg")
+    .col-12.col-sm
+      p.mb-2.text-small Este material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial y las obras derivadas tienen que estar bajo los mismos términos de la licencia que el trabajo original.
+      p.mb-0.text-small  Base v{{versiones.base}} - Paquete v{{versiones.pkg}}
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    allRound: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    versiones() {
+      return {
+        base: this.$package.version,
+        pkg: this.$package.dependencies['ecored-base-pkg'],
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.footer
+  background-color: $color-sistema-d
+  border-bottom-right-radius: 0 !important
+  border-bottom-left-radius:  0 !important
+  &__all-round
+    border-bottom-right-radius: 20px !important
+    border-bottom-left-radius:  20px !important
+  p
+    color: $color-sistema-b
+    line-height: 1.2em
+</style>

package/plugin/components/plantilla/Header.vue

@@ -0,0 +1,152 @@
+<template lang="pug">
+header.header.container-fluid
+  .row.align-items-center.justify-content-between
+    .col.col-sm-auto.d-flex.align-items-center.justify-content-between.justify-content-sm-start
+      
+      .header__menu.me-4.me-sm-5(v-if="$route.name != 'inicio'" @click="toggleMenu")
+        .header__menu__btn(:class="{'header__menu__btn--open': menuOpen}")
+          .line-2
+          .line-1
+          .line-3
+        span MENÚ
+
+      img.header__logo.me-4.me-sm-5(src="@/assets/logos/logo-sena.svg")
+
+      .d-none.d-md-flex.align-items-center(v-if="isInicio")
+        a(href="#contenidos").me-5 Contenidos
+
+      .header__componente-formativo(v-else)
+        span(v-html="globalData.Name")
+
+    .col-auto(v-if="isInicio")
+      router-link.boton(:to="{name: iniciarLnk.nombreRuta }")
+        span.me-1 Ver contenido
+        i(class="fas fa-angle-right")
+
+</template>
+
+<script>
+import plantillaMixins from '../plantillaMixins'
+export default {
+  name: 'Header',
+  mixins: [plantillaMixins],
+  computed: {
+    globalData() {
+      return this.$config && this.$config.global
+    },
+    isInicio() {
+      return this.$route.name === 'inicio'
+    },
+    menuOpen() {
+      return this.$store.getters.isMenuOpen
+    },
+  },
+  methods: {
+    toggleMenu() {
+      this.$store.dispatch('toggleMenu', !this.menuOpen)
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.header
+  position: sticky
+  top: 0
+  padding-top: 10px
+  padding-bottom: 10px
+  background-color: $white
+  z-index: 10010
+  line-height: 1.1em
+  &__logo
+    width: 50px
+  &__componente-formativo
+    @media (max-width: $bp-max-xs)
+      font-size: 0.8em
+
+
+.header__menu
+  cursor: pointer
+  span
+    font-size: 0.7em
+    display: block
+    line-height: 1em
+    text-align: center
+    color: $color-sistema-a
+  &__btn
+    width: 30px
+    height: 30px
+    position: relative
+    margin-bottom: 4px
+    .line-1,.line-2,.line-3
+      height: 4px
+      width: 30px
+      background-color: $color-sistema-a
+      transform-origin: center center
+      position: absolute
+      left: 0
+      border-radius: 2px
+    .line-1
+      top: 4px
+      animation: line-1-inactive 0.5s ease-in-out forwards
+    .line-2
+      top: 13px
+      animation: line-2-inactive 0.5s ease-in-out forwards
+    .line-3
+      top: 22px
+      animation: line-3-inactive 0.5s ease-in-out forwards
+    &:hover
+      cursor: pointer
+
+    &--open
+      .line-1
+        animation: line-1-active 0.5s ease-in-out forwards
+      .line-2
+        animation: line-2-active 0.5s ease-in-out forwards
+      .line-3
+        animation: line-3-active 0.5s ease-in-out forwards
+
+@keyframes line-1-active
+  0%
+    transform: translate(0, 0) rotate(0)
+  50%
+    transform: translate(0, 9px) rotate(0)
+  100%
+    transform: translate(0, 9px) rotate(45deg)
+
+@keyframes line-2-active
+  0%
+    transform: scale(1)
+  100%
+    transform: scale(0)
+
+@keyframes line-3-active
+  0%
+    transform: translate(0, 0) rotate(0)
+  50%
+    transform: translate(0, -9px) rotate(0)
+  100%
+    transform: translate(0, -9px) rotate(-45deg)
+
+@keyframes line-1-inactive
+  0%
+    transform: translate(0, 9px) rotate(45deg)
+  50%
+    transform: translate(0, 9px) rotate(0)
+  100%
+    transform: translate(0, 0) rotate(0)
+
+@keyframes line-2-inactive
+  0%
+    transform: scale(0)
+  100%
+    transform: scale(1)
+
+@keyframes line-3-inactive
+  0%
+    transform: translate(0, -9px) rotate(-45deg)
+  50%
+    transform: translate(0, -9px) rotate(0)
+  100%
+    transform: translate(0, 0) rotate(0)
+</style>

package/plugin/components/plantilla/ScrollHorizontal.vue

@@ -0,0 +1,105 @@
+<template lang="pug">
+.horizontal-scroll__wrapper(ref="hContainer")
+  .horizontal-scroll(
+    :class="[{'horizontal-scroll--item-fw':itemFullWidth},{'row':row}]"
+    :style="[{transform: `translate(${scrollVal}px,0px)`}]"
+  )
+    slot
+</template>
+
+<script>
+export default {
+  name: 'ScrollHorizontal',
+  props: {
+    selectedId: {
+      type: String,
+      default: '',
+    },
+    itemFullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    row: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      scrollVal: 0,
+      ids: [],
+    }
+  },
+  watch: {
+    selectedId(newVal) {
+      if (newVal.length) {
+        this.scroll()
+      }
+    },
+  },
+  mounted() {
+    this.getCords()
+    this.scroll()
+    window.addEventListener('resize', this.scroll)
+  },
+  updated() {
+    this.getCords()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.scroll)
+  },
+  methods: {
+    scroll() {
+      const selectedElementId = this.ids.find(
+        item => item.id === this.selectedId,
+      )?.id
+      const selectedElement = document.getElementById(selectedElementId)
+      if (
+        !Object.keys(this.$slots.default).length ||
+        !this.selectedId.length ||
+        selectedElement === null
+      )
+        return
+      const container = this.$refs.hContainer
+      const scrollContentTotalWidth =
+        selectedElement.offsetWidth * this.ids.length
+      let newScrollVal = selectedElement.offsetLeft
+      const elementsFitInContainer =
+        container.offsetWidth / selectedElement.offsetWidth
+      if (
+        elementsFitInContainer > 1 &&
+        scrollContentTotalWidth - newScrollVal < container.offsetWidth
+      ) {
+        newScrollVal = scrollContentTotalWidth - container.offsetWidth
+      }
+      this.scrollVal = this.ids.length === 1 ? 0 : -newScrollVal
+    },
+    getCords() {
+      if (this.$slots.default) {
+        this.ids = this.$slots.default.map(element => ({
+          id: element.elm.id,
+          key: element.key,
+        }))
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.horizontal-scroll__wrapper
+  overflow: hidden
+.horizontal-scroll
+  display: flex
+  transition: transform 0.5s ease-in-out
+  align-items: center
+  flex-wrap: nowrap
+  &:not(.row)
+    width: 100%
+  &--item-fw
+    & ::v-deep > div
+      flex-grow: 0
+      flex-shrink: 0
+      width: 100%
+      margin: 0 !important
+</style>