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