selection.js
277 lines
| 10.2 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. | ||||
//---------------------------------------------------------------------------- | ||||
//============================================================================ | ||||
// SelectionWidget | ||||
//============================================================================ | ||||
/** | ||||
* @module IPython | ||||
* @namespace IPython | ||||
**/ | ||||
|
r14342 | define(["notebook/js/widget"], function(){ | ||
|
r14263 | var SelectionWidgetModel = IPython.WidgetModel.extend({}); | ||
|
r14342 | IPython.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel); | ||
|
r14252 | |||
|
r14263 | var DropdownView = IPython.WidgetView.extend({ | ||
|
r14252 | |||
|
r14263 | // Called when view is rendered. | ||
render : function(){ | ||||
|
r14253 | |||
|
r14263 | this.$el | ||
|
r14295 | .addClass('widget-hbox-single') | ||
|
r14278 | .html(''); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$buttongroup = $('<div />') | ||
|
r14365 | .addClass('widget_item') | ||
.addClass('btn-group') | ||||
.appendTo(this.$el); | ||||
|
r14314 | this.$el_to_style = this.$buttongroup; // Set default element to style | ||
|
r14263 | this.$droplabel = $('<button />') | ||
|
r14365 | .addClass('btn') | ||
.addClass('widget-combo-btn') | ||||
.html(' ') | ||||
.appendTo(this.$buttongroup); | ||||
|
r14263 | this.$dropbutton = $('<button />') | ||
|
r14365 | .addClass('btn') | ||
.addClass('dropdown-toggle') | ||||
.addClass('widget-combo-carrot-btn') | ||||
.attr('data-toggle', 'dropdown') | ||||
.html('<span class="caret"></span>') | ||||
.appendTo(this.$buttongroup); | ||||
|
r14263 | this.$droplist = $('<ul />') | ||
|
r14365 | .addClass('dropdown-menu') | ||
.appendTo(this.$buttongroup); | ||||
|
r14263 | |||
// Set defaults. | ||||
this.update(); | ||||
}, | ||||
|
r14257 | |||
|
r14263 | // Handles: Backend -> Frontend Sync | ||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
|
r14359 | |||
var selected_item_text = this.model.get('value'); | ||||
|
r14369 | selected_item_text = selected_item_text.replace(/ /g, ' '); | ||
selected_item_text = selected_item_text.replace(/\n/g, '<br>\n'); | ||||
|
r14367 | if (selected_item_text.length == 0) { | ||
|
r14359 | this.$droplabel.html(' '); | ||
} else { | ||||
|
r14368 | this.$droplabel.html(selected_item_text); | ||
|
r14359 | } | ||
|
r14263 | |||
var items = this.model.get('values'); | ||||
this.$droplist.html(''); | ||||
for (var index in items) { | ||||
|
r14257 | var that = this; | ||
|
r14263 | var item_button = $('<a href="#"/>') | ||
.html(items[index]) | ||||
|
r14257 | .on('click', function(e){ | ||
|
r14292 | that.model.set('value', $(e.target).html(), this); | ||
|
r14278 | that.model.update_other_views(that); | ||
|
r14263 | }) | ||
this.$droplist.append($('<li />').append(item_button)) | ||||
|
r14252 | } | ||
|
r14263 | 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'); | ||||
|
r14252 | } else { | ||
|
r14263 | this.$buttongroup.removeAttr('disabled'); | ||
this.$droplabel.removeAttr('disabled'); | ||||
this.$dropbutton.removeAttr('disabled'); | ||||
this.$droplist.removeAttr('disabled'); | ||||
|
r14252 | } | ||
|
r14292 | |||
var description = this.model.get('description'); | ||||
if (description.length == 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.html(description); | ||||
this.$label.show(); | ||||
} | ||||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14263 | }, | ||
}); | ||||
|
r14342 | IPython.widget_manager.register_widget_view('DropdownView', DropdownView); | ||
|
r14263 | |||
var RadioButtonsView = IPython.WidgetView.extend({ | ||||
// Called when view is rendered. | ||||
render : function(){ | ||||
this.$el | ||||
|
r14295 | .addClass('widget-hbox') | ||
|
r14278 | .html(''); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14295 | this.$container = $('<div />') | ||
.appendTo(this.$el) | ||||
.addClass('widget-container') | ||||
.addClass('vbox'); | ||||
|
r14314 | this.$el_to_style = this.$container; // Set default element to style | ||
|
r14263 | this.update(); | ||
}, | ||||
|
r14252 | |||
|
r14263 | // Handles: Backend -> Frontend Sync | ||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
// Add missing items to the DOM. | ||||
var items = this.model.get('values'); | ||||
|
r14305 | var disabled = this.model.get('disabled'); | ||
|
r14252 | for (var index in items) { | ||
|
r14263 | var item_query = ' :input[value="' + items[index] + '"]'; | ||
if (this.$el.find(item_query).length == 0) { | ||||
var $label = $('<label />') | ||||
.addClass('radio') | ||||
.html(items[index]) | ||||
|
r14295 | .appendTo(this.$container); | ||
|
r14263 | |||
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); | ||||
|
r14279 | that.model.update_other_views(that); | ||
|
r14263 | }); | ||
} | ||||
|
r14305 | var $item_element = this.$container.find(item_query); | ||
|
r14263 | if (this.model.get('value') == items[index]) { | ||
|
r14305 | $item_element.prop('checked', true); | ||
|
r14263 | } else { | ||
|
r14305 | $item_element.prop('checked', false); | ||
|
r14252 | } | ||
|
r14305 | $item_element.prop('disabled', disabled); | ||
|
r14252 | } | ||
|
r14263 | // Remove items that no longer exist. | ||
|
r14295 | this.$container.find('input').each(function(i, obj) { | ||
|
r14263 | var value = $(obj).val(); | ||
var found = false; | ||||
for (var index in items) { | ||||
if (items[index] == value) { | ||||
found = true; | ||||
break; | ||||
} | ||||
} | ||||
if (!found) { | ||||
$(obj).parent().remove(); | ||||
} | ||||
}); | ||||
|
r14292 | |||
var description = this.model.get('description'); | ||||
if (description.length == 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.html(description); | ||||
this.$label.show(); | ||||
} | ||||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14263 | }, | ||
}); | ||||
|
r14252 | |||
|
r14342 | IPython.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView); | ||
|
r14258 | |||
|
r14263 | var ToggleButtonsView = IPython.WidgetView.extend({ | ||
|
r14258 | |||
|
r14263 | // Called when view is rendered. | ||
render : function(){ | ||||
this.$el | ||||
|
r14295 | .addClass('widget-hbox-single') | ||
|
r14278 | .html(''); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$buttongroup = $('<div />') | ||
.addClass('btn-group') | ||||
.attr('data-toggle', 'buttons-radio') | ||||
.appendTo(this.$el); | ||||
|
r14314 | this.$el_to_style = this.$buttongroup; // Set default element to style | ||
|
r14263 | this.update(); | ||
}, | ||||
|
r14258 | |||
|
r14263 | // Handles: Backend -> Frontend Sync | ||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
// Add missing items to the DOM. | ||||
var items = this.model.get('values'); | ||||
|
r14305 | var disabled = this.model.get('disabled'); | ||
|
r14258 | for (var index in items) { | ||
|
r14263 | var item_query = ' :contains("' + items[index] + '")'; | ||
if (this.$buttongroup.find(item_query).length == 0) { | ||||
var that = this; | ||||
$('<button />') | ||||
.attr('type', 'button') | ||||
.addClass('btn') | ||||
.html(items[index]) | ||||
.appendTo(this.$buttongroup) | ||||
.on('click', function(e){ | ||||
that.model.set('value', $(e.target).html(), this); | ||||
|
r14279 | that.model.update_other_views(that); | ||
|
r14263 | }); | ||
} | ||||
|
r14305 | var $item_element = this.$buttongroup.find(item_query); | ||
|
r14263 | if (this.model.get('value') == items[index]) { | ||
|
r14305 | $item_element.addClass('active'); | ||
|
r14263 | } else { | ||
|
r14305 | $item_element.removeClass('active'); | ||
|
r14258 | } | ||
|
r14305 | $item_element.prop('disabled', disabled); | ||
|
r14258 | } | ||
|
r14263 | // Remove items that no longer exist. | ||
this.$buttongroup.find('button').each(function(i, obj) { | ||||
var value = $(obj).html(); | ||||
var found = false; | ||||
for (var index in items) { | ||||
if (items[index] == value) { | ||||
found = true; | ||||
break; | ||||
} | ||||
} | ||||
if (!found) { | ||||
$(obj).remove(); | ||||
} | ||||
}); | ||||
|
r14292 | |||
var description = this.model.get('description'); | ||||
if (description.length == 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.html(description); | ||||
this.$label.show(); | ||||
} | ||||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14263 | }, | ||
}); | ||||
|
r14258 | |||
|
r14342 | IPython.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView); | ||
|
r14263 | }); | ||