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