tabbit

Fri Nov 16 2018
Copied to clipboard! Copy reply
<template>
  <section class="container">
    <Nav />
    <Tabs />
    <div class="date">{{ $store.state.paste.date }}</div>
    <div class="actions">
      <span class="copied">Copied to clipboard!</span>
      <a href=""
        class="copy"
        v-if="$store.state.mode == 'view'"
        @click.prevent="copyToClipboard">Copy</a>
      <a href="" 
        class="reply"
        title="ctrl + r"
        @click.prevent="changeMode('edit')"
        v-if="$store.state.mode == 'view'"
        >reply</a>
    </div>
    <div class="contents">
      <Lines />
      <Code v-if="$store.state.mode == 'view'" />
      <Textarea v-else />
    </div>   
  </section>
</template>

<script>
  import Nav from '~/components/Nav.vue'
  import Tabs from '~/components/Tabs.vue'
  import Textarea from '~/components/Textarea.vue'
  import Code from '~/components/Code.vue'  
  import Lines from '~/components/Lines.vue'
  import axios from 'axios'
  //dUHRuycnC
  export default {
    components: {
      Nav,
      Code,
      Textarea,
      Lines,
      Tabs
    },
  

  /**
   * We only need to fetch if the user is coming from a hard
   * page load. if they were transferred here after creating a paste,
   * the paste is already stored in the $store, no need to fetch.
   * And we check if it's a hard reload by checking to see if
   * there is a value for `state.content`.
   */
    async fetch ({ store, params })
    {
      if (!store.getters.viewContent)
      {
        let id = params.id    
        let uri = `https://us-central1-tabbit-1313.cloudfunctions.net/get/?id=${params.id}`     
        try
        {
          let { data } = await axios.get(uri)
          let d = new Date(data.payload.date)
          data.payload.date = d.toString().split(' ').slice(0,4).join(' ')
          // backwards compatibility
          data.payload.entries = data.payload.paste
          store.commit('SET_PASTE', data.payload)          
          store.commit('UPDATE_ENTRIES', data.payload.paste)   
          store.commit('SET_ACTIVE_ENTRY', 0)       
          store.commit('SET_MODE', 'view')         
        }
        catch (e)
        {
          console.log(e)
          console.log('-- ERR')
        }
      }
    },


    // Ctrl + r switches to edit mode
    mounted ()
    {      
      window.onkeydown = (e) => {        
        if ((e.ctrlKey  &&  e.code === "KeyR")  )
        {
          // Prevent refreshing
          e.preventDefault()
          this.changeMode('edit')        
        }
      }
    },

    methods: {
     /**
       * Changes between 'edit' and 'view' mode.
       * We take the chance to hide/show some nav links
       * based on the mode.
       */
      changeMode (mode)
      {
        // Determine how far from top we are. After switching modes,
        // Set scrollbar to this position. Without this, when going into
        // reply mode, scrollbar will always be at the bottom
        let yOffset = window.pageYOffset

        this.$store.commit('SET_MODE', 'edit')
        this.$nextTick().then( () => {
          let scrollHeight = document.querySelector('body').scrollHeight
          let scrollHeightText = document.querySelector('textarea').scrollHeight
          let offsetHeight = document.querySelector('body').offsetHeight        
          if (scrollHeight >  offsetHeight)
          {
            document.querySelector('main').style.height = `${scrollHeightText}px`
            document.querySelector('textarea').style.height = `${scrollHeightText}px`
          }   
          document.querySelector('main').style.height = `${scrollHeightText}px`

          // Return scrollbar to where it was when user clicked 'reply'        
          window.setTimeout(() => {
            window.scrollTo(0, yOffset)  
          },0)
        })
        
      },




      copyToClipboard (e)
      {
        e.preventDefault()
        const el = document.createElement('textarea');
        let str = this.$store.state.paste.entries[this.$store.state.activeEntry].content
        
        el.value = str;
        //el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // fade in/out 'copied to clipboard' div
        let c = document.querySelector('.copied')
        c.classList.add('animated')
        window.setTimeout( () => {
          c.classList.remove('animated')
        },3001)
        
      }
    }

    
  }
</script>

<style lang="stylus" scroped>
.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
      color #000
    .copied
      background #333
      border 3px solid #000
      color #fff
      padding 2px 5px
      opacity 0
      &.animated
        animation 3s fade


