widget_bool.js
125 lines
| 4.5 KiB
| application/javascript
|
JavascriptLexer
|
r14366 | //---------------------------------------------------------------------------- | ||
// Copyright (C) 2013 The IPython Development Team | ||||
// | ||||
// Distributed under the terms of the BSD License. The full license is in | ||||
// the file COPYING, distributed as part of this software. | ||||
//---------------------------------------------------------------------------- | ||||
//============================================================================ | ||||
// BoolWidget | ||||
//============================================================================ | ||||
/** | ||||
* @module IPython | ||||
* @namespace IPython | ||||
**/ | ||||
|
r14259 | |||
|
r14537 | define(["notebook/js/widgets/widget"], function(widget_manager){ | ||
|
r14259 | |||
var BoolWidgetModel = IPython.WidgetModel.extend({}); | ||||
|
r14374 | widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel); | ||
|
r14259 | |||
|
r14564 | var CheckboxView = IPython.DOMWidgetView.extend({ | ||
|
r14259 | |||
// Called when view is rendered. | ||||
render : function(){ | ||||
|
r14395 | this.$el | ||
|
r14295 | .addClass('widget-hbox-single'); | ||
this.$label = $('<div />') | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14295 | .appendTo(this.$el) | ||
|
r14292 | .hide(); | ||
|
r14299 | var that = this; | ||
|
r14259 | this.$checkbox = $('<input />') | ||
.attr('type', 'checkbox') | ||||
|
r14299 | .click(function(el) { | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r14570 | that.model.set('value', that.$checkbox.prop('checked'), {updated_view: this}); | ||
|
r14482 | that.touch(); | ||
|
r14299 | }) | ||
|
r14295 | .appendTo(this.$el); | ||
|
r14259 | |||
|
r14314 | this.$el_to_style = this.$checkbox; // Set default element to style | ||
|
r14259 | 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. | ||||
|
r14570 | if (options === undefined || options.updated_view != this) { | ||
|
r14259 | this.$checkbox.prop('checked', this.model.get('value')); | ||
|
r14292 | |||
|
r14304 | var disabled = this.model.get('disabled'); | ||
this.$checkbox.prop('disabled', disabled); | ||||
|
r14292 | var description = this.model.get('description'); | ||
|
r14466 | if (description.length === 0) { | ||
|
r14295 | this.$label.hide(); | ||
|
r14292 | } else { | ||
|
r14295 | this.$label.html(description); | ||
this.$label.show(); | ||||
|
r14292 | } | ||
|
r14259 | } | ||
|
r14564 | return IPython.DOMWidgetView.prototype.update.call(this); | ||
|
r14259 | }, | ||
}); | ||||
|
r14374 | widget_manager.register_widget_view('CheckboxView', CheckboxView); | ||
|
r14262 | |||
|
r14564 | var ToggleButtonView = IPython.DOMWidgetView.extend({ | ||
|
r14262 | |||
// Called when view is rendered. | ||||
render : function(){ | ||||
|
r14571 | this.setElement($('<button />') | ||
|
r14262 | .addClass('btn') | ||
.attr('type', 'button') | ||||
|
r14571 | .attr('data-toggle', 'button')); | ||
|
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. | ||||
|
r14570 | if (options === undefined || options.updated_view != this) { | ||
|
r14262 | if (this.model.get('value')) { | ||
|
r14571 | this.$el.addClass('active'); | ||
|
r14262 | } else { | ||
|
r14571 | this.$el.removeClass('active'); | ||
|
r14262 | } | ||
|
r14292 | |||
|
r14304 | var disabled = this.model.get('disabled'); | ||
|
r14571 | this.$el.prop('disabled', disabled); | ||
|
r14304 | |||
|
r14292 | var description = this.model.get('description'); | ||
|
r14466 | if (description.length === 0) { | ||
|
r14571 | this.$el.html(' '); // Preserve button height | ||
|
r14292 | } else { | ||
|
r14571 | this.$el.html(description); | ||
|
r14292 | } | ||
|
r14262 | } | ||
|
r14564 | return IPython.DOMWidgetView.prototype.update.call(this); | ||
|
r14262 | }, | ||
events: {"click button" : "handleClick"}, | ||||
// Handles and validates user input. | ||||
handleClick: function(e) { | ||||
|
r14570 | |||
|
r14569 | // Calling model.set will trigger all of the other views of the | ||
// model to update. | ||||
|
r14570 | this.model.set('value', ! $(e.target).hasClass('active'), {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14262 | }, | ||
}); | ||||
|
r14374 | widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView); | ||
|
r14262 | |||
|
r14259 | }); | ||