widget_bool.js
155 lines
| 5.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(){ | ||
|
r19176 | /** | ||
* Called when view is rendered. | ||||
*/ | ||||
|
r14395 | this.$el | ||
|
r18120 | .addClass('widget-hbox widget-checkbox'); | ||
|
r14295 | this.$label = $('<div />') | ||
|
r17929 | .addClass('widget-label') | ||
|
r14295 | .appendTo(this.$el) | ||
|
r14292 | .hide(); | ||
|
r14259 | this.$checkbox = $('<input />') | ||
.attr('type', 'checkbox') | ||||
|
r14595 | .appendTo(this.$el) | ||
.click($.proxy(this.handle_click, this)); | ||||
|
r14259 | |||
this.update(); // Set defaults. | ||||
}, | ||||
|
r14595 | |||
|
r17723 | update_attr: function(name, value) { | ||
|
r19176 | /** | ||
* Set a css attr of the widget view. | ||||
*/ | ||||
|
r17723 | this.$checkbox.css(name, value); | ||
}, | ||||
|
r14595 | handle_click: function() { | ||
|
r19176 | /** | ||
* Handles when the checkbox is clicked. | ||||
* | ||||
* 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}); | ||||
this.touch(); | ||||
}, | ||||
|
r14259 | |||
|
r14570 | update : function(options){ | ||
|
r19176 | /** | ||
* 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() { | ||
|
r19176 | /** | ||
* 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(); | ||||
})); | ||||
|
r18824 | this.$el.attr("data-toggle", "tooltip"); | ||
|
r17728 | this.model.on('change:button_style', function(model, value) { | ||
this.update_button_style(); | ||||
}, this); | ||||
this.update_button_style(''); | ||||
|
r14262 | this.update(); // Set defaults. | ||
}, | ||||
|
r17728 | |||
update_button_style: function(previous_trait_value) { | ||||
var class_map = { | ||||
primary: ['btn-primary'], | ||||
success: ['btn-success'], | ||||
info: ['btn-info'], | ||||
warning: ['btn-warning'], | ||||
danger: ['btn-danger'] | ||||
}; | ||||
this.update_mapped_classes(class_map, 'button_style', previous_trait_value); | ||||
}, | ||||
|
r14262 | |||
|
r14570 | update : function(options){ | ||
|
r19176 | /** | ||
* 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'); | ||
|
r18824 | this.$el.attr("title", this.model.get("tooltip")); | ||
|
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) { | ||
|
r19176 | /** | ||
* Handles and validates user input. | ||||
* | ||||
* 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 | }); | ||