• 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
• 189
• 190
• 191
• 192
• 193
• 194
• 195
• 196
• 197
• 198
• 199
• 200
• 201
• 202
• 203
• 204
• 205
• 206
• 207
• 208
• 209
• 210
• 211
• 212
• 213
• 214
• 215
• 216
• 217
• 218
• 219
• 220

<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"
          v-if='$store.state.mode == "edit"'
          placeholder="paste code. ctrl + s to save"
          @keydown="onKeyDown"
          @input='onInput'
          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 {
  
  
  mounted ()
  {
    console.log('mounted!')
  },
    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)
       */
      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');     
        }
      }    

    },


   
}
// contents: black, models: green, textarea red
</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 no-wrap
    border 0
    color #555
    display flex
    width 100%
    height 100%
    background transparent
    padding 0!important
    border 1px solid blue
    font-size 95%
    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 quicksand
  
</style>