tabbit

Sat Oct 27 2018
Copied to clipboard! Copy reply
<template>
    <main>
        <Tabs />
        
        <div class="contents">
          <ul class="lines">
            <li v-for='i in $store.state.lineCount' :key=i>{{i}}</li>
          </ul>
          <div class="modes">
            <pre id="paste" 
            v-highlightjs="$store.state.entries[$store.state.activeEntry].content"
              v-if='$store.state.mode == "view"'><code>{{ $store.state.entries[$store.state.activeEntry].content }}</code></pre>
            <textarea
              v-if='$store.state.mode == "edit"'
              placeholder="paste code. ctrl + s to save"
              @keydown="onKeyDown"
              @input='onChange'
              :value="$store.state.content">
              </textarea> 
          </div>
        </div>
        

        
          
    </main>
</template>

<script>
import axios from 'axios'
import Vuex from 'vuex'
import VueHighlightJS from 'vue-highlightjs'
import Tabs from '~/components/Tabs.vue'


export default {
  components: {
    Tabs,
  },

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

    
  beforeMount()
  {
    
    if (this.$store.state.mode == 'view')
    {
      this.populateLines()
      
    }
  },

    methods: {

      /**
       * Changes between 'edit' and 'view' mode.
       * We take the chance to hide/show some nav links
       * based on the mode.
       */
      changeMode (mode)
      {
        this.$store.commit('SET_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})
        }
      },


      /**
       * 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 input is changed.
       * We also detect keystrokes for saving (ctrl+s)
       */
      onChange (e)
      {               
        let commit = this.$store.commit
        let value = e.target.value        
        if (!this.$store.state.entries.length)
        {          
          commit('ADD_ENTRY', { title: 'untitled', content: value })
        }
        else
        {
          commit('SET_ENTRY_CONTENT', {index:this.$store.state.activeEntry, value})
        }
        if (!value.trim() && this.$store.state.entries.length == 1)
        {
          commit('CLEAR_ENTRIES')
        }
        commit('SET_CONTENT', value)
      },


      /**
       * Sends the entries to the server for storing
       */
      async save ()
      { 
        if (!this.$store.state.entries.length)
        {
          return
        }

        this.populateLines()
        this.$store.commit('SET_MODE', 'view');     

        let data = {
          paste: this.$store.state.entries,
          privacy: this.$store.state.privacy
        }
        
        let req = await axios.post('https://us-central1-tabbit-1313.cloudfunctions.net/save',  data)
                
        if (req.data.result)
        {          
          this.$router.push(req.data.id)
        }
        else
        {
          this.$store.commit('SET_MODE', 'edit');     
        }
      },


      /**
       * Determines number of lines and creates an array out of it.
       * ie, [1, 3, 4, ... 58]
       */
      populateLines ()
      {
        let lineCount = this.$store.state.entries[this.$store.state.activeEntry].content.split("\n").length        
        let numArray = []
        for (let i = 1; i <= lineCount; i++)
        {
          numArray.push(i)  
        }
        this.$store.commit('SET_LINE_COUNT', numArray)
        
      },     

    },


   
}
</script>

<style lang="stylus">
    @require '~assets/variables'
    html
    body
    #__nuxt
    #__layout
    #__layout > div
      display flex
      flex-direction column
      flex-grow 1
      height 100%
    main
      flex-direction column
      flex-grow 1
      height 100%
      overflow  auto
    .hljs
      padding 0
      overflow-x inherit
    .contents
      height 100%
      padding-top 3em
      box-sizing border-box
      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
        line-height 20px
        color #777
    .modes
      
      width 100%
      
    pre
    textarea  
      border 0
      width 100%
      height 100%
      font-family monospace
      resize none
      font-size 13px
      flex-direction column
      flex-grow 1
      background transparent
      line-height 20px
      //padding 45px 10px 10px 30px
      box-sizing border-box
      color #555
      outline none
    
    textarea
      display  block
    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
    }
    
</style>