git-io-addon/script.js

var GitIO = function ( )
  {
    var API_ENDPOINT  = 'http://git.io/'

    this.invoke = function ( command, params, response_callback )
      {
        if( 'generate' == command )
          { requestForShortenUrl
              ( params.url
              , params.code
              , function ( data )
                  { response_callback( data ) }
              )
          }
      }

    var requestForShortenUrl = function ( url, code, callback )
      {
        var xhr = new XMLHttpRequest( )
        var form_data = new FormData( )

        form_data.append( 'url', url )

        if( code )
          { form_data.append( 'code', code ) }

        xhr.onload = function ( e )
          {
            if( 201 == this.status )
              { callback
                  ({ 'status': 'OK'
                   , 'shortened_url' : this.getResponseHeader( 'Location' )
                   })
              }
            else
              { callback
                  ({ 'status' : 'Error'
                   , 'error' :
                      { 'code' : this.status
                      , 'message' : this.responseText
                      }
                   })
              }
          }

        xhr.open( 'POST', API_ENDPOINT, true )
        xhr.send( form_data )
      }
  }

chrome.extension.onRequest.addListener
  ( function ( request, sender, sendResponse )
      { GitIO.invoke( request.command, request.params, sendResponse ) }
  )

localStorage.getItem( 'notFirstRun', function ( arr )
  {
    if( arr['notFirstRun'] ) return

    var shrtList =
      { 'http://git.io/help' : 'https://github.com/blog/985-git-io-github-url-shortener'
      , 'http://git.io/nn' : 'https://github.com/noformnocontent'
      , 'http://git.io/chrome' : 'https://github.com/noformnocontent/git-io-chrome'
      }

    localStorage.setItem( 'shrtList', shrtList )
    localStorage.setItem( 'notFirstRun', true )
  })


var shrt_field = document.getElementById( 'shortened-url' )
  , url_field =  document.getElementById( 'full-url' )
  , notifications = document.getElementById( 'notifications' )
  , message_field = document.getElementById( 'message' )
  , action_button = document.getElementById( 'action-button' )
  , show_all_recent_links = document.getElementById( 'show-all-recent-links' )
  , clear_list = document.getElementById( 'clear-list' )
  , recent_links = document.getElementById( 'recent-links' )
  , lis = recent_links.getElementsByTagName( 'li' )

var shrtLink = function ( )
  { getShortenedUrl( ) }

action_button.addEventListener( 'click', shrtLink )

localStorage.getItem( function ( arr )
  { for( var k in arr )
      { createShrtListElement( k, arr[k]) }
  })


var setMessage = function ( message )
  { message_field.innerHTML = message }

var copyResultToClipboard = function ( field )
  {
    field.select( )
    document.execCommand( 'Copy' )
    notifications.classList.remove( 'error' )
    notifications.classList.add( 'done' )
    setMessage( 'Link is copied to the clipboard.' )
  }

var bindBtnToCoopy = function ( )
  {
    action_button.removeEventListener( 'click', shrtLink, false )
    action_button.addEventListener( 'click', function ( )
      { copyResultToClipboard( shrt_field ) })

    action_button.innerHTML = 'cpy!'
    action_button.classList.remove( 'error' )
    action_button.classList.add( 'done' )
    notifications.classList.remove( 'error' )
    notifications.classList.add( 'done' )
    setMessage( 'You can now copy the link by clicking “cpy!”'
              + ' It will also stay in your shrt-list if you ever need it again.'
              )
  }

var createShrtListElement = function ( shrt, fullUrl, flashListsElement )
  {
    if( !/^https?:\/\/git\.io\/.+/.test( shrt ) ) return

    var listElement = document.createElement( 'li' )
      , listInput = document.createElement( 'input' )
      , listVisit = document.createElement( 'a' )
      , listCopy = document.createElement( 'a' )

    listInput.value = shrt
    listInput.type = 'text'
    listInput.readOnly = true

    listVisit.href = shrt
    listVisit.target = '_new'
    listVisit.title = 'Open link in new tab'
    listVisit.appendChild( document.createTextNode( '' ))

    listCopy.href = '#copy'
    listCopy.title = 'Copy link to clipboard'
    listCopy.appendChild( document.createTextNode( '' ))
    listCopy.addEventListener( 'click', function ( e )
      {
        copyResultToClipboard
          ( e.currentTarget.parentNode
             .getElementsByTagName( 'input' )[0]
          )
        e.preventDefault( )
      })

    listElement.title = fullUrl
    listElement.appendChild( listInput )
    listElement.appendChild( listVisit )
    listElement.appendChild( listCopy )

    if( flashListsElement )
      { listElement.classList.add( 'current' ) }

    recent_links.insertBefore
      ( listElement, recent_links.firstChild )

    testShrtListLength( )
  }

var getShortenedUrl = function ( )
  {
    var request_data =
      { 'command': 'generate'
      , 'params':
          { 'url': url_field
          , 'code': shrt_field.value
          }
      }

    chrome.extension.sendRequest( request_data, function ( data )
      {
        if( 'OK' == data.status )
          {
            // TODO: notice if sent and recived shortened are different
            shrt_field.value = data.shortened_url
            bindBtnToCoopy( )
            localStorage.getItem( data.shortened_url, function ( arr )
              {
                if( !arr[data.shortened_url] )
                  {
                    var urlPair = { }
                    urlPair[data.shortened_url] = tab.url
                    localStorage.setItem( urlPair )
                  }
                else
                  { // bump to the top and '.current' the one in the list
                  }
              })
          }

        else if( 'Error' == data.status )
          {
            action_button.innerHTML = 'rrr!'
            action_button.classList.remove( 'done' )
            action_button.classList.add( 'error' )
            notifications.classList.remove( 'done' )
            notifications.classList.add( 'error' )
            setMessage( data.error.code + ': ' + data.error.message )
          }

        else
          {
            action_button.innerHTML = '??!'
            action_button.classList.remove( 'done' )
            action_button.classList.add( 'error' )
            notifications.classList.remove( 'done' )
            notifications.classList.add( 'error' )
            setMessage( data.status )
          }
      })
  }

var testShrtListLength = function ( )
  {
    if( lis.length > 3 )
      {
        show_all_recent_links.style.display = 'block'
        show_all_recent_links.getElementsByTagName( 'li' )[0]
          .innerHTML = '▾ show ' + ( lis.length-3 ) + ' more ▾'

        show_all_recent_links.addEventListener( 'click', function ( )
          {
            for( var i = 3; i < lis.length; i++ )
              { lis[i].style.display = 'block' }

            show_all_recent_links.style.display = 'none'
            clear_list.style.display = 'block'

            clear_list.addEventListener( 'click', function ( )
              {
                while( lis[0] )
                  { lis[0].parentNode.removeChild( lis[0]) }

                localStorage.clear( )
                localStorage.setItem( 'notFirstRun', true )
                clear_list.style.display = 'none'
              })
          })
      }
  }

chrome.storage.onChanged.addListener( function ( changes, namespace )
  {
    for( key in changes )
      { if( changes[key].newValue )
          { createShrtListElement( key, changes[key], true ) }
      }
  })