Clean up code
This commit is contained in:
Buu Nguyen
parent
6d348874d0
commit
1818284b83
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
127
src/inject.js
127
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>' +
|
||||
'</nav>')
|
||||
, $treeView = $sidebar.find('.octotree_treeview')
|
||||
, $tokenFrm = $('<form>' +
|
||||
'<div class="message"></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"></input>' +
|
||||
'<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"></div>' +
|
||||
'</form>')
|
||||
, $toggleBtn = $('<a class="octotree_toggle button"><span></span></a>')
|
||||
'<div class="error"/>' +
|
||||
'</form>' +
|
||||
'</nav>')
|
||||
, $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()
|
||||
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 if (domInitialized) selectTreeNode()
|
||||
} else selectTreeNode()
|
||||
} else {
|
||||
$toggleBtn.hide()
|
||||
$sidebar.hide()
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
$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.'
|
||||
}
|
||||
|
||||
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) {
|
||||
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
|
||||
}
|
||||
|
||||
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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue