Better tabindex support.

IPython/frontend/html/notebook/static/js/codecell.js

@@ -1,439 +1,440
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CodeCell
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var CodeCell = function (notebook) {
         this.code_mirror = null;
         this.input_prompt_number = ' ';
         this.is_completing = false;
         this.completion_cursor = null;
         this.outputs = [];
         this.collapsed = false;
         IPython.Cell.apply(this, arguments);
     };
 
 
     CodeCell.prototype = new IPython.Cell();
 
 
     CodeCell.prototype.create_element = function () {
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
+        cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: 'python',
             theme: 'ipython',
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         });
         input.append(input_area);
         var output = $('<div></div>').addClass('output vbox');
         cell.append(input).append(output);
         this.element = cell;
         this.collapse()
     };
 
 
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
         // This method gets called in CodeMirror's onKeyDown/onKeyPress handlers and
         // is used to provide custom key handling. Its return value is used to determine
         // if CodeMirror should ignore the event: true = ignore, false = don't ignore.
         if (event.keyCode === 13 && event.shiftKey) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         } else if (event.keyCode === 9 && event.type == 'keydown') {
             // Tab completion.
             var cur = editor.getCursor();
             var pre_cursor = editor.getRange({line:cur.line,ch:0},cur).trim();
             if (pre_cursor === "") {
                 // Don't autocomplete if the part of the line before the cursor is empty.
                 // In this case, let CodeMirror handle indentation.
                 return false;
             } else {
                 // Autocomplete the current line.
                 event.stop();
                 var line = editor.getLine(cur.line);
                 this.is_completing = true;
                 this.completion_cursor = cur;
                 IPython.notebook.complete_cell(this, line, cur.ch);
                 return true;
             }
         } else if (event.keyCode === 8 && event.type == 'keydown') {
             // If backspace and the line ends with 4 spaces, remove them.
             var cur = editor.getCursor();
             var line = editor.getLine(cur.line);
             var ending = line.slice(-4);
             if (ending === '    ') {
                 editor.replaceRange('',
                     {line: cur.line, ch: cur.ch-4},
                     {line: cur.line, ch: cur.ch}
                 );
                 event.stop();
                 return true;
             } else {
                 return false;
             };
         } else {
             // keypress/keyup also trigger on TAB press, and we don't want to use those
             // to disable tab completion.
             if (this.is_completing && event.keyCode !== 9) {
                 var ed_cur = editor.getCursor();
                 var cc_cur = this.completion_cursor;
                 if (ed_cur.line !== cc_cur.line || ed_cur.ch !== cc_cur.ch) {
                     this.is_completing = false;
                     this.completion_cursor = null;
                 };
             };
             return false;
         };
     };
 
 
     CodeCell.prototype.finish_completing = function (matched_text, matches) {
         // console.log("Got matches", matched_text, matches);
         if (!this.is_completing || matches.length === 0) {return;}
 
         var that = this;
         var cur = this.completion_cursor;
 
         var insert = function (selected_text) {
             that.code_mirror.replaceRange(
                 selected_text,
                 {line: cur.line, ch: (cur.ch-matched_text.length)},
                 {line: cur.line, ch: cur.ch}
             );
         };
 
         if (matches.length === 1) {
             insert(matches[0]);
             setTimeout(function(){that.code_mirror.focus();}, 50);
             return;
         };
 
         var complete = $('<div/>').addClass('completions');
         var select = $('<select/>').attr('multiple','true');
         for (var i=0; i<matches.length; ++i) {
             select.append($('<option/>').text(matches[i]));
         }
         select.children().first().attr('selected','true');
         select.attr('size',Math.min(10,matches.length));
         var pos = this.code_mirror.cursorCoords();
         complete.css('left',pos.x+'px');
         complete.css('top',pos.yBot+'px');
         complete.append(select);
 
         $('body').append(complete);
         var done = false;
 
         var close = function () {
             if (done) return;
             done = true;
             complete.remove();
             that.is_completing = false;
             that.completion_cursor = null;
         };
 
         var pick = function () {
             insert(select.val()[0]);
             close();
             setTimeout(function(){that.code_mirror.focus();}, 50);
         };
 
         select.blur(close);
         select.keydown(function (event) {
             var code = event.which;
             if (code === 13 || code === 32) {
                 // Pressing SPACE or ENTER will cause a pick
                 event.stopPropagation();
                 event.preventDefault();
                 pick();
             } else if (code === 38 || code === 40) {
                 // We don't want the document keydown handler to handle UP/DOWN,
                 // but we want the default action.
                 event.stopPropagation();
             } else {
                 // All other key presses exit completion.
                 event.stopPropagation();
                 event.preventDefault();
                 close();
                 that.code_mirror.focus();
             }
         });
         // Double click also causes a pick.
         select.dblclick(pick);
         select.focus();
     };
 
 
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         // Todo: this dance is needed because as of CodeMirror 2.12, focus is
         // not causing the cursor to blink if the editor is empty initially.
         // While this seems to fix the issue, this should be fixed
         // in CodeMirror proper.
         var s = this.code_mirror.getValue();
         this.code_mirror.focus();
         if (s === '') this.code_mirror.setValue('');
     };
 
 
     CodeCell.prototype.append_output = function (json) {
         this.expand();
         if (json.output_type === 'pyout') {
             this.append_pyout(json);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json);
         } else if (json.output_type === 'stream') {
             this.append_stream(json);
         };
         this.outputs.push(json);
     };
 
 
     CodeCell.prototype.append_pyout = function (json) {
         n = json.prompt_number || ' ';
         var toinsert = $("<div/>").addClass("output_pyout hbox output_area");
         toinsert.append($('<div/>').
             addClass('prompt output_prompt').
             html('Out[' + n + ']:')
         );
         this.append_mime_type(json, toinsert);
         toinsert.children().last().addClass("box_flex1 pyout_area");
         this.element.find("div.output").append(toinsert);
         // If we just output latex, typeset it.
         if (json.latex !== undefined) {
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         };
     };
 
 
     CodeCell.prototype.append_pyerr = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             this.append_text(s).addClass('output_area');
         };
     };
 
 
     CodeCell.prototype.append_stream = function (json) {
         this.append_text(json.text).addClass('output_area');
     };
 
 
     CodeCell.prototype.append_display_data = function (json) {
         this.append_mime_type(json).addClass('output_area');
         // If we just output latex, typeset it.
         if (json.latex !== undefined) {
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         };
     };
 
 
     CodeCell.prototype.append_mime_type = function (json, element) {
         element = element || this.element.find("div.output");
         if (json.html !== undefined) {
             inserted = this.append_html(json.html, element);
         } else if (json.latex !== undefined) {
             inserted = this.append_latex(json.latex, element);
         } else if (json.svg !== undefined) {
             inserted = this.append_svg(json.svg, element);
         } else if (json.png !== undefined) {
             inserted = this.append_png(json.png, element);
         } else if (json.jpeg !== undefined) {
             inserted = this.append_jpeg(json.jpeg, element);
         } else if (json.text !== undefined) {
             inserted = this.append_text(json.text, element);
         };
         return inserted;
     };
 
 
     CodeCell.prototype.append_html = function (html, element) {
         element = element || this.element.find("div.output");
         var toinsert = $("<div/>").addClass("output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
         return toinsert;
     }
 
 
     CodeCell.prototype.append_text = function (data, element) {
         element = element || this.element.find("div.output");
         var toinsert = $("<div/>").addClass("output_stream");
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
         return toinsert;
     };
 
 
     CodeCell.prototype.append_svg = function (svg, element) {
         element = element || this.element.find("div.output");
         var toinsert = $("<div/>").addClass("output_svg");
         toinsert.append(svg);
         element.append(toinsert);
         return toinsert;
     };
 
 
     CodeCell.prototype.append_png = function (png, element) {
         element = element || this.element.find("div.output");
         var toinsert = $("<div/>").addClass("output_png");
         toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png));
         element.append(toinsert);
         return toinsert;
     };
 
 
     CodeCell.prototype.append_jpeg = function (jpeg, element) {
         element = element || this.element.find("div.output");
         var toinsert = $("<div/>").addClass("output_jpeg");
         toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg));
         element.append(toinsert);
         return toinsert;
     };
 
 
     CodeCell.prototype.append_latex = function (latex, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
         element = element || this.element.find("div.output");
         var toinsert = $("<div/>").addClass("output_latex");
         toinsert.append(latex);
         element.append(toinsert);
         return toinsert;
     }
 
 
     CodeCell.prototype.clear_output = function () {
         this.element.find("div.output").html("");
         this.outputs = [];
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
 
 
     CodeCell.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.find('div.output').hide();
             this.collapsed = true;
         };
     };
 
 
     CodeCell.prototype.expand = function () {
         if (this.collapsed) {
             this.element.find('div.output').show();
             this.collapsed = false;
         };
     };
 
 
     CodeCell.prototype.set_input_prompt = function (number) {
         var n = number || ' ';
         this.input_prompt_number = n
         this.element.find('div.input_prompt').html('In&nbsp;[' + n + ']:');
     };
 
 
     CodeCell.prototype.get_code = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_code = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1)) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.fromJSON = function (data) {
         // console.log('Import from JSON:', data);
         if (data.cell_type === 'code') {
             if (data.input !== undefined) {
                 this.set_code(data.input);
             }
             if (data.prompt_number !== undefined) {
                 this.set_input_prompt(data.prompt_number);
             } else {
                 this.set_input_prompt();
             };
             var len = data.outputs.length;
             for (var i=0; i<len; i++) {
                 this.append_output(data.outputs[i]);
             };
             if (data.collapsed !== undefined) {
                 if (data.collapsed) {
                     this.collapse();
                 };
             };
         };
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = {};
         data.input = this.get_code();
         data.cell_type = 'code';
         if (this.input_prompt_number !== ' ') {
             data.prompt_number = this.input_prompt_number
         };
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         };
         data.outputs = outputs;
         data.language = 'python';
         data.collapsed = this.collapsed;
         // console.log('Export to JSON:',data);
         return data;
     };
 
 
     IPython.CodeCell = CodeCell;
 
     return IPython;
 }(IPython));
 

