Skip to content
This repository has been archived by the owner on Jan 12, 2022. It is now read-only.

Commit

Permalink
Merge branch 'bug-633592-keyboard_shortcuts'
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanmonstar
seanmonstar committed Mar 17, 2011
2 parents 7df6e5b + 541c2fe commit ce256a3
Show file tree
Hide file tree
Showing 9 changed files with 688 additions and 63 deletions.
11 changes: 10 additions & 1 deletion media/base/js/FlightDeck.Utils.js
View file
Expand Up @@ -8,4 +8,13 @@ Window.implement({
console.log(arguments.length <= 1 ? arguments[0] : arguments);
}
}
});
});


(function() {

Slick.definePseudo('hidden', Element.prototype.isHidden)

Slick.definePseudo('visible', Element.prototype.isVisible);

})();
8 changes: 8 additions & 0 deletions media/jetpack/css/UI.Layout.css
View file
Expand Up @@ -475,6 +475,14 @@ a:hover {
text-shadow: 0 1px 0 #011E4F;
}

kbd {
border:1px solid #ababab;
border-radius:3px;
color:#999;
font-family:Lucida Grande, monospace;
font-size:10px;
padding:2px 3px;
}

/*
=========================================================================== */
Expand Down
4 changes: 4 additions & 0 deletions media/jetpack/css/tree.css
View file
Expand Up @@ -68,6 +68,10 @@ ul.tree li .label:hover {
text-shadow:1px 0 0 #aaa;
}

ul.tree li.focused > .holder .label {
background:#E8F2FE;
}

ul.tree li .label[contenteditable="true"] {
background:#ffd;
}
Expand Down
7 changes: 7 additions & 0 deletions media/jetpack/js/FDEditor.Ace.js
View file
Expand Up @@ -47,6 +47,13 @@
initialize: function(wrapper, options) {
this.previous(wrapper, options);
this.editor = ace.edit(this.element);
var that = this;

['blur', 'focus'].each(function(ev) {
that.editor.on(ev, function(){
that.fireEvent(ev);
});
});
},

addMode: function(mode) {
Expand Down
12 changes: 11 additions & 1 deletion media/jetpack/js/FDEditor.js
View file
Expand Up @@ -162,5 +162,15 @@ var FDEditor = new Class({
});
},

setSyntax: function(){}
setSyntax: function(){},

focus: function() {
this.editor.focus();
this.fireEvent('focus');
},

blur: function() {
this.editor.blur();
this.fireEvent('blur');
}
});
104 changes: 100 additions & 4 deletions media/jetpack/js/Package.js
View file
Expand Up @@ -1314,13 +1314,109 @@ Package.Edit = new Class({
}).send();
},

blur: function() {
this._focused = false;
this.editor.blur();
this.fireEvent('blur');
this.editor.addEvent('focus:once', function() {
if (!this._focused) {
this.focus();
}
}.bind(this));
},

_focused: true,

focus: function() {
if (this._focused) return;
this._focused = true;
this.keyboard.activate();
this.editor.focus();

this.fireEvent('focus');
},

