tabbit

Thu Oct 18 2018
Copied to clipboard! Copy reply
<template>
    <main>
        <div class="tabs">
            
            <a href=""
              v-for="(obj,i) in entries"
              
              :contenteditable="mode == 'pre' ? false:true"
              :key=i
              @click.prevent='onTabClick'
              v-html='obj.title'
              @blur='saveTabTitle'
              :class="{active : activeEntry == i}"
              :model='entries[activeEntry].title'
              :data-index=i></a>
            <a 
              href="" 
              class="add"              
              @click.prevent='addEntry'
              v-if='entries.length && mode == "edit"'
              >+</a>
        </div>
        
        <div class="contents">
          <ul class="lines">
            <li v-for='i in lineCount' :key=i>{{i}}</li>
          </ul>
          <div class="modes">
            <pre id="paste" v-if='mode == "view"'><code>{{ content }}</code>        </pre>
            <textarea
              v-if='mode == "edit"'
              placeholder="paste code. ctrl + s to save"
              @keydown="onKeyDown"
              @input='onChange'
              :model="content">        
              </textarea> 
          </div>
        </div>
        

        
          
    </main>
</template>

<script>
import axios from 'axios'
import Vuex from 'vuex'

export default {
    data ()
    {
      return {
        entries: [],
        activeEntry: 0,
        // Since we only have 1 textarea, set this variable
        // to current entries[index].content
        content: '',
        privacy: 'public',
        mode: 'edit',
        lineCount: 0
      }
    },

    methods: {

      changeMode (mode)
      {
        this.mode = mode
        if (mode == 'edit')
        {
          this.$store.commit('toggleLink', {key: 'save', value: false})
        }
        else if (mode == 'view')
        {
          this.$store.commit('toggleLink', {key: 'save', value: true})
          this.$store.commit('toggleLink', {key: 'raw', value: false})
        }
      },

      /**
       * 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.entries[e.target.dataset.index].title =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 = e.target.dataset.index
        let entry = this.entries[index]        
        this.activeEntry = index
        this.content = entry.content
      },


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

        // Make new entry active
        this.activeEntry = this.entries.length -1
        this.content = ''
      },


      /**
       * Detects keys down, so we can save
       * if user presses ctrl + s
       */
      onKeyDown (e)
      {
        if (e.ctrlKey  &&  e.code === "KeyS")
        {          
          // Stop browser's "save" dialog
          e.preventDefault()
          this.save()
        }
      },

      /**
       * When textarea is changed.
       * We also detect keystrokes for saving (ctrl+s)
       */
      onChange (e)
      {               
        
        let value = e.target.value        
        if (!this.entries.length)
        {          
          this.entries.push({ title: 'untitled', content: value })
        }
        else
        {
          this.entries[this.activeEntry].content = value          
        }
        if (!value.trim() && this.entries.length == 1)
        {
          this.entries = []
        }

        this.content = value        

        
      },


      /**
       * Sends the entries to the server for storing
       */
      async save ()
      { 
        if (!this.entries.length)
        {
          return
        }
        let req = await axios.post('/api/save', {
          paste: this.entries,
          privacy: this.privacy
        })        
        window.history.pushState(null, null, req.data.id)
        this.changeMode('view')
        this.$nextTick().then(this.hilight)
        this.populateLines()
      },


      populateLines ()
      {
        let lineCount = this.entries[this.activeEntry].content.split("\n").length
        
        let numArray = []
        for (let i = 1; i <= lineCount; i++)
        {
          numArray.push(i)  
        }
        this.lineCount = numArray
        
      },


      /**
       * Applies highlighting to <code>
       */
      hilight ()
      {
        let code = document.querySelector('code')
        hljs.highlightBlock(code)
      }


    }
}
</script>

<style lang="stylus">
    @import '~assets/variables'
    main
      flex-direction column
      flex-grow 1
      height 100%
      overflow  auto
    .hljs
      padding 0
    .contents
      height 100%
      padding-top 3em
      display flex
    ul.lines
      
      
      //padding-top 52px
      height 100%
      font-size 13px
      width 30px
      font-family monospace
      margin 0
      padding 0
      li
        margin 0
        padding 0
    .modes
      display flex
      width 100%
      
    pre
    textarea  
      display flex
      flex-grow 1
      border 0
      width 100%
      height 100%
      font-family monospace
      resize none
      font-size 13px
      flex-direction column
      flex-grow 1
      background transparent
      outline 1px dotted red
      //padding 45px 10px 10px 30px
      box-sizing border-box
      color #555
    pre
      height auto
      margin 0
    code
      background transparent!important
    
    ::-webkit-input-placeholder {
      text-align: center;
      padding-top: 2.4em;
      font-family: quicksand;
      color: rgba(0, 0, 0, 0.1);
      font: normal 700 4em quicksand
    }
    .tabs    
        //margin-top 50px
        margin-top 7px
        box-sizing border-box
        position fixed
        width 100%    
        a          
          text-decoration none
          color #ccc
          background  lighten(black, 15%)
          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 #000                        
            color $blue
            
            //border-bottom 5px solid $blue

          &.add
            background $blue
            padding 4px 8px
            margin-right 0
</style>