All files / src Navigation.vue

100% Statements 22/22
75% Branches 9/12
100% Functions 8/8
100% Lines 13/13
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 933x     3x     3x     5x                                             10x     7x         2x 1x   1x           3x 3x 10x 3x                                                                                
<template>
  <div class="VueCarousel-navigation">
    <a href="#"
      class="VueCarousel-navigation-button VueCarousel-navigation-prev"
      v-on:click.prevent="triggerPageAdvance('backward')"
      v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceBackward }"
      v-bind:style="`padding: ${clickTargetSize}px; margin-right: -${clickTargetSize}px;`"
      v-html="prevLabel"></a>
    <a href="#"
      class="VueCarousel-navigation-button VueCarousel-navigation-next"
      v-on:click.prevent="triggerPageAdvance()"
      v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceForward }"
      v-bind:style="`padding: ${clickTargetSize}px; margin-left: -${clickTargetSize}px;`"
      v-html="nextLabel"></a>
  </div>
</template>
 
<script>
  export default {
    name: "navigation",
    data() {
      return {
        parentContainer: this.$parent,
      }
    },
    props: {
      /**
       * Amount of padding to apply around the label in pixels
       */
      clickTargetSize: {
        type: Number,
        default: 8
      },
      /**
       * Text content of the navigation next button
       */
      nextLabel: {
        type: String,
        default: "▶"
      },
      /**
       * Text content of the navigation prev button
       */
      prevLabel: {
        type: String,
        default: "◀"
      },
    },
    computed: {
E      canAdvanceForward() {
        return this.parentContainer.canAdvanceForward || false
      },
      canAdvanceBackward() {
        return this.parentContainer.canAdvanceBackward || false
      },
    },
    methods: {
      triggerPageAdvance(direction) {
        if (direction) {
          this.$parent.advancePage(direction)
        } else {
          this.$parent.advancePage()
        }
      },
    },
  }
</script>
 
<style scoped>
  .VueCarousel-navigation-button {
    position: absolute;
    top: 50%;
    box-sizing: border-box;
    color: #000;
    text-decoration: none;
  }
 
  .VueCarousel-navigation-next {
    right: 0;
    transform: translateY(-50%) translateX(100%)
  }
 
  .VueCarousel-navigation-prev {
    left: 0;
    transform: translateY(-50%) translateX(-100%)
  }
 
  .VueCarousel-navigation--disabled {
    opacity: 0.5;
    cursor: default;
  }
</style>