widget_selection.js
381 lines
| 15.0 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 | ||||
**/ | ||||
|
r15427 | define(["widgets/js/widget"], function(WidgetManager){ | ||
|
r14609 | |||
|
r14564 | var DropdownView = IPython.DOMWidgetView.extend({ | ||
|
r14263 | render : function(){ | ||
|
r14792 | // Called when view is rendered. | ||
|
r14263 | this.$el | ||
|
r14663 | .addClass('widget-hbox-single'); | ||
|
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') | ||||
|
r15329 | .html(" ") | ||
|
r14365 | .appendTo(this.$buttongroup); | ||
|
r14263 | this.$dropbutton = $('<button />') | ||
|
r14365 | .addClass('btn') | ||
.addClass('dropdown-toggle') | ||||
.addClass('widget-combo-carrot-btn') | ||||
.attr('data-toggle', 'dropdown') | ||||
|
r14663 | .append($('<span />').addClass("caret")) | ||
|
r14365 | .appendTo(this.$buttongroup); | ||
|
r14263 | this.$droplist = $('<ul />') | ||
|
r14365 | .addClass('dropdown-menu') | ||
.appendTo(this.$buttongroup); | ||||
|
r14263 | |||
// Set defaults. | ||||
this.update(); | ||||
}, | ||||
|
r14257 | |||
|
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. | ||||
|
r14359 | |||
|
r14570 | if (options === undefined || options.updated_view != this) { | ||
|
r15024 | var selected_item_text = this.model.get('value_name'); | ||
|
r15332 | if (selected_item_text.trim().length === 0) { | ||
|
r15329 | this.$droplabel.html(" "); | ||
|
r14570 | } else { | ||
|
r14663 | this.$droplabel.text(selected_item_text); | ||
|
r14570 | } | ||
|
r15024 | var items = this.model.get('value_names'); | ||
|
r14616 | var $replace_droplist = $('<ul />') | ||
.addClass('dropdown-menu'); | ||||
|
r14686 | var that = this; | ||
|
r14664 | _.each(items, function(item, i) { | ||
|
r14570 | var item_button = $('<a href="#"/>') | ||
|
r14664 | .text(item) | ||
|
r14686 | .on('click', $.proxy(that.handle_click, that)); | ||
|
r14616 | $replace_droplist.append($('<li />').append(item_button)); | ||
|
r14664 | }); | ||
|
r14616 | this.$droplist.replaceWith($replace_droplist); | ||
this.$droplist.remove(); | ||||
this.$droplist = $replace_droplist; | ||||
|
r14570 | |||
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'); | ||||
} | ||||
|
r14292 | |||
|
r14570 | var description = this.model.get('description'); | ||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
|
r14663 | this.$label.text(description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14583 | return DropdownView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14466 | |||
handle_click: function (e) { | ||||
|
r14609 | // Handle when a value is clicked. | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r15024 | this.model.set('value_name', $(e.target).text(), {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14466 | }, | ||
|
r14263 | |||
}); | ||||
|
r14627 | WidgetManager.register_widget_view('DropdownView', DropdownView); | ||
|
r14263 | |||
|
r14609 | |||
var RadioButtonsView = IPython.DOMWidgetView.extend({ | ||||
|
r14263 | render : function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14263 | this.$el | ||
|
r14576 | .addClass('widget-hbox'); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14295 | this.$container = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r15364 | .addClass('widget-radio-box'); | ||
|
r14314 | this.$el_to_style = this.$container; // Set default element to style | ||
|
r14263 | this.update(); | ||
}, | ||||
|
r14252 | |||
|
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) { | ||
// Add missing items to the DOM. | ||||
|
r15024 | var items = this.model.get('value_names'); | ||
|
r14570 | var disabled = this.model.get('disabled'); | ||
|
r14686 | var that = this; | ||
|
r14664 | _.each(items, function(item, index) { | ||
var item_query = ' :input[value="' + item + '"]'; | ||||
|
r14686 | if (that.$el.find(item_query).length === 0) { | ||
|
r14570 | var $label = $('<label />') | ||
.addClass('radio') | ||||
|
r14664 | .text(item) | ||
|
r14686 | .appendTo(that.$container); | ||
|
r14570 | |||
$('<input />') | ||||
.attr('type', 'radio') | ||||
|
r14686 | .addClass(that.model) | ||
|
r14664 | .val(item) | ||
|
r14570 | .prependTo($label) | ||
|
r14686 | .on('click', $.proxy(that.handle_click, that)); | ||
|
r14570 | } | ||
|
r14687 | var $item_element = that.$container.find(item_query); | ||
|
r15024 | if (that.model.get('value_name') == item) { | ||
|
r14570 | $item_element.prop('checked', true); | ||
} else { | ||||
$item_element.prop('checked', false); | ||||
|
r14263 | } | ||
|
r14570 | $item_element.prop('disabled', disabled); | ||
|
r14664 | }); | ||
|
r14263 | |||
|
r14570 | // Remove items that no longer exist. | ||
this.$container.find('input').each(function(i, obj) { | ||||
var value = $(obj).val(); | ||||
var found = false; | ||||
|
r14664 | _.each(items, function(item, index) { | ||
if (item == value) { | ||||
|
r14570 | found = true; | ||
|
r14678 | return false; | ||
|
r14570 | } | ||
|
r14664 | }); | ||
|
r14570 | |||
if (!found) { | ||||
$(obj).parent().remove(); | ||||
} | ||||
}); | ||||
|
r14292 | |||
|
r14570 | var description = this.model.get('description'); | ||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
|
r14663 | this.$label.text(description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14583 | return RadioButtonsView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14466 | |||
handle_click: function (e) { | ||||
|
r14609 | // Handle when a value is clicked. | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r15024 | this.model.set('value_name', $(e.target).val(), {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14466 | }, | ||
|
r14263 | }); | ||
|
r14627 | WidgetManager.register_widget_view('RadioButtonsView', RadioButtonsView); | ||
|
r14258 | |||
|
r15024 | var ToggleButtonsView = IPython.DOMWidgetView.extend({ | ||
|
r14263 | render : function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14263 | this.$el | ||
|
r14576 | .addClass('widget-hbox-single'); | ||
|
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 | |||
|
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) { | ||
// Add missing items to the DOM. | ||||
|
r15024 | var items = this.model.get('value_names'); | ||
|
r14570 | var disabled = this.model.get('disabled'); | ||
|
r14686 | var that = this; | ||
|
r15332 | var item_html; | ||
|
r14664 | _.each(items, function(item, index) { | ||
|
r15332 | if (item.trim().length == 0) { | ||
item_html = " "; | ||||
} else { | ||||
item_html = IPython.utils.escape_html(item); | ||||
} | ||||
var item_query = '[data-value="' + item + '"]'; | ||||
var $item_element = that.$buttongroup.find(item_query); | ||||
if (!$item_element.length) { | ||||
$item_element = $('<button/>') | ||||
|
r14570 | .attr('type', 'button') | ||
.addClass('btn') | ||||
|
r15332 | .html(item_html) | ||
|
r14686 | .appendTo(that.$buttongroup) | ||
|
r15332 | .attr('data-value', item) | ||
|
r14686 | .on('click', $.proxy(that.handle_click, that)); | ||
|
r14570 | } | ||
|
r15024 | if (that.model.get('value_name') == item) { | ||
|
r14570 | $item_element.addClass('active'); | ||
} else { | ||||
$item_element.removeClass('active'); | ||||
|
r14263 | } | ||
|
r14664 | $item_element.prop('disabled', disabled); | ||
}); | ||||
|
r14263 | |||
|
r14570 | // Remove items that no longer exist. | ||
this.$buttongroup.find('button').each(function(i, obj) { | ||||
|
r15332 | var value = $(obj).data('value'); | ||
|
r14570 | var found = false; | ||
|
r14664 | _.each(items, function(item, index) { | ||
if (item == value) { | ||||
|
r14570 | found = true; | ||
|
r14678 | return false; | ||
|
r14570 | } | ||
|
r14664 | }); | ||
|
r14570 | if (!found) { | ||
$(obj).remove(); | ||||
} | ||||
}); | ||||
|
r14292 | |||
|
r14570 | var description = this.model.get('description'); | ||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
|
r14663 | this.$label.text(description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14583 | return ToggleButtonsView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14466 | |||
handle_click: function (e) { | ||||
|
r14609 | // Handle when a value is clicked. | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r15332 | this.model.set('value_name', $(e.target).data('value'), {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14609 | }, | ||
|
r14263 | }); | ||
|
r14627 | WidgetManager.register_widget_view('ToggleButtonsView', ToggleButtonsView); | ||
|
r14375 | |||
|
r14609 | |||
|
r14834 | var SelectView = IPython.DOMWidgetView.extend({ | ||
|
r14375 | render : function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14375 | this.$el | ||
|
r14576 | .addClass('widget-hbox'); | ||
|
r14375 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
.addClass('widget-hlabel') | ||||
.hide(); | ||||
this.$listbox = $('<select />') | ||||
.addClass('widget-listbox') | ||||
.attr('size', 6) | ||||
.appendTo(this.$el); | ||||
this.$el_to_style = this.$listbox; // Set default element to style | ||||
this.update(); | ||||
}, | ||||
|
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) { | ||
// Add missing items to the DOM. | ||||
|
r15024 | var items = this.model.get('value_names'); | ||
|
r14686 | var that = this; | ||
|
r14664 | _.each(items, function(item, index) { | ||
|
r20380 | var item_query = 'option[value_name="' + item + '"]'; | ||
|
r14686 | if (that.$listbox.find(item_query).length === 0) { | ||
|
r14570 | $('<option />') | ||
|
r14664 | .text(item) | ||
|
r15024 | .attr('value_name', item) | ||
|
r14686 | .appendTo(that.$listbox) | ||
.on('click', $.proxy(that.handle_click, that)); | ||||
|
r14664 | } | ||
}); | ||||
|
r14570 | |||
// Select the correct element | ||||
|
r15024 | this.$listbox.val(this.model.get('value_name')); | ||
|
r14375 | |||
|
r14570 | // Disable listbox if needed | ||
var disabled = this.model.get('disabled'); | ||||
this.$listbox.prop('disabled', disabled); | ||||
// Remove items that no longer exist. | ||||
this.$listbox.find('option').each(function(i, obj) { | ||||
|
r14663 | var value = $(obj).text(); | ||
|
r14570 | var found = false; | ||
|
r14664 | _.each(items, function(item, index) { | ||
if (item == value) { | ||||
|
r14570 | found = true; | ||
|
r14678 | return false; | ||
|
r14570 | } | ||
|
r14664 | }); | ||
|
r14570 | |||
if (!found) { | ||||
$(obj).remove(); | ||||
} | ||||
}); | ||||
|
r14375 | |||
|
r14570 | var description = this.model.get('description'); | ||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
|
r14663 | this.$label.text(description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14375 | } | ||
|
r14834 | return SelectView.__super__.update.apply(this); | ||
|
r14375 | }, | ||
|
r14466 | |||
handle_click: function (e) { | ||||
|
r14609 | // Handle when a value is clicked. | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r15024 | this.model.set('value_name', $(e.target).text(), {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14609 | }, | ||
|
r14375 | }); | ||
|
r14834 | WidgetManager.register_widget_view('SelectView', SelectView); | ||
|
r14263 | }); | ||