Show More
@@ -1,123 +1,129 | |||||
1 | require(["notebook/js/widget"], function(){ |
|
1 | require(["notebook/js/widget"], function(){ | |
2 | var StringWidgetModel = IPython.WidgetModel.extend({}); |
|
2 | var StringWidgetModel = IPython.WidgetModel.extend({}); | |
3 | IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel); |
|
3 | IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel); | |
4 |
|
4 | |||
5 | var LabelView = IPython.WidgetView.extend({ |
|
5 | var LabelView = IPython.WidgetView.extend({ | |
6 |
|
6 | |||
7 | // Called when view is rendered. |
|
7 | // Called when view is rendered. | |
8 | render : function(){ |
|
8 | render : function(){ | |
9 | this.$el = $('<div />'); |
|
9 | this.$el = $('<div />'); | |
10 | this.update(); // Set defaults. |
|
10 | this.update(); // Set defaults. | |
11 | }, |
|
11 | }, | |
12 |
|
12 | |||
13 | // Handles: Backend -> Frontend Sync |
|
13 | // Handles: Backend -> Frontend Sync | |
14 | // Frontent -> Frontend Sync |
|
14 | // Frontent -> Frontend Sync | |
15 | update : function(){ |
|
15 | update : function(){ | |
16 | this.$el.html(this.model.get('value')); |
|
16 | this.$el.html(this.model.get('value')); | |
17 | return IPython.WidgetView.prototype.update.call(this); |
|
17 | return IPython.WidgetView.prototype.update.call(this); | |
18 | }, |
|
18 | }, | |
19 |
|
19 | |||
20 | }); |
|
20 | }); | |
21 |
|
21 | |||
22 | IPython.notebook.widget_manager.register_widget_view('LabelView', LabelView); |
|
22 | IPython.notebook.widget_manager.register_widget_view('LabelView', LabelView); | |
23 |
|
23 | |||
24 | var TextAreaView = IPython.WidgetView.extend({ |
|
24 | var TextAreaView = IPython.WidgetView.extend({ | |
25 |
|
25 | |||
26 | // Called when view is rendered. |
|
26 | // Called when view is rendered. | |
27 | render : function(){ |
|
27 | render : function(){ | |
28 | this.$el |
|
28 | this.$el | |
29 | .addClass('widget-hbox') |
|
29 | .addClass('widget-hbox') | |
30 | .html(''); |
|
30 | .html(''); | |
31 | this.$label = $('<div />') |
|
31 | this.$label = $('<div />') | |
32 | .appendTo(this.$el) |
|
32 | .appendTo(this.$el) | |
33 | .addClass('widget-hlabel') |
|
33 | .addClass('widget-hlabel') | |
34 | .hide(); |
|
34 | .hide(); | |
35 | this.$textbox = $('<textarea />') |
|
35 | this.$textbox = $('<textarea />') | |
36 | .attr('rows', 5) |
|
36 | .attr('rows', 5) | |
37 | .addClass('widget-text') |
|
37 | .addClass('widget-text') | |
38 | .appendTo(this.$el); |
|
38 | .appendTo(this.$el); | |
39 | this.update(); // Set defaults. |
|
39 | this.update(); // Set defaults. | |
40 | }, |
|
40 | }, | |
41 |
|
41 | |||
42 | // Handles: Backend -> Frontend Sync |
|
42 | // Handles: Backend -> Frontend Sync | |
43 | // Frontent -> Frontend Sync |
|
43 | // Frontent -> Frontend Sync | |
44 | update : function(){ |
|
44 | update : function(){ | |
45 | if (!this.user_invoked_update) { |
|
45 | if (!this.user_invoked_update) { | |
46 | this.$textbox.val(this.model.get('value')); |
|
46 | this.$textbox.val(this.model.get('value')); | |
47 | } |
|
47 | } | |
48 |
|
48 | |||
|
49 | var disabled = this.model.get('disabled'); | |||
|
50 | this.$textbox.prop('disabled', disabled); | |||
|
51 | ||||
49 | var description = this.model.get('description'); |
|
52 | var description = this.model.get('description'); | |
50 | if (description.length == 0) { |
|
53 | if (description.length == 0) { | |
51 | this.$label.hide(); |
|
54 | this.$label.hide(); | |
52 | } else { |
|
55 | } else { | |
53 | this.$label.html(description); |
|
56 | this.$label.html(description); | |
54 | this.$label.show(); |
|
57 | this.$label.show(); | |
55 | } |
|
58 | } | |
56 | return IPython.WidgetView.prototype.update.call(this); |
|
59 | return IPython.WidgetView.prototype.update.call(this); | |
57 | }, |
|
60 | }, | |
58 |
|
61 | |||
59 | events: {"keyup textarea" : "handleChanging", |
|
62 | events: {"keyup textarea" : "handleChanging", | |
60 | "paste textarea" : "handleChanging", |
|
63 | "paste textarea" : "handleChanging", | |
61 | "cut textarea" : "handleChanging"}, |
|
64 | "cut textarea" : "handleChanging"}, | |
62 |
|
65 | |||
63 | // Handles and validates user input. |
|
66 | // Handles and validates user input. | |
64 | handleChanging: function(e) { |
|
67 | handleChanging: function(e) { | |
65 | this.user_invoked_update = true; |
|
68 | this.user_invoked_update = true; | |
66 | this.model.set('value', e.target.value); |
|
69 | this.model.set('value', e.target.value); | |
67 | this.model.update_other_views(this); |
|
70 | this.model.update_other_views(this); | |
68 | this.user_invoked_update = false; |
|
71 | this.user_invoked_update = false; | |
69 | }, |
|
72 | }, | |
70 | }); |
|
73 | }); | |
71 |
|
74 | |||
72 | IPython.notebook.widget_manager.register_widget_view('TextAreaView', TextAreaView); |
|
75 | IPython.notebook.widget_manager.register_widget_view('TextAreaView', TextAreaView); | |
73 |
|
76 | |||
74 | var TextBoxView = IPython.WidgetView.extend({ |
|
77 | var TextBoxView = IPython.WidgetView.extend({ | |
75 |
|
78 | |||
76 | // Called when view is rendered. |
|
79 | // Called when view is rendered. | |
77 | render : function(){ |
|
80 | render : function(){ | |
78 | this.$el |
|
81 | this.$el | |
79 | .addClass('widget-hbox-single') |
|
82 | .addClass('widget-hbox-single') | |
80 | .html(''); |
|
83 | .html(''); | |
81 | this.$label = $('<div />') |
|
84 | this.$label = $('<div />') | |
82 | .addClass('widget-hlabel') |
|
85 | .addClass('widget-hlabel') | |
83 | .appendTo(this.$el) |
|
86 | .appendTo(this.$el) | |
84 | .hide(); |
|
87 | .hide(); | |
85 | this.$textbox = $('<input type="text" />') |
|
88 | this.$textbox = $('<input type="text" />') | |
86 | .addClass('input') |
|
89 | .addClass('input') | |
87 | .addClass('widget-text') |
|
90 | .addClass('widget-text') | |
88 | .appendTo(this.$el); |
|
91 | .appendTo(this.$el); | |
89 | this.update(); // Set defaults. |
|
92 | this.update(); // Set defaults. | |
90 | }, |
|
93 | }, | |
91 |
|
94 | |||
92 | // Handles: Backend -> Frontend Sync |
|
95 | // Handles: Backend -> Frontend Sync | |
93 | // Frontent -> Frontend Sync |
|
96 | // Frontent -> Frontend Sync | |
94 | update : function(){ |
|
97 | update : function(){ | |
95 | if (!this.user_invoked_update) { |
|
98 | if (!this.user_invoked_update) { | |
96 | this.$textbox.val(this.model.get('value')); |
|
99 | this.$textbox.val(this.model.get('value')); | |
97 | } |
|
100 | } | |
98 |
|
101 | |||
|
102 | var disabled = this.model.get('disabled'); | |||
|
103 | this.$textbox.prop('disabled', disabled); | |||
|
104 | ||||
99 | var description = this.model.get('description'); |
|
105 | var description = this.model.get('description'); | |
100 | if (description.length == 0) { |
|
106 | if (description.length == 0) { | |
101 | this.$label.hide(); |
|
107 | this.$label.hide(); | |
102 | } else { |
|
108 | } else { | |
103 | this.$label.html(description); |
|
109 | this.$label.html(description); | |
104 | this.$label.show(); |
|
110 | this.$label.show(); | |
105 | } |
|
111 | } | |
106 | return IPython.WidgetView.prototype.update.call(this); |
|
112 | return IPython.WidgetView.prototype.update.call(this); | |
107 | }, |
|
113 | }, | |
108 |
|
114 | |||
109 | events: {"keyup input" : "handleChanging", |
|
115 | events: {"keyup input" : "handleChanging", | |
110 | "paste input" : "handleChanging", |
|
116 | "paste input" : "handleChanging", | |
111 | "cut input" : "handleChanging"}, |
|
117 | "cut input" : "handleChanging"}, | |
112 |
|
118 | |||
113 | // Handles and validates user input. |
|
119 | // Handles and validates user input. | |
114 | handleChanging: function(e) { |
|
120 | handleChanging: function(e) { | |
115 | this.user_invoked_update = true; |
|
121 | this.user_invoked_update = true; | |
116 | this.model.set('value', e.target.value); |
|
122 | this.model.set('value', e.target.value); | |
117 | this.model.update_other_views(this); |
|
123 | this.model.update_other_views(this); | |
118 | this.user_invoked_update = false; |
|
124 | this.user_invoked_update = false; | |
119 | }, |
|
125 | }, | |
120 | }); |
|
126 | }); | |
121 |
|
127 | |||
122 | IPython.notebook.widget_manager.register_widget_view('TextBoxView', TextBoxView); |
|
128 | IPython.notebook.widget_manager.register_widget_view('TextBoxView', TextBoxView); | |
123 | }); |
|
129 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now