tooltip.js
355 lines
| 12.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 | // | ||
|
r7170 | // you can set the autocall time by setting `IPython.tooltip.time_before_tooltip` in ms | ||
|
r7172 | // | ||
|
r7173 | // you can configure the differents action of pressing tab several times in a row by | ||
// setting/appending different fonction in the array | ||||
|
r7172 | // IPython.tooltip.tabs_functions | ||
// | ||||
// eg : | ||||
|
r7191 | // IPython.tooltip.tabs_functions[4] = function (){console.log('this is the action of the 4th tab pressing')} | ||
|
r7172 | // | ||
|
r7191 | var IPython = (function (IPython) { | ||
|
r7173 | "use strict"; | ||
|
r7145 | |||
var utils = IPython.utils; | ||||
|
r7173 | |||
|
r7162 | // tooltip constructor | ||
|
r7191 | var Tooltip = function () { | ||
|
r7189 | var that = this; | ||
this.time_before_tooltip = 1200; | ||||
|
r7162 | |||
|
r7189 | // handle to html | ||
this.tooltip = $('#tooltip'); | ||||
this._hidden = true; | ||||
|
r7153 | |||
|
r7189 | // variable for consecutive call | ||
this._old_cell = null; | ||||
this._old_request = null; | ||||
this._consecutive_counter = 0; | ||||
|
r7160 | |||
|
r7189 | // 'sticky ?' | ||
this._sticky = false; | ||||
|
r7160 | |||
|
r7189 | // contain the button in the upper right corner | ||
this.buttons = $('<div/>').addClass('tooltipbuttons'); | ||||
// will contain the docstring | ||||
this.text = $('<div/>').addClass('tooltiptext').addClass('smalltooltip'); | ||||
// build the buttons menu on the upper right | ||||
// expand the tooltip to see more | ||||
var expandlink = $('<a/>').attr('href', "#").addClass("ui-corner-all") //rounded corner | ||||
|
r7191 | .attr('role', "button").attr('id', 'expanbutton').attr('title', 'Grow the tooltip vertically (press tab 2 times)').click(function () { | ||
|
r7189 | that.expand() | ||
}).append( | ||||
$('<span/>').text('Expand').addClass('ui-icon').addClass('ui-icon-plus')); | ||||
// open in pager | ||||
var morelink = $('<a/>').attr('href', "#").attr('role', "button").addClass('ui-button').attr('title', 'show the current docstring in pager (press tab 4 times)'); | ||||
var morespan = $('<span/>').text('Open in Pager').addClass('ui-icon').addClass('ui-icon-arrowstop-l-n'); | ||||
morelink.append(morespan); | ||||
|
r7191 | morelink.click(function () { | ||
|
r11331 | that.showInPager(that._old_cell); | ||
|
r7189 | }); | ||
|
r7147 | |||
|
r7189 | // close the tooltip | ||
var closelink = $('<a/>').attr('href', "#").attr('role', "button").addClass('ui-button'); | ||||
var closespan = $('<span/>').text('Close').addClass('ui-icon').addClass('ui-icon-close'); | ||||
closelink.append(closespan); | ||||
|
r7191 | closelink.click(function () { | ||
|
r7189 | that.remove_and_cancel_tooltip(true); | ||
|
r7147 | }); | ||
|
r7162 | |||
|
r7189 | this._clocklink = $('<a/>').attr('href', "#"); | ||
this._clocklink.attr('role', "button"); | ||||
this._clocklink.addClass('ui-button'); | ||||
this._clocklink.attr('title', 'Tootip is not dismissed while typing for 10 seconds'); | ||||
var clockspan = $('<span/>').text('Close'); | ||||
|
r7173 | clockspan.addClass('ui-icon'); | ||
clockspan.addClass('ui-icon-clock'); | ||||
|
r7189 | this._clocklink.append(clockspan); | ||
|
r7191 | this._clocklink.click(function () { | ||
|
r7189 | that.cancel_stick(); | ||
|
r7173 | }); | ||
|
r7189 | //construct the tooltip | ||
// add in the reverse order you want them to appear | ||||
this.buttons.append(closelink); | ||||
this.buttons.append(expandlink); | ||||
this.buttons.append(morelink); | ||||
this.buttons.append(this._clocklink); | ||||
this._clocklink.hide(); | ||||
// we need a phony element to make the small arrow | ||||
// of the tooltip in css | ||||
// we will move the arrow later | ||||
this.arrow = $('<div/>').addClass('pretooltiparrow'); | ||||
this.tooltip.append(this.buttons); | ||||
this.tooltip.append(this.arrow); | ||||
this.tooltip.append(this.text); | ||||
// function that will be called if you press tab 1, 2, 3... times in a row | ||||
|
r7191 | this.tabs_functions = [function (cell, text) { | ||
|
r7189 | that._request_tooltip(cell, text); | ||
|
r7191 | }, function () { | ||
|
r7189 | that.expand(); | ||
|
r7191 | }, function () { | ||
|
r7189 | that.stick(); | ||
|
r7191 | }, function (cell) { | ||
|
r7189 | that.cancel_stick(); | ||
that.showInPager(cell); | ||||
}]; | ||||
// call after all the tabs function above have bee call to clean their effects | ||||
// if necessary | ||||
|
r7191 | this.reset_tabs_function = function (cell, text) { | ||
|
r7189 | this._old_cell = (cell) ? cell : null; | ||
this._old_request = (text) ? text : null; | ||||
this._consecutive_counter = 0; | ||||
} | ||||
}; | ||||
|
r7191 | Tooltip.prototype.showInPager = function (cell) { | ||
|
r7172 | // reexecute last call in pager by appending ? to show back in pager | ||
var that = this; | ||||
|
r7191 | var empty = function () {}; | ||
|
r9219 | cell.kernel.execute( | ||
|
r7189 | that.name + '?', { | ||
'execute_reply': empty, | ||||
'output': empty, | ||||
'clear_output': empty, | ||||
'cell': cell | ||||
}, { | ||||
'silent': false | ||||
}); | ||||
|
r7172 | this.remove_and_cancel_tooltip(); | ||
|
r7160 | } | ||
|
r7162 | // grow the tooltip verticaly | ||
|
r7191 | Tooltip.prototype.expand = function () { | ||
|
r7160 | this.text.removeClass('smalltooltip'); | ||
this.text.addClass('bigtooltip'); | ||||
|
r7173 | $('#expanbutton').hide('slow'); | ||
|
r7160 | } | ||
|
r7151 | // deal with all the logic of hiding the tooltip | ||
// and reset it's status | ||||
|
r7202 | Tooltip.prototype._hide = function () { | ||
this.tooltip.fadeOut('fast'); | ||||
|
r7189 | $('#expanbutton').show('slow'); | ||
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; | ||||
|
r7204 | this.code_mirror = null; | ||
|
r7151 | } | ||
|
r7145 | |||
|
r7191 | 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. | ||||
|
r7189 | if (this._sticky == false || force == true) { | ||
|
r7206 | this.cancel_stick(); | ||
|
r7202 | this._hide(); | ||
|
r7160 | } | ||
this.cancel_pending(); | ||||
|
r7202 | this.reset_tabs_function(); | ||
|
r7160 | } | ||
|
r7162 | // cancel autocall done after '(' for example. | ||
|
r7191 | Tooltip.prototype.cancel_pending = function () { | ||
|
r7189 | if (this._tooltip_timeout != null) { | ||
|
r7173 | clearTimeout(this._tooltip_timeout); | ||
this._tooltip_timeout = null; | ||||
|
r7145 | } | ||
} | ||||
|
r7162 | |||
// will trigger tooltip after timeout | ||||
|
r7191 | Tooltip.prototype.pending = function (cell) { | ||
|
r7157 | var that = this; | ||
|
r7191 | this._tooltip_timeout = setTimeout(function () { | ||
|
r7189 | that.request(cell) | ||
}, that.time_before_tooltip); | ||||
|
r7157 | } | ||
|
r7173 | |||
|
r7191 | Tooltip.prototype._request_tooltip = function (cell, func) { | ||
|
r7189 | // use internally just to make the request to the kernel | ||
// Feel free to shorten this logic if you are better | ||||
// than me in regEx | ||||
// basicaly you shoul be able to get xxx.xxx.xxx from | ||||
// something(range(10), kwarg=smth) ; xxx.xxx.xxx( firstarg, rand(234,23), kwarg1=2, | ||||
// remove everything between matchin bracket (need to iterate) | ||||
var matchBracket = /\([^\(\)]+\)/g; | ||||
var endBracket = /\([^\(]*$/g; | ||||
var oldfunc = func; | ||||
func = func.replace(matchBracket, ""); | ||||
while (oldfunc != func) { | ||||
oldfunc = func; | ||||
func = func.replace(matchBracket, ""); | ||||
} | ||||
// remove everything after last open bracket | ||||
func = func.replace(endBracket, ""); | ||||
var re = /[a-z_][0-9a-z._]+$/gi; // casse insensitive | ||||
var callbacks = { | ||||
|
r7202 | 'object_info_reply': $.proxy(this._show, this) | ||
|
r7189 | } | ||
|
r9219 | var msg_id = cell.kernel.object_info_request(re.exec(func), callbacks); | ||
|
r7171 | } | ||
|
r7162 | |||
// make an imediate completion request | ||||
|
r7191 | Tooltip.prototype.request = function (cell) { | ||
|
r7173 | // request(codecell) | ||
|
r7172 | // Deal with extracting the text from the cell and counting | ||
// call in a row | ||||
|
r7160 | this.cancel_pending(); | ||
var editor = cell.code_mirror; | ||||
var cursor = editor.getCursor(); | ||||
|
r7189 | var text = editor.getRange({ | ||
line: cursor.line, | ||||
ch: 0 | ||||
}, cursor).trim(); | ||||
|
r7173 | |||
|
r8949 | if(editor.somethingSelected()){ | ||
text = editor.getSelection(); | ||||
} | ||||
|
r7204 | // need a permanent handel to code_mirror for future auto recall | ||
|
r7172 | this.code_mirror = editor; | ||
|
r7173 | // now we treat the different number of keypress | ||
|
r7172 | // first if same cell, same text, increment counter by 1 | ||
|
r7189 | if (this._old_cell == cell && this._old_request == text && this._hidden == false) { | ||
|
r7173 | this._consecutive_counter++; | ||
|
r7160 | } else { | ||
|
r7172 | // else reset | ||
|
r7173 | this.cancel_stick(); | ||
|
r7191 | this.reset_tabs_function (cell, text); | ||
|
r7160 | } | ||
|
r7173 | |||
|
r7172 | // don't do anything if line beggin with '(' or is empty | ||
|
r7189 | if (text === "" || text === "(") { | ||
|
r7160 | return; | ||
} | ||||
|
r7173 | |||
|
r7189 | this.tabs_functions[this._consecutive_counter](cell, text); | ||
|
r7173 | |||
// then if we are at the end of list function, reset | ||||
|
r7191 | if (this._consecutive_counter == this.tabs_functions.length) this.reset_tabs_function (cell, text); | ||
|
r7173 | |||
|
r7172 | return; | ||
|
r7160 | } | ||
|
r7162 | |||
// cancel the option of having the tooltip to stick | ||||
|
r7191 | Tooltip.prototype.cancel_stick = function () { | ||
|
r7189 | clearTimeout(this._stick_timeout); | ||
this._stick_timeout = null; | ||||
this._clocklink.hide('slow'); | ||||
this._sticky = false; | ||||
|
r7160 | } | ||
|
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) | ||||
|
r7191 | Tooltip.prototype.stick = function (time) { | ||
|
r7189 | time = (time != undefined) ? time : 10; | ||
|
r7162 | var that = this; | ||
|
r7160 | this._sticky = true; | ||
|
r7173 | this._clocklink.show('slow'); | ||
|
r7191 | this._stick_timeout = setTimeout(function () { | ||
|
r7160 | that._sticky = false; | ||
|
r7173 | that._clocklink.hide('slow'); | ||
|
r7189 | }, time * 1000); | ||
|
r7156 | } | ||
|
r7162 | // should be called with the kernel reply to actually show the tooltip | ||
|
r7202 | Tooltip.prototype._show = function (reply) { | ||
|
r7153 | // move the bubble if it is not hidden | ||
// otherwise fade it | ||||
|
r7172 | this.name = reply.name; | ||
|
r7160 | |||
// do some math to have the tooltip arrow on more or less on left or right | ||||
// width of the editor | ||||
|
r7173 | var w = $(this.code_mirror.getScrollerElement()).width(); | ||
|
r7160 | // ofset of the editor | ||
|
r7173 | var o = $(this.code_mirror.getScrollerElement()).offset(); | ||
|
r8949 | |||
// whatever anchor/head order but arrow at mid x selection | ||||
var anchor = this.code_mirror.cursorCoords(false); | ||||
var head = this.code_mirror.cursorCoords(true); | ||||
|
r10425 | var xinit = (head.left+anchor.left)/2; | ||
|
r7189 | var xinter = o.left + (xinit - o.left) / w * (w - 450); | ||
|
r7155 | var posarrowleft = xinit - xinter; | ||
|
r7162 | |||
|
r7189 | if (this._hidden == false) { | ||
this.tooltip.animate({ | ||||
'left': xinter - 30 + 'px', | ||||
|
r10425 | 'top': (head.bottom + 10) + 'px' | ||
|
r7189 | }); | ||
} else { | ||||
this.tooltip.css({ | ||||
'left': xinter - 30 + 'px' | ||||
}); | ||||
this.tooltip.css({ | ||||
|
r10425 | 'top': (head.bottom + 10) + 'px' | ||
|
r7189 | }); | ||
|
r7153 | } | ||
|
r7189 | this.arrow.animate({ | ||
'left': posarrowleft + 'px' | ||||
}); | ||||
|
r7202 | this.tooltip.fadeIn('fast'); | ||
|
r7153 | this._hidden = false; | ||
|
r7147 | |||
// build docstring | ||||
|
r7173 | var defstring = reply.call_def; | ||
|
r7189 | if (defstring == null) { | ||
defstring = reply.init_definition; | ||||
} | ||||
if (defstring == null) { | ||||
defstring = reply.definition; | ||||
} | ||||
|
r7147 | |||
|
r7173 | var docstring = reply.call_docstring; | ||
|
r7189 | if (docstring == null) { | ||
docstring = reply.init_docstring; | ||||
} | ||||
if (docstring == null) { | ||||
docstring = reply.docstring; | ||||
} | ||||
if (docstring == null) { | ||||
docstring = "<empty docstring>"; | ||||
} | ||||
|
r7147 | |||
this.text.children().remove(); | ||||
|
r7189 | var pre = $('<pre/>').html(utils.fixConsole(docstring)); | ||
if (defstring) { | ||||
|
r7147 | 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 | } | ||
|
r7156 | |||
|
r7145 | IPython.Tooltip = Tooltip; | ||
|
r7173 | |||
|
r7145 | return IPython; | ||
|
r7173 | |||
|
r7145 | }(IPython)); | ||