• 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
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179
• 180
• 181
• 182
• 183
• 184
• 185
• 186
• 187
• 188

<template>
    <main> 
      <!-- 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 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

      // Input detected, and we have 0 entries. It's our first.
      if (!this.$store.state.paste.entries.length)
      {
        commit('ADD_ENTRY', { title: 'untitled', content: value })
      }

      // Input detected and an entry already exist. update it.
      else
      {                
        commit('SET_ENTRY_CONTENT', {index:this.$store.state.activeEntry, value})
      }

      // Input detected and no value (ie, ""). Clear entries there's only
      // 1 entry. (there might be another "tab" with value in it)
      if (!value && this.$store.state.paste.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.paste.entries.length)
      {
        return
      }

      this.$nuxt.$loading.start() 
      // Remove entries where content is blank
      let entries = this.$store.state.paste.entries
        .filter(entry => !!entry.content.trim())
      
      this.$store.commit('SET_MODE', 'view');     
      let data = {
        paste: 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)
        this.$nuxt.$loading.finish() 
      }
      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 
     
  
  
  
   ::-webkit-input-placeholder
    text-align center
    padding-top 2.4em
    text-shadow 0 0 1px  rgba(0, 0, 0, 0.9)
    color #D4D4D4//rgba(0, 0, 0, 0.1)
    font normal 700 4em 'Inconsolata', monospace;
  
</style>