tooltip.js
297 lines
| 9.6 KiB
| application/javascript
|
JavascriptLexer
|
r7145 | //---------------------------------------------------------------------------- | ||
// 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. | ||||
//---------------------------------------------------------------------------- | ||||
//============================================================================ | ||||
// Tooltip | ||||
//============================================================================ | ||||
|
r7151 | // | ||
|
r7162 | // you can set the autocall time by setting `IPython.notebook.time_before_tooltip` in ms | ||
|
r7145 | var IPython = (function (IPython) { | ||
var utils = IPython.utils; | ||||
|
r7162 | // tooltip constructor | ||
|
r7168 | var Tooltip = function () { | ||
|
r7153 | var that = this; | ||
|
r7168 | this.time_before_tooltip = 1200; | ||
|
r7162 | |||
// handle to html | ||||
this.tooltip = $('#tooltip'); | ||||
var tooltip = this.tooltip; | ||||
|
r7153 | this._hidden = true; | ||
|
r7160 | // variable for consecutive call | ||
this._old_cell = null ; | ||||
this._old_request = null ; | ||||
this._consecutive_conter = 0; | ||||
// 'sticky ?' | ||||
this._sticky = false; | ||||
|
r7153 | // contain the button in the upper right corner | ||
|
r7148 | this.buttons = $('<div/>') | ||
.addClass('tooltipbuttons'); | ||||
|
r7153 | |||
|
r7162 | // will contain the docstring | ||
|
r7147 | this.text = $('<div/>') | ||
|
r7148 | .addClass('tooltiptext') | ||
|
r7147 | .addClass('smalltooltip'); | ||
|
r7162 | // build the buttons menu on the upper right | ||
// expand the tooltip to see more | ||||
|
r7147 | var expandlink=$('<a/>').attr('href',"#") | ||
.addClass("ui-corner-all") //rounded corner | ||||
.attr('role',"button") | ||||
.attr('id','expanbutton') | ||||
|
r7160 | .click(function(){that.expand()}) | ||
|
r7150 | .append( | ||
|
r7155 | $('<span/>').text('Expand') | ||
.addClass('ui-icon') | ||||
.addClass('ui-icon-plus') | ||||
); | ||||
|
r7147 | |||
|
r7155 | // open in pager | ||
|
r7150 | var morelink=$('<a/>').attr('href',"#") | ||
.attr('role',"button") | ||||
.addClass('ui-button'); | ||||
var morespan=$('<span/>').text('Open in Pager') | ||||
.addClass('ui-icon') | ||||
.addClass('ui-icon-arrowstop-l-n'); | ||||
|
r7147 | morelink.append(morespan); | ||
morelink.click(function(){ | ||||
|
r7160 | that.showInPager(); | ||
|
r7147 | }); | ||
|
r7155 | // close the tooltip | ||
|
r7147 | var closelink=$('<a/>').attr('href',"#"); | ||
closelink.attr('role',"button"); | ||||
closelink.addClass('ui-button'); | ||||
var closespan=$('<span/>').text('Close'); | ||||
closespan.addClass('ui-icon'); | ||||
closespan.addClass('ui-icon-close'); | ||||
closelink.append(closespan); | ||||
closelink.click(function(){ | ||||
|
r7161 | that.remove_and_cancel_tooltip(true); | ||
|
r7147 | }); | ||
|
r7162 | |||
|
r7155 | //construct the tooltip | ||
// add in the reverse order you want them to appear | ||||
|
r7148 | this.buttons.append(closelink); | ||
this.buttons.append(expandlink); | ||||
this.buttons.append(morelink); | ||||
|
r7155 | |||
// we need a phony element to make the small arrow | ||||
// of the tooltip in css | ||||
|
r7162 | // we will move the arrow later | ||
|
r7155 | this.arrow = $('<div/>').addClass('pretooltiparrow'); | ||
|
r7148 | this.tooltip.append(this.buttons); | ||
|
r7155 | this.tooltip.append(this.arrow); | ||
|
r7148 | this.tooltip.append(this.text); | ||
|
r7145 | }; | ||
|
r7162 | // will resend the request on behalf on the cell which invoked the tooltip | ||
// to show in it in pager. This is done so to be sure of having the same | ||||
// result as invoking `something?` | ||||
|
r7160 | Tooltip.prototype.showInPager = function() | ||
{ | ||||
|
r7168 | var that = this; | ||
var callbacks = {'execute_reply': $.proxy(that._handle_execute_reply,that)} | ||||
var msg_id = IPython.notebook.kernel.execute(this.name+"?", callbacks); | ||||
this.remove_and_cancel_tooltip(); | ||||
this._cmfocus(); | ||||
|
r7160 | } | ||
|
r7162 | // grow the tooltip verticaly | ||
|
r7160 | Tooltip.prototype.expand = function(){ | ||
this.text.removeClass('smalltooltip'); | ||||
this.text.addClass('bigtooltip'); | ||||
$('#expanbutton').addClass('hidden'); | ||||
this._cmfocus(); | ||||
} | ||||
|
r7151 | // deal with all the logic of hiding the tooltip | ||
// and reset it's status | ||||
Tooltip.prototype.hide = function() | ||||
{ | ||||
|
r7153 | this.tooltip.addClass('hide'); | ||
$('#expanbutton').removeClass('hidden'); | ||||
this.text.removeClass('bigtooltip'); | ||||
this.text.addClass('smalltooltip'); | ||||
// keep scroll top to be sure to always see the first line | ||||
this.text.scrollTop(0); | ||||
this._hidden = true; | ||||
|
r7151 | } | ||
|
r7145 | |||
|
r7160 | Tooltip.prototype.remove_and_cancel_tooltip = function(force) { | ||
|
r7145 | // note that we don't handle closing directly inside the calltip | ||
// as in the completer, because it is not focusable, so won't | ||||
// get the event. | ||||
|
r7160 | if(this._sticky == false || force == true) | ||
{ | ||||
this.hide(); | ||||
} | ||||
this.cancel_pending(); | ||||
this._old_cell = null ; | ||||
this._old_request = null ; | ||||
this._consecutive_conter = 0; | ||||
} | ||||
|
r7162 | // cancel autocall done after '(' for example. | ||
|
r7160 | Tooltip.prototype.cancel_pending = function(){ | ||
|
r7145 | if (this.tooltip_timeout != null){ | ||
clearTimeout(this.tooltip_timeout); | ||||
this.tooltip_timeout = null; | ||||
} | ||||
} | ||||
|
r7162 | |||
// will trigger tooltip after timeout | ||||
|
r7157 | Tooltip.prototype.pending = function(cell,text) | ||
{ | ||||
var that = this; | ||||
|
r7168 | this.tooltip_timeout = setTimeout(function(){that.request(cell)} , that.time_before_tooltip); | ||
|
r7157 | } | ||
|
r7162 | |||
// make an imediate completion request | ||||
|
r7160 | Tooltip.prototype.request = function(cell) | ||
|
r7156 | { | ||
|
r7160 | this.cancel_pending(); | ||
var editor = cell.code_mirror; | ||||
this.code_mirror = editor; | ||||
var cursor = editor.getCursor(); | ||||
var text = editor.getRange({line:cursor.line,ch:0},cursor).trim(); | ||||
if( this._old_cell == cell && this._old_request == text && this._hidden == false) | ||||
{ | ||||
this._consecutive_conter = this._consecutive_conter +1; | ||||
} else { | ||||
this._old_cell = cell ; | ||||
this._old_request = text ; | ||||
this._consecutive_conter =0; | ||||
this.cancel_stick(); | ||||
} | ||||
if( this._consecutive_conter == 1 ) | ||||
{ | ||||
this.expand() | ||||
return; | ||||
} | ||||
else if( this._consecutive_conter == 2) | ||||
{ | ||||
this.stick(); | ||||
return; | ||||
} | ||||
else if( this._consecutive_conter == 3) | ||||
{ | ||||
this._old_cell = null ; | ||||
|
r7164 | this.cancel_stick(); | ||
|
r7160 | this._old_request = null ; | ||
this._consecutive_conter = 0; | ||||
this.showInPager(); | ||||
this._cmfocus(); | ||||
return; | ||||
} | ||||
else if( this._consecutive_conter == 4) | ||||
{ | ||||
} | ||||
if (text === "" || text === "(" ) { | ||||
return; | ||||
// don't do anything if line beggin with '(' or is empty | ||||
} | ||||
|
r7168 | cell.request_tooltip(text); | ||
|
r7160 | } | ||
|
r7162 | |||
// cancel the option of having the tooltip to stick | ||||
|
r7160 | Tooltip.prototype.cancel_stick = function() | ||
{ | ||||
clearTimeout(this._stick_timeout); | ||||
this._sticky = false; | ||||
} | ||||
|
r7162 | // put the tooltip in a sicky state for 10 seconds | ||
// it won't be removed by remove_and_cancell() unless you called with | ||||
// the first parameter set to true. | ||||
// remove_and_cancell_tooltip(true) | ||||
Tooltip.prototype.stick = function() | ||||
|
r7160 | { | ||
|
r7162 | var that = this; | ||
|
r7160 | this._sticky = true; | ||
this._stick_timeout = setTimeout( function(){ | ||||
that._sticky = false; | ||||
}, 10*1000 | ||||
); | ||||
|
r7156 | } | ||
|
r7162 | // should be called with the kernel reply to actually show the tooltip | ||
|
r7156 | Tooltip.prototype.show = function(reply, codecell) | ||
|
r7145 | { | ||
|
r7153 | // move the bubble if it is not hidden | ||
// otherwise fade it | ||||
|
r7156 | var editor = codecell.code_mirror; | ||
this.name = reply.name; | ||||
this.code_mirror = editor; | ||||
|
r7160 | |||
// do some math to have the tooltip arrow on more or less on left or right | ||||
// width of the editor | ||||
var w= $(this.code_mirror.getScrollerElement()).width(); | ||||
// ofset of the editor | ||||
var o= $(this.code_mirror.getScrollerElement()).offset(); | ||||
|
r7156 | var pos = editor.cursorCoords(); | ||
|
r7155 | var xinit = pos.x; | ||
|
r7160 | var xinter = o.left + (xinit-o.left)/w*(w-450); | ||
|
r7155 | var posarrowleft = xinit - xinter; | ||
|
r7162 | |||
|
r7155 | |||
|
r7153 | if( this._hidden == false) | ||
{ | ||||
|
r7155 | this.tooltip.animate({'left' : xinter-30+'px','top' :(pos.yBot+10)+'px'}); | ||
|
r7162 | } else | ||
|
r7153 | { | ||
|
r7155 | this.tooltip.css({'left' : xinter-30+'px'}); | ||
|
r7153 | this.tooltip.css({'top' :(pos.yBot+10)+'px'}); | ||
} | ||||
|
r7155 | this.arrow.animate({'left' : posarrowleft+'px'}); | ||
|
r7153 | this.tooltip.removeClass('hidden') | ||
this.tooltip.removeClass('hide'); | ||||
this._hidden = false; | ||||
|
r7147 | |||
// build docstring | ||||
defstring = reply.call_def; | ||||
if (defstring == null) { defstring = reply.init_definition; } | ||||
if (defstring == null) { defstring = reply.definition; } | ||||
docstring = reply.call_docstring; | ||||
if (docstring == null) { docstring = reply.init_docstring; } | ||||
if (docstring == null) { docstring = reply.docstring; } | ||||
if (docstring == null) { docstring = "<empty docstring>"; } | ||||
this.text.children().remove(); | ||||
var pre=$('<pre/>').html(utils.fixConsole(docstring)); | ||||
if(defstring){ | ||||
var defstring_html = $('<pre/>').html(utils.fixConsole(defstring)); | ||||
this.text.append(defstring_html); | ||||
} | ||||
|
r7151 | this.text.append(pre); | ||
|
r7158 | // keep scroll top to be sure to always see the first line | ||
this.text.scrollTop(0); | ||||
|
r7145 | } | ||
|
r7162 | // convenient funciton to have the correct codemirror back into focus | ||
|
r7156 | Tooltip.prototype._cmfocus = function() | ||
{ | ||||
var cm = this.code_mirror; | ||||
setTimeout(function(){cm.focus();}, 50); | ||||
} | ||||
|
r7145 | IPython.Tooltip = Tooltip; | ||
return IPython; | ||||
}(IPython)); | ||||