multicontainer.js
179 lines
| 6.4 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 | ||||
**/ | ||||
|
r14374 | define(["notebook/js/widget"], function(widget_manager){ | ||
|
r14284 | var MulticontainerModel = IPython.WidgetModel.extend({}); | ||
|
r14374 | widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel); | ||
|
r14284 | |||
var AccordionView = IPython.WidgetView.extend({ | ||||
render: function(){ | ||||
|
r14398 | var guid = 'accordion' + IPython.utils.uuid(); | ||
this.$el = $('<div />', {id: guid}) | ||||
|
r14284 | .addClass('accordion'); | ||
|
r14395 | this._ensureElement(); | ||
|
r14284 | this.containers = []; | ||
}, | ||||
update: function() { | ||||
|
r14288 | // Set tab titles | ||
var titles = this.model.get('_titles'); | ||||
for (var page_index in titles) { | ||||
|
r14289 | |||
var accordian = this.containers[page_index] | ||||
if (accordian != undefined) { | ||||
accordian | ||||
.find('.accordion-heading') | ||||
.find('.accordion-toggle') | ||||
.html(titles[page_index]); | ||||
} | ||||
|
r14288 | } | ||
|
r14284 | |||
|
r14370 | // 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'); | ||||
} | ||||
} | ||||
} | ||||
|
r14284 | return IPython.WidgetView.prototype.update.call(this); | ||
}, | ||||
display_child: function(view) { | ||||
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){ | ||
that.model.set("selected_index", index); | ||||
that.model.update_other_views(that); | ||||
}) | ||||
|
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. | ||||
setTimeout(function(){that.update()}, 500); | ||||
|
r14284 | }, | ||
}); | ||||
|
r14374 | widget_manager.register_widget_view('AccordionView', AccordionView); | ||
|
r14290 | |||
var TabView = IPython.WidgetView.extend({ | ||||
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); | ||||
this.containers = []; | ||||
}, | ||||
|
r14370 | |||
|
r14290 | update: function() { | ||
// 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]); | ||||
} | ||||
} | ||||
|
r14307 | var selected_index = this.model.get('selected_index'); | ||
if (0 <= selected_index && selected_index < this.containers.length) { | ||||
this.select_page(selected_index); | ||||
} | ||||
|
r14290 | return IPython.WidgetView.prototype.update.call(this); | ||
}, | ||||
display_child: function(view) { | ||||
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) { | ||||
|
r14307 | that.model.set("selected_index", index); | ||
that.model.update_other_views(that); | ||||
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); | ||||
if (index==0) { | ||||
tab_text.tab('show'); | ||||
} | ||||
this.update(); | ||||
}, | ||||
|
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 | }); | ||