From 1818284b83e013cdd5de9edf53898d8e07620812 Mon Sep 17 00:00:00 2001
From: Buu Nguyen <buunguyen@gmail.com>
Date: Sun, 18 May 2014 00:03:54 -0700
Subject: [PATCH] Clean up code

---
 src/inject.css |  39 ++++++------
 src/inject.js  | 157 ++++++++++++++++++++++++-------------------------
 2 files changed, 97 insertions(+), 99 deletions(-)

diff --git a/src/inject.css b/src/inject.css
index 18620ba..0d77185 100755
--- a/src/inject.css
+++ b/src/inject.css
@@ -74,68 +74,69 @@ html.octotree {
 }
 
 /* Source tree */
-.jstree-icon.tree,
-.jstree-icon.blob {
+.octotree_treeview .jstree-icon.tree,
+.octotree_treeview .jstree-icon.blob {
     font: normal normal 16px octicons;
     display: inline-block;
+    margin-top: 4px;
     margin-right: 5px;
     text-decoration: none;
     -webkit-font-smoothing: antialiased;
 }
-.jstree-icon.tree:before {
+.octotree_treeview .jstree-icon.tree:before {
     content: '\f016';
     color: #80a6cd;
 }
-.jstree-icon.blob:before {
+.octotree_treeview .jstree-icon.blob:before {
     content: '\f011';
     color: #777;
 }
 
-.jstree-anchor {
+.octotree_treeview .jstree-anchor {
     color: #4183c4 !important;
     text-decoration: none;
     outline: none;
 }
-.jstree-anchor:hover {
+.octotree_treeview .jstree-anchor:hover {
     text-decoration: none !important; /* Safari needs this */
 }
 
-.jstree-default .jstree-wholerow {
+.octotree_treeview .jstree-default .jstree-wholerow {
     height: auto;
 }
-.jstree-default .jstree-wholerow-hovered {
+.octotree_treeview .jstree-default .jstree-wholerow-hovered {
     background: #eee;
 }
-.jstree-default .jstree-wholerow-clicked {
+.octotree_treeview .jstree-default .jstree-wholerow-clicked {
     background: #dbeeff;
 }
 
-.jstree-default .jstree-node {
+.octotree_treeview .jstree-default .jstree-node {
     line-height: 24px;
     margin-left: 12px;
 }
-.jstree-default .jstree-icon,
-.jstree-default .jstree-icon:empty,
-.jstree-default .jstree-anchor {
+.octotree_treeview .jstree-default .jstree-icon,
+.octotree_treeview .jstree-default .jstree-icon:empty,
+.octotree_treeview .jstree-default .jstree-anchor {
     line-height: 28px;
 }
 
-.jstree-default .jstree-icon.jstree-ocl {
+.octotree_treeview .jstree-default .jstree-icon.jstree-ocl {
     margin-top: 1px;
     margin-right: -4px;
 }
 
-/* Token form */
-.octotree_sidebar form div { 
+/* Options form */
+.octotree_options div { 
     margin: 6px; 
 }
-.octotree_sidebar form input { 
+.octotree_options input { 
     width: 237px; 
 }
-.octotree_sidebar form .error { 
+.octotree_options .error { 
     color: #900; 
 }
-.octotree_sidebar form button { 
+.octotree_options button { 
     margin-right: 5px; 
 }
 
diff --git a/src/inject.js b/src/inject.js
index ac25378..cb20913 100755
--- a/src/inject.js
+++ b/src/inject.js
@@ -12,41 +12,45 @@
 
   var $html    = $('html')
     , $sidebar = $('<nav class="octotree_sidebar">' +
-                     '<div class="octotree_header">loading...</div>' +
-                     '<div class="octotree_treeview"></div>' +
+                     '<div class="octotree_header"/>' +
+                     '<div class="octotree_treeview"/>' +
+                     '<form class="octotree_options">' +
+                       '<div class="message"/>' +
+                       '<div>' +
+                         '<input name="token" type="text" placeholder="Paste access token here" autocomplete="off"/>' +
+                       '</div>' +
+                       '<div>' +
+                         '<button type="submit" class="button">Save</button>' +
+                         '<a href="https://github.com/buunguyen/octotree#github-api-rate-limit" target="_blank">Why need access token?</a>' +
+                       '</div>' +
+                       '<div class="error"/>' +
+                     '</form>' +
                    '</nav>')
-    , $treeView = $sidebar.find('.octotree_treeview')
-    , $tokenFrm = $('<form>' +
-                     '<div class="message"></div>' +
-                     '<div>' +
-                       '<input name="token" type="text" placeholder="Paste access token here"></input>' +
-                     '</div>' +
-                     '<div>' +
-                       '<button type="submit" class="button">Save</button>' +
-                       '<a href="https://github.com/buunguyen/octotree#github-api-rate-limit" target="_blank">Why need access token?</a>' +
-                     '</div>' +
-                     '<div class="error"></div>' +
-                   '</form>')
-    , $toggleBtn = $('<a class="octotree_toggle button"><span></span></a>')
+    , $treeView  = $sidebar.find('.octotree_treeview')
+    , $optsFrm   = $sidebar.find('.octotree_options')
+    , $toggleBtn = $('<a class="octotree_toggle button"><span/></a>')
     , $dummyDiv  = $('<div/>')
     , store      = new Storage()
-    , domInitialized = false
     , currentRepo    = false
 
   $(document).ready(function() {
-    loadRepo()
+
+    // initializes DOM
+    $('body').append($sidebar).append($toggleBtn)
+    $optsFrm.submit(saveToken)
+    $toggleBtn.click(toggleSidebar)
+    key('⌘+b, ctrl+b', toggleSidebar)
 
     // When navigating from non-code pages (i.e. Pulls, Issues) to code page
     // GitHub doesn't reload the page but uses pjax. Need to detect and load Octotree.
-    var href = location.href
-      , hash = location.hash
+    var href, hash
     function detectLocationChange() {
       if (location.href !== href || location.hash != hash) {
         href = location.href
         hash = location.hash
         loadRepo()
       }
-      window.setTimeout(detectLocationChange, 200)
+      setTimeout(detectLocationChange, 200)
     }
     detectLocationChange()
   })
@@ -55,18 +59,25 @@
     var repo = getRepoFromPath()
       , repoChanged = JSON.stringify(repo) !== JSON.stringify(currentRepo)
 
-    if (repo && (repoChanged || reload)) {
-      initializeDom()
-      currentRepo = repo
-      fetchData(repo, function(err, tree) {
-        if (err) return onFetchError(err)
-        renderTree(repo, tree, selectTreeNode)
-
-      })
-    } else if (domInitialized) selectTreeNode()
+    if (repo) {
+      $toggleBtn.show()
+      $sidebar.show()
+      if (repoChanged || reload) {
+        currentRepo = repo
+        fetchData(repo, function(err, tree) {
+          if (err) return onFetchError(err)
+          renderTree(repo, tree, selectTreeNode)
+        })
+      } else selectTreeNode()
+    } else {
+      $toggleBtn.hide()
+      $sidebar.hide()
+    }
   }
 
-  function selectTreeNode() {      
+  function selectTreeNode() {
+    if ($treeView.is(':hidden')) return
+
     var tree = $.jstree.reference($treeView)
       , path = location.pathname
 
@@ -77,17 +88,6 @@
     if (match) tree.select_node(PREFIX + decodeURIComponent(match[1]))
   }
 
-  function initializeDom() {
-    if (!domInitialized) {
-      $('body')
-        .append($sidebar)
-        .append($toggleBtn.click(toggleSidebar))
-
-      key('⌘+b, ctrl+b', toggleSidebar)
-      domInitialized = true
-    }
-  }
-
   function getRepoFromPath() {
     // 404 page, skip
     if ($('#parallax_wrapper').length) return false
@@ -131,7 +131,7 @@
 
         folder.push(item)
         item.id   = PREFIX + path
-        item.text = sanitize(name)
+        item.text = $dummyDiv.text(name).html() // sanitizes, closes #9
         item.icon = type // use `type` as class name for tree node
         if (type === 'tree') {
           folders[item.path] = item.children = []
@@ -159,37 +159,45 @@
 
   function onFetchError(err) {
     var header = 'Error: ' + err.error
-      , hasToken = !!store.get(TOKEN)
+      , token  = store.get(TOKEN)
       , message
 
-    if (err.error === 401) {
-      header  = 'Invalid token!'
-      message = 'The token is invalid. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create a new token and paste it in the textbox below.'
+    $optsFrm.show()
+    $treeView.hide()
+    if (token) $optsFrm.find('[name="token"]').val(token)
+
+    switch (err.error) {
+      case 401:
+        header  = 'Invalid token!'
+        message = 'The token is invalid. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create a new token and paste it in the textbox below.'
+        break
+      case 409:
+        header  = 'Empty repository!'
+        message = 'This repository is empty.'
+        break
+      case 404:
+        header  = 'Private or invalid repository!'
+        message = token 
+          ? 'You are not allowed to access this repository.'
+          : 'Accessing private repositories requires a GitHub access token. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create one and paste it in the textbox below.'
+        break
+      case 403:
+        if (~err.request.getAllResponseHeaders().indexOf('X-RateLimit-Remaining: 0')) {
+          header  = 'API limit exceeded!'
+          message = token 
+            ? 'You have exceeded the API hourly limit, please create a new access token.'
+            : 'You have exceeded the GitHub API hourly limit and need GitHub access token to make extra requests. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create one and paste it in the textbox below.'
+        }
+        break
     }
 
-    else if (err.error === 404) {
-      header = 'Private or invalid repository!'
-      if (hasToken) message = 'You are not allowed to access this repository.'
-      else          message = 'Accessing private repositories requires a GitHub access token. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create one and paste it in the textbox below.'
-    }
-
-    else if (err.error === 403 && ~err.request.getAllResponseHeaders().indexOf('X-RateLimit-Remaining: 0')) {
-      header = 'API limit exceeded!'
-      if (hasToken) message = 'Whoa, you have exceeded the API hourly limit, please create a new access token or take a break :).'
-      else          message = 'You have exceeded the GitHub API hourly limit and need GitHub access token to make extra requests. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create one and paste it in the textbox below.'
-    }
-
-    else if (err.error === 409) {
-      header  = 'Empty repository!'
-      message = 'This repository is empty.'
-    }
-
-    updateSidebar('<div class="octotree_header_error">' + header + '</div>', message)
+    $optsFrm.find('.message').html(message)
+    updateSidebar('<div class="octotree_header_error">' + header + '</div>')
   }
 
   function renderTree(repo, tree, cb) {
-    $treeView
-      .empty()
+    $optsFrm.hide()
+    $treeView.show().empty()
       .jstree({
         core    : { data: tree, animation: 100, themes : { responsive : false } },
         plugins : ['wholerow', 'state'],
@@ -223,16 +231,9 @@
       })
   }
 
-  function updateSidebar(header, message) {
+  function updateSidebar(header) {
     $sidebar.find('.octotree_header').html(header)
 
-    if (message) {
-      var token = store.get(TOKEN)
-      if (token) $tokenFrm.find('[name="token"]').val(token)
-      $tokenFrm.find('.message').html(message)
-      $treeView.empty().append($tokenFrm.submit(saveToken))
-    }
-
     // Shows sidebar when:
     // 1. First time after extension is installed
     // 2. If it was previously shown (TODO: many seem not to like it)
@@ -252,8 +253,8 @@
   function saveToken(event) {
     event.preventDefault()
 
-    var token  = $tokenFrm.find('[name="token"]').val()
-      , $error = $tokenFrm.find('.error').text('')
+    var $error = $optsFrm.find('.error').text('')
+      , token  = $optsFrm.find('[name="token"]').val()
 
     if (!token) return $error.text('Token is required')
 
@@ -261,10 +262,6 @@
     loadRepo(true)
   }
 
-  function sanitize(str) {
-    return $dummyDiv.text(str).html()
-  }
-
   function Storage() {
     this.get = function(key) {
       var val = localStorage.getItem(key)