IPython/frontend/html/notebook/static/js/savewidget.js

@@ -1,118 +1,119
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // SaveWidget
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var SaveWidget = function (selector) {
         this.selector = selector;
         this.notebook_name_re = /[^/\\]+/
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
     };
 
 
     SaveWidget.prototype.style = function () {
         this.element.find('input#notebook_name').addClass('ui-widget ui-widget-content');
         this.element.find('button#save_notebook').button();
         var left_panel_width = $('div#left_panel').outerWidth();
         var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
         $('span#save_widget').css({marginLeft:left_panel_width+left_panel_splitter_width});
+        $('input#notebook_name').attr('tabindex','1');
     };
 
 
     SaveWidget.prototype.bind_events = function () {
         var that = this;
         this.element.find('button#save_notebook').click(function () {
             IPython.notebook.save_notebook();
             that.set_document_title();
         });
     };
 
 
     SaveWidget.prototype.get_notebook_name = function () {
         return this.element.find('input#notebook_name').attr('value');
     }
 
 
     SaveWidget.prototype.set_notebook_name = function (nbname) {
         this.element.find('input#notebook_name').attr('value',nbname);
         this.set_document_title();
     }
 
 
     SaveWidget.prototype.set_document_title = function () {
         nbname = this.get_notebook_name();
         document.title = 'IPy: ' + nbname;
     };
         
 
     SaveWidget.prototype.get_notebook_id = function () {
         return this.element.find('span#notebook_id').text()
     };
 
 
     SaveWidget.prototype.update_url = function () {
         var notebook_id = this.get_notebook_id();
         if (notebook_id !== '') {
             window.history.replaceState({}, '', notebook_id);
         };
     };
 
 
     SaveWidget.prototype.test_notebook_name = function () {
         var nbname = this.get_notebook_name();
         if (this.notebook_name_re.test(nbname)) {
             return true;
         } else {
             var bad_name = $('<div/>');
             bad_name.html(
                 "The notebook name you entered (" +
                 nbname +
                 ") is not valid. Notebook names can contain any characters except / and \\"
             );
             bad_name.dialog({title: 'Invalid name', modal: true});
             return false;
         };
     };
 
 
     SaveWidget.prototype.status_save = function () {
         this.element.find('button#save_notebook').button('option', 'label', 'Save');
         this.element.find('button#save_notebook').button('enable');
         IPython.print_widget.enable();
     };
 
 
     SaveWidget.prototype.status_saving = function () {
         this.element.find('button#save_notebook').button('option', 'label', 'Saving');
         this.element.find('button#save_notebook').button('disable');
         IPython.print_widget.disable();
     };
 
 
     SaveWidget.prototype.status_loading = function () {
         this.element.find('button#save_notebook').button('option', 'label', 'Loading');
         this.element.find('button#save_notebook').button('disable');
         IPython.print_widget.disable();
     };    
 
 
     IPython.SaveWidget = SaveWidget;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/static/js/textcell.js

