Show More
@@ -1,126 +1,139 | |||
|
1 | 1 | require(["notebook/js/widget"], function(){ |
|
2 | 2 | var MulticontainerModel = IPython.WidgetModel.extend({}); |
|
3 | 3 | IPython.notebook.widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel); |
|
4 | 4 | |
|
5 | 5 | var AccordionView = IPython.WidgetView.extend({ |
|
6 | 6 | |
|
7 | 7 | render: function(){ |
|
8 | 8 | this.$el = $('<div />', {id: IPython.utils.uuid()}) |
|
9 | 9 | .addClass('accordion'); |
|
10 | 10 | this.containers = []; |
|
11 | 11 | }, |
|
12 | 12 | |
|
13 | 13 | update: function() { |
|
14 | 14 | // Set tab titles |
|
15 | 15 | var titles = this.model.get('_titles'); |
|
16 | 16 | for (var page_index in titles) { |
|
17 | 17 | |
|
18 | 18 | var accordian = this.containers[page_index] |
|
19 | 19 | if (accordian != undefined) { |
|
20 | 20 | accordian |
|
21 | 21 | .find('.accordion-heading') |
|
22 | 22 | .find('.accordion-toggle') |
|
23 | 23 | .html(titles[page_index]); |
|
24 | 24 | } |
|
25 | 25 | } |
|
26 | 26 | |
|
27 | 27 | return IPython.WidgetView.prototype.update.call(this); |
|
28 | 28 | }, |
|
29 | 29 | |
|
30 | 30 | display_child: function(view) { |
|
31 | 31 | |
|
32 | 32 | var index = this.containers.length; |
|
33 | 33 | var uuid = IPython.utils.uuid(); |
|
34 | 34 | var accordion_group = $('<div />') |
|
35 | 35 | .addClass('accordion-group') |
|
36 | 36 | .appendTo(this.$el); |
|
37 | 37 | var accordion_heading = $('<div />') |
|
38 | 38 | .addClass('accordion-heading') |
|
39 | 39 | .appendTo(accordion_group); |
|
40 | 40 | var accordion_toggle = $('<a />') |
|
41 | 41 | .addClass('accordion-toggle') |
|
42 | 42 | .attr('data-toggle', 'collapse') |
|
43 | 43 | .attr('data-parent', '#' + this.$el.attr('id')) |
|
44 | 44 | .attr('href', '#' + uuid) |
|
45 | 45 | .html('Page ' + index) |
|
46 | 46 | .appendTo(accordion_heading); |
|
47 | 47 | var accordion_body = $('<div />', {id: uuid}) |
|
48 | 48 | .addClass('accordion-body collapse') |
|
49 | 49 | .appendTo(accordion_group); |
|
50 | 50 | var accordion_inner = $('<div />') |
|
51 | 51 | .addClass('accordion-inner') |
|
52 | 52 | .appendTo(accordion_body); |
|
53 | 53 | this.containers.push(accordion_group); |
|
54 | 54 | |
|
55 | 55 | accordion_inner.append(view.$el); |
|
56 | 56 | this.update(); |
|
57 | 57 | }, |
|
58 | 58 | }); |
|
59 | 59 | |
|
60 | 60 | IPython.notebook.widget_manager.register_widget_view('AccordionView', AccordionView); |
|
61 | 61 | |
|
62 | 62 | var TabView = IPython.WidgetView.extend({ |
|
63 | 63 | |
|
64 | 64 | render: function(){ |
|
65 | 65 | this.$el = $('<div />'); |
|
66 | 66 | var uuid = IPython.utils.uuid(); |
|
67 | var that = this; | |
|
67 | 68 | this.$tabs = $('<div />', {id: uuid}) |
|
68 | 69 | .addClass('nav') |
|
69 | 70 | .addClass('nav-tabs') |
|
70 | 71 | .appendTo(this.$el); |
|
71 | 72 | this.$tab_contents = $('<div />', {id: uuid + 'Content'}) |
|
72 | 73 | .addClass('tab-content') |
|
73 | 74 | .appendTo(this.$el); |
|
74 | 75 | |
|
75 | 76 | this.containers = []; |
|
76 | 77 | }, |
|
77 | 78 | |
|
78 | 79 | update: function() { |
|
79 | 80 | // Set tab titles |
|
80 | 81 | var titles = this.model.get('_titles'); |
|
81 | 82 | for (var page_index in titles) { |
|
82 | 83 | var tab_text = this.containers[page_index] |
|
83 | 84 | if (tab_text != undefined) { |
|
84 | 85 | tab_text.html(titles[page_index]); |
|
85 | 86 | } |
|
86 | 87 | } |
|
87 | 88 | |
|
89 | var selected_index = this.model.get('selected_index'); | |
|
90 | if (0 <= selected_index && selected_index < this.containers.length) { | |
|
91 | this.select_page(selected_index); | |
|
92 | } | |
|
93 | ||
|
88 | 94 | return IPython.WidgetView.prototype.update.call(this); |
|
89 | 95 | }, |
|
90 | 96 | |
|
91 | 97 | display_child: function(view) { |
|
92 | 98 | |
|
93 | 99 | var index = this.containers.length; |
|
94 | 100 | var uuid = IPython.utils.uuid(); |
|
95 | 101 | |
|
96 | 102 | var that = this; |
|
97 | 103 | var tab = $('<li />') |
|
98 | 104 | .css('list-style-type', 'none') |
|
99 | 105 | .appendTo(this.$tabs); |
|
100 | 106 | var tab_text = $('<a />') |
|
101 | 107 | .attr('href', '#' + uuid) |
|
102 | 108 | .attr('data-toggle', 'tab') |
|
103 | 109 | .html('Page ' + index) |
|
104 | 110 | .appendTo(tab) |
|
105 | 111 | .click(function (e) { |
|
106 |
that. |
|
|
107 |
|
|
|
112 | that.model.set("selected_index", index); | |
|
113 | that.model.update_other_views(that); | |
|
114 | that.select_page(index); | |
|
108 | 115 | }); |
|
109 | 116 | this.containers.push(tab_text); |
|
110 | 117 | |
|
111 | 118 | var contents_div = $('<div />', {id: uuid}) |
|
112 | 119 | .addClass('tab-pane') |
|
113 | 120 | .addClass('fade') |
|
114 | 121 | .append(view.$el) |
|
115 | 122 | .appendTo(this.$tab_contents); |
|
116 | 123 | |
|
117 | 124 | if (index==0) { |
|
118 | 125 | tab_text.tab('show'); |
|
119 | 126 | } |
|
120 | 127 | this.update(); |
|
121 | 128 | }, |
|
129 | ||
|
130 | select_page: function(index) { | |
|
131 | this.$tabs.find('li') | |
|
132 | .removeClass('active'); | |
|
133 | this.containers[index].tab('show'); | |
|
134 | }, | |
|
122 | 135 | }); |
|
123 | 136 | |
|
124 | 137 | IPython.notebook.widget_manager.register_widget_view('TabView', TabView); |
|
125 | 138 | |
|
126 | 139 | }); |
@@ -1,55 +1,56 | |||
|
1 | 1 | """MulticontainerWidget class. |
|
2 | 2 | |
|
3 | 3 | Represents a multipage container that can be used to group other widgets into |
|
4 | 4 | pages. |
|
5 | 5 | """ |
|
6 | 6 | #----------------------------------------------------------------------------- |
|
7 | 7 | # Copyright (c) 2013, the IPython Development Team. |
|
8 | 8 | # |
|
9 | 9 | # Distributed under the terms of the Modified BSD License. |
|
10 | 10 | # |
|
11 | 11 | # The full license is in the file COPYING.txt, distributed with this software. |
|
12 | 12 | #----------------------------------------------------------------------------- |
|
13 | 13 | |
|
14 | 14 | #----------------------------------------------------------------------------- |
|
15 | 15 | # Imports |
|
16 | 16 | #----------------------------------------------------------------------------- |
|
17 | 17 | from widget import Widget |
|
18 | from IPython.utils.traitlets import Unicode, Dict | |
|
18 | from IPython.utils.traitlets import Unicode, Dict, Int | |
|
19 | 19 | |
|
20 | 20 | #----------------------------------------------------------------------------- |
|
21 | 21 | # Classes |
|
22 | 22 | #----------------------------------------------------------------------------- |
|
23 | 23 | class MulticontainerWidget(Widget): |
|
24 | 24 | target_name = Unicode('MulticontainerWidgetModel') |
|
25 | 25 | default_view_name = Unicode('TabView') |
|
26 | 26 | |
|
27 | 27 | # Keys |
|
28 | _keys = ['_titles'] | |
|
28 | _keys = ['_titles', 'selected_index'] | |
|
29 | 29 | _titles = Dict(help="Titles of the pages") |
|
30 | selected_index = Int(0) | |
|
30 | 31 | |
|
31 | 32 | # Public methods |
|
32 | 33 | def set_title(self, index, title): |
|
33 | 34 | """Sets the title of a container pages |
|
34 | 35 | |
|
35 | 36 | Parameters |
|
36 | 37 | ---------- |
|
37 | 38 | index : int |
|
38 | 39 | Index of the container page |
|
39 | 40 | title : unicode |
|
40 | 41 | New title""" |
|
41 | 42 | self._titles[index] = title |
|
42 | 43 | self.send_state('_titles') |
|
43 | 44 | |
|
44 | 45 | |
|
45 | 46 | def get_title(self, index): |
|
46 | 47 | """Gets the title of a container pages |
|
47 | 48 | |
|
48 | 49 | Parameters |
|
49 | 50 | ---------- |
|
50 | 51 | index : int |
|
51 | 52 | Index of the container page""" |
|
52 | 53 | if index in self._titles: |
|
53 | 54 | return self._titles[index] |
|
54 | 55 | else: |
|
55 | 56 | return None |
General Comments 0
You need to be logged in to leave comments.
Login now