widget_selection.js
524 lines
| 19.6 KiB
| application/javascript
|
JavascriptLexer
|
r17198 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
|
r14366 | |||
|
r17198 | define([ | ||
"widgets/js/widget", | ||||
|
r17199 | "base/js/utils", | ||
|
r17216 | "jquery", | ||
|
r17312 | "bootstrap", | ||
|
r17216 | ], function(widget, utils, $){ | ||
|
r14366 | |||
|
r17198 | var DropdownView = widget.DOMWidgetView.extend({ | ||
|
r14263 | render : function(){ | ||
|
r19176 | /** | ||
* Called when view is rendered. | ||||
*/ | ||||
|
r14263 | this.$el | ||
|
r18120 | .addClass('widget-hbox widget-dropdown'); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r17929 | .addClass('widget-label') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$buttongroup = $('<div />') | ||
|
r14365 | .addClass('widget_item') | ||
.addClass('btn-group') | ||||
.appendTo(this.$el); | ||||
|
r14263 | this.$droplabel = $('<button />') | ||
|
r16913 | .addClass('btn btn-default') | ||
|
r14365 | .addClass('widget-combo-btn') | ||
|
r15329 | .html(" ") | ||
|
r14365 | .appendTo(this.$buttongroup); | ||
|
r14263 | this.$dropbutton = $('<button />') | ||
|
r16913 | .addClass('btn btn-default') | ||
|
r14365 | .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); | ||||
|
r17728 | |||
this.model.on('change:button_style', function(model, value) { | ||||
this.update_button_style(); | ||||
}, this); | ||||
this.update_button_style(''); | ||||
|
r14263 | |||
// Set defaults. | ||||
this.update(); | ||||
}, | ||||
|
r14257 | |||
|
r14570 | update : function(options){ | ||
|
r19176 | /** | ||
* 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 | } | ||
|
r19485 | var items = this.model.get('_value_names'); | ||
|
r14616 | var $replace_droplist = $('<ul />') | ||
.addClass('dropdown-menu'); | ||||
|
r17723 | // Copy the style | ||
$replace_droplist.attr('style', this.$droplist.attr('style')); | ||||
|
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 { | ||||
|
r19196 | this.typeset(this.$label, description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14583 | return DropdownView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14466 | |||
|
r17728 | update_button_style: function(previous_trait_value) { | ||
var class_map = { | ||||
primary: ['btn-primary'], | ||||
success: ['btn-success'], | ||||
info: ['btn-info'], | ||||
warning: ['btn-warning'], | ||||
danger: ['btn-danger'] | ||||
}; | ||||
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel); | ||||
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton); | ||||
}, | ||||
|
r17723 | update_attr: function(name, value) { | ||
|
r19176 | /** | ||
* Set a css attr of the widget view. | ||||
*/ | ||||
|
r17723 | if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') { | ||
this.$droplabel.css(name, value); | ||||
this.$dropbutton.css(name, value); | ||||
this.$droplist.css(name, value); | ||||
} else if (name == 'width') { | ||||
|
r17728 | this.$droplist.css(name, value); | ||
this.$droplabel.css(name, value); | ||||
} else if (name == 'padding') { | ||||
this.$droplist.css(name, value); | ||||
this.$buttongroup.css(name, value); | ||||
} else if (name == 'margin') { | ||||
this.$buttongroup.css(name, value); | ||||
|
r17723 | } else if (name == 'height') { | ||
|
r17724 | this.$droplabel.css(name, value); | ||
|
r17723 | this.$dropbutton.css(name, value); | ||
|
r19366 | } else if (name == 'padding' || name == 'margin') { | ||
this.$el.css(name, value); | ||||
|
r17723 | } else { | ||
this.$droplist.css(name, value); | ||||
|
r17724 | this.$droplabel.css(name, value); | ||
|
r17723 | } | ||
}, | ||||
|
r14466 | handle_click: function (e) { | ||
|
r19176 | /** | ||
* Handle when a value is clicked. | ||||
* | ||||
* 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(); | ||
|
r19386 | |||
// Manually hide the droplist. | ||||
e.stopPropagation(); | ||||
e.preventDefault(); | ||||
this.$buttongroup.removeClass('open'); | ||||
|
r14466 | }, | ||
|
r14263 | |||
}); | ||||
|
r14609 | |||
|
r17198 | var RadioButtonsView = widget.DOMWidgetView.extend({ | ||
|
r14263 | render : function(){ | ||
|
r19176 | /** | ||
* Called when view is rendered. | ||||
*/ | ||||
|
r14263 | this.$el | ||
|
r18120 | .addClass('widget-hbox widget-radio'); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r17929 | .addClass('widget-label') | ||
|
r14292 | .hide(); | ||
|
r14295 | this.$container = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r15364 | .addClass('widget-radio-box'); | ||
|
r14263 | this.update(); | ||
}, | ||||
|
r14252 | |||
|
r14570 | update : function(options){ | ||
|
r19176 | /** | ||
* 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. | ||||
|
r19485 | var items = this.model.get('_value_names'); | ||
|
r14570 | var disabled = this.model.get('disabled'); | ||
|
r14686 | var that = this; | ||
|
r14664 | _.each(items, function(item, index) { | ||
|
r19900 | var item_query = ' :input[data-value="' + encodeURIComponent(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) | ||
|
r19900 | .attr('data-value', encodeURIComponent(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); | ||
|
r19196 | this.typeset(this.$label, description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14583 | return RadioButtonsView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14466 | |||
|
r17724 | update_attr: function(name, value) { | ||
|
r19176 | /** | ||
* Set a css attr of the widget view. | ||||
*/ | ||||
|
r19366 | if (name == 'padding' || name == 'margin') { | ||
this.$el.css(name, value); | ||||
} else { | ||||
this.$container.css(name, value); | ||||
} | ||||
|
r17724 | }, | ||
|
r14466 | handle_click: function (e) { | ||
|
r19176 | /** | ||
* Handle when a value is clicked. | ||||
* | ||||
* 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 | }); | ||
|
r17198 | |||
|
r14258 | |||
|
r17198 | var ToggleButtonsView = widget.DOMWidgetView.extend({ | ||
|
r17724 | initialize: function() { | ||
this._css_state = {}; | ||||
ToggleButtonsView.__super__.initialize.apply(this, arguments); | ||||
}, | ||||
render: function() { | ||||
|
r19176 | /** | ||
* Called when view is rendered. | ||||
*/ | ||||
|
r14263 | this.$el | ||
|
r18120 | .addClass('widget-hbox widget-toggle-buttons'); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r17929 | .addClass('widget-label') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$buttongroup = $('<div />') | ||
.addClass('btn-group') | ||||
.attr('data-toggle', 'buttons-radio') | ||||
.appendTo(this.$el); | ||||
|
r17728 | |||
this.model.on('change:button_style', function(model, value) { | ||||
this.update_button_style(); | ||||
}, this); | ||||
this.update_button_style(''); | ||||
|
r14263 | this.update(); | ||
}, | ||||
|
r14258 | |||
|
r14570 | update : function(options){ | ||
|
r19176 | /** | ||
* 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. | ||||
|
r19485 | 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) { | ||
|
r19900 | if (item.trim().length === 0) { | ||
|
r15332 | item_html = " "; | ||
} else { | ||||
|
r17199 | item_html = utils.escape_html(item); | ||
|
r15332 | } | ||
|
r19900 | var item_query = '[data-value="' + encodeURIComponent(item) + '"]'; | ||
|
r15332 | var $item_element = that.$buttongroup.find(item_query); | ||
if (!$item_element.length) { | ||||
$item_element = $('<button/>') | ||||
|
r14570 | .attr('type', 'button') | ||
|
r16913 | .addClass('btn btn-default') | ||
|
r15332 | .html(item_html) | ||
|
r14686 | .appendTo(that.$buttongroup) | ||
|
r19900 | .attr('data-value', encodeURIComponent(item)) | ||
.attr('value', item) | ||||
|
r14686 | .on('click', $.proxy(that.handle_click, that)); | ||
|
r17728 | that.update_style_traits($item_element); | ||
|
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) { | ||||
|
r19900 | var value = $(obj).attr('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 { | ||||
|
r19195 | this.$label.text(); | ||
|
r19196 | this.typeset(this.$label, description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14292 | } | ||
|
r14583 | return ToggleButtonsView.__super__.update.apply(this); | ||
|
r14263 | }, | ||
|
r14466 | |||
|
r17724 | update_attr: function(name, value) { | ||
|
r19176 | /** | ||
* Set a css attr of the widget view. | ||||
*/ | ||||
|
r19366 | if (name == 'padding' || name == 'margin') { | ||
this.$el.css(name, value); | ||||
} else { | ||||
this._css_state[name] = value; | ||||
this.update_style_traits(); | ||||
} | ||||
|
r17724 | }, | ||
|
r17728 | update_style_traits: function(button) { | ||
|
r17724 | for (var name in this._css_state) { | ||
|
r17728 | if (this._css_state.hasOwnProperty(name)) { | ||
if (name == 'margin') { | ||||
this.$buttongroup.css(name, this._css_state[name]); | ||||
} else if (name != 'width') { | ||||
if (button) { | ||||
button.css(name, this._css_state[name]); | ||||
} else { | ||||
this.$buttongroup.find('button').css(name, this._css_state[name]); | ||||
} | ||||
} | ||||
|
r17724 | } | ||
} | ||||
}, | ||||
|
r17728 | update_button_style: function(previous_trait_value) { | ||
var class_map = { | ||||
primary: ['btn-primary'], | ||||
success: ['btn-success'], | ||||
info: ['btn-info'], | ||||
warning: ['btn-warning'], | ||||
danger: ['btn-danger'] | ||||
}; | ||||
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button')); | ||||
}, | ||||
|
r14466 | handle_click: function (e) { | ||
|
r19176 | /** | ||
* Handle when a value is clicked. | ||||
* | ||||
* Calling model.set will trigger all of the other views of the | ||||
* model to update. | ||||
*/ | ||||
|
r19900 | this.model.set('value_name', $(e.target).attr('value'), {updated_view: this}); | ||
|
r14482 | this.touch(); | ||
|
r14609 | }, | ||
|
r14263 | }); | ||
|
r17198 | |||
|
r14609 | |||
|
r17198 | var SelectView = widget.DOMWidgetView.extend({ | ||
|
r14375 | render : function(){ | ||
|
r19176 | /** | ||
* Called when view is rendered. | ||||
*/ | ||||
|
r14375 | this.$el | ||
|
r18120 | .addClass('widget-hbox widget-select'); | ||
|
r14375 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r17929 | .addClass('widget-label') | ||
|
r14375 | .hide(); | ||
this.$listbox = $('<select />') | ||||
|
r16952 | .addClass('widget-listbox form-control') | ||
|
r14375 | .attr('size', 6) | ||
.appendTo(this.$el); | ||||
this.update(); | ||||
}, | ||||
|
r14570 | update : function(options){ | ||
|
r19176 | /** | ||
* 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. | ||||
|
r19485 | var items = this.model.get('_value_names'); | ||
|
r14686 | var that = this; | ||
|
r14664 | _.each(items, function(item, index) { | ||
|
r19900 | var item_query = 'option[data-value="' + encodeURIComponent(item) + '"]'; | ||
|
r14686 | if (that.$listbox.find(item_query).length === 0) { | ||
|
r14570 | $('<option />') | ||
|
r14664 | .text(item) | ||
|
r19900 | .attr('data-value', encodeURIComponent(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 { | ||||
|
r19196 | this.typeset(this.$label, description); | ||
|
r14570 | this.$label.show(); | ||
} | ||||
|
r14375 | } | ||
|
r14834 | return SelectView.__super__.update.apply(this); | ||
|
r14375 | }, | ||
|
r14466 | |||
|
r17724 | update_attr: function(name, value) { | ||
|
r19176 | /** | ||
* Set a css attr of the widget view. | ||||
*/ | ||||
|
r19366 | if (name == 'padding' || name == 'margin') { | ||
this.$el.css(name, value); | ||||
} else { | ||||
this.$listbox.css(name, value); | ||||
} | ||||
|
r17724 | }, | ||
|
r14466 | handle_click: function (e) { | ||
|
r19176 | /** | ||
* Handle when a value is clicked. | ||||
* | ||||
* 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 | }); | ||
|
r17198 | |||
return { | ||||
'DropdownView': DropdownView, | ||||
'RadioButtonsView': RadioButtonsView, | ||||
'ToggleButtonsView': ToggleButtonsView, | ||||
'SelectView': SelectView, | ||||
}; | ||||
|
r14263 | }); | ||