Show More
@@ -1,103 +1,101 b'' | |||||
1 |
|
1 | |||
2 | require(["notebook/js/widget"], function(){ |
|
2 | require(["notebook/js/widget"], function(){ | |
3 |
|
3 | |||
4 | var BoolWidgetModel = IPython.WidgetModel.extend({}); |
|
4 | var BoolWidgetModel = IPython.WidgetModel.extend({}); | |
5 | IPython.notebook.widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel); |
|
5 | IPython.notebook.widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel); | |
6 |
|
6 | |||
7 | var CheckboxView = IPython.WidgetView.extend({ |
|
7 | var CheckboxView = IPython.WidgetView.extend({ | |
8 |
|
8 | |||
9 | // Called when view is rendered. |
|
9 | // Called when view is rendered. | |
10 | render : function(){ |
|
10 | render : function(){ | |
11 | this.$el = $('<div />') |
|
11 | this.$el = $('<div />') | |
12 | .addClass('widget-hbox-single'); |
|
12 | .addClass('widget-hbox-single'); | |
13 | this.$label = $('<div />') |
|
13 | this.$label = $('<div />') | |
14 | .addClass('widget-hlabel') |
|
14 | .addClass('widget-hlabel') | |
15 | .appendTo(this.$el) |
|
15 | .appendTo(this.$el) | |
16 | .hide(); |
|
16 | .hide(); | |
|
17 | var that = this; | |||
17 | this.$checkbox = $('<input />') |
|
18 | this.$checkbox = $('<input />') | |
18 | .attr('type', 'checkbox') |
|
19 | .attr('type', 'checkbox') | |
|
20 | .click(function(el) { | |||
|
21 | that.user_invoked_update = true; | |||
|
22 | that.model.set('value', that.$checkbox.prop('checked')); | |||
|
23 | that.model.update_other_views(that); | |||
|
24 | that.user_invoked_update = false; | |||
|
25 | }) | |||
19 | .appendTo(this.$el); |
|
26 | .appendTo(this.$el); | |
20 |
|
27 | |||
21 | this.update(); // Set defaults. |
|
28 | this.update(); // Set defaults. | |
22 | }, |
|
29 | }, | |
23 |
|
30 | |||
24 | // Handles: Backend -> Frontend Sync |
|
31 | // Handles: Backend -> Frontend Sync | |
25 | // Frontent -> Frontend Sync |
|
32 | // Frontent -> Frontend Sync | |
26 | update : function(){ |
|
33 | update : function(){ | |
27 | if (!this.user_invoked_update) { |
|
34 | if (!this.user_invoked_update) { | |
28 | this.$checkbox.prop('checked', this.model.get('value')); |
|
35 | this.$checkbox.prop('checked', this.model.get('value')); | |
29 |
|
36 | |||
30 | var description = this.model.get('description'); |
|
37 | var description = this.model.get('description'); | |
31 | if (description.length == 0) { |
|
38 | if (description.length == 0) { | |
32 | this.$label.hide(); |
|
39 | this.$label.hide(); | |
33 | } else { |
|
40 | } else { | |
34 | this.$label.html(description); |
|
41 | this.$label.html(description); | |
35 | this.$label.show(); |
|
42 | this.$label.show(); | |
36 | } |
|
43 | } | |
37 | } |
|
44 | } | |
38 | return IPython.WidgetView.prototype.update.call(this); |
|
45 | return IPython.WidgetView.prototype.update.call(this); | |
39 | }, |
|
46 | }, | |
40 |
|
47 | |||
41 | events: {"change input" : "handleChanged"}, |
|
|||
42 |
|
||||
43 | // Handles and validates user input. |
|
|||
44 | handleChanged: function(e) { |
|
|||
45 | this.user_invoked_update = true; |
|
|||
46 | this.model.set('value', $(e.target).prop('checked')); |
|
|||
47 | this.model.update_other_views(this); |
|
|||
48 | this.user_invoked_update = false; |
|
|||
49 | }, |
|
|||
50 | }); |
|
48 | }); | |
51 |
|
49 | |||
52 | IPython.notebook.widget_manager.register_widget_view('CheckboxView', CheckboxView); |
|
50 | IPython.notebook.widget_manager.register_widget_view('CheckboxView', CheckboxView); | |
53 |
|
51 | |||
54 | var ToggleButtonView = IPython.WidgetView.extend({ |
|
52 | var ToggleButtonView = IPython.WidgetView.extend({ | |
55 |
|
53 | |||
56 | // Called when view is rendered. |
|
54 | // Called when view is rendered. | |
57 | render : function(){ |
|
55 | render : function(){ | |
58 | this.$el |
|
56 | this.$el | |
59 | .html(''); |
|
57 | .html(''); | |
60 |
|
58 | |||
61 | this.$button = $('<button />') |
|
59 | this.$button = $('<button />') | |
62 | .addClass('btn') |
|
60 | .addClass('btn') | |
63 | .attr('type', 'button') |
|
61 | .attr('type', 'button') | |
64 | .attr('data-toggle', 'button') |
|
62 | .attr('data-toggle', 'button') | |
65 | .appendTo(this.$el); |
|
63 | .appendTo(this.$el); | |
66 |
|
64 | |||
67 | this.update(); // Set defaults. |
|
65 | this.update(); // Set defaults. | |
68 | }, |
|
66 | }, | |
69 |
|
67 | |||
70 | // Handles: Backend -> Frontend Sync |
|
68 | // Handles: Backend -> Frontend Sync | |
71 | // Frontent -> Frontend Sync |
|
69 | // Frontent -> Frontend Sync | |
72 | update : function(){ |
|
70 | update : function(){ | |
73 | if (!this.user_invoked_update) { |
|
71 | if (!this.user_invoked_update) { | |
74 | if (this.model.get('value')) { |
|
72 | if (this.model.get('value')) { | |
75 | this.$button.addClass('active'); |
|
73 | this.$button.addClass('active'); | |
76 | } else { |
|
74 | } else { | |
77 | this.$button.removeClass('active'); |
|
75 | this.$button.removeClass('active'); | |
78 | } |
|
76 | } | |
79 |
|
77 | |||
80 | var description = this.model.get('description'); |
|
78 | var description = this.model.get('description'); | |
81 | if (description.length == 0) { |
|
79 | if (description.length == 0) { | |
82 | this.$button.html(' '); // Preserve button height |
|
80 | this.$button.html(' '); // Preserve button height | |
83 | } else { |
|
81 | } else { | |
84 | this.$button.html(description); |
|
82 | this.$button.html(description); | |
85 | } |
|
83 | } | |
86 | } |
|
84 | } | |
87 | return IPython.WidgetView.prototype.update.call(this); |
|
85 | return IPython.WidgetView.prototype.update.call(this); | |
88 | }, |
|
86 | }, | |
89 |
|
87 | |||
90 | events: {"click button" : "handleClick"}, |
|
88 | events: {"click button" : "handleClick"}, | |
91 |
|
89 | |||
92 | // Handles and validates user input. |
|
90 | // Handles and validates user input. | |
93 | handleClick: function(e) { |
|
91 | handleClick: function(e) { | |
94 | this.user_invoked_update = true; |
|
92 | this.user_invoked_update = true; | |
95 | this.model.set('value', ! $(e.target).hasClass('active')); |
|
93 | this.model.set('value', ! $(e.target).hasClass('active')); | |
96 | this.model.update_other_views(this); |
|
94 | this.model.update_other_views(this); | |
97 | this.user_invoked_update = false; |
|
95 | this.user_invoked_update = false; | |
98 | }, |
|
96 | }, | |
99 | }); |
|
97 | }); | |
100 |
|
98 | |||
101 | IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView); |
|
99 | IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView); | |
102 |
|
100 | |||
103 | }); |
|
101 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now