SkyID
/
GitCodeTree
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor margin moving code

This commit is contained in:
Buu Nguyen 2014-06-08 12:29:43 -07:00
parent 3d8ce21a60
commit e17746a56d
7 changed files with 58 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -3,20 +3,16 @@ Browser extensions (Chrome, Firefox, Safari and Opera) to display GitHub code in
* Easy-to-navigate code tree like IDEs
* Fast browsing with pjax
* Toggle code tree with `cmd+b`, `ctrl+b`
* Customizable hotkey
* Support private repositories (require [personal access token](#github-api-rate-limit))
## Install on Chrome
* Download and install [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) from the Chrome store
* Navigate to any GitHub project (or just refresh this page as an example)
* The code tree should show as follows:
![When extension is active](docs/chrome.png)
* The code tree should show on the left-hand side of the screen
## Install on Firefox, Safari and Opera
Submitting to Mozilla and Safari stores is quite a tedious process. Octotree 1.0 (not even 1.1) was submitted to Mozilla store and is still being reviewed. Safari store requires even more work and time (that I don't have).
Alternatively, you can just install the prebuilt extensions located in the [dist](https://github.com/buunguyen/octotree/tree/master/dist) folder. For security reason, be sure to install from this location only.
You can just install the prebuilt extensions located in the [dist](https://github.com/buunguyen/octotree/tree/master/dist) folder. For security reason, be sure to install from this location only.
* Firefox: drag `octotree.xpi` to the browser and follow the instructions
* Safari: drag `octotree.safariextz` to the browser and follow the instructions

21
src/adapter.github.js
View File

@ -10,7 +10,7 @@ const
, GH_BRANCH_BTN_SEL = '*[data-master-branch] > .js-select-button'
, GH_404_SEL = '#parallax_wrapper'
, GH_PJAX_SEL = '#js-repo-pjax-container'
, GH_CONTAINERS = '.header > .container, .repohead > .container, .site > .container'
, GH_CONTAINERS = 'body > .container, .header > .container, .site > .container, .repohead > .container'
, SIDEBAR_SPACE = 10
function GitHub() {}
@ -40,15 +40,20 @@ GitHub.prototype.selectPath = function(url) {
* Updates page layout based on visibility status and width of the Octotree sidebar.
*/
GitHub.prototype.updateLayout = function(sidebarVisible, sidebarWidth) {
var containers = $(GH_CONTAINERS)
, marginLeft
if (containers.length === 3) {
marginLeft = parseInt($('body > .container').css('margin-left')) || ($('body').width() - $('body > .container').width()) / 2
containers.css('margin-left', (sidebarVisible && marginLeft <= sidebarWidth + SIDEBAR_SPACE)
var $containers = $(GH_CONTAINERS)
, autoMarginLeft
, shouldPushLeft
if ($containers.length === 4) {
autoMarginLeft = ($('body').width() - $containers.width()) / 2
shouldPushLeft = sidebarVisible && (autoMarginLeft <= sidebarWidth + SIDEBAR_SPACE)
$containers.css('margin-left', shouldPushLeft
? sidebarWidth + SIDEBAR_SPACE
: marginLeft)
: autoMarginLeft)
}
else $html.css('margin-left', sidebarVisible ? sidebarWidth - SIDEBAR_SPACE : 0)
// falls-back if GitHub DOM has been updated
else $('html').css('margin-left', sidebarVisible ? sidebarWidth - SIDEBAR_SPACE : 0)
}
/**

2
src/constants.js
View File

@ -5,7 +5,7 @@ const
TOKEN : 'octotree.github_access_token',
COLLAPSE : 'octotree.collapse',
REMEMBER : 'octotree.remember',
SHORTKEY : 'octotree.key',
HOTKEYS : 'octotree.hotkeys',
WIDTH : 'octotree.sidebar_width',
POPUP : 'octotree.popup_shown',
SHOWN : 'octotree.sidebar_shown',

63
src/main.js
View File

@ -1,29 +1,33 @@
;(function() {
var $html = $('html')
, $document = $(document)
, $dom = $(TEMPLATE)
, $sidebar = $dom.find('.octotree_sidebar')
, $toggleBtn = $sidebar.find('.octotree_toggle')
, $views = $sidebar.find('.octotree_view')
, store = new Storage()
, adapter = new GitHub()
, currRepo = false
, hasError = false
, helpPopup = new HelpPopup($dom, store)
, treeView = new TreeView($dom, store, adapter)
, errorView = new ErrorView($dom, store)
, optsView = new OptionsView($dom, store)
var $html = $('html')
, $document = $(document)
, $dom = $(TEMPLATE)
, $sidebar = $dom.find('.octotree_sidebar')
, $toggler = $sidebar.find('.octotree_toggle')
, $views = $sidebar.find('.octotree_view')
, store = new Storage()
, adapter = new GitHub()
, helpPopup = new HelpPopup($dom, store)
, treeView = new TreeView($dom, store, adapter)
, errorView = new ErrorView($dom, store)
, optsView = new OptionsView($dom, store)
, currRepo = false
, hasError = false
$document.ready(function() {
$sidebar
.appendTo($('body'))
.width(store.get(STORE.WIDTH) || 250)
.resizable({ handles: 'e', minWidth: 200 })
.resize(sidebarResized)
.resize(layoutChanged)
$toggleBtn.click(toggleSidebarAndSave)
key.filter = function() { return $toggleBtn.is(':visible') }
key(store.get(STORE.SHORTKEY), toggleSidebarAndSave)
$(window).resize(function(event) { // handle zoom
if (event.target === window) layoutChanged()
})
$toggler.click(toggleSidebarAndSave)
key.filter = function() { return $toggler.is(':visible') }
key(store.get(STORE.HOTKEYS), toggleSidebarAndSave)
;[treeView, errorView, optsView].forEach(function(view) {
$(view)
@ -39,26 +43,17 @@
$document
.on('pjax:send ' + EVENT.REQ_START, function() {
$toggleBtn.addClass('loading')
$toggler.addClass('loading')
})
.on('pjax:end ' + EVENT.REQ_END, function() {
$toggleBtn.removeClass('loading')
$toggler.removeClass('loading')
})
.on('pjax:timeout', function(event) {
event.preventDefault()
})
.on(EVENT.LOC_CHANGE, tryLoadRepo)
.on(EVENT.TOGGLE, sidebarResized)
.on(EVENT.TOGGLE, layoutChanged)
$(window).resize(function(ev) {
if(ev.target === window) {
$(GH_CONTAINERS).addClass('notransition')
sidebarResized()
setTimeout(function() {
$(GH_CONTAINERS).removeClass('notransition')
}, 300)
}
})
function optionsChanged(event, changes) {
var reload = false
Object.keys(changes).forEach(function(storeKey) {
@ -68,7 +63,7 @@
case STORE.TOKEN:
reload = true
break
case STORE.SHORTKEY:
case STORE.HOTKEYS:
key.unbind(value[0])
key(value[1], toggleSidebar)
break
@ -82,7 +77,7 @@
, repoChanged = JSON.stringify(repo) !== JSON.stringify(currRepo)
if (repo) {
helpPopup.show()
$toggleBtn.show()
$toggler.show()
if (store.get(STORE.REMEMBER) && store.get(STORE.SHOWN)) toggleSidebar(true)
if (repoChanged || reload === true) {
$document.trigger(EVENT.REQ_START)
@ -97,7 +92,7 @@
else treeView.syncSelection()
}
else {
$toggleBtn.hide()
$toggler.hide()
toggleSidebar(false)
}
}
@ -123,7 +118,7 @@
}
}
function sidebarResized() {
function layoutChanged() {
var width = $sidebar.width()
adapter.updateLayout($html.hasClass(PREFIX), width)
store.set(STORE.WIDTH, width)

5
src/main.less
View File

@ -1,9 +1,6 @@
html, .header > .container, .repohead > .container, .site > .container {
html, .container {
transition: margin-left .2s ease;
}
.notransition {
transition: none !important;
}
.octotree_sidebar {
position: fixed !important;

8
src/template.html
View File

@ -33,13 +33,13 @@
</div>
<div>
<div>
<label>Short keys</label>
<a href="https://github.com/madrobby/keymaster#supported-keys" target="_blank" tabIndex="-1">supported keys</a>
<label>Hotkeys</label>
<a href="https://github.com/madrobby/keymaster#defining-shortcuts" target="_blank" tabIndex="-1">supported keys</a>
</div>
<input type="text" data-store="SHORTKEY">
<input type="text" data-store="HOTKEYS">
</div>
<div>
<label><input type="checkbox" data-store="REMEMBER"> Restore sidebar last visibility on load</label>
<label><input type="checkbox" data-store="REMEMBER"> Show sidebar if previously shown</label>
</div>
<div>
<label><input type="checkbox" data-store="COLLAPSE"> Collapse folders with single sub-folder</label>

14
src/view.options.js
View File

@ -1,12 +1,12 @@
function OptionsView($dom, store) {
var self = this
, $view = $dom.find('.octotree_optsview').submit(save)
, $toggleBtn = $dom.find('.octotree_opts').click(toggle)
var self = this
, $view = $dom.find('.octotree_optsview').submit(save)
, $toggler = $dom.find('.octotree_opts').click(toggle)
this.$view = $view
if (store.get(STORE.COLLAPSE) == null) store.set(STORE.COLLAPSE, false)
if (store.get(STORE.REMEMBER) == null) store.set(STORE.REMEMBER, false)
if (!store.get(STORE.SHORTKEY)) store.set(STORE.SHORTKEY, '⌘+b, ⌃+b')
if (!store.get(STORE.HOTKEYS)) store.set(STORE.HOTKEYS, '⌘+b, ⌃+b')
$(document).on(EVENT.TOGGLE, function(event, visible) {
// hide options view when sidebar is hidden
@ -18,12 +18,12 @@ function OptionsView($dom, store) {
if ($view.hasClass('current') === visibility) return
return toggle()
}
if ($toggleBtn.hasClass('selected')) {
$toggleBtn.removeClass('selected')
if ($toggler.hasClass('selected')) {
$toggler.removeClass('selected')
$(self).trigger(EVENT.VIEW_CLOSE)
}
else {
$toggleBtn.addClass('selected')
$toggler.addClass('selected')
$view.find('[data-store]').each(function() {
var $elm = $(this)
, storeKey = STORE[$elm.data('store')]