tabbit

Thu Nov 01 2018
Copied to clipboard! Copy reply
<template>
    <main>
        
        <div class="actions">
          <a href="" 
            class="reply"
            title="ctrl + r"
            @click.prevent='changeMode("edit")'
            v-if="$store.state.mode == 'view'"
            >reply</a>
        </div>

        <!-- simply for Lighthouse scrore =D -->
        <label for="textarea">insert code</label>

        <textarea
          id="textarea"       
          placeholder="paste code. ctrl + s to save"
          @keydown="onKeyDown"
          @input='onInput'
          @paste='onPaste'
          autofocus
          spellcheck="false"
          :value="$store.getters.viewContent">
          </textarea> 
    </main>
</template>

<script>
import axios from 'axios'

import VueHighlightJS from 'vue-highlightjs'
import Tabs from '~/components/Tabs.vue'

export default {
  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)      
    },


    /**
     * 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()
      }      
    },


    onPaste (e)
    {
      this.$nextTick().then( () => {
        this.onInput(e)
      })
    },


    /**
     * When textarea input is changed.
     * We also detect keystrokes for saving (ctrl+s)
     */
    onInput (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 && this.$store.state.entries.length == 1)
      {
        commit('CLEAR_ENTRIES')
      }

      // Adjusting height to prevent two scrollbars.
      let scrollHeight = document.querySelector('body').scrollHeight
      let scrollHeightText = document.querySelector('textarea').scrollHeight
      let offsetHeight = document.querySelector('body').offsetHeight        
      if (scrollHeight >  offsetHeight)
      {
        document.querySelector('textarea').style.height = `${scrollHeightText}px`
      }      
    },


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

      // Remove entries where content is blank
      let entries = this.$store.state.entries
      let paste = entries.filter(entry => !!entry.content.trim())
              
      this.$store.commit('SET_MODE', 'view');     
      
      let data = {
        paste,
        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');     
      }
    }    

  },


   
}

</script>


<style lang="stylus">
  @require '~assets/variables'
  
  // When we hit 'reply' and mode changes from view to edit,
  // a scrollbar appears and we get the body's scrollbar and 
  // .content's. This prevents double scrollbars
  label
    display block
    background red
    height 0
    width 0
    overflow hidden

  main
    flex-direction column
    flex-grow 1
    height 100%
    

  textarea
    outline none
    box-sizing border-box
    line-height 20px    
    white-space nowrap
    border 0
    color #555
    display flex
    width 100%
    height 100%
    background transparent
    padding 0!important
    
    font-size 13px
    overflow hidden
    font-family inherit 
     
  
  .actions
    position fixed
    bottom 10px    
    width 100%
    right 10px
    text-align right
    a
      display inline-block
      background alpha(black, 10%)
      width 50px
      height 50px
      border-radius 100px
      font-size 80%
      text-decoration none
      text-align center
      line-height 50px
      color $blue
      margin-left 10px
  
   ::-webkit-input-placeholder
    text-align center
    padding-top 2.4em
    
    color rgba(0, 0, 0, 0.1)
    font normal 700 4em 'Inconsolata', monospace;
  
</style>

<template>
    <main>
        
        <div class="actions">
          <a href="" 
            class="reply"
            title="ctrl + r"
            @click.prevent='changeMode("edit")'
            v-if="$store.state.mode == 'view'"
            >reply</a>
        </div>

        <!-- simply for Lighthouse scrore =D -->
        <label for="textarea">insert code</label>

        <textarea
          id="textarea"       
          placeholder="paste code. ctrl + s to save"
          @keydown="onKeyDown"
          @input='onInput'
          @paste='onPaste'
          autofocus
          spellcheck="false"
          :value="$store.getters.viewContent">
          </textarea> 
    </main>
</template>

<script>
import axios from 'axios'

import VueHighlightJS from 'vue-highlightjs'
import Tabs from '~/components/Tabs.vue'

export default {
  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)      
    },


    /**
     * 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()
      }      
    },


    onPaste (e)
    {
      this.$nextTick().then( () => {
        this.onInput(e)
      })
    },


    /**
     * When textarea input is changed.
     * We also detect keystrokes for saving (ctrl+s)
     */
    onInput (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 && this.$store.state.entries.length == 1)
      {
        commit('CLEAR_ENTRIES')
      }

      // Adjusting height to prevent two scrollbars.
      let scrollHeight = document.querySelector('body').scrollHeight
      let scrollHeightText = document.querySelector('textarea').scrollHeight
      let offsetHeight = document.querySelector('body').offsetHeight        
      if (scrollHeight >  offsetHeight)
      {
        document.querySelector('textarea').style.height = `${scrollHeightText}px`
      }      
    },


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

      // Remove entries where content is blank
      let entries = this.$store.state.entries
      let paste = entries.filter(entry => !!entry.content.trim())
              
      this.$store.commit('SET_MODE', 'view');     
      
      let data = {
        paste,
        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');     
      }
    }    

  },


   
}

</script>


<style lang="stylus">
  @require '~assets/variables'
  
  // When we hit 'reply' and mode changes from view to edit,
  // a scrollbar appears and we get the body's scrollbar and 
  // .content's. This prevents double scrollbars
  label
    display block
    background red
    height 0
    width 0
    overflow hidden

  main
    flex-direction column
    flex-grow 1
    height 100%
    

  textarea
    outline none
    box-sizing border-box
    line-height 20px    
    white-space nowrap
    border 0
    color #555
    display flex
    width 100%
    height 100%
    background transparent
    padding 0!important
    
    font-size 13px
    overflow hidden
    font-family inherit 
     
  
  .actions
    position fixed
    bottom 10px    
    width 100%
    right 10px
    text-align right
    a
      display inline-block
      background alpha(black, 10%)
      width 50px
      height 50px
      border-radius 100px
      font-size 80%
      text-decoration none
      text-align center
      line-height 50px
      color $blue
      margin-left 10px
  
   ::-webkit-input-placeholder
    text-align center
    padding-top 2.4em
    
    color rgba(0, 0, 0, 0.1)
    font normal 700 4em 'Inconsolata', monospace;
  
</style>