Support multiple types in selection widget.

This commit is contained in:
Jonathan Frederic 2014-01-22 15:53:58 -08:00
parent c9973a7114
commit 9e643f5692
2 changed files with 74 additions and 16 deletions

View File

@ -57,14 +57,14 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// changed by another view or by a state update from the back-end.
if (options === undefined || options.updated_view != this) {
var selected_item_text = this.model.get('value');
var selected_item_text = this.model.get('_value');
if (selected_item_text.length === 0) {
this.$droplabel.text(' ');
} else {
this.$droplabel.text(selected_item_text);
}
var items = this.model.get('values');
var items = this.model.get('_values');
var $replace_droplist = $('<ul />')
.addClass('dropdown-menu');
var that = this;
@ -107,7 +107,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', $(e.target).text(), {updated_view: this});
this.model.set('_value', $(e.target).text(), {updated_view: this});
this.touch();
},
@ -139,7 +139,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// changed by another view or by a state update from the back-end.
if (options === undefined || options.updated_view != this) {
// Add missing items to the DOM.
var items = this.model.get('values');
var items = this.model.get('_values');
var disabled = this.model.get('disabled');
var that = this;
_.each(items, function(item, index) {
@ -159,7 +159,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
}
var $item_element = that.$container.find(item_query);
if (that.model.get('value') == item) {
if (that.model.get('_value') == item) {
$item_element.prop('checked', true);
} else {
$item_element.prop('checked', false);
@ -199,7 +199,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', $(e.target).val(), {updated_view: this});
this.model.set('_value', $(e.target).val(), {updated_view: this});
this.touch();
},
});
@ -230,7 +230,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// changed by another view or by a state update from the back-end.
if (options === undefined || options.updated_view != this) {
// Add missing items to the DOM.
var items = this.model.get('values');
var items = this.model.get('_values');
var disabled = this.model.get('disabled');
var that = this;
_.each(items, function(item, index) {
@ -245,7 +245,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
}
var $item_element = that.$buttongroup.find(item_query);
if (that.model.get('value') == item) {
if (that.model.get('_value') == item) {
$item_element.addClass('active');
} else {
$item_element.removeClass('active');
@ -285,7 +285,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', $(e.target).text(), {updated_view: this});
this.model.set('_value', $(e.target).text(), {updated_view: this});
this.touch();
},
});
@ -316,21 +316,21 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// changed by another view or by a state update from the back-end.
if (options === undefined || options.updated_view != this) {
// Add missing items to the DOM.
var items = this.model.get('values');
var items = this.model.get('_values');
var that = this;
_.each(items, function(item, index) {
var item_query = ' :contains("' + item + '")';
if (that.$listbox.find(item_query).length === 0) {
$('<option />')
.text(item)
.attr('value', item)
.attr('_value', item)
.appendTo(that.$listbox)
.on('click', $.proxy(that.handle_click, that));
}
});
// Select the correct element
this.$listbox.val(this.model.get('value'));
this.$listbox.val(this.model.get('_value'));
// Disable listbox if needed
var disabled = this.model.get('disabled');
@ -368,7 +368,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', $(e.target).text(), {updated_view: this});
this.model.set('_value', $(e.target).text(), {updated_view: this});
this.touch();
},
});

View File

@ -13,18 +13,76 @@ Represents an enumeration using a widget.
#-----------------------------------------------------------------------------
# Imports
#-----------------------------------------------------------------------------
from threading import Lock
from .widget import DOMWidget
from IPython.utils.traitlets import Unicode, List, Bool
from IPython.utils.traitlets import Unicode, List, Bool, Any, Dict
#-----------------------------------------------------------------------------
# SelectionWidget
#-----------------------------------------------------------------------------
class _SelectionWidget(DOMWidget):
value = Unicode(help="Selected value", sync=True) # TODO: Any support
values = List(help="List of values the user can select", sync=True)
value = Any(help="Selected value")
values = List(help="List of values the user can select")
value_names = Dict(help="""List of string representations for each value.
These string representations are used to display the values in the
front-end.""")
disabled = Bool(False, help="Enable or disable user changes", sync=True)
description = Unicode(help="Description of the value this widget represents", sync=True)
_value = Unicode(sync=True) # Bi-directionally synced.
_values = List(sync=True) # Only back-end to front-end synced.
_reverse_value_names = Dict()
def __init__(self, *pargs, **kwargs):
"""Constructor"""
DOMWidget.__init__(self, *pargs, **kwargs)
self.value_lock = Lock()
self.on_trait_change(self._string_value_set, ['_value'])
def _value_names_changed(self, name=None, old=None, new=None):
"""Handles when the value_names Dict has been changed.
This method sets the _reverse_value_names Dict to the inverse of the new
value for the value_names Dict."""
self._reverse_value_names = {v:k for k, v in self.value_names.items()}
self._values_changed()
def _values_changed(self, name=None, old=None, new=None):
"""Called when values has been changed"""
self._values = [self._get_string_repr(v) for v in self.values]
def _value_changed(self, name, old, new):
"""Called when value has been changed"""
if self.value_lock.acquire(False):
try:
# Make sure the value is in the list of values.
if new in self.values:
# Set the string version of the value.
self._value = self._get_string_repr(new)
else:
raise TypeError('Value must be a value in the values list.')
finally:
self.value_lock.release()
def _get_string_repr(self, value):
"""Get the string repr of a value"""
if value not in self.value_names:
self.value_names[value] = str(value)
self._value_names_changed()
return self.value_names[value]
def _string_value_set(self, name, old, new):
"""Called when _value has been changed."""
if self.value_lock.acquire(False):
try:
if new in self._reverse_value_names:
self.value = self._reverse_value_names[new]
else:
self.value = None
finally:
self.value_lock.release()
class ToggleButtonsWidget(_SelectionWidget):
view_name = Unicode('ToggleButtonsView', sync=True)