Moved view code into model files

This commit is contained in:
Jonathan Frederic 2013-10-17 20:56:11 +00:00
parent bc0363039e
commit e88950238f
3 changed files with 213 additions and 0 deletions

View File

@ -1,2 +1,17 @@
var ContainerModel = IPython.WidgetModel.extend({});
IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel);
var ContainerView = IPython.WidgetView.extend({
render : function(){
this.$el.html('');
this.$container = $('<div />')
.addClass('container')
.addClass(this.model.comm.comm_id);
this.$el.append(this.$container);
},
update : function(){},
});
IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);

View File

@ -1,2 +1,128 @@
var SelectionWidgetModel = IPython.WidgetModel.extend({});
IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
var DropdownView = IPython.WidgetView.extend({
// Called when view is rendered.
render : function(){
this.$el
.html('')
.addClass(this.model.comm.comm_id);
this.$buttongroup = $('<div />')
.addClass('btn-group')
.appendTo(this.$el);
this.$droplabel = $('<button />')
.addClass('btn')
.appendTo(this.$buttongroup);
this.$dropbutton = $('<button />')
.addClass('btn')
.addClass('dropdown-toggle')
.attr('data-toggle', 'dropdown')
.html('<span class="caret"></span>')
.appendTo(this.$buttongroup);
this.$droplist = $('<ul />')
.addClass('dropdown-menu')
.appendTo(this.$buttongroup);
// Set defaults.
this.update();
},
// Handles: Backend -> Frontend Sync
// Frontent -> Frontend Sync
update : function(){
this.$droplabel.html(this.model.get('value'));
var items = this.model.get('values');
this.$droplist.html('');
for (var index in items) {
var that = this;
var item_button = $('<a href="#"/>')
.html(items[index])
.on('click', function(e){
that.model.set('value', $(e.target).html(), this );
})
this.$droplist.append($('<li />').append(item_button))
}
if (this.model.get('disabled')) {
this.$buttongroup.attr('disabled','disabled');
this.$droplabel.attr('disabled','disabled');
this.$dropbutton.attr('disabled','disabled');
this.$droplist.attr('disabled','disabled');
} else {
this.$buttongroup.removeAttr('disabled');
this.$droplabel.removeAttr('disabled');
this.$dropbutton.removeAttr('disabled');
this.$droplist.removeAttr('disabled');
}
},
});
IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
var RadioButtonView = IPython.WidgetView.extend({
// Called when view is rendered.
render : function(){
this.$el
.html('')
.addClass(this.model.comm.comm_id);
this.update();
},
// Handles: Backend -> Frontend Sync
// Frontent -> Frontend Sync
update : function(){
// Add missing items to the DOM.
var items = this.model.get('values');
for (var index in items) {
var item_query = ' :input[value="' + items[index] + '"]';
if (this.$el.find(item_query).length == 0) {
var $label = $('<label />')
.addClass('radio')
.html(items[index])
.appendTo(this.$el);
var that = this;
$('<input />')
.attr('type', 'radio')
.addClass(this.model)
.val(items[index])
.prependTo($label)
.on('click', function(e){
that.model.set('value', $(e.target).val(), this);
that.model.apply();
});
}
if (this.model.get('value') == items[index]) {
this.$el.find(item_query).prop('checked', true);
} else {
this.$el.find(item_query).prop('checked', false);
}
}
// Remove items that no longer exist.
this.$el.find('input').each(function(i, obj) {
var value = $(obj).val();
var found = false;
for (var index in items) {
if (items[index] == value) {
found = true;
break;
}
}
if (!found) {
$(obj).parent().remove();
}
});
},
});
IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView);

View File

@ -1,2 +1,74 @@
var StringWidgetModel = IPython.WidgetModel.extend({});
IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
var TextareaView = IPython.WidgetView.extend({
// Called when view is rendered.
render : function(){
this.$el
.html('')
.addClass(this.model.comm.comm_id);
this.$textbox = $('<textarea />')
.attr('rows', 5)
.appendTo(this.$el);
this.update(); // Set defaults.
},
// Handles: Backend -> Frontend Sync
// Frontent -> Frontend Sync
update : function(){
if (!this.user_invoked_update) {
this.$textbox.val(this.model.get('value'));
}
},
events: {"keyup textarea" : "handleChanging",
"paste textarea" : "handleChanging",
"cut textarea" : "handleChanging"},
// Handles and validates user input.
handleChanging: function(e) {
this.user_invoked_update = true;
this.model.set('value', e.target.value);
this.model.apply(this);
this.user_invoked_update = false;
},
});
IPython.notebook.widget_manager.register_widget_view('TextareaView', TextareaView);
var TextboxView = IPython.WidgetView.extend({
// Called when view is rendered.
render : function(){
this.$el
.html('')
.addClass(this.model.comm.comm_id);
this.$textbox = $('<input type="text" />')
.addClass('input')
.appendTo(this.$el);
this.update(); // Set defaults.
},
// Handles: Backend -> Frontend Sync
// Frontent -> Frontend Sync
update : function(){
if (!this.user_invoked_update) {
this.$textbox.val(this.model.get('value'));
}
},
events: {"keyup input" : "handleChanging",
"paste input" : "handleChanging",
"cut input" : "handleChanging"},
// Handles and validates user input.
handleChanging: function(e) {
this.user_invoked_update = true;
this.model.set('value', e.target.value);
this.model.apply(this);
this.user_invoked_update = false;
},
});
IPython.notebook.widget_manager.register_widget_view('TextboxView', TextboxView);