##// END OF EJS Templates
unnecessary context variable specify
Sylvain Corlay -
Show More
@@ -1,290 +1,292 b''
1 1 // Copyright (c) IPython Development Team.
2 2 // Distributed under the terms of the Modified BSD License.
3 3
4 4 define([
5 5 "widgets/js/widget",
6 6 "jqueryui",
7 7 "components/bootstrap/js/bootstrap.min",
8 8 ], function(widget, $){
9 9
10 10 var ContainerView = widget.DOMWidgetView.extend({
11 11 render: function(){
12 12 // Called when view is rendered.
13 13 this.$el.addClass('widget-container')
14 14 .addClass('vbox');
15 15 this.update_children([], this.model.get('children'));
16 16 this.model.on('change:children', function(model, value, options) {
17 17 this.update_children(model.previous('children'), value);
18 18 }, this);
19 19 this.update();
20 20 },
21 21
22 22 update_children: function(old_list, new_list) {
23 23 // Called when the children list changes.
24 24 this.do_diff(old_list,
25 25 new_list,
26 26 $.proxy(this.remove_child_model, this),
27 27 $.proxy(this.add_child_model, this));
28 28 },
29 29
30 30 remove_child_model: function(model) {
31 31 // Called when a model is removed from the children list.
32 32 this.pop_child_view(model).remove();
33 33 },
34 34
35 35 add_child_model: function(model) {
36 36 // Called when a model is added to the children list.
37 37 var view = this.create_child_view(model);
38 38 this.$el.append(view.$el);
39 39
40 40 // Trigger the displayed event once this model is displayed.
41 this.once_displayed(function() { view.trigger('displayed'); }, this);
41 this.once_displayed(function() {
42 view.trigger('displayed');
43 });
42 44 },
43 45
44 46 update: function(){
45 47 // Update the contents of this view
46 48 //
47 49 // Called when the model is changed. The model may have been
48 50 // changed by another view or by a state update from the back-end.
49 51 return ContainerView.__super__.update.apply(this);
50 52 },
51 53 });
52 54
53 55
54 56 var PopupView = widget.DOMWidgetView.extend({
55 57 render: function(){
56 58 // Called when view is rendered.
57 59 var that = this;
58 60
59 61 this.$el.on("remove", function(){
60 62 that.$backdrop.remove();
61 63 });
62 64 this.$backdrop = $('<div />')
63 65 .appendTo($('#notebook-container'))
64 66 .addClass('modal-dialog')
65 67 .css('position', 'absolute')
66 68 .css('left', '0px')
67 69 .css('top', '0px');
68 70 this.$window = $('<div />')
69 71 .appendTo(this.$backdrop)
70 72 .addClass('modal-content widget-modal')
71 73 .mousedown(function(){
72 74 that.bring_to_front();
73 75 });
74 76
75 77 // Set the elements array since the this.$window element is not child
76 78 // of this.$el and the parent widget manager or other widgets may
77 79 // need to know about all of the top-level widgets. The IPython
78 80 // widget manager uses this to register the elements with the
79 81 // keyboard manager.
80 82 this.additional_elements = [this.$window];
81 83
82 84 this.$title_bar = $('<div />')
83 85 .addClass('popover-title')
84 86 .appendTo(this.$window)
85 87 .mousedown(function(){
86 88 that.bring_to_front();
87 89 });
88 90 this.$close = $('<button />')
89 91 .addClass('close icon-remove')
90 92 .css('margin-left', '5px')
91 93 .appendTo(this.$title_bar)
92 94 .click(function(){
93 95 that.hide();
94 96 event.stopPropagation();
95 97 });
96 98 this.$minimize = $('<button />')
97 99 .addClass('close icon-arrow-down')
98 100 .appendTo(this.$title_bar)
99 101 .click(function(){
100 102 that.popped_out = !that.popped_out;
101 103 if (!that.popped_out) {
102 104 that.$minimize
103 105 .removeClass('icon-arrow-down')
104 106 .addClass('icon-arrow-up');
105 107
106 108 that.$window
107 109 .draggable('destroy')
108 110 .resizable('destroy')
109 111 .removeClass('widget-modal modal-content')
110 112 .addClass('docked-widget-modal')
111 113 .detach()
112 114 .insertBefore(that.$show_button);
113 115 that.$show_button.hide();
114 116 that.$close.hide();
115 117 } else {
116 118 that.$minimize
117 119 .addClass('icon-arrow-down')
118 120 .removeClass('icon-arrow-up');
119 121
120 122 that.$window
121 123 .removeClass('docked-widget-modal')
122 124 .addClass('widget-modal modal-content')
123 125 .detach()
124 126 .appendTo(that.$backdrop)
125 127 .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
126 128 .resizable()
127 129 .children('.ui-resizable-handle').show();
128 130 that.show();
129 131 that.$show_button.show();
130 132 that.$close.show();
131 133 }
132 134 event.stopPropagation();
133 135 });
134 136 this.$title = $('<div />')
135 137 .addClass('widget-modal-title')
136 138 .html("&nbsp;")
137 139 .appendTo(this.$title_bar);
138 140 this.$body = $('<div />')
139 141 .addClass('modal-body')
140 142 .addClass('widget-modal-body')
141 143 .addClass('widget-container')
142 144 .addClass('vbox')
143 145 .appendTo(this.$window);
144 146
145 147 this.$show_button = $('<button />')
146 148 .html("&nbsp;")
147 149 .addClass('btn btn-info widget-modal-show')
148 150 .appendTo(this.$el)
149 151 .click(function(){
150 152 that.show();
151 153 });
152 154
153 155 this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
154 156 this.$window.resizable();
155 157 this.$window.on('resize', function(){
156 158 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
157 159 });
158 160
159 161 this.$el_to_style = this.$body;
160 162 this._shown_once = false;
161 163 this.popped_out = true;
162 164
163 165 this.update_children([], this.model.get('children'));
164 166 this.model.on('change:children', function(model, value, options) {
165 167 this.update_children(model.previous('children'), value);
166 168 }, this);
167 169 this.update();
168 170 },
169 171
170 172 hide: function() {
171 173 // Called when the modal hide button is clicked.
172 174 this.$window.hide();
173 175 this.$show_button.removeClass('btn-info');
174 176 },
175 177
176 178 show: function() {
177 179 // Called when the modal show button is clicked.
178 180 this.$show_button.addClass('btn-info');
179 181 this.$window.show();
180 182 if (this.popped_out) {
181 183 this.$window.css("positon", "absolute");
182 184 this.$window.css("top", "0px");
183 185 this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) +
184 186 $(window).scrollLeft()) + "px");
185 187 this.bring_to_front();
186 188 }
187 189 },
188 190
189 191 bring_to_front: function() {
190 192 // Make the modal top-most, z-ordered about the other modals.
191 193 var $widget_modals = $(".widget-modal");
192 194 var max_zindex = 0;
193 195 $widget_modals.each(function (index, el){
194 196 var zindex = parseInt($(el).css('z-index'));
195 197 if (!isNaN(zindex)) {
196 198 max_zindex = Math.max(max_zindex, zindex);
197 199 }
198 200 });
199 201
200 202 // Start z-index of widget modals at 2000
201 203 max_zindex = Math.max(max_zindex, 2000);
202 204
203 205 $widget_modals.each(function (index, el){
204 206 $el = $(el);
205 207 if (max_zindex == parseInt($el.css('z-index'))) {
206 208 $el.css('z-index', max_zindex - 1);
207 209 }
208 210 });
209 211 this.$window.css('z-index', max_zindex);
210 212 },
211 213
212 214 update_children: function(old_list, new_list) {
213 215 // Called when the children list is modified.
214 216 this.do_diff(old_list,
215 217 new_list,
216 218 $.proxy(this.remove_child_model, this),
217 219 $.proxy(this.add_child_model, this));
218 220 },
219 221
220 222 remove_child_model: function(model) {
221 223 // Called when a child is removed from children list.
222 224 this.pop_child_view(model).remove();
223 225 },
224 226
225 227 add_child_model: function(model) {
226 228 // Called when a child is added to children list.
227 229 var view = this.create_child_view(model);
228 230 this.$body.append(view.$el);
229 231
230 232 // Trigger the displayed event once this model is displayed.
231 this.once_displayed(function() {
232 view.trigger('displayed');
233 }, this);
233 this.once_displayed(function() {
234 view.trigger('displayed');
235 });
234 236 },
235 237
236 238 update: function(){
237 239 // Update the contents of this view
238 240 //
239 241 // Called when the model is changed. The model may have been
240 242 // changed by another view or by a state update from the back-end.
241 243 var description = this.model.get('description');
242 244 if (description.trim().length === 0) {
243 245 this.$title.html("&nbsp;"); // Preserve title height
244 246 } else {
245 247 this.$title.text(description);
246 248 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$title.get(0)]);
247 249 }
248 250
249 251 var button_text = this.model.get('button_text');
250 252 if (button_text.trim().length === 0) {
251 253 this.$show_button.html("&nbsp;"); // Preserve button height
252 254 } else {
253 255 this.$show_button.text(button_text);
254 256 }
255 257
256 258 if (!this._shown_once) {
257 259 this._shown_once = true;
258 260 this.show();
259 261 }
260 262
261 263 return PopupView.__super__.update.apply(this);
262 264 },
263 265
264 266 _get_selector_element: function(selector) {
265 267 // Get an element view a 'special' jquery selector. (see widget.js)
266 268 //
267 269 // Since the modal actually isn't within the $el in the DOM, we need to extend
268 270 // the selector logic to allow the user to set css on the modal if need be.
269 271 // The convention used is:
270 272 // "modal" - select the modal div
271 273 // "modal [selector]" - select element(s) within the modal div.
272 274 // "[selector]" - select elements within $el
273 275 // "" - select the $el_to_style
274 276 if (selector.substring(0, 5) == 'modal') {
275 277 if (selector == 'modal') {
276 278 return this.$window;
277 279 } else {
278 280 return this.$window.find(selector.substring(6));
279 281 }
280 282 } else {
281 283 return PopupView.__super__._get_selector_element.apply(this, [selector]);
282 284 }
283 285 },
284 286 });
285 287
286 288 return {
287 289 'ContainerView': ContainerView,
288 290 'PopupView': PopupView,
289 291 };
290 292 });
General Comments 0
You need to be logged in to leave comments. Login now