widget_selectioncontainer.js
225 lines
| 8.7 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. | ||||
//---------------------------------------------------------------------------- | ||||
//============================================================================ | ||||
// MultiContainerWidget | ||||
//============================================================================ | ||||
/** | ||||
* @module IPython | ||||
* @namespace IPython | ||||
**/ | ||||
|
r14537 | define(["notebook/js/widgets/widget"], function(widget_manager){ | ||
|
r14284 | var MulticontainerModel = IPython.WidgetModel.extend({}); | ||
|
r14374 | widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel); | ||
|
r14284 | |||
|
r14564 | var AccordionView = IPython.DOMWidgetView.extend({ | ||
|
r14284 | |||
render: function(){ | ||||
|
r14398 | var guid = 'accordion' + IPython.utils.uuid(); | ||
|
r14455 | this.$el | ||
.attr('id', guid) | ||||
|
r14284 | .addClass('accordion'); | ||
this.containers = []; | ||||
|
r14503 | this.update_children([], this.model.get('children')); | ||
this.model.on('change:children', function(model, value, options) { | ||||
|
r14507 | this.update_children(model.previous('children'), value); | ||
}, this); | ||||
|
r14503 | }, | ||
update_children: function(old_list, new_list) { | ||||
_.each(this.containers, function(element, index, list) { | ||||
element.remove(); | ||||
}, this); | ||||
this.containers = []; | ||||
this.update_child_views(old_list, new_list); | ||||
_.each(new_list, function(element, index, list) { | ||||
this.add_child_view(this.child_views[element]); | ||||
}, this) | ||||
|
r14284 | }, | ||
|
r14503 | |||
|
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) { | ||||
// Set tab titles | ||||
var titles = this.model.get('_titles'); | ||||
for (var page_index in titles) { | ||||
var accordian = this.containers[page_index]; | ||||
if (accordian !== undefined) { | ||||
accordian | ||||
.find('.accordion-heading') | ||||
.find('.accordion-toggle') | ||||
.html(titles[page_index]); | ||||
} | ||||
|
r14289 | } | ||
|
r14284 | |||
|
r14570 | // Set selected page | ||
var selected_index = this.model.get("selected_index"); | ||||
if (0 <= selected_index && selected_index < this.containers.length) { | ||||
for (var index in this.containers) { | ||||
if (index==selected_index) { | ||||
this.containers[index].find('.accordion-body').collapse('show'); | ||||
} else { | ||||
this.containers[index].find('.accordion-body').collapse('hide'); | ||||
} | ||||
|
r14370 | } | ||
} | ||||
} | ||||
|
r14564 | return IPython.DOMWidgetView.prototype.update.call(this); | ||
|
r14284 | }, | ||
|
r14489 | add_child_view: function(view) { | ||
|
r14284 | |||
var index = this.containers.length; | ||||
var uuid = IPython.utils.uuid(); | ||||
var accordion_group = $('<div />') | ||||
.addClass('accordion-group') | ||||
.appendTo(this.$el); | ||||
var accordion_heading = $('<div />') | ||||
.addClass('accordion-heading') | ||||
.appendTo(accordion_group); | ||||
|
r14370 | var that = this; | ||
|
r14284 | var accordion_toggle = $('<a />') | ||
.addClass('accordion-toggle') | ||||
.attr('data-toggle', 'collapse') | ||||
.attr('data-parent', '#' + this.$el.attr('id')) | ||||
.attr('href', '#' + uuid) | ||||
|
r14370 | .click(function(evt){ | ||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r14570 | that.model.set("selected_index", index, {updated_view: this}); | ||
|
r14482 | that.touch(); | ||
|
r14370 | }) | ||
|
r14284 | .html('Page ' + index) | ||
.appendTo(accordion_heading); | ||||
var accordion_body = $('<div />', {id: uuid}) | ||||
|
r14288 | .addClass('accordion-body collapse') | ||
|
r14284 | .appendTo(accordion_group); | ||
var accordion_inner = $('<div />') | ||||
.addClass('accordion-inner') | ||||
.appendTo(accordion_body); | ||||
this.containers.push(accordion_group); | ||||
accordion_inner.append(view.$el); | ||||
|
r14370 | |||
|
r14289 | this.update(); | ||
|
r14370 | |||
// Stupid workaround to close the bootstrap accordion tabs which | ||||
// open by default even though they don't have the `in` class | ||||
// attached to them. For some reason a delay is required. | ||||
// TODO: Better fix. | ||||
|
r14466 | setTimeout(function(){ that.update(); }, 500); | ||
|
r14284 | }, | ||
}); | ||||
|
r14374 | widget_manager.register_widget_view('AccordionView', AccordionView); | ||
|
r14290 | |||
|
r14564 | var TabView = IPython.DOMWidgetView.extend({ | ||
|
r14290 | |||
|
r14507 | initialize: function() { | ||
this.containers = []; | ||||
|
r14564 | IPython.DOMWidgetView.prototype.initialize.apply(this, arguments); | ||
|
r14507 | }, | ||
|
r14486 | |||
|
r14290 | render: function(){ | ||
|
r14398 | var uuid = 'tabs'+IPython.utils.uuid(); | ||
|
r14307 | var that = this; | ||
|
r14290 | this.$tabs = $('<div />', {id: uuid}) | ||
.addClass('nav') | ||||
.addClass('nav-tabs') | ||||
.appendTo(this.$el); | ||||
this.$tab_contents = $('<div />', {id: uuid + 'Content'}) | ||||
.addClass('tab-content') | ||||
.appendTo(this.$el); | ||||
|
r14507 | this.containers = []; | ||
this.update_children([], this.model.get('children')); | ||||
this.model.on('change:children', function(model, value, options) { | ||||
this.update_children(model.previous('children'), value); | ||||
}, this); | ||||
}, | ||||
update_children: function(old_list, new_list) { | ||||
_.each(this.containers, function(element, index, list) { | ||||
element.remove(); | ||||
}, this); | ||||
this.containers = []; | ||||
this.update_child_views(old_list, new_list); | ||||
_.each(new_list, function(element, index, list) { | ||||
this.add_child_view(this.child_views[element]); | ||||
}, this) | ||||
|
r14290 | }, | ||
|
r14370 | |||
|
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) { | ||
// Set tab titles | ||||
var titles = this.model.get('_titles'); | ||||
for (var page_index in titles) { | ||||
var tab_text = this.containers[page_index]; | ||||
if (tab_text !== undefined) { | ||||
tab_text.html(titles[page_index]); | ||||
} | ||||
|
r14290 | } | ||
|
r14570 | var selected_index = this.model.get('selected_index'); | ||
if (0 <= selected_index && selected_index < this.containers.length) { | ||||
this.select_page(selected_index); | ||||
} | ||||
|
r14307 | } | ||
|
r14564 | return IPython.DOMWidgetView.prototype.update.call(this); | ||
|
r14290 | }, | ||
|
r14487 | add_child_view: function(view) { | ||
|
r14290 | var index = this.containers.length; | ||
var uuid = IPython.utils.uuid(); | ||||
var that = this; | ||||
var tab = $('<li />') | ||||
.css('list-style-type', 'none') | ||||
.appendTo(this.$tabs); | ||||
var tab_text = $('<a />') | ||||
.attr('href', '#' + uuid) | ||||
.attr('data-toggle', 'tab') | ||||
.html('Page ' + index) | ||||
.appendTo(tab) | ||||
.click(function (e) { | ||||
|
r14569 | |||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r14570 | that.model.set("selected_index", index, {updated_view: this}); | ||
|
r14482 | that.touch(); | ||
|
r14307 | that.select_page(index); | ||
|
r14290 | }); | ||
this.containers.push(tab_text); | ||||
var contents_div = $('<div />', {id: uuid}) | ||||
.addClass('tab-pane') | ||||
.addClass('fade') | ||||
.append(view.$el) | ||||
.appendTo(this.$tab_contents); | ||||
}, | ||||
|
r14307 | |||
select_page: function(index) { | ||||
this.$tabs.find('li') | ||||
.removeClass('active'); | ||||
this.containers[index].tab('show'); | ||||
}, | ||||
|
r14290 | }); | ||
|
r14374 | widget_manager.register_widget_view('TabView', TabView); | ||
|
r14290 | }); | ||