##// END OF EJS Templates
use modal_stretch on keyboard shortcut dialog
MinRK -
Show More
@@ -1,128 +1,129 b''
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2008-2011 The IPython Development Team
2 // Copyright (C) 2008-2011 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // QuickHelp button
9 // QuickHelp button
10 //============================================================================
10 //============================================================================
11
11
12 var IPython = (function (IPython) {
12 var IPython = (function (IPython) {
13 "use strict";
13 "use strict";
14
14
15 var QuickHelp = function (selector) {
15 var QuickHelp = function (selector) {
16 };
16 };
17
17
18 QuickHelp.prototype.show_keyboard_shortcuts = function () {
18 QuickHelp.prototype.show_keyboard_shortcuts = function () {
19 // toggles display of keyboard shortcut dialog
19 // toggles display of keyboard shortcut dialog
20 var that = this;
20 var that = this;
21 if ( this.force_rebuild ) {
21 if ( this.force_rebuild ) {
22 this.shortcut_dialog.remove();
22 this.shortcut_dialog.remove();
23 delete(this.shortcut_dialog);
23 delete(this.shortcut_dialog);
24 this.force_rebuild = false;
24 this.force_rebuild = false;
25 }
25 }
26 if ( this.shortcut_dialog ){
26 if ( this.shortcut_dialog ){
27 // if dialog is already shown, close it
27 // if dialog is already shown, close it
28 $(this.shortcut_dialog).modal("toggle");
28 $(this.shortcut_dialog).modal("toggle");
29 return;
29 return;
30 }
30 }
31 var command_shortcuts = IPython.keyboard_manager.command_shortcuts.help();
31 var command_shortcuts = IPython.keyboard_manager.command_shortcuts.help();
32 var edit_shortcuts = IPython.keyboard_manager.edit_shortcuts.help();
32 var edit_shortcuts = IPython.keyboard_manager.edit_shortcuts.help();
33 var help, shortcut;
33 var help, shortcut;
34 var i, half, n;
34 var i, half, n;
35 var element = $('<div/>');
35 var element = $('<div/>');
36
36
37 // The documentation
37 // The documentation
38 var doc = $('<div/>').addClass('alert');
38 var doc = $('<div/>').addClass('alert');
39 doc.append(
39 doc.append(
40 $('<button/>').addClass('close').attr('data-dismiss','alert').html('&times;')
40 $('<button/>').addClass('close').attr('data-dismiss','alert').html('&times;')
41 ).append(
41 ).append(
42 'The IPython Notebook has two different keyboard input modes. <b>Edit mode</b> '+
42 'The IPython Notebook has two different keyboard input modes. <b>Edit mode</b> '+
43 'allows you to type code/text into a cell and is indicated by a green cell '+
43 'allows you to type code/text into a cell and is indicated by a green cell '+
44 'border. <b>Command mode</b> binds the keyboard to notebook level actions '+
44 'border. <b>Command mode</b> binds the keyboard to notebook level actions '+
45 'and is indicated by a grey cell border.'
45 'and is indicated by a grey cell border.'
46 );
46 );
47 element.append(doc);
47 element.append(doc);
48
48
49 // Command mode
49 // Command mode
50 var cmd_div = this.build_command_help();
50 var cmd_div = this.build_command_help();
51 element.append(cmd_div);
51 element.append(cmd_div);
52
52
53 // Edit mode
53 // Edit mode
54 var edit_div = this.build_edit_help();
54 var edit_div = this.build_edit_help();
55 element.append(edit_div);
55 element.append(edit_div);
56
56
57 this.shortcut_dialog = IPython.dialog.modal({
57 this.shortcut_dialog = IPython.dialog.modal({
58 title : "Keyboard shortcuts",
58 title : "Keyboard shortcuts",
59 body : element,
59 body : element,
60 destroy : false,
60 destroy : false,
61 buttons : {
61 buttons : {
62 Close : {}
62 Close : {}
63 }
63 }
64 });
64 });
65 this.shortcut_dialog.addClass("modal_stretch");
65
66
66 $([IPython.events]).on('rebuild.QuickHelp', function() { that.force_rebuild = true;});
67 $([IPython.events]).on('rebuild.QuickHelp', function() { that.force_rebuild = true;});
67 };
68 };
68
69
69 QuickHelp.prototype.build_command_help = function () {
70 QuickHelp.prototype.build_command_help = function () {
70 var command_shortcuts = IPython.keyboard_manager.command_shortcuts.help();
71 var command_shortcuts = IPython.keyboard_manager.command_shortcuts.help();
71 return build_div('<h4>Command Mode (press <code>Esc</code> to enable)</h4>', command_shortcuts);
72 return build_div('<h4>Command Mode (press <code>Esc</code> to enable)</h4>', command_shortcuts);
72 };
73 };
73
74
74 var special_case = { pageup: "PageUp", pagedown: "Page Down", 'minus': '-' };
75 var special_case = { pageup: "PageUp", pagedown: "Page Down", 'minus': '-' };
75 var prettify = function (s) {
76 var prettify = function (s) {
76 s = s.replace(/-$/, 'minus'); // catch shortcuts using '-' key
77 s = s.replace(/-$/, 'minus'); // catch shortcuts using '-' key
77 var keys = s.split('-');
78 var keys = s.split('-');
78 var k, i;
79 var k, i;
79 for (i in keys) {
80 for (i in keys) {
80 k = keys[i];
81 k = keys[i];
81 if ( k.length == 1 ) {
82 if ( k.length == 1 ) {
82 keys[i] = "<code><strong>" + k + "</strong></code>";
83 keys[i] = "<code><strong>" + k + "</strong></code>";
83 continue; // leave individual keys lower-cased
84 continue; // leave individual keys lower-cased
84 }
85 }
85 keys[i] = ( special_case[k] ? special_case[k] : k.charAt(0).toUpperCase() + k.slice(1) );
86 keys[i] = ( special_case[k] ? special_case[k] : k.charAt(0).toUpperCase() + k.slice(1) );
86 keys[i] = "<code><strong>" + keys[i] + "</strong></code>";
87 keys[i] = "<code><strong>" + keys[i] + "</strong></code>";
87 }
88 }
88 return keys.join('-');
89 return keys.join('-');
89
90
90
91
91 };
92 };
92
93
93 QuickHelp.prototype.build_edit_help = function () {
94 QuickHelp.prototype.build_edit_help = function () {
94 var edit_shortcuts = IPython.keyboard_manager.edit_shortcuts.help();
95 var edit_shortcuts = IPython.keyboard_manager.edit_shortcuts.help();
95 // Edit mode
96 // Edit mode
96 return build_div('<h4>Edit Mode (press <code>Enter</code> to enable)</h4>', edit_shortcuts);
97 return build_div('<h4>Edit Mode (press <code>Enter</code> to enable)</h4>', edit_shortcuts);
97 };
98 };
98
99
99 var build_one = function (s) {
100 var build_one = function (s) {
100 var help = s.help;
101 var help = s.help;
101 var shortcut = prettify(s.shortcut);
102 var shortcut = prettify(s.shortcut);
102 return $('<div>').addClass('quickhelp').
103 return $('<div>').addClass('quickhelp').
103 append($('<span/>').addClass('shortcut_key').append($(shortcut))).
104 append($('<span/>').addClass('shortcut_key').append($(shortcut))).
104 append($('<span/>').addClass('shortcut_descr').text(' : ' + help));
105 append($('<span/>').addClass('shortcut_descr').text(' : ' + help));
105
106
106 };
107 };
107
108
108 var build_div = function (title, shortcuts) {
109 var build_div = function (title, shortcuts) {
109 var i, half, n;
110 var i, half, n;
110 var div = $('<div/>').append($(title));
111 var div = $('<div/>').append($(title));
111 var sub_div = $('<div/>').addClass('hbox');
112 var sub_div = $('<div/>').addClass('hbox');
112 var col1 = $('<div/>').addClass('box-flex1');
113 var col1 = $('<div/>').addClass('box-flex1');
113 var col2 = $('<div/>').addClass('box-flex1');
114 var col2 = $('<div/>').addClass('box-flex1');
114 n = shortcuts.length;
115 n = shortcuts.length;
115 half = ~~(n/2); // Truncate :)
116 half = ~~(n/2); // Truncate :)
116 for (i=0; i<half; i++) { col1.append( build_one(shortcuts[i]) ); }
117 for (i=0; i<half; i++) { col1.append( build_one(shortcuts[i]) ); }
117 for (i=half; i<n; i++) { col2.append( build_one(shortcuts[i]) ); }
118 for (i=half; i<n; i++) { col2.append( build_one(shortcuts[i]) ); }
118 sub_div.append(col1).append(col2);
119 sub_div.append(col1).append(col2);
119 div.append(sub_div);
120 div.append(sub_div);
120 return div;
121 return div;
121 };
122 };
122
123
123 // Set module variables
124 // Set module variables
124 IPython.QuickHelp = QuickHelp;
125 IPython.QuickHelp = QuickHelp;
125
126
126 return IPython;
127 return IPython;
127
128
128 }(IPython));
129 }(IPython));
General Comments 0
You need to be logged in to leave comments. Login now