@@ -1,257 +1,258
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // TextCell
 //============================================================================
 
 var IPython = (function (IPython) {
 
     // TextCell base class
 
     var TextCell = function (notebook) {
         this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
         this.placeholder = this.placeholder || '';
         IPython.Cell.apply(this, arguments);
         this.rendered = false;
         this.cell_type = this.cell_type || 'text';
     };
 
 
     TextCell.prototype = new IPython.Cell();
 
 
     TextCell.prototype.create_element = function () {
         var cell = $("<div>").addClass('cell text_cell border-box-sizing');
+        cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: this.code_mirror_mode,
             theme: 'default',
             value: this.placeholder
         });
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render').
             addClass('rendered_html').attr('tabindex','-1');
         cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
     TextCell.prototype.bind_events = function () {
         IPython.Cell.prototype.bind_events.apply(this);
         var that = this;
         this.element.keydown(function (event) {
             if (event.which === 13) {
                 if (that.rendered) {
                     that.edit();
                     event.preventDefault();
                 };
             };
         });
     };
 
 
     TextCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         var output = this.element.find("div.text_cell_render");
         output.trigger('focus');
     };
 
 
     TextCell.prototype.edit = function () {
         if (this.rendered === true) {
             var text_cell = this.element;
             var output = text_cell.find("div.text_cell_render");  
             output.hide();
             text_cell.find('div.text_cell_input').show();
             this.code_mirror.focus();
             this.code_mirror.refresh();
             this.rendered = false;
             if (this.get_source() === this.placeholder) {
                 this.set_source('');
             };
         };
     };
 
 
     // Subclasses must define render.
     TextCell.prototype.render = function () {};
 
 
     TextCell.prototype.config_mathjax = function () {
         var text_cell = this.element;
         var that = this;
         text_cell.click(function () {
             that.edit();
         }).focusout(function () {
             that.render();
         });
         
         text_cell.trigger("focusout");
     };
 
 
     TextCell.prototype.get_source = function() {
         return this.code_mirror.getValue();
     };
 
 
     TextCell.prototype.set_source = function(text) {
         this.code_mirror.setValue(text);
         this.code_mirror.refresh();
     };
 
 
     TextCell.prototype.get_rendered = function() {
         return this.element.find('div.text_cell_render').html();
     };
 
 
     TextCell.prototype.set_rendered = function(text) {
         this.element.find('div.text_cell_render').html(text);
     };
 
 
     TextCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     TextCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     TextCell.prototype.fromJSON = function (data) {
         if (data.cell_type === this.cell_type) {
             if (data.source !== undefined) {
                 this.set_source(data.source);
                 this.set_rendered(data.rendered || '');
                 this.rendered = false;
                 this.render();
             };
         };
     };
 
 
     TextCell.prototype.toJSON = function () {
         var data = {}
         data.cell_type = this.cell_type;
         data.source = this.get_source();
         return data;
     };
 
 
     // HTMLCell
 
     var HTMLCell = function (notebook) {
         this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'html';
     };
 
 
     HTMLCell.prototype = new TextCell();
 
 
     HTMLCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_source();
             if (text === "") {text = this.placeholder;};
             this.set_rendered(text);
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         };
     };
 
 
     // MarkdownCell
 
     var MarkdownCell = function (notebook) {
         this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'markdown';
     };
 
 
     MarkdownCell.prototype = new TextCell();
 
 
     MarkdownCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_source();
             if (text === "") {text = this.placeholder;};
             var html = IPython.markdown_converter.makeHtml(text);
             this.set_rendered(html);
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         };
     };
 
 
     // RSTCell
 
     var RSTCell = function (notebook) {
         this.placeholder = "Type *ReStructured Text* and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'rst';
     };
 
 
     RSTCell.prototype = new TextCell();
 
 
     RSTCell.prototype.render = function () {
         if (this.rendered === false) {  
             var text = this.get_source();
             if (text === "") {text = this.placeholder;};
             var settings = {
                 processData : false,
                 cache : false,
                 type : "POST",
                 data : text,
                 headers : {'Content-Type': 'application/x-rst'},
                 success : $.proxy(this.handle_render,this)
             };
             $.ajax("/rstservice/render", settings);
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.set_rendered("Rendering...");
         };
     };
 
 
     RSTCell.prototype.handle_render = function (data, status, xhr) {
         this.set_rendered(data);
         MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         this.rendered = true;
     };
 
 
     IPython.TextCell = TextCell;
     IPython.HTMLCell = HTMLCell;
     IPython.MarkdownCell = MarkdownCell;
     IPython.RSTCell = RSTCell;
 
 
     return IPython;
 
 }(IPython));