Merge pull request #3605 from ellisonbg/newux
Modal UI - a whole new world of fun....its like vim, but not!pull/37/head
Brian E. Granger
12 years ago
commit
d8db72564a
@ -0,0 +1,683 @@
|
||||
//----------------------------------------------------------------------------
|
||||
// Copyright (C) 2011 The IPython Development Team
|
||||
//
|
||||
// Distributed under the terms of the BSD License. The full license is in
|
||||
// the file COPYING, distributed as part of this software.
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
//============================================================================
|
||||
// Keyboard management
|
||||
//============================================================================
|
||||
|
||||
var IPython = (function (IPython) {
|
||||
"use strict";
|
||||
|
||||
// Setup global keycodes and inverse keycodes.
|
||||
|
||||
// See http://unixpapa.com/js/key.html for a complete description. The short of
|
||||
// it is that there are different keycode sets. Firefox uses the "Mozilla keycodes"
|
||||
// and Webkit/IE use the "IE keycodes". These keycode sets are mostly the same
|
||||
// but have minor differences.
|
||||
|
||||
// These apply to Firefox, (Webkit and IE)
|
||||
var _keycodes = {
|
||||
'a': 65, 'b': 66, 'c': 67, 'd': 68, 'e': 69, 'f': 70, 'g': 71, 'h': 72, 'i': 73,
|
||||
'j': 74, 'k': 75, 'l': 76, 'm': 77, 'n': 78, 'o': 79, 'p': 80, 'q': 81, 'r': 82,
|
||||
's': 83, 't': 84, 'u': 85, 'v': 86, 'w': 87, 'x': 88, 'y': 89, 'z': 90,
|
||||
'1 !': 49, '2 @': 50, '3 #': 51, '4 $': 52, '5 %': 53, '6 ^': 54,
|
||||
'7 &': 55, '8 *': 56, '9 (': 57, '0 )': 48,
|
||||
'[ {': 219, '] }': 221, '` ~': 192, ', <': 188, '. >': 190, '/ ?': 191,
|
||||
'\\ |': 220, '\' "': 222,
|
||||
'numpad0': 96, 'numpad1': 97, 'numpad2': 98, 'numpad3': 99, 'numpad4': 100,
|
||||
'numpad5': 101, 'numpad6': 102, 'numpad7': 103, 'numpad8': 104, 'numpad9': 105,
|
||||
'multiply': 106, 'add': 107, 'subtract': 109, 'decimal': 110, 'divide': 111,
|
||||
'f1': 112, 'f2': 113, 'f3': 114, 'f4': 115, 'f5': 116, 'f6': 117, 'f7': 118,
|
||||
'f8': 119, 'f9': 120, 'f11': 122, 'f12': 123, 'f13': 124, 'f14': 125, 'f15': 126,
|
||||
'backspace': 8, 'tab': 9, 'enter': 13, 'shift': 16, 'ctrl': 17, 'alt': 18,
|
||||
'meta': 91, 'capslock': 20, 'esc': 27, 'space': 32, 'pageup': 33, 'pagedown': 34,
|
||||
'end': 35, 'home': 36, 'left': 37, 'up': 38, 'right': 39, 'down': 40,
|
||||
'insert': 45, 'delete': 46, 'numlock': 144,
|
||||
};
|
||||
|
||||
// These apply to Firefox and Opera
|
||||
var _mozilla_keycodes = {
|
||||
'; :': 59, '= +': 61, '- _': 173, 'meta': 224
|
||||
}
|
||||
|
||||
// This apply to Webkit and IE
|
||||
var _ie_keycodes = {
|
||||
'; :': 186, '= +': 187, '- _': 189,
|
||||
}
|
||||
|
||||
var browser = IPython.utils.browser[0];
|
||||
|
||||
if (browser === 'Firefox' || browser === 'Opera') {
|
||||
$.extend(_keycodes, _mozilla_keycodes);
|
||||
} else if (browser === 'Safari' || browser === 'Chrome' || browser === 'MSIE') {
|
||||
$.extend(_keycodes, _ie_keycodes);
|
||||
}
|
||||
|
||||
var keycodes = {};
|
||||
var inv_keycodes = {};
|
||||
for (var name in _keycodes) {
|
||||
var names = name.split(' ');
|
||||
if (names.length === 1) {
|
||||
var n = names[0]
|
||||
keycodes[n] = _keycodes[n]
|
||||
inv_keycodes[_keycodes[n]] = n
|
||||
} else {
|
||||
var primary = names[0];
|
||||
var secondary = names[1];
|
||||
keycodes[primary] = _keycodes[name]
|
||||
keycodes[secondary] = _keycodes[name]
|
||||
inv_keycodes[_keycodes[name]] = primary
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Default keyboard shortcuts
|
||||
|
||||
var default_common_shortcuts = {
|
||||
'meta+s' : {
|
||||
help : 'save notebook',
|
||||
help_index : 'fb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.save_checkpoint();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'ctrl+s' : {
|
||||
help : 'save notebook',
|
||||
help_index : 'fc',
|
||||
handler : function (event) {
|
||||
IPython.notebook.save_checkpoint();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'shift' : {
|
||||
help : '',
|
||||
help_index : '',
|
||||
handler : function (event) {
|
||||
// ignore shift keydown
|
||||
return true;
|
||||
}
|
||||
},
|
||||
'shift+enter' : {
|
||||
help : 'run cell',
|
||||
help_index : 'ba',
|
||||
handler : function (event) {
|
||||
IPython.notebook.execute_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'ctrl+enter' : {
|
||||
help : 'run cell, select below',
|
||||
help_index : 'bb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.execute_cell_and_select_below();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'alt+enter' : {
|
||||
help : 'run cell, insert below',
|
||||
help_index : 'bc',
|
||||
handler : function (event) {
|
||||
IPython.notebook.execute_cell_and_insert_below();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edit mode defaults
|
||||
|
||||
var default_edit_shortcuts = {
|
||||
'esc' : {
|
||||
help : 'command mode',
|
||||
help_index : 'aa',
|
||||
handler : function (event) {
|
||||
IPython.notebook.command_mode();
|
||||
IPython.notebook.focus_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'ctrl+m' : {
|
||||
help : 'command mode',
|
||||
help_index : 'ab',
|
||||
handler : function (event) {
|
||||
IPython.notebook.command_mode();
|
||||
IPython.notebook.focus_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'up' : {
|
||||
help : '',
|
||||
help_index : '',
|
||||
handler : function (event) {
|
||||
var cell = IPython.notebook.get_selected_cell();
|
||||
if (cell && cell.at_top()) {
|
||||
event.preventDefault();
|
||||
IPython.notebook.command_mode()
|
||||
IPython.notebook.select_prev();
|
||||
IPython.notebook.edit_mode();
|
||||
return false;
|
||||
};
|
||||
}
|
||||
},
|
||||
'down' : {
|
||||
help : '',
|
||||
help_index : '',
|
||||
handler : function (event) {
|
||||
var cell = IPython.notebook.get_selected_cell();
|
||||
if (cell && cell.at_bottom()) {
|
||||
event.preventDefault();
|
||||
IPython.notebook.command_mode()
|
||||
IPython.notebook.select_next();
|
||||
IPython.notebook.edit_mode();
|
||||
return false;
|
||||
};
|
||||
}
|
||||
},
|
||||
'alt+-' : {
|
||||
help : 'split cell',
|
||||
help_index : 'ea',
|
||||
handler : function (event) {
|
||||
IPython.notebook.split_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'alt+subtract' : {
|
||||
help : '',
|
||||
help_index : 'eb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.split_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// Command mode defaults
|
||||
|
||||
var default_command_shortcuts = {
|
||||
'enter' : {
|
||||
help : 'edit mode',
|
||||
help_index : 'aa',
|
||||
handler : function (event) {
|
||||
IPython.notebook.edit_mode();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'up' : {
|
||||
help : 'select previous cell',
|
||||
help_index : 'da',
|
||||
handler : function (event) {
|
||||
var index = IPython.notebook.get_selected_index();
|
||||
if (index !== 0 && index !== null) {
|
||||
IPython.notebook.select_prev();
|
||||
var cell = IPython.notebook.get_selected_cell();
|
||||
cell.focus_cell();
|
||||
};
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'down' : {
|
||||
help : 'select next cell',
|
||||
help_index : 'db',
|
||||
handler : function (event) {
|
||||
var index = IPython.notebook.get_selected_index();
|
||||
if (index !== (IPython.notebook.ncells()-1) && index !== null) {
|
||||
IPython.notebook.select_next();
|
||||
var cell = IPython.notebook.get_selected_cell();
|
||||
cell.focus_cell();
|
||||
};
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'k' : {
|
||||
help : 'select previous cell',
|
||||
help_index : 'dc',
|
||||
handler : function (event) {
|
||||
var index = IPython.notebook.get_selected_index();
|
||||
if (index !== 0 && index !== null) {
|
||||
IPython.notebook.select_prev();
|
||||
var cell = IPython.notebook.get_selected_cell();
|
||||
cell.focus_cell();
|
||||
};
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'j' : {
|
||||
help : 'select next cell',
|
||||
help_index : 'dd',
|
||||
handler : function (event) {
|
||||
var index = IPython.notebook.get_selected_index();
|
||||
if (index !== (IPython.notebook.ncells()-1) && index !== null) {
|
||||
IPython.notebook.select_next();
|
||||
var cell = IPython.notebook.get_selected_cell();
|
||||
cell.focus_cell();
|
||||
};
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'x' : {
|
||||
help : 'cut cell',
|
||||
help_index : 'ee',
|
||||
handler : function (event) {
|
||||
IPython.notebook.cut_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'c' : {
|
||||
help : 'copy cell',
|
||||
help_index : 'ef',
|
||||
handler : function (event) {
|
||||
IPython.notebook.copy_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'v' : {
|
||||
help : 'paste cell below',
|
||||
help_index : 'eg',
|
||||
handler : function (event) {
|
||||
IPython.notebook.paste_cell_below();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'd' : {
|
||||
help : 'delete cell (press twice)',
|
||||
help_index : 'ei',
|
||||
handler : function (event) {
|
||||
var dc = IPython.keyboard_manager._delete_count;
|
||||
if (dc === 0) {
|
||||
IPython.keyboard_manager._delete_count = 1;
|
||||
setTimeout(function () {
|
||||
IPython.keyboard_manager._delete_count = 0;
|
||||
}, 800);
|
||||
} else if (dc === 1) {
|
||||
IPython.notebook.delete_cell();
|
||||
IPython.keyboard_manager._delete_count = 0;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'a' : {
|
||||
help : 'insert cell above',
|
||||
help_index : 'ec',
|
||||
handler : function (event) {
|
||||
IPython.notebook.insert_cell_above('code');
|
||||
IPython.notebook.select_prev();
|
||||
IPython.notebook.focus_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'b' : {
|
||||
help : 'insert cell below',
|
||||
help_index : 'ed',
|
||||
handler : function (event) {
|
||||
IPython.notebook.insert_cell_below('code');
|
||||
IPython.notebook.select_next();
|
||||
IPython.notebook.focus_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'y' : {
|
||||
help : 'to code',
|
||||
help_index : 'ca',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_code();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'm' : {
|
||||
help : 'to markdown',
|
||||
help_index : 'cb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_markdown();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
't' : {
|
||||
help : 'to raw',
|
||||
help_index : 'cc',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_raw();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'1' : {
|
||||
help : 'to heading 1',
|
||||
help_index : 'cd',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_heading(undefined, 1);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'2' : {
|
||||
help : 'to heading 2',
|
||||
help_index : 'ce',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_heading(undefined, 2);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'3' : {
|
||||
help : 'to heading 3',
|
||||
help_index : 'cf',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_heading(undefined, 3);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'4' : {
|
||||
help : 'to heading 4',
|
||||
help_index : 'cg',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_heading(undefined, 4);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'5' : {
|
||||
help : 'to heading 5',
|
||||
help_index : 'ch',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_heading(undefined, 5);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'6' : {
|
||||
help : 'to heading 6',
|
||||
help_index : 'ci',
|
||||
handler : function (event) {
|
||||
IPython.notebook.to_heading(undefined, 6);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'o' : {
|
||||
help : 'toggle output',
|
||||
help_index : 'gb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.toggle_output();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'shift+o' : {
|
||||
help : 'toggle output',
|
||||
help_index : 'gc',
|
||||
handler : function (event) {
|
||||
IPython.notebook.toggle_output_scroll();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
's' : {
|
||||
help : 'save notebook',
|
||||
help_index : 'fa',
|
||||
handler : function (event) {
|
||||
IPython.notebook.save_checkpoint();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'ctrl+j' : {
|
||||
help : 'move cell down',
|
||||
help_index : 'eb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.move_cell_down();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'ctrl+k' : {
|
||||
help : 'move cell up',
|
||||
help_index : 'ea',
|
||||
handler : function (event) {
|
||||
IPython.notebook.move_cell_up();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'l' : {
|
||||
help : 'toggle line numbers',
|
||||
help_index : 'ga',
|
||||
handler : function (event) {
|
||||
IPython.notebook.cell_toggle_line_numbers();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'i' : {
|
||||
help : 'interrupt kernel',
|
||||
help_index : 'ha',
|
||||
handler : function (event) {
|
||||
IPython.notebook.kernel.interrupt();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'.' : {
|
||||
help : 'restart kernel',
|
||||
help_index : 'hb',
|
||||
handler : function (event) {
|
||||
IPython.notebook.restart_kernel();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'h' : {
|
||||
help : 'keyboard shortcuts',
|
||||
help_index : 'gd',
|
||||
handler : function (event) {
|
||||
IPython.quick_help.show_keyboard_shortcuts();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'z' : {
|
||||
help : 'undo last delete',
|
||||
help_index : 'eh',
|
||||
handler : function (event) {
|
||||
IPython.notebook.undelete_cell();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'shift+=' : {
|
||||
help : 'merge cell below',
|
||||
help_index : 'ej',
|
||||
handler : function (event) {
|
||||
IPython.notebook.merge_cell_below();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
// Shortcut manager class
|
||||
|
||||
var ShortcutManager = function () {
|
||||
this._shortcuts = {}
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.help = function () {
|
||||
var help = [];
|
||||
for (var shortcut in this._shortcuts) {
|
||||
var help_string = this._shortcuts[shortcut]['help'];
|
||||
var help_index = this._shortcuts[shortcut]['help_index'];
|
||||
if (help_string) {
|
||||
help.push({
|
||||
shortcut: shortcut,
|
||||
help: help_string,
|
||||
help_index: help_index}
|
||||
);
|
||||
}
|
||||
}
|
||||
help.sort(function (a, b) {
|
||||
if (a.help_index > b.help_index)
|
||||
return 1;
|
||||
if (a.help_index < b.help_index)
|
||||
return -1;
|
||||
return 0;
|
||||
});
|
||||
return help;
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.normalize_key = function (key) {
|
||||
return inv_keycodes[keycodes[key]];
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.normalize_shortcut = function (shortcut) {
|
||||
// Sort a sequence of + separated modifiers into the order alt+ctrl+meta+shift
|
||||
var values = shortcut.split("+");
|
||||
if (values.length === 1) {
|
||||
return this.normalize_key(values[0])
|
||||
} else {
|
||||
var modifiers = values.slice(0,-1);
|
||||
var key = this.normalize_key(values[values.length-1]);
|
||||
modifiers.sort();
|
||||
return modifiers.join('+') + '+' + key;
|
||||
}
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.event_to_shortcut = function (event) {
|
||||
// Convert a jQuery keyboard event to a strong based keyboard shortcut
|
||||
var shortcut = '';
|
||||
var key = inv_keycodes[event.which]
|
||||
if (event.altKey && key !== 'alt') {shortcut += 'alt+';}
|
||||
if (event.ctrlKey && key !== 'ctrl') {shortcut += 'ctrl+';}
|
||||
if (event.metaKey && key !== 'meta') {shortcut += 'meta+';}
|
||||
if (event.shiftKey && key !== 'shift') {shortcut += 'shift+';}
|
||||
shortcut += key;
|
||||
return shortcut
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.clear_shortcuts = function () {
|
||||
this._shortcuts = {};
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.add_shortcut = function (shortcut, data) {
|
||||
if (typeof(data) === 'function') {
|
||||
data = {help: '', help_index: '', handler: data}
|
||||
}
|
||||
data.help_index = data.help_index || '';
|
||||
data.help = data.help || '';
|
||||
if (data.help_index === '') {
|
||||
data.help_index = 'zz';
|
||||
}
|
||||
shortcut = this.normalize_shortcut(shortcut);
|
||||
this._shortcuts[shortcut] = data;
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.add_shortcuts = function (data) {
|
||||
for (var shortcut in data) {
|
||||
this.add_shortcut(shortcut, data[shortcut]);
|
||||
}
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.remove_shortcut = function (shortcut) {
|
||||
shortcut = this.normalize_shortcut(shortcut);
|
||||
delete this._shortcuts[shortcut];
|
||||
}
|
||||
|
||||
ShortcutManager.prototype.call_handler = function (event) {
|
||||
var shortcut = this.event_to_shortcut(event);
|
||||
var data = this._shortcuts[shortcut];
|
||||
if (data !== undefined) {
|
||||
var handler = data['handler'];
|
||||
if (handler !== undefined) {
|
||||
return handler(event);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Main keyboard manager for the notebook
|
||||
|
||||
var KeyboardManager = function () {
|
||||
this.mode = 'command';
|
||||
this.enabled = true;
|
||||
this._delete_count = 0;
|
||||
this.bind_events();
|
||||
this.command_shortcuts = new ShortcutManager();
|
||||
this.command_shortcuts.add_shortcuts(default_common_shortcuts);
|
||||
this.command_shortcuts.add_shortcuts(default_command_shortcuts);
|
||||
this.edit_shortcuts = new ShortcutManager();
|
||||
this.edit_shortcuts.add_shortcuts(default_common_shortcuts);
|
||||
this.edit_shortcuts.add_shortcuts(default_edit_shortcuts);
|
||||
};
|
||||
|
||||
KeyboardManager.prototype.bind_events = function () {
|
||||
var that = this;
|
||||
$(document).keydown(function (event) {
|
||||
return that.handle_keydown(event);
|
||||
});
|
||||
};
|
||||
|
||||
KeyboardManager.prototype.handle_keydown = function (event) {
|
||||
var notebook = IPython.notebook;
|
||||
|
||||
if (event.which === keycodes['esc']) {
|
||||
// Intercept escape at highest level to avoid closing
|
||||
// websocket connection with firefox
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (!this.enabled) {
|
||||
if (event.which === keycodes['esc']) {
|
||||
// ESC
|
||||
notebook.command_mode();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.mode === 'edit') {
|
||||
return this.edit_shortcuts.call_handler(event);
|
||||
} else if (this.mode === 'command') {
|
||||
return this.command_shortcuts.call_handler(event);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
KeyboardManager.prototype.edit_mode = function () {
|
||||
this.last_mode = this.mode;
|
||||
this.mode = 'edit';
|
||||
}
|
||||
|
||||
KeyboardManager.prototype.command_mode = function () {
|
||||
this.last_mode = this.mode;
|
||||
this.mode = 'command';
|
||||
}
|
||||
|
||||
KeyboardManager.prototype.enable = function () {
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
KeyboardManager.prototype.disable = function () {
|
||||
this.enabled = false;
|
||||
}
|
||||
|
||||
KeyboardManager.prototype.register_events = function (e) {
|
||||
var that = this;
|
||||
e.on('focusin', function () {
|
||||
that.command_mode();
|
||||
that.disable();
|
||||
});
|
||||
e.on('focusout', function () {
|
||||
that.command_mode();
|
||||
that.enable();
|
||||
});
|
||||
// There are times (raw_input) where we remove the element from the DOM before
|
||||
// focusout is called. In this case we bind to the remove event of jQueryUI,
|
||||
// which gets triggered upon removal.
|
||||
e.on('remove', function () {
|
||||
that.command_mode();
|
||||
that.enable();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
IPython.keycodes = keycodes;
|
||||
IPython.inv_keycodes = inv_keycodes;
|
||||
IPython.default_common_shortcuts = default_common_shortcuts;
|
||||
IPython.default_edit_shortcuts = default_edit_shortcuts;
|
||||
IPython.default_command_shortcuts = default_command_shortcuts;
|
||||
IPython.ShortcutManager = ShortcutManager;
|
||||
IPython.KeyboardManager = KeyboardManager;
|
||||
|
||||
return IPython;
|
||||
|
||||
}(IPython));
|
||||
@ -0,0 +1,421 @@
|
||||
{
|
||||
"metadata": {
|
||||
"name": ""
|
||||
},
|
||||
"nbformat": 3,
|
||||
"nbformat_minor": 0,
|
||||
"worksheets": [
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 1,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"User Interface"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"This notebook describes the user interface of the IPython Notebook. This includes both mouse and keyboard based navigation and interaction.\n",
|
||||
"\n",
|
||||
"<div class=\"alert\" style=\"margin: 10px\">\n",
|
||||
"As of IPython 2.0, the user interface has changed significantly. Because of this we highly recommend existing users to review this information after upgrading to IPython 2.0. All new users of IPython should review this information as well.\n",
|
||||
"</div>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 2,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Modal editor"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Starting with IPython 2.0, the IPython Notebook has a modal user interface. This means that the keyboard does different things depending on which mode the Notebook is in. There are two modes: edit mode and command mode."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 3,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Edit mode"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Edit mode is indicated by a green cell border and a prompt showing in the editor area:\n",
|
||||
"\n",
|
||||
"<img src=\"images/edit_mode.png\">\n",
|
||||
"\n",
|
||||
"When a cell is in edit mode, you can type into the cell, like a normal text editor.\n",
|
||||
"\n",
|
||||
"<div class=\"alert alert-success\" style=\"margin: 10px\">\n",
|
||||
"Enter edit mode by pressing `enter` or using the mouse to click on a cell's editor area.\n",
|
||||
"</div>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 3,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Command mode"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Command mode is indicated by a grey cell border:\n",
|
||||
"\n",
|
||||
"<img src=\"images/command_mode.png\">\n",
|
||||
"\n",
|
||||
"When you are in command mode, you are able to edit the notebook as a whole, but not type into individual cells. Most importantly, in command mode, the keyboard is mapped to a set of shortcuts that let you perform notebook and cell actions efficiently. For example, if you are in command mode and you press `c`, you will copy the current cell - no modifier is needed.\n",
|
||||
"\n",
|
||||
"<div class=\"alert alert-error\" style=\"margin: 10px\">\n",
|
||||
"Don't try to type into a cell in command mode; unexpected things will happen!\n",
|
||||
"</div>\n",
|
||||
"\n",
|
||||
"<div class=\"alert alert-success\" style=\"margin: 10px\">\n",
|
||||
"Enter command mode by pressing `esc` or using the mouse to click *outside* a cell's editor area.\n",
|
||||
"</div>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 2,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Mouse navigation"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"All navigation and actions in the Notebook are available using the mouse through the menubar and toolbar, which are both above the main Notebook area:\n",
|
||||
"\n",
|
||||
"<img src=\"images/menubar_toolbar.png\">"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"The first idea of mouse based navigation is that **cells can be selected by clicking on them.** The currently selected cell gets a grey or green border depending on whether the notebook is in edit or command mode. If you click inside a cell's editor area, you will enter edit mode. If you click on the prompt or output area of a cell you will enter command mode.\n",
|
||||
"\n",
|
||||
"If you are running this notebook in a live session (not on http://nbviewer.ipython.org) try selecting different cells and going between edit and command mode. Try typing into a cell."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"The second idea of mouse based navigation is that **cell actions usually apply to the currently selected cell**. Thus if you want to run the code in a cell, you would select it and click the \"Play\" button in the toolbar or the \"Cell:Run\" menu item. Similarly, to copy a cell you would select it and click the \"Copy\" button in the toolbar or the \"Edit:Copy\" menu item. With this simple pattern, you should be able to do most everything you need with the mouse.\n",
|
||||
"\n",
|
||||
"Markdown and heading cells have one other state that can be modified with the mouse. These cells can either be rendered or unrendered. When they are rendered, you will see a nice formatted representation of the cell's contents. When they are unrendered, you will see the raw text source of the cell. To render the selected cell with the mouse, click the \"Play\" button in the toolbar or the \"Cell:Run\" menu item. To unrender the selected cell, double click on the cell."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 2,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Keyboard Navigation"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"The modal user interface of the IPython Notebook has been optimized for efficient keyboard usage. This is made possible by having two different sets of keyboard shortcuts: one set that is active in edit mode and another in command mode.\n",
|
||||
"\n",
|
||||
"The most important keyboard shortcuts are `enter`, which enters edit mode, and `esc`, which enters command mode.\n",
|
||||
"\n",
|
||||
"In edit mode, most of the keyboard is dedicated to typing into the cell's editor. Thus, in edit mode there are relatively few shortcuts:"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"The `display_edit_shortcuts()` function used here is defined in the [Utilities section](#Utilities) at the bottom of this notebook."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"collapsed": false,
|
||||
"input": [
|
||||
"display_edit_shortcuts()"
|
||||
],
|
||||
"language": "python",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"html": [
|
||||
"<div class=\"hbox\"><div class=\"box-flex0\"><div class=\"quickhelp\"><span class=\"shortcut_key\">esc</span><span class=\"shortcut_descr\"> : command mode</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+m</span><span class=\"shortcut_descr\"> : command mode</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">shift+enter</span><span class=\"shortcut_descr\"> : run cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+enter</span><span class=\"shortcut_descr\"> : run cell, select below</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">alt+enter</span><span class=\"shortcut_descr\"> : run cell, insert below</span></div></div><div class=\"box-flex0\"><div class=\"quickhelp\"><span class=\"shortcut_key\">up</span><span class=\"shortcut_descr\"> : select previous cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">down</span><span class=\"shortcut_descr\"> : select next cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">alt+-</span><span class=\"shortcut_descr\"> : split cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">meta+s</span><span class=\"shortcut_descr\"> : save notebook</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+s</span><span class=\"shortcut_descr\"> : save notebook</span></div></div></div>"
|
||||
],
|
||||
"output_type": "display_data"
|
||||
},
|
||||
{
|
||||
"javascript": [
|
||||
"var help = IPython.quick_help.build_edit_help();\n",
|
||||
"help.children().first().remove();\n",
|
||||
"this.append_output({output_type: 'display_data', html: help.html()});"
|
||||
],
|
||||
"metadata": {},
|
||||
"output_type": "display_data",
|
||||
"text": [
|
||||
"<IPython.core.display.Javascript at 0x10e441250>"
|
||||
]
|
||||
}
|
||||
],
|
||||
"prompt_number": 14
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"There are two other keyboard shortcuts in edit mode that are not listed here:\n",
|
||||
"\n",
|
||||
"* `tab`: trigger \"tab\" completion\n",
|
||||
"* `shift+tab`: open the tooltip"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"In command mode, the entire keyboard is available for shortcuts:"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"collapsed": false,
|
||||
"input": [
|
||||
"display_command_shortcuts()"
|
||||
],
|
||||
"language": "python",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"html": [
|
||||
"<div class=\"hbox\"><div class=\"box-flex0\"><div class=\"quickhelp\"><span class=\"shortcut_key\">enter</span><span class=\"shortcut_descr\"> : edit mode</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">shift+enter</span><span class=\"shortcut_descr\"> : run cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+enter</span><span class=\"shortcut_descr\"> : run cell, select below</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">alt+enter</span><span class=\"shortcut_descr\"> : run cell, insert below</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">y</span><span class=\"shortcut_descr\"> : to code</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">m</span><span class=\"shortcut_descr\"> : to markdown</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">t</span><span class=\"shortcut_descr\"> : to raw</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">1</span><span class=\"shortcut_descr\"> : to heading 1</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">2</span><span class=\"shortcut_descr\"> : to heading 2</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">3</span><span class=\"shortcut_descr\"> : to heading 3</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">4</span><span class=\"shortcut_descr\"> : to heading 4</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">5</span><span class=\"shortcut_descr\"> : to heading 5</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">6</span><span class=\"shortcut_descr\"> : to heading 6</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">up</span><span class=\"shortcut_descr\"> : select previous cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">down</span><span class=\"shortcut_descr\"> : select next cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">k</span><span class=\"shortcut_descr\"> : select previous cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">j</span><span class=\"shortcut_descr\"> : select next cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+k</span><span class=\"shortcut_descr\"> : move cell up</span></div></div><div class=\"box-flex0\"><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+j</span><span class=\"shortcut_descr\"> : move cell down</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">a</span><span class=\"shortcut_descr\"> : insert cell above</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">b</span><span class=\"shortcut_descr\"> : insert cell below</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">x</span><span class=\"shortcut_descr\"> : cut cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">c</span><span class=\"shortcut_descr\"> : copy cell</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">v</span><span class=\"shortcut_descr\"> : paste cell below</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">z</span><span class=\"shortcut_descr\"> : undo last delete</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">d</span><span class=\"shortcut_descr\"> : delete cell (press twice)</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">shift+=</span><span class=\"shortcut_descr\"> : merge cell below</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">s</span><span class=\"shortcut_descr\"> : save notebook</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">meta+s</span><span class=\"shortcut_descr\"> : save notebook</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">ctrl+s</span><span class=\"shortcut_descr\"> : save notebook</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">l</span><span class=\"shortcut_descr\"> : toggle line numbers</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">o</span><span class=\"shortcut_descr\"> : toggle output</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">shift+o</span><span class=\"shortcut_descr\"> : toggle output</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">h</span><span class=\"shortcut_descr\"> : keyboard shortcuts</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">i</span><span class=\"shortcut_descr\"> : interrupt kernel</span></div><div class=\"quickhelp\"><span class=\"shortcut_key\">.</span><span class=\"shortcut_descr\"> : restart kernel</span></div></div></div>"
|
||||
],
|
||||
"output_type": "display_data"
|
||||
},
|
||||
{
|
||||
"javascript": [
|
||||
"var help = IPython.quick_help.build_command_help();\n",
|
||||
"help.children().first().remove();\n",
|
||||
"this.append_output({output_type: 'display_data', html: help.html()});"
|
||||
],
|
||||
"metadata": {},
|
||||
"output_type": "display_data",
|
||||
"text": [
|
||||
"<IPython.core.display.Javascript at 0x10e441410>"
|
||||
]
|
||||
}
|
||||
],
|
||||
"prompt_number": 15
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Here the rough order in which we recommend learning the command mode shortcuts:\n",
|
||||
"\n",
|
||||
"1. Basic navigation: `enter`, `shift-enter`, `up/k`, `down/j`\n",
|
||||
"2. Saving the notebook: `s`\n",
|
||||
"2. Cell types: `y`, `m`, `1-6`, `t`\n",
|
||||
"3. Cell creation and movement: `a`, `b`, `ctrl+k`, `ctrl+j`\n",
|
||||
"4. Cell editing: `x`, `c`, `v`, `d`, `z`, `shift+=`\n",
|
||||
"5. Kernel operations: `i`, `.`"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 2,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Keyboard shortcut customization"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Starting with IPython 2.0 keyboard shortcuts in command and edit mode are fully customizable. These customizations are made using the IPython JavaScript API. Here is an example that makes the `r` key available for running a cell:"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"collapsed": false,
|
||||
"input": [
|
||||
"%%javascript\n",
|
||||
"\n",
|
||||
"IPython.keyboard_manager.command_shortcuts.add_shortcut('r', {\n",
|
||||
" help : 'run cell',\n",
|
||||
" help_index : 'zz',\n",
|
||||
" handler : function (event) {\n",
|
||||
" IPython.notebook.execute_cell();\n",
|
||||
" return false;\n",
|
||||
" }}\n",
|
||||
");"
|
||||
],
|
||||
"language": "python",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"javascript": [
|
||||
"\n",
|
||||
"IPython.keyboard_manager.command_shortcuts.add_shortcut('r', {\n",
|
||||
" help : 'run cell',\n",
|
||||
" help_index : 'aa',\n",
|
||||
" handler : function (event) {\n",
|
||||
" IPython.notebook.execute_cell();\n",
|
||||
" return false;\n",
|
||||
" }}\n",
|
||||
");"
|
||||
],
|
||||
"metadata": {},
|
||||
"output_type": "display_data",
|
||||
"text": [
|
||||
"<IPython.core.display.Javascript at 0x1019ba990>"
|
||||
]
|
||||
}
|
||||
],
|
||||
"prompt_number": 6
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"There are a couple of points to mention about this API:\n",
|
||||
"\n",
|
||||
"* The `help_index` field is used to sort the shortcuts in the Keyboard Shortcuts help dialog. It defaults to `zz`.\n",
|
||||
"* When a handler returns `false` it indicates that the event should stop propagating and the default action should not be performed. For further details about the `event` object or event handling, see the jQuery docs.\n",
|
||||
"* If you don't need a `help` or `help_index` field, you can simply pass a function as the second argument to `add_shortcut`."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"collapsed": false,
|
||||
"input": [
|
||||
"%%javascript\n",
|
||||
"\n",
|
||||
"IPython.keyboard_manager.command_shortcuts.add_shortcut('r', function (event) {\n",
|
||||
" IPython.notebook.execute_cell();\n",
|
||||
" return false;\n",
|
||||
"});"
|
||||
],
|
||||
"language": "python",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"javascript": [
|
||||
"\n",
|
||||
"IPython.keyboard_manager.command_shortcuts.add_shortcut('r', function (event) {\n",
|
||||
" IPython.notebook.execute_cell();\n",
|
||||
" return false;\n",
|
||||
"});"
|
||||
],
|
||||
"metadata": {},
|
||||
"output_type": "display_data",
|
||||
"text": [
|
||||
"<IPython.core.display.Javascript at 0x1019baf90>"
|
||||
]
|
||||
}
|
||||
],
|
||||
"prompt_number": 11
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Likewise, to remove a shortcut, use `remove_shortcut`:"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"collapsed": false,
|
||||
"input": [
|
||||
"%%javascript\n",
|
||||
"\n",
|
||||
"IPython.keyboard_manager.command_shortcuts.remove_shortcut('r');"
|
||||
],
|
||||
"language": "python",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"javascript": [
|
||||
"\n",
|
||||
"IPython.keyboard_manager.command_shortcuts.remove_shortcut('r');"
|
||||
],
|
||||
"metadata": {},
|
||||
"output_type": "display_data",
|
||||
"text": [
|
||||
"<IPython.core.display.Javascript at 0x1019ba950>"
|
||||
]
|
||||
}
|
||||
],
|
||||
"prompt_number": 8
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"If you want your keyboard shortcuts to be active for all of your notebooks, put the above API calls into your `custom.js` file."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "heading",
|
||||
"level": 2,
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Utilities"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"We use the following functions to generate the keyboard shortcut listings above."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"collapsed": false,
|
||||
"input": [
|
||||
"from IPython.display import Javascript, display\n",
|
||||
"\n",
|
||||
"t = \"\"\"var help = IPython.quick_help.build_{0}_help();\n",
|
||||
"help.children().first().remove();\n",
|
||||
"this.append_output({{output_type: 'display_data', html: help.html()}});\"\"\"\n",
|
||||
"\n",
|
||||
"def display_command_shortcuts():\n",
|
||||
" display(Javascript(t.format('command')))\n",
|
||||
"\n",
|
||||
"def display_edit_shortcuts():\n",
|
||||
" display(Javascript(t.format('edit'))) "
|
||||
],
|
||||
"language": "python",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"prompt_number": 2
|
||||
}
|
||||
],
|
||||
"metadata": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in new issue