bind_keyboard: function() {
this.keyboard = new Keyboard({
events: {
'ctrl+s': this.boundSaveAction
var that = this;
this.keyboard = new Keyboard();
this.keyboard.addShortcuts({
'save': {
keys:'ctrl+s',
description: 'Save current outstanding changes.',
handler: this.boundSaveAction
},
'test': {
keys:'ctrl+enter',
description: 'Test',
handler: function(e) {
e.preventDefault();
that.testAddon();
}
},
'new attachment': {
keys: 'ctrl+n',
description: 'Open the New Attachment prompt.',
handler: function(e) {
e.preventDefault();
fd.sidebar.promptAttachment();
}
},
'new module': {
keys:'ctrl+shift+n',
description: 'Open the New Module prompt.',
handler: function(e) {
e.preventDefault();
fd.sidebar.promptNewFile();
}
},
'focus tree / editor': {
keys: 'ctrl+e',
description: 'Switch focus between the editor and the tree',
handler: function(e) {
e.preventDefault();
if(that._focused) {
that.blur();
fd.sidebar.focus();
} else {
//fd.sidebar.blur();
that.focus();
}
}
},
'shortcuts': {
keys: 'ctrl+shift+/',
description: 'Show these keyboard shortcuts',
handler: function() {
that.showShortcuts();
}
}
});
})
this.keyboard.manage(fd.sidebar.keyboard);
this.keyboard.activate();
fd.sidebar.keyboard.deactivate();
this.addEvent('focus', function() {
fd.sidebar.blur();
});
},

showShortcuts: function() {
function buildLines(shortcut) {
var keys = '<kbd>'+ shortcut.keys.split('+').join('</kbd> + <kbd>').split('|').join('</kbd> or <kbd>') + '</kbd>';
shortcuts.push(keys + ': ' + shortcut.description);
}

var shortcuts = [];

shortcuts.push('<strong>Editor</strong>');
this.keyboard.getShortcuts().forEach(buildLines);
shortcuts.push('<strong>Tree</strong>');
fd.sidebar.keyboard.getShortcuts().forEach(buildLines);

fd.displayModal('<h3>Keyboard Shortcuts</h3>'
+'<div class="UI_Modal_Section"><p>'
+shortcuts.join('</p><p>')
+'</p></div>'
);
},

registerRevision: function(urls) {
Expand Down
163 changes: 151 additions & 12 deletions media/jetpack/js/Sidebar.js
View file
Expand Up @@ -14,7 +14,8 @@ var Sidebar = new Class({
initialize: function(options){
this.setOptions(options);
this.element = $('app-sidebar');

this.bind_keyboard();

this.resizeTreeContainer();
window.addEvent('resize', this.resizeTreeContainer.bind(this));
},
Expand Down Expand Up @@ -136,15 +137,7 @@ var Sidebar = new Class({

// highlight branch on click
sidebarEl.addEvent('click:relay(.{file_listing_class} li:not(.top_branch) .label:not([contenteditable="true"]))'.substitute(this.options), function(e) {
var li = $(e.target).getParent('li'),
file = li.retrieve('file');
if(file) {
if(file.is_editable()) {
that.setSelectedFile(li);
}

file.onSelect();
}
that.selectFile($(e.target).getParent('li'));
});

//adding modules to Lib
Expand Down Expand Up @@ -345,6 +338,17 @@ var Sidebar = new Class({

return this;
},

selectFile: function(li) {
var file = li.retrieve('file');
if(file) {
if(file.is_editable()) {
this.setSelectedFile(li);
}

file.onSelect();
}
},

silentlyRemoveFolders: function(element) {
var node = element;
Expand Down Expand Up @@ -403,7 +407,7 @@ var Sidebar = new Class({
},

promptNewFile: function(folder) {
var path = folder.get('path') || '';
var path = (folder && folder.get('path')) || '';
if (path) path += '/';

var prompt = fd.showQuestion({
Expand Down Expand Up @@ -470,7 +474,7 @@ var Sidebar = new Class({
},

promptAttachment: function(folder) {
var path = folder.get('path') || '';
var path = (folder && folder.get('path')) || '';
if (path) path += '/';
var that = this;
var prompt = fd.showQuestion({
Expand Down Expand Up @@ -625,6 +629,141 @@ var Sidebar = new Class({
that.removePluginUpdate(file);
});
},

focus: function() {
this.keyboard.activate();

$(this).getElements('.focused').removeClass('focused');

//set top most branch as current if never focused before
this._current_focus = this._current_focus || $(this).getElement('li');

if (this._current_focus) {
this._current_focus.addClass('focused');
}
},

blur: function() {
this.keyboard.deactivate();
if (this._current_focus) {
this._current_focus.removeClass('focused');
}
},

focusPrevious: function() {
var current = this._current_focus,
el;

if (!current) {
this.focus();
return;
}
//sorta opposite for "next"
//1. if previous sibling has children
//2. previous sibling
//3. parent
el = current.getElements('!+li ul:visible !^li, !+li, !li, !section !+ section ul:visible !^li');

// Here, here!
// Since there are multiple expressions (the commas), Slick sorts the
// returned nodelist based on placement in the document. Since we're
// going up the dom, and basically want the *lowest* li, we can pick
// that off the end, and everything works. Heyyy!
el = el[el.length-1];

if (el) {
this._current_focus = el;
this.focus();
}
},

focusNext: function() {
var current = this._current_focus,
el;
if (!current) {
this.focus();
return;
}

//try to find the next branch that isn't hidden
//1. Is this branch open, and have children?
//2. Does this branch have siblings?
el = current.getElement('ul:visible li, ~ li, !li + li, !section + section li.top_branch');
if (el) {
this._current_focus = el;
this.focus();
}

},

expandFocused: function() {
var current = this._current_focus;
if (!current) {
return;
}

var treeName = current.getParent('ul.tree').get('id').replace('Tree','').toLowerCase();
this.trees[treeName].collapse.expand(current);
},

collapseFocused: function() {
var current = this._current_focus;
if (!current) {
return;
}
var treeName = current.getParent('ul.tree').get('id').replace('Tree','').toLowerCase();
this.trees[treeName].collapse.collapse(current);
},

bind_keyboard: function() {
var that = this;
this.keyboard = new Keyboard();
this.keyboard.addShortcuts({
'collapse': {
keys:'left',
description: 'Collapse focused folder.',
handler: function(e) {
that.collapseFocused();
}
},
'expand': {
keys: 'right',
description: 'Expand focused folder',
handler: function(e) {
that.expandFocused();
}
},
'up': {
keys: 'up|k',
description: 'Move focus up the tree.',
handler: function(e) {
that.focusPrevious();
}
},
'down': {
keys: 'down|j',
description: 'Move focus down the tree',
handler: function(e) {
that.focusNext();
}
},
'open': {
keys: 'enter',
description: 'Open currently focused file.',
handler: function(e) {
if(that._current_focus) {
var rel = that._current_focus.get('rel');
if(rel == 'file') {
that.selectFile(that._current_focus);
} else {

}
}
}
}
});

},

toElement: function() {
return this.element;
Expand Down

0 comments on commit ce256a3

Please sign in to comment.