diff --git a/IPython/html/static/notebook/js/widgets/multicontainer.js b/IPython/html/static/notebook/js/widgets/multicontainer.js new file mode 100644 index 0000000..ac9784f --- /dev/null +++ b/IPython/html/static/notebook/js/widgets/multicontainer.js @@ -0,0 +1,60 @@ +require(["notebook/js/widget"], function(){ + var MulticontainerModel = IPython.WidgetModel.extend({}); + IPython.notebook.widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel); + + var AccordionView = IPython.WidgetView.extend({ + + render: function(){ + this.$el = $('
', {id: IPython.utils.uuid()}) + .addClass('accordion'); + this.containers = []; + }, + + update: function() { + // TODO: Set tab titles + + // // Apply flexible box model properties by adding and removing + // // corrosponding CSS classes. + // // Defined in IPython/html/static/base/less/flexbox.less + // var flex_properties = ['vbox', 'hbox', 'center', 'end', 'center']; + // for (var index in flex_properties) { + // if (this.model.get('_' + flex_properties[index])) { + // this.$el.addClass(flex_properties[index]); + // } else { + // this.$el.removeClass(flex_properties[index]); + // } + // } + return IPython.WidgetView.prototype.update.call(this); + }, + + display_child: function(view) { + + var index = this.containers.length; + var uuid = IPython.utils.uuid(); + var accordion_group = $('') + .addClass('accordion-group') + .appendTo(this.$el); + var accordion_heading = $('') + .addClass('accordion-heading') + .appendTo(accordion_group); + var accordion_toggle = $('') + .addClass('accordion-toggle') + .attr('data-toggle', 'collapse') + .attr('data-parent', '#' + this.$el.attr('id')) + .attr('href', '#' + uuid) + .html('Page ' + index) + .appendTo(accordion_heading); + var accordion_body = $('', {id: uuid}) + .addClass('accordion-body collapse in') + .appendTo(accordion_group); + var accordion_inner = $('') + .addClass('accordion-inner') + .appendTo(accordion_body); + this.containers.push(accordion_group); + + accordion_inner.append(view.$el); + }, + }); + + IPython.notebook.widget_manager.register_widget_view('AccordionView', AccordionView); +}); \ No newline at end of file diff --git a/IPython/html/widgets/__init__.py b/IPython/html/widgets/__init__.py index 220345c..015c582 100644 --- a/IPython/html/widgets/__init__.py +++ b/IPython/html/widgets/__init__.py @@ -7,5 +7,6 @@ from widget_float import FloatWidget from widget_float_range import FloatRangeWidget from widget_int import IntWidget from widget_int_range import IntRangeWidget +from widget_multicontainer import MulticontainerWidget from widget_selection import SelectionWidget from widget_string import StringWidget diff --git a/IPython/html/widgets/widget_multicontainer.py b/IPython/html/widgets/widget_multicontainer.py new file mode 100644 index 0000000..ce16130 --- /dev/null +++ b/IPython/html/widgets/widget_multicontainer.py @@ -0,0 +1,25 @@ +"""MulticontainerWidget class. + +Represents a multipage container that can be used to group other widgets into +pages. +""" +#----------------------------------------------------------------------------- +# Copyright (c) 2013, the IPython Development Team. +# +# Distributed under the terms of the Modified BSD License. +# +# The full license is in the file COPYING.txt, distributed with this software. +#----------------------------------------------------------------------------- + +#----------------------------------------------------------------------------- +# Imports +#----------------------------------------------------------------------------- +from widget import Widget +from IPython.utils.traitlets import Unicode + +#----------------------------------------------------------------------------- +# Classes +#----------------------------------------------------------------------------- +class MulticontainerWidget(Widget): + target_name = Unicode('MulticontainerWidgetModel') + default_view_name = Unicode('AccordionView')