• 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
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106

<template>
    <div class="tabs">            
      <a href=""
        v-for="(obj,i) in $store.state.entries"              
        :contenteditable="$store.state.mode == 'view' ? false:true"
        :key=i
        @click.prevent='onTabClick'
        v-html='obj.title'
        @blur='saveTabTitle'
        :class="{active : $store.state.activeEntry == i}"
        :value='$store.state.entries[$store.state.activeEntry].title'
        :data-index=i></a>
      <a 
        href="" 
        class="add"              
        @click.prevent='addEntry'
        v-if='$store.state.entries.length && $store.state.mode == "edit"'
        >+</a>
  </div>
</template>

<script>
  export default {
    methods: {

        /**
         * Adda an entry to the entries array. Entries must be in format
         * {title: 'a tab title', content: 'paste content}
         */
        addEntry ()
        {
          this.$store.commit('ADD_ENTRY', { title: 'untitled', content: '' })

          // Make new entry active
          console.log('Active: ', this.$store.state.entries.length-1)
          console.log(this.$store.state.entries)
          this.$store.commit('SET_ACTIVE_ENTRY', this.$store.state.entries.length-1)
          //this.$store.commit('SET_CONTENT', '')        
        },


        /**
         * Because the tabs are <a> tags with contenteditable
         * enabled, when we focus out of the tab, we update
         * the title in the model
         */
        saveTabTitle (e)
        {
          this.$store.commit('SET_TAB_TITLE', {
            index: e.target.dataset.index,
            value: e.target.innerText
          })
        },


        /**
         * When we click a tab, we set content of the textarea
         * to that tab's object's content
         */
        onTabClick (e)
        {
          let index = parseInt(e.target.dataset.index)
          this.$store.commit('SET_ACTIVE_ENTRY', index)        
          
          if (this.$store.mode == 'view')
          {
            this.$store.dispatch('populateLines')
          }
        }     
    }
  }
</script>


<style lang="stylus" scoped>
  @require '~assets/variables'

  .tabs    
    margin-top 7px
    box-sizing border-box
    position fixed
    width 100%    
    a          
      text-decoration none
      color #777
      background  lighten(#ccc, 35%)
      border-radius 40px
      padding 5px 20px
      box-sizing border-box    
      display inline-block
      margin-right 10px
      font-size 90%
      outline none
      font-weight bold
      &.active            
        background #cbd7e2
        color $blue
      &.add
        color #fff
        background $blue
        padding 4px 8px
        margin-right 0
        
</style>