bool.js
107 lines
| 3.6 KiB
| application/javascript
|
JavascriptLexer
|
r14259 | |||
|
r14285 | require(["notebook/js/widget"], function(){ | ||
|
r14259 | |||
var BoolWidgetModel = IPython.WidgetModel.extend({}); | ||||
IPython.notebook.widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel); | ||||
var CheckboxView = IPython.WidgetView.extend({ | ||||
// Called when view is rendered. | ||||
render : function(){ | ||||
|
r14295 | this.$el = $('<div />') | ||
.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) { | ||
that.user_invoked_update = true; | ||||
that.model.set('value', that.$checkbox.prop('checked')); | ||||
that.model.update_other_views(that); | ||||
that.user_invoked_update = false; | ||||
}) | ||||
|
r14295 | .appendTo(this.$el); | ||
|
r14259 | |||
this.update(); // Set defaults. | ||||
}, | ||||
// Handles: Backend -> Frontend Sync | ||||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
if (!this.user_invoked_update) { | ||||
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'); | ||
if (description.length == 0) { | ||||
|
r14295 | this.$label.hide(); | ||
|
r14292 | } else { | ||
|
r14295 | this.$label.html(description); | ||
this.$label.show(); | ||||
|
r14292 | } | ||
|
r14259 | } | ||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14259 | }, | ||
}); | ||||
IPython.notebook.widget_manager.register_widget_view('CheckboxView', CheckboxView); | ||||
|
r14262 | |||
var ToggleButtonView = IPython.WidgetView.extend({ | ||||
// Called when view is rendered. | ||||
render : function(){ | ||||
this.$el | ||||
|
r14278 | .html(''); | ||
|
r14262 | |||
this.$button = $('<button />') | ||||
.addClass('btn') | ||||
.attr('type', 'button') | ||||
.attr('data-toggle', 'button') | ||||
.appendTo(this.$el); | ||||
this.update(); // Set defaults. | ||||
}, | ||||
// Handles: Backend -> Frontend Sync | ||||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
if (!this.user_invoked_update) { | ||||
if (this.model.get('value')) { | ||||
this.$button.addClass('active'); | ||||
} else { | ||||
this.$button.removeClass('active'); | ||||
} | ||||
|
r14292 | |||
|
r14304 | var disabled = this.model.get('disabled'); | ||
this.$button.prop('disabled', disabled); | ||||
|
r14292 | var description = this.model.get('description'); | ||
if (description.length == 0) { | ||||
this.$button.html(' '); // Preserve button height | ||||
} else { | ||||
this.$button.html(description); | ||||
} | ||||
|
r14262 | } | ||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14262 | }, | ||
events: {"click button" : "handleClick"}, | ||||
// Handles and validates user input. | ||||
handleClick: function(e) { | ||||
this.user_invoked_update = true; | ||||
this.model.set('value', ! $(e.target).hasClass('active')); | ||||
|
r14278 | this.model.update_other_views(this); | ||
|
r14262 | this.user_invoked_update = false; | ||
}, | ||||
}); | ||||
IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView); | ||||
|
r14259 | }); | ||