@keyframes fade {
  0% {
    opacity 0
  }
  50% {
    opacity 1
  }
  100% {
    opacity 0
  }
}
</style>
<template>
  <section class="container">
    <Nav />
    <Tabs />
    <div class="date">{{ $store.state.paste.date }}</div>
    <div class="actions">
      <span class="copied">Copied to clipboard!</span>
      <a href=""
        class="copy"
        v-if="$store.state.mode == 'view'"
        @click.prevent="copyToClipboard">Copy</a>
      <a href="" 
        class="reply"
        title="ctrl + r"
        @click.prevent="changeMode('edit')"
        v-if="$store.state.mode == 'view'"
        >reply</a>
    </div>
    <div class="contents">
      <Lines />
      <Code v-if="$store.state.mode == 'view'" />
      <Textarea v-else />
    </div>   
  </section>
</template>

<script>
  import Nav from '~/components/Nav.vue'
  import Tabs from '~/components/Tabs.vue'
  import Textarea from '~/components/Textarea.vue'
  import Code from '~/components/Code.vue'  
  import Lines from '~/components/Lines.vue'
  import axios from 'axios'
  //dUHRuycnC
  export default {
    components: {
      Nav,
      Code,
      Textarea,
      Lines,
      Tabs
    },
  

  /**
   * We only need to fetch if the user is coming from a hard
   * page load. if they were transferred here after creating a paste,
   * the paste is already stored in the $store, no need to fetch.
   * And we check if it's a hard reload by checking to see if
   * there is a value for `state.content`.
   */
    async fetch ({ store, params })
    {
      if (!store.getters.viewContent)
      {
        let id = params.id    
        let uri = `https://us-central1-tabbit-1313.cloudfunctions.net/get/?id=${params.id}`     
        try
        {
          let { data } = await axios.get(uri)
          let d = new Date(data.payload.date)
          data.payload.date = d.toString().split(' ').slice(0,4).join(' ')
          // backwards compatibility
          data.payload.entries = data.payload.paste
          store.commit('SET_PASTE', data.payload)          
          store.commit('UPDATE_ENTRIES', data.payload.paste)   
          store.commit('SET_ACTIVE_ENTRY', 0)       
          store.commit('SET_MODE', 'view')         
        }
        catch (e)
        {
          console.log(e)
          console.log('-- ERR')
        }
      }
    },


    // Ctrl + r switches to edit mode
    mounted ()
    {      
      window.onkeydown = (e) => {        
        if ((e.ctrlKey  &&  e.code === "KeyR")  )
        {
          // Prevent refreshing
          e.preventDefault()
          this.changeMode('edit')        
        }
      }
    },

    methods: {
     /**
       * Changes between 'edit' and 'view' mode.
       * We take the chance to hide/show some nav links
       * based on the mode.
       */
      changeMode (mode)
      {
        // Determine how far from top we are. After switching modes,
        // Set scrollbar to this position. Without this, when going into
        // reply mode, scrollbar will always be at the bottom
        let yOffset = window.pageYOffset

        this.$store.commit('SET_MODE', 'edit')
        this.$nextTick().then( () => {
          let scrollHeight = document.querySelector('body').scrollHeight
          let scrollHeightText = document.querySelector('textarea').scrollHeight
          let offsetHeight = document.querySelector('body').offsetHeight        
          if (scrollHeight >  offsetHeight)
          {
            document.querySelector('main').style.height = `${scrollHeightText}px`
            document.querySelector('textarea').style.height = `${scrollHeightText}px`
          }   
          document.querySelector('main').style.height = `${scrollHeightText}px`

          // Return scrollbar to where it was when user clicked 'reply'        
          window.setTimeout(() => {
            window.scrollTo(0, yOffset)  
          },0)
        })
        
      },




      copyToClipboard (e)
      {
        e.preventDefault()
        const el = document.createElement('textarea');
        let str = this.$store.state.paste.entries[this.$store.state.activeEntry].content
        
        el.value = str;
        //el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // fade in/out 'copied to clipboard' div
        let c = document.querySelector('.copied')
        c.classList.add('animated')
        window.setTimeout( () => {
          c.classList.remove('animated')
        },3001)
        
      }
    }

    
  }
</script>

<style lang="stylus" scroped>
.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
      color #000
    .copied
      background #333
      border 3px solid #000
      color #fff
      padding 2px 5px
      opacity 0
      &.animated
        animation 3s fade


