widget_string.js
242 lines
| 8.5 KiB
| application/javascript
|
JavascriptLexer
|
r17198 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
|
r14366 | |||
|
r17198 | define([ | ||
"widgets/js/widget", | ||||
|
r17216 | "jquery", | ||
"components/bootstrap/js/bootstrap.min", | ||||
], function(widget, $){ | ||||
|
r14366 | |||
|
r17198 | var HTMLView = widget.DOMWidgetView.extend({ | ||
|
r14263 | render : function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14263 | this.update(); // Set defaults. | ||
}, | ||||
update : function(){ | ||||
|
r14568 | // Update the contents of this view | ||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
|
r14663 | this.$el.html(this.model.get('value')); // CAUTION! .html(...) CALL MANDITORY!!! | ||
|
r14583 | return HTMLView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
}); | ||||
|
r14252 | |||
|
r14447 | |||
|
r17198 | var LatexView = widget.DOMWidgetView.extend({ | ||
|
r14447 | render : function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14447 | this.update(); // Set defaults. | ||
}, | ||||
update : function(){ | ||||
|
r14568 | // Update the contents of this view | ||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
|
r14663 | this.$el.text(this.model.get('value')); | ||
|
r14448 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$el.get(0)]); | ||
|
r14583 | return LatexView.__super__.update.apply(this); | ||
|
r14609 | }, | ||
|
r14447 | }); | ||
|
r14609 | |||
|
r17198 | var TextareaView = widget.DOMWidgetView.extend({ | ||
|
r14403 | render: function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14263 | this.$el | ||
|
r14663 | .addClass('widget-hbox'); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$textbox = $('<textarea />') | ||
.attr('rows', 5) | ||||
|
r16952 | .addClass('widget-text form-control') | ||
|
r14263 | .appendTo(this.$el); | ||
|
r14314 | this.$el_to_style = this.$textbox; // Set default element to style | ||
|
r14263 | this.update(); // Set defaults. | ||
|
r14403 | |||
|
r14487 | this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this)); | ||
|
r16323 | this.model.on('change:placeholder', function(model, value, options) { | ||
this.update_placeholder(value); | ||||
}, this); | ||||
this.update_placeholder(); | ||||
|
r14403 | }, | ||
_handle_textarea_msg: function (content){ | ||||
|
r14609 | // Handle when a custom msg is recieved from the back-end. | ||
|
r14403 | if (content.method == "scroll_to_bottom") { | ||
this.scroll_to_bottom(); | ||||
} | ||||
}, | ||||
|
r16323 | update_placeholder: function(value) { | ||
if (!value) { | ||||
value = this.model.get('placeholder'); | ||||
} | ||||
this.$textbox.attr('placeholder', value); | ||||
}, | ||||
|
r14403 | scroll_to_bottom: function (){ | ||
|
r14609 | // Scroll the text-area view to the bottom. | ||
|
r14403 | this.$textbox.scrollTop(this.$textbox[0].scrollHeight); | ||
|
r14263 | }, | ||
|
r14403 | |||
|
r14570 | update: function(options){ | ||
|
r14568 | // Update the contents of this view | ||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
|
r14570 | if (options === undefined || options.updated_view != this) { | ||
|
r14263 | this.$textbox.val(this.model.get('value')); | ||
|
r14292 | |||
|
r14570 | var disabled = this.model.get('disabled'); | ||
this.$textbox.prop('disabled', disabled); | ||||
|
r14302 | |||
|
r14570 | var description = this.model.get('description'); | ||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
|
r14663 | this.$label.text(description); | ||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14834 | return TextareaView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14609 | events: { | ||
// Dictionary of events and their handlers. | ||||
|
r14610 | "keyup textarea" : "handleChanging", | ||
"paste textarea" : "handleChanging", | ||||
"cut textarea" : "handleChanging" | ||||
|
r14609 | }, | ||
|
r14263 | |||
handleChanging: function(e) { | ||||
|
r14609 | // Handles and validates user input. | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r14570 | this.model.set('value', e.target.value, {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14263 | }, | ||
}); | ||||
|
r14252 | |||
|
r14609 | |||
|
r17198 | var TextView = widget.DOMWidgetView.extend({ | ||
|
r14403 | render: function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14263 | this.$el | ||
|
r14663 | .addClass('widget-hbox-single'); | ||
|
r14292 | this.$label = $('<div />') | ||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .appendTo(this.$el) | ||
.hide(); | ||||
|
r14263 | this.$textbox = $('<input type="text" />') | ||
.addClass('input') | ||||
|
r16952 | .addClass('widget-text form-control') | ||
|
r14263 | .appendTo(this.$el); | ||
|
r14314 | this.$el_to_style = this.$textbox; // Set default element to style | ||
|
r14263 | this.update(); // Set defaults. | ||
|
r16321 | this.model.on('change:placeholder', function(model, value, options) { | ||
this.update_placeholder(value); | ||||
}, this); | ||||
|
r16322 | |||
this.update_placeholder(); | ||||
|
r16321 | }, | ||
update_placeholder: function(value) { | ||||
if (!value) { | ||||
value = this.model.get('placeholder'); | ||||
} | ||||
this.$textbox.attr('placeholder', value); | ||||
|
r14263 | }, | ||
|
r14570 | update: function(options){ | ||
|
r14568 | // Update the contents of this view | ||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
|
r14570 | if (options === undefined || options.updated_view != this) { | ||
if (this.$textbox.val() != this.model.get('value')) { | ||||
this.$textbox.val(this.model.get('value')); | ||||
} | ||||
var disabled = this.model.get('disabled'); | ||||
this.$textbox.prop('disabled', disabled); | ||||
var description = this.model.get('description'); | ||||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
|
r14663 | this.$label.text(description); | ||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14834 | return TextView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14609 | events: { | ||
// Dictionary of events and their handlers. | ||||
|
r14610 | "keyup input" : "handleChanging", | ||
"paste input" : "handleChanging", | ||||
"cut input" : "handleChanging", | ||||
|
r14746 | "keypress input" : "handleKeypress", | ||
"blur input" : "handleBlur", | ||||
"focusout input" : "handleFocusOut" | ||||
|
r14609 | }, | ||
|
r14263 | |||
handleChanging: function(e) { | ||||
|
r14741 | // Handles user input. | ||
|
r14569 | // Calling model.set will trigger all of the other views of the | ||
// model to update. | ||||
|
r14570 | this.model.set('value', e.target.value, {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14263 | }, | ||
|
r14391 | |||
handleKeypress: function(e) { | ||||
|
r14609 | // Handles text submition | ||
|
r14391 | if (e.keyCode == 13) { // Return key | ||
|
r14403 | this.send({event: 'submit'}); | ||
|
r14746 | event.stopPropagation(); | ||
event.preventDefault(); | ||||
return false; | ||||
} | ||||
}, | ||||
handleBlur: function(e) { | ||||
// Prevent a blur from firing if the blur was not user intended. | ||||
// This is a workaround for the return-key focus loss bug. | ||||
// TODO: Is the original bug actually a fault of the keyboard | ||||
// manager? | ||||
if (e.relatedTarget === null) { | ||||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
return false; | ||||
} | ||||
}, | ||||
handleFocusOut: function(e) { | ||||
// Prevent a blur from firing if the blur was not user intended. | ||||
// This is a workaround for the return-key focus loss bug. | ||||
if (e.relatedTarget === null) { | ||||
event.stopPropagation(); | ||||
event.preventDefault(); | ||||
return false; | ||||
|
r14391 | } | ||
}, | ||||
|
r14263 | }); | ||
|
r17198 | |||
return { | ||||
'HTMLView': HTMLView, | ||||
'LatexView': LatexView, | ||||
'TextareaView': TextareaView, | ||||
'TextView': TextView, | ||||
}; | ||||
|
r14263 | }); | ||