##// END OF EJS Templates
Make sure to update the placeholder on render as well
Jessica B. Hamrick -
Show More
@@ -1,232 +1,234 b''
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2013 The IPython Development Team
2 // Copyright (C) 2013 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // StringWidget
9 // StringWidget
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 **/
15 **/
16
16
17 define(["widgets/js/widget"], function(WidgetManager){
17 define(["widgets/js/widget"], function(WidgetManager){
18
18
19 var HTMLView = IPython.DOMWidgetView.extend({
19 var HTMLView = IPython.DOMWidgetView.extend({
20 render : function(){
20 render : function(){
21 // Called when view is rendered.
21 // Called when view is rendered.
22 this.update(); // Set defaults.
22 this.update(); // Set defaults.
23 },
23 },
24
24
25 update : function(){
25 update : function(){
26 // Update the contents of this view
26 // Update the contents of this view
27 //
27 //
28 // Called when the model is changed. The model may have been
28 // Called when the model is changed. The model may have been
29 // changed by another view or by a state update from the back-end.
29 // changed by another view or by a state update from the back-end.
30 this.$el.html(this.model.get('value')); // CAUTION! .html(...) CALL MANDITORY!!!
30 this.$el.html(this.model.get('value')); // CAUTION! .html(...) CALL MANDITORY!!!
31 return HTMLView.__super__.update.apply(this);
31 return HTMLView.__super__.update.apply(this);
32 },
32 },
33 });
33 });
34 WidgetManager.register_widget_view('HTMLView', HTMLView);
34 WidgetManager.register_widget_view('HTMLView', HTMLView);
35
35
36
36
37 var LatexView = IPython.DOMWidgetView.extend({
37 var LatexView = IPython.DOMWidgetView.extend({
38 render : function(){
38 render : function(){
39 // Called when view is rendered.
39 // Called when view is rendered.
40 this.update(); // Set defaults.
40 this.update(); // Set defaults.
41 },
41 },
42
42
43 update : function(){
43 update : function(){
44 // Update the contents of this view
44 // Update the contents of this view
45 //
45 //
46 // Called when the model is changed. The model may have been
46 // Called when the model is changed. The model may have been
47 // changed by another view or by a state update from the back-end.
47 // changed by another view or by a state update from the back-end.
48 this.$el.text(this.model.get('value'));
48 this.$el.text(this.model.get('value'));
49 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$el.get(0)]);
49 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$el.get(0)]);
50
50
51 return LatexView.__super__.update.apply(this);
51 return LatexView.__super__.update.apply(this);
52 },
52 },
53 });
53 });
54 WidgetManager.register_widget_view('LatexView', LatexView);
54 WidgetManager.register_widget_view('LatexView', LatexView);
55
55
56
56
57 var TextareaView = IPython.DOMWidgetView.extend({
57 var TextareaView = IPython.DOMWidgetView.extend({
58 render: function(){
58 render: function(){
59 // Called when view is rendered.
59 // Called when view is rendered.
60 this.$el
60 this.$el
61 .addClass('widget-hbox');
61 .addClass('widget-hbox');
62 this.$label = $('<div />')
62 this.$label = $('<div />')
63 .appendTo(this.$el)
63 .appendTo(this.$el)
64 .addClass('widget-hlabel')
64 .addClass('widget-hlabel')
65 .hide();
65 .hide();
66 this.$textbox = $('<textarea />')
66 this.$textbox = $('<textarea />')
67 .attr('rows', 5)
67 .attr('rows', 5)
68 .addClass('widget-text')
68 .addClass('widget-text')
69 .appendTo(this.$el);
69 .appendTo(this.$el);
70 this.$el_to_style = this.$textbox; // Set default element to style
70 this.$el_to_style = this.$textbox; // Set default element to style
71 this.update(); // Set defaults.
71 this.update(); // Set defaults.
72
72
73 this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
73 this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
74 },
74 },
75
75
76 _handle_textarea_msg: function (content){
76 _handle_textarea_msg: function (content){
77 // Handle when a custom msg is recieved from the back-end.
77 // Handle when a custom msg is recieved from the back-end.
78 if (content.method == "scroll_to_bottom") {
78 if (content.method == "scroll_to_bottom") {
79 this.scroll_to_bottom();
79 this.scroll_to_bottom();
80 }
80 }
81 },
81 },
82
82
83 scroll_to_bottom: function (){
83 scroll_to_bottom: function (){
84 // Scroll the text-area view to the bottom.
84 // Scroll the text-area view to the bottom.
85 this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
85 this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
86 },
86 },
87
87
88 update: function(options){
88 update: function(options){
89 // Update the contents of this view
89 // Update the contents of this view
90 //
90 //
91 // Called when the model is changed. The model may have been
91 // Called when the model is changed. The model may have been
92 // changed by another view or by a state update from the back-end.
92 // changed by another view or by a state update from the back-end.
93 if (options === undefined || options.updated_view != this) {
93 if (options === undefined || options.updated_view != this) {
94 this.$textbox.val(this.model.get('value'));
94 this.$textbox.val(this.model.get('value'));
95
95
96 var disabled = this.model.get('disabled');
96 var disabled = this.model.get('disabled');
97 this.$textbox.prop('disabled', disabled);
97 this.$textbox.prop('disabled', disabled);
98
98
99 var description = this.model.get('description');
99 var description = this.model.get('description');
100 if (description.length === 0) {
100 if (description.length === 0) {
101 this.$label.hide();
101 this.$label.hide();
102 } else {
102 } else {
103 this.$label.text(description);
103 this.$label.text(description);
104 this.$label.show();
104 this.$label.show();
105 }
105 }
106 }
106 }
107 return TextareaView.__super__.update.apply(this);
107 return TextareaView.__super__.update.apply(this);
108 },
108 },
109
109
110 events: {
110 events: {
111 // Dictionary of events and their handlers.
111 // Dictionary of events and their handlers.
112 "keyup textarea" : "handleChanging",
112 "keyup textarea" : "handleChanging",
113 "paste textarea" : "handleChanging",
113 "paste textarea" : "handleChanging",
114 "cut textarea" : "handleChanging"
114 "cut textarea" : "handleChanging"
115 },
115 },
116
116
117 handleChanging: function(e) {
117 handleChanging: function(e) {
118 // Handles and validates user input.
118 // Handles and validates user input.
119
119
120 // Calling model.set will trigger all of the other views of the
120 // Calling model.set will trigger all of the other views of the
121 // model to update.
121 // model to update.
122 this.model.set('value', e.target.value, {updated_view: this});
122 this.model.set('value', e.target.value, {updated_view: this});
123 this.touch();
123 this.touch();
124 },
124 },
125 });
125 });
126 WidgetManager.register_widget_view('TextareaView', TextareaView);
126 WidgetManager.register_widget_view('TextareaView', TextareaView);
127
127
128
128
129 var TextView = IPython.DOMWidgetView.extend({
129 var TextView = IPython.DOMWidgetView.extend({
130 render: function(){
130 render: function(){
131 // Called when view is rendered.
131 // Called when view is rendered.
132 this.$el
132 this.$el
133 .addClass('widget-hbox-single');
133 .addClass('widget-hbox-single');
134 this.$label = $('<div />')
134 this.$label = $('<div />')
135 .addClass('widget-hlabel')
135 .addClass('widget-hlabel')
136 .appendTo(this.$el)
136 .appendTo(this.$el)
137 .hide();
137 .hide();
138 this.$textbox = $('<input type="text" />')
138 this.$textbox = $('<input type="text" />')
139 .addClass('input')
139 .addClass('input')
140 .addClass('widget-text')
140 .addClass('widget-text')
141 .appendTo(this.$el);
141 .appendTo(this.$el);
142 this.$el_to_style = this.$textbox; // Set default element to style
142 this.$el_to_style = this.$textbox; // Set default element to style
143 this.update(); // Set defaults.
143 this.update(); // Set defaults.
144 this.model.on('change:placeholder', function(model, value, options) {
144 this.model.on('change:placeholder', function(model, value, options) {
145 this.update_placeholder(value);
145 this.update_placeholder(value);
146 }, this);
146 }, this);
147
148 this.update_placeholder();
147 },
149 },
148
150
149 update_placeholder: function(value) {
151 update_placeholder: function(value) {
150 if (!value) {
152 if (!value) {
151 value = this.model.get('placeholder');
153 value = this.model.get('placeholder');
152 }
154 }
153 this.$textbox.attr('placeholder', value);
155 this.$textbox.attr('placeholder', value);
154 },
156 },
155
157
156 update: function(options){
158 update: function(options){
157 // Update the contents of this view
159 // Update the contents of this view
158 //
160 //
159 // Called when the model is changed. The model may have been
161 // Called when the model is changed. The model may have been
160 // changed by another view or by a state update from the back-end.
162 // changed by another view or by a state update from the back-end.
161 if (options === undefined || options.updated_view != this) {
163 if (options === undefined || options.updated_view != this) {
162 if (this.$textbox.val() != this.model.get('value')) {
164 if (this.$textbox.val() != this.model.get('value')) {
163 this.$textbox.val(this.model.get('value'));
165 this.$textbox.val(this.model.get('value'));
164 }
166 }
165
167
166 var disabled = this.model.get('disabled');
168 var disabled = this.model.get('disabled');
167 this.$textbox.prop('disabled', disabled);
169 this.$textbox.prop('disabled', disabled);
168
170
169 var description = this.model.get('description');
171 var description = this.model.get('description');
170 if (description.length === 0) {
172 if (description.length === 0) {
171 this.$label.hide();
173 this.$label.hide();
172 } else {
174 } else {
173 this.$label.text(description);
175 this.$label.text(description);
174 this.$label.show();
176 this.$label.show();
175 }
177 }
176 }
178 }
177 return TextView.__super__.update.apply(this);
179 return TextView.__super__.update.apply(this);
178 },
180 },
179
181
180 events: {
182 events: {
181 // Dictionary of events and their handlers.
183 // Dictionary of events and their handlers.
182 "keyup input" : "handleChanging",
184 "keyup input" : "handleChanging",
183 "paste input" : "handleChanging",
185 "paste input" : "handleChanging",
184 "cut input" : "handleChanging",
186 "cut input" : "handleChanging",
185 "keypress input" : "handleKeypress",
187 "keypress input" : "handleKeypress",
186 "blur input" : "handleBlur",
188 "blur input" : "handleBlur",
187 "focusout input" : "handleFocusOut"
189 "focusout input" : "handleFocusOut"
188 },
190 },
189
191
190 handleChanging: function(e) {
192 handleChanging: function(e) {
191 // Handles user input.
193 // Handles user input.
192
194
193 // Calling model.set will trigger all of the other views of the
195 // Calling model.set will trigger all of the other views of the
194 // model to update.
196 // model to update.
195 this.model.set('value', e.target.value, {updated_view: this});
197 this.model.set('value', e.target.value, {updated_view: this});
196 this.touch();
198 this.touch();
197 },
199 },
198
200
199 handleKeypress: function(e) {
201 handleKeypress: function(e) {
200 // Handles text submition
202 // Handles text submition
201 if (e.keyCode == 13) { // Return key
203 if (e.keyCode == 13) { // Return key
202 this.send({event: 'submit'});
204 this.send({event: 'submit'});
203 event.stopPropagation();
205 event.stopPropagation();
204 event.preventDefault();
206 event.preventDefault();
205 return false;
207 return false;
206 }
208 }
207 },
209 },
208
210
209 handleBlur: function(e) {
211 handleBlur: function(e) {
210 // Prevent a blur from firing if the blur was not user intended.
212 // Prevent a blur from firing if the blur was not user intended.
211 // This is a workaround for the return-key focus loss bug.
213 // This is a workaround for the return-key focus loss bug.
212 // TODO: Is the original bug actually a fault of the keyboard
214 // TODO: Is the original bug actually a fault of the keyboard
213 // manager?
215 // manager?
214 if (e.relatedTarget === null) {
216 if (e.relatedTarget === null) {
215 event.stopPropagation();
217 event.stopPropagation();
216 event.preventDefault();
218 event.preventDefault();
217 return false;
219 return false;
218 }
220 }
219 },
221 },
220
222
221 handleFocusOut: function(e) {
223 handleFocusOut: function(e) {
222 // Prevent a blur from firing if the blur was not user intended.
224 // Prevent a blur from firing if the blur was not user intended.
223 // This is a workaround for the return-key focus loss bug.
225 // This is a workaround for the return-key focus loss bug.
224 if (e.relatedTarget === null) {
226 if (e.relatedTarget === null) {
225 event.stopPropagation();
227 event.stopPropagation();
226 event.preventDefault();
228 event.preventDefault();
227 return false;
229 return false;
228 }
230 }
229 },
231 },
230 });
232 });
231 WidgetManager.register_widget_view('TextView', TextView);
233 WidgetManager.register_widget_view('TextView', TextView);
232 });
234 });
General Comments 0
You need to be logged in to leave comments. Login now