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