Refactor code and DOM structure
This commit is contained in:
Buu Nguyen
parent
1818284b83
commit
efcccad6bc
|
|
@ -1,32 +1,30 @@
|
|||
/* Page */
|
||||
html {
|
||||
transition: margin-left 0.2s ease;
|
||||
-webkit-transition: margin-left 0.2s ease;
|
||||
transition: margin-left 0.15s ease-out;
|
||||
-webkit-transition: margin-left 0.15s ease-out;
|
||||
}
|
||||
html.octotree {
|
||||
html.octotree {
|
||||
margin-left: 240px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.octotree_sidebar {
|
||||
position: fixed;
|
||||
padding-top: 50px;
|
||||
width: 250px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 250px;
|
||||
left: -250px;
|
||||
background-color: #f8f8f8;
|
||||
border-right: 1px solid #ddd;
|
||||
overflow: auto;
|
||||
z-index: 999991;
|
||||
-webkit-transition: -webkit-transform 0.2s ease;
|
||||
transition: transform 0.2s ease;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
-webkit-transition: left 0.15s ease-out;
|
||||
transition: left 0.15s ease-out;
|
||||
}
|
||||
.octotree .octotree_sidebar {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
left:0;
|
||||
}
|
||||
|
||||
.octotree_header {
|
||||
|
|
@ -36,6 +34,9 @@ html.octotree {
|
|||
margin-bottom: 0;
|
||||
padding-left: 13px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.octotree_header_error {
|
||||
|
|
@ -74,6 +75,11 @@ html.octotree {
|
|||
}
|
||||
|
||||
/* Source tree */
|
||||
.octotree_treeview{
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.octotree_treeview .jstree-icon.tree,
|
||||
.octotree_treeview .jstree-icon.blob {
|
||||
font: normal normal 16px octicons;
|
||||
|
|
@ -154,8 +160,8 @@ html.octotree {
|
|||
text-align: center;
|
||||
line-height: 1;
|
||||
z-index: 999992;
|
||||
transition: left 0.2s ease, color 0.1s ease-in;
|
||||
-webkit-transition: left 0.2s ease, color 0.1s ease-in;
|
||||
transition: left 0.3s ease, color 0.1s ease-in;
|
||||
-webkit-transition: left 0.3s ease, color 0.1s ease-in;
|
||||
}
|
||||
.octotree_toggle:hover {
|
||||
color: #4183C4;
|
||||
|
|
|
|||
|
|
@ -25,13 +25,14 @@
|
|||
'</div>' +
|
||||
'<div class="error"/>' +
|
||||
'</form>' +
|
||||
'<a class="octotree_toggle button"><span/></a>' +
|
||||
'</nav>')
|
||||
, $treeView = $sidebar.find('.octotree_treeview')
|
||||
, $optsFrm = $sidebar.find('.octotree_options')
|
||||
, $toggleBtn = $('<a class="octotree_toggle button"><span/></a>')
|
||||
, $toggleBtn = $sidebar.find('.octotree_toggle')
|
||||
, $dummyDiv = $('<div/>')
|
||||
, store = new Storage()
|
||||
, currentRepo = false
|
||||
, currentRepo = false
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
|
@ -60,8 +61,8 @@
|
|||
, repoChanged = JSON.stringify(repo) !== JSON.stringify(currentRepo)
|
||||
|
||||
if (repo) {
|
||||
$toggleBtn.show()
|
||||
$sidebar.show()
|
||||
$toggleBtn.show()
|
||||
if (repoChanged || reload) {
|
||||
currentRepo = repo
|
||||
fetchData(repo, function(err, tree) {
|
||||
|
|
@ -70,8 +71,8 @@
|
|||
})
|
||||
} else selectTreeNode()
|
||||
} else {
|
||||
$toggleBtn.hide()
|
||||
$sidebar.hide()
|
||||
$toggleBtn.hide()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,46 +159,42 @@
|
|||
}
|
||||
|
||||
function onFetchError(err) {
|
||||
var header = 'Error: ' + err.error
|
||||
, token = store.get(TOKEN)
|
||||
var header = 'Error: ' + err.error
|
||||
, hasToken = !!store.get(TOKEN)
|
||||
, requestToken = true
|
||||
, message
|
||||
|
||||
$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.'
|
||||
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 below.'
|
||||
break
|
||||
case 409:
|
||||
header = 'Empty repository!'
|
||||
message = 'This repository is empty.'
|
||||
requestToken = false
|
||||
break
|
||||
case 404:
|
||||
header = 'Private or invalid repository!'
|
||||
message = token
|
||||
header = 'Private repository!'
|
||||
message = hasToken
|
||||
? '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.'
|
||||
: '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 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.'
|
||||
message = hasToken
|
||||
? 'You have exceeded the API hourly limit.'
|
||||
: '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 below.'
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
$optsFrm.find('.message').html(message)
|
||||
updateSidebar('<div class="octotree_header_error">' + header + '</div>')
|
||||
|
||||
renderSidebar('<div class="octotree_header_error">' + header + '</div>', message)
|
||||
}
|
||||
|
||||
function renderTree(repo, tree, cb) {
|
||||
$optsFrm.hide()
|
||||
$treeView.show().empty()
|
||||
$treeView.empty()
|
||||
.jstree({
|
||||
core : { data: tree, animation: 100, themes : { responsive : false } },
|
||||
plugins : ['wholerow', 'state'],
|
||||
|
|
@ -226,14 +223,25 @@
|
|||
'<div class="octotree_header_branch">' +
|
||||
repo.branch +
|
||||
'</div>'
|
||||
updateSidebar(headerText)
|
||||
renderSidebar(headerText)
|
||||
cb()
|
||||
})
|
||||
}
|
||||
|
||||
function updateSidebar(header) {
|
||||
function renderSidebar(header, message) {
|
||||
$sidebar.find('.octotree_header').html(header)
|
||||
|
||||
if (message) {
|
||||
var token = store.get(TOKEN)
|
||||
$optsFrm.find('.message').html(message)
|
||||
$optsFrm.show()
|
||||
$treeView.hide()
|
||||
if (token) $optsFrm.find('[name="token"]').val(token)
|
||||
} else {
|
||||
$optsFrm.hide()
|
||||
$treeView.show()
|
||||
}
|
||||
|
||||
// Shows sidebar when:
|
||||
// 1. First time after extension is installed
|
||||
// 2. If it was previously shown (TODO: many seem not to like it)
|
||||
|
|
|
|||
Loading…
Reference in New Issue