##// END OF EJS Templates
adding a tooltip in IPython buttons
Sylvain Corlay -
Show More
@@ -1,70 +1,71 b''
1 // Copyright (c) IPython Development Team.
1 // Copyright (c) IPython Development Team.
2 // Distributed under the terms of the Modified BSD License.
2 // Distributed under the terms of the Modified BSD License.
3
3
4 define([
4 define([
5 "widgets/js/widget",
5 "widgets/js/widget",
6 "jquery",
6 "jquery",
7 "bootstrap",
7 "bootstrap",
8 ], function(widget, $){
8 ], function(widget, $){
9
9
10 var ButtonView = widget.DOMWidgetView.extend({
10 var ButtonView = widget.DOMWidgetView.extend({
11 render : function(){
11 render : function(){
12 // Called when view is rendered.
12 // Called when view is rendered.
13 this.setElement($("<button />")
13 this.setElement($("<button />")
14 .addClass('btn btn-default'));
14 .addClass('btn btn-default'));
15
15 this.$el.attr("data-toggle", "tooltip");
16 this.model.on('change:button_style', function(model, value) {
16 this.model.on('change:button_style', function(model, value) {
17 this.update_button_style();
17 this.update_button_style();
18 }, this);
18 }, this);
19 this.update_button_style('');
19 this.update_button_style('');
20
20
21 this.update(); // Set defaults.
21 this.update(); // Set defaults.
22 },
22 },
23
23
24 update : function(){
24 update : function(){
25 // Update the contents of this view
25 // Update the contents of this view
26 //
26 //
27 // Called when the model is changed. The model may have been
27 // Called when the model is changed. The model may have been
28 // changed by another view or by a state update from the back-end.
28 // changed by another view or by a state update from the back-end.
29 var description = this.model.get('description');
29 var description = this.model.get('description');
30 this.$el.attr("title", this.model.get("tooltip"));
30 if (description.length === 0) {
31 if (description.length === 0) {
31 this.$el.html("&nbsp;"); // Preserve button height
32 this.$el.html("&nbsp;"); // Preserve button height
32 } else {
33 } else {
33 this.$el.text(description);
34 this.$el.text(description);
34 }
35 }
35
36
36 if (this.model.get('disabled')) {
37 if (this.model.get('disabled')) {
37 this.$el.attr('disabled','disabled');
38 this.$el.attr('disabled','disabled');
38 } else {
39 } else {
39 this.$el.removeAttr('disabled');
40 this.$el.removeAttr('disabled');
40 }
41 }
41
42
42 return ButtonView.__super__.update.apply(this);
43 return ButtonView.__super__.update.apply(this);
43 },
44 },
44
45
45 update_button_style: function(previous_trait_value) {
46 update_button_style: function(previous_trait_value) {
46 var class_map = {
47 var class_map = {
47 primary: ['btn-primary'],
48 primary: ['btn-primary'],
48 success: ['btn-success'],
49 success: ['btn-success'],
49 info: ['btn-info'],
50 info: ['btn-info'],
50 warning: ['btn-warning'],
51 warning: ['btn-warning'],
51 danger: ['btn-danger']
52 danger: ['btn-danger']
52 };
53 };
53 this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
54 this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
54 },
55 },
55
56
56 events: {
57 events: {
57 // Dictionary of events and their handlers.
58 // Dictionary of events and their handlers.
58 'click': '_handle_click',
59 'click': '_handle_click',
59 },
60 },
60
61
61 _handle_click: function(){
62 _handle_click: function(){
62 // Handles when the button is clicked.
63 // Handles when the button is clicked.
63 this.send({event: 'click'});
64 this.send({event: 'click'});
64 },
65 },
65 });
66 });
66
67
67 return {
68 return {
68 'ButtonView': ButtonView,
69 'ButtonView': ButtonView,
69 };
70 };
70 });
71 });
@@ -1,70 +1,71 b''
1 """Button class.
1 """Button class.
2
2
3 Represents a button in the frontend using a widget. Allows user to listen for
3 Represents a button in the frontend using a widget. Allows user to listen for
4 click events on the button and trigger backend code when the clicks are fired.
4 click events on the button and trigger backend code when the clicks are fired.
5 """
5 """
6 #-----------------------------------------------------------------------------
6 #-----------------------------------------------------------------------------
7 # Copyright (c) 2013, the IPython Development Team.
7 # Copyright (c) 2013, the IPython Development Team.
8 #
8 #
9 # Distributed under the terms of the Modified BSD License.
9 # Distributed under the terms of the Modified BSD License.
10 #
10 #
11 # The full license is in the file COPYING.txt, distributed with this software.
11 # The full license is in the file COPYING.txt, distributed with this software.
12 #-----------------------------------------------------------------------------
12 #-----------------------------------------------------------------------------
13
13
14 #-----------------------------------------------------------------------------
14 #-----------------------------------------------------------------------------
15 # Imports
15 # Imports
16 #-----------------------------------------------------------------------------
16 #-----------------------------------------------------------------------------
17 from .widget import DOMWidget, CallbackDispatcher
17 from .widget import DOMWidget, CallbackDispatcher
18 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
18 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
19 from IPython.utils.warn import DeprecatedClass
19 from IPython.utils.warn import DeprecatedClass
20
20
21 #-----------------------------------------------------------------------------
21 #-----------------------------------------------------------------------------
22 # Classes
22 # Classes
23 #-----------------------------------------------------------------------------
23 #-----------------------------------------------------------------------------
24 class Button(DOMWidget):
24 class Button(DOMWidget):
25 """Button widget.
25 """Button widget.
26
26
27 This widget has an `on_click` method that allows you to listen for the
27 This widget has an `on_click` method that allows you to listen for the
28 user clicking on the button. The click event itself is stateless."""
28 user clicking on the button. The click event itself is stateless."""
29 _view_name = Unicode('ButtonView', sync=True)
29 _view_name = Unicode('ButtonView', sync=True)
30
30
31 # Keys
31 # Keys
32 description = Unicode('', help="Description of the button (label).", sync=True)
32 description = Unicode('', help="Button label.", sync=True)
33 tooltip = Unicode(help="Tooltip caption of the button.", sync=True)
33 disabled = Bool(False, help="Enable or disable user changes.", sync=True)
34 disabled = Bool(False, help="Enable or disable user changes.", sync=True)
34
35
35 button_style = CaselessStrEnum(
36 button_style = CaselessStrEnum(
36 values=['primary', 'success', 'info', 'warning', 'danger', ''],
37 values=['primary', 'success', 'info', 'warning', 'danger', ''],
37 default_value='', allow_none=True, sync=True, help="""Use a
38 default_value='', allow_none=True, sync=True, help="""Use a
38 predefined styling for the button.""")
39 predefined styling for the button.""")
39
40
40 def __init__(self, **kwargs):
41 def __init__(self, **kwargs):
41 """Constructor"""
42 """Constructor"""
42 super(Button, self).__init__(**kwargs)
43 super(Button, self).__init__(**kwargs)
43 self._click_handlers = CallbackDispatcher()
44 self._click_handlers = CallbackDispatcher()
44 self.on_msg(self._handle_button_msg)
45 self.on_msg(self._handle_button_msg)
45
46
46 def on_click(self, callback, remove=False):
47 def on_click(self, callback, remove=False):
47 """Register a callback to execute when the button is clicked.
48 """Register a callback to execute when the button is clicked.
48
49
49 The callback will be called with one argument,
50 The callback will be called with one argument,
50 the clicked button widget instance.
51 the clicked button widget instance.
51
52
52 Parameters
53 Parameters
53 ----------
54 ----------
54 remove : bool (optional)
55 remove : bool (optional)
55 Set to true to remove the callback from the list of callbacks."""
56 Set to true to remove the callback from the list of callbacks."""
56 self._click_handlers.register_callback(callback, remove=remove)
57 self._click_handlers.register_callback(callback, remove=remove)
57
58
58 def _handle_button_msg(self, _, content):
59 def _handle_button_msg(self, _, content):
59 """Handle a msg from the front-end.
60 """Handle a msg from the front-end.
60
61
61 Parameters
62 Parameters
62 ----------
63 ----------
63 content: dict
64 content: dict
64 Content of the msg."""
65 Content of the msg."""
65 if content.get('event', '') == 'click':
66 if content.get('event', '') == 'click':
66 self._click_handlers(self)
67 self._click_handlers(self)
67
68
68
69
69 # Remove in IPython 4.0
70 # Remove in IPython 4.0
70 ButtonWidget = DeprecatedClass(Button, 'ButtonWidget')
71 ButtonWidget = DeprecatedClass(Button, 'ButtonWidget')
General Comments 0
You need to be logged in to leave comments. Login now