@keyframes fade {
  0% {
    opacity 0
  }
  50% {
    opacity 1
  }
  100% {
    opacity 0
  }
}
</style>
<template>
  <section class="container">
    <Nav />
    <Tabs />
    <div class="date">{{ $store.state.paste.date }}</div>
    <div class="actions">
      <span class="copied">Copied to clipboard!</span>
      <a href=""
        class="copy"
        v-if="$store.state.mode == 'view'"
        @click.prevent="copyToClipboard">Copy</a>
      <a href="" 
        class="reply"
        title="ctrl + r"
        @click.prevent="changeMode('edit')"
        v-if="$store.state.mode == 'view'"
        >reply</a>
    </div>
    <div class="contents">
      <Lines />
      <Code v-if="$store.state.mode == 'view'" />
      <Textarea v-else />
    </div>   
  </section>
</template>

<script>
  import Nav from '~/components/Nav.vue'
  import Tabs from '~/components/Tabs.vue'
  import Textarea from '~/components/Textarea.vue'
  import Code from '~/components/Code.vue'  
  import Lines from '~/components/Lines.vue'
  import axios from 'axios'
  //dUHRuycnC
  export default {
    components: {
      Nav,
      Code,
      Textarea,
      Lines,
      Tabs
    },
  

  /**
   * We only need to fetch if the user is coming from a hard
   * page load. if they were transferred here after creating a paste,
   * the paste is already stored in the $store, no need to fetch.
   * And we check if it's a hard reload by checking to see if
   * there is a value for `state.content`.
   */
    async fetch ({ store, params })
    {
      if (!store.getters.viewContent)
      {
        let id = params.id    
        let uri = `https://us-central1-tabbit-1313.cloudfunctions.net/get/?id=${params.id}`     
        try
        {
          let { data } = await axios.get(uri)
          let d = new Date(data.payload.date)
          data.payload.date = d.toString().split(' ').slice(0,4).join(' ')
          // backwards compatibility
          data.payload.entries = data.payload.paste
          store.commit('SET_PASTE', data.payload)          
          store.commit('UPDATE_ENTRIES', data.payload.paste)   
          store.commit('SET_ACTIVE_ENTRY', 0)       
          store.commit('SET_MODE', 'view')         
        }
        catch (e)
        {
          console.log(e)
          console.log('-- ERR')
        }
      }
    },


    // Ctrl + r switches to edit mode
    mounted ()
    {      
      window.onkeydown = (e) => {        
        if ((e.ctrlKey  &&  e.code === "KeyR")  )
        {
          // Prevent refreshing
          e.preventDefault()
          this.changeMode('edit')        
        }
      }
    },

    methods: {
     /**
       * Changes between 'edit' and 'view' mode.
       * We take the chance to hide/show some nav links
       * based on the mode.
       */
      changeMode (mode)
      {
        // Determine how far from top we are. After switching modes,
        // Set scrollbar to this position. Without this, when going into
        // reply mode, scrollbar will always be at the bottom
        let yOffset = window.pageYOffset

        this.$store.commit('SET_MODE', 'edit')
        this.$nextTick().then( () => {
          let scrollHeight = document.querySelector('body').scrollHeight
          let scrollHeightText = document.querySelector('textarea').scrollHeight
          let offsetHeight = document.querySelector('body').offsetHeight        
          if (scrollHeight >  offsetHeight)
          {
            document.querySelector('main').style.height = `${scrollHeightText}px`
            document.querySelector('textarea').style.height = `${scrollHeightText}px`
          }   
          document.querySelector('main').style.height = `${scrollHeightText}px`

          // Return scrollbar to where it was when user clicked 'reply'        
          window.setTimeout(() => {
            window.scrollTo(0, yOffset)  
          },0)
        })
        
      },




      copyToClipboard (e)
      {
        e.preventDefault()
        const el = document.createElement('textarea');
        let str = this.$store.state.paste.entries[this.$store.state.activeEntry].content
        
        el.value = str;
        //el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // fade in/out 'copied to clipboard' div
        let c = document.querySelector('.copied')
        c.classList.add('animated')
        window.setTimeout( () => {
          c.classList.remove('animated')
        },3001)
        
      }
    }

    
  }
</script>

<style lang="stylus" scroped>
.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
      color #000
    .copied
      background #333
      border 3px solid #000
      color #fff
      padding 2px 5px
      opacity 0
      &.animated
        animation 3s fade


@keyframes fade {
  0% {
    opacity 0
  }
  50% {
    opacity 1
  }
  100% {
    opacity 0
  }
}
</style>