widget_bool.js
120 lines
| 4.1 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", | ||
|
r17312 | "bootstrap", | ||
|
r17216 | ], function(widget, $){ | ||
|
r14366 | |||
|
r17198 | var CheckboxView = widget.DOMWidgetView.extend({ | ||
|
r14259 | render : function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14395 | this.$el | ||
|
r14295 | .addClass('widget-hbox-single'); | ||
this.$label = $('<div />') | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14295 | .appendTo(this.$el) | ||
|
r14292 | .hide(); | ||
|
r14259 | this.$checkbox = $('<input />') | ||
.attr('type', 'checkbox') | ||||
|
r14595 | .appendTo(this.$el) | ||
.click($.proxy(this.handle_click, this)); | ||||
|
r14259 | |||
|
r14314 | this.$el_to_style = this.$checkbox; // Set default element to style | ||
|
r14259 | this.update(); // Set defaults. | ||
}, | ||||
|
r14595 | |||
handle_click: function() { | ||||
|
r14609 | // Handles when the checkbox is clicked. | ||
|
r14595 | // Calling model.set will trigger all of the other views of the | ||
// model to update. | ||||
var value = this.model.get('value'); | ||||
this.model.set('value', ! value, {updated_view: this}); | ||||
this.touch(); | ||||
}, | ||||
|
r14259 | |||
|
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. | ||||
|
r14595 | this.$checkbox.prop('checked', this.model.get('value')); | ||
|
r14292 | |||
|
r14595 | if (options === undefined || options.updated_view != this) { | ||
|
r14304 | var disabled = this.model.get('disabled'); | ||
this.$checkbox.prop('disabled', disabled); | ||||
|
r14292 | var description = this.model.get('description'); | ||
|
r15330 | if (description.trim().length === 0) { | ||
|
r14295 | this.$label.hide(); | ||
|
r14292 | } else { | ||
|
r14663 | this.$label.text(description); | ||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]); | ||
|
r14295 | this.$label.show(); | ||
|
r14292 | } | ||
|
r14259 | } | ||
|
r14834 | return CheckboxView.__super__.update.apply(this); | ||
|
r14259 | }, | ||
}); | ||||
|
r14262 | |||
|
r14609 | |||
|
r17198 | var ToggleButtonView = widget.DOMWidgetView.extend({ | ||
|
r14595 | render : function() { | ||
|
r14609 | // Called when view is rendered. | ||
|
r14595 | var that = this; | ||
|
r14571 | this.setElement($('<button />') | ||
|
r16913 | .addClass('btn btn-default') | ||
|
r14262 | .attr('type', 'button') | ||
|
r14595 | .on('click', function (e) { | ||
e.preventDefault(); | ||||
that.handle_click(); | ||||
})); | ||||
|
r14262 | |||
this.update(); // Set defaults. | ||||
}, | ||||
|
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. | ||||
|
r14583 | if (this.model.get('value')) { | ||
this.$el.addClass('active'); | ||||
} else { | ||||
this.$el.removeClass('active'); | ||||
} | ||||
|
r14292 | |||
|
r14583 | if (options === undefined || options.updated_view != this) { | ||
|
r14595 | |||
|
r14304 | var disabled = this.model.get('disabled'); | ||
|
r14571 | this.$el.prop('disabled', disabled); | ||
|
r14304 | |||
|
r14292 | var description = this.model.get('description'); | ||
|
r15330 | if (description.trim().length === 0) { | ||
|
r15329 | this.$el.html(" "); // Preserve button height | ||
|
r14292 | } else { | ||
|
r14663 | this.$el.text(description); | ||
|
r14292 | } | ||
|
r14262 | } | ||
|
r14583 | return ToggleButtonView.__super__.update.apply(this); | ||
|
r14262 | }, | ||
|
r14595 | handle_click: function(e) { | ||
|
r14609 | // Handles and validates user input. | ||
|
r14570 | |||
|
r14569 | // Calling model.set will trigger all of the other views of the | ||
// model to update. | ||||
|
r14595 | var value = this.model.get('value'); | ||
this.model.set('value', ! value, {updated_view: this}); | ||||
|
r14482 | this.touch(); | ||
|
r14262 | }, | ||
}); | ||||
|
r17198 | |||
return { | ||||
'CheckboxView': CheckboxView, | ||||
'ToggleButtonView': ToggleButtonView, | ||||
}; | ||||
|
r14259 | }); | ||