Show More
@@ -146,224 +146,8 b' define([' | |||||
146 | }, |
|
146 | }, | |
147 | }); |
|
147 | }); | |
148 |
|
148 | |||
149 | var PopupView = BoxView.extend({ |
|
|||
150 |
|
||||
151 | render: function(){ |
|
|||
152 | /** |
|
|||
153 | * Called when view is rendered. |
|
|||
154 | */ |
|
|||
155 | var that = this; |
|
|||
156 |
|
||||
157 | this.$el.on("remove", function(){ |
|
|||
158 | that.$backdrop.remove(); |
|
|||
159 | }); |
|
|||
160 | this.$backdrop = $('<div />') |
|
|||
161 | .appendTo($('#notebook-container')) |
|
|||
162 | .addClass('modal-dialog') |
|
|||
163 | .css('position', 'absolute') |
|
|||
164 | .css('left', '0px') |
|
|||
165 | .css('top', '0px'); |
|
|||
166 | this.$window = $('<div />') |
|
|||
167 | .appendTo(this.$backdrop) |
|
|||
168 | .addClass('modal-content widget-modal') |
|
|||
169 | .mousedown(function(){ |
|
|||
170 | that.bring_to_front(); |
|
|||
171 | }); |
|
|||
172 |
|
||||
173 | // Set the elements array since the this.$window element is not child |
|
|||
174 | // of this.$el and the parent widget manager or other widgets may |
|
|||
175 | // need to know about all of the top-level widgets. The IPython |
|
|||
176 | // widget manager uses this to register the elements with the |
|
|||
177 | // keyboard manager. |
|
|||
178 | this.additional_elements = [this.$window]; |
|
|||
179 |
|
||||
180 | this.$title_bar = $('<div />') |
|
|||
181 | .addClass('popover-title') |
|
|||
182 | .appendTo(this.$window) |
|
|||
183 | .mousedown(function(){ |
|
|||
184 | that.bring_to_front(); |
|
|||
185 | }); |
|
|||
186 | this.$close = $('<button />') |
|
|||
187 | .addClass('close fa fa-remove') |
|
|||
188 | .css('margin-left', '5px') |
|
|||
189 | .appendTo(this.$title_bar) |
|
|||
190 | .click(function(){ |
|
|||
191 | that.hide(); |
|
|||
192 | event.stopPropagation(); |
|
|||
193 | }); |
|
|||
194 | this.$minimize = $('<button />') |
|
|||
195 | .addClass('close fa fa-arrow-down') |
|
|||
196 | .appendTo(this.$title_bar) |
|
|||
197 | .click(function(){ |
|
|||
198 | that.popped_out = !that.popped_out; |
|
|||
199 | if (!that.popped_out) { |
|
|||
200 | that.$minimize |
|
|||
201 | .removeClass('fa-arrow-down') |
|
|||
202 | .addClass('fa-arrow-up'); |
|
|||
203 |
|
||||
204 | that.$window |
|
|||
205 | .draggable('destroy') |
|
|||
206 | .resizable('destroy') |
|
|||
207 | .removeClass('widget-modal modal-content') |
|
|||
208 | .addClass('docked-widget-modal') |
|
|||
209 | .detach() |
|
|||
210 | .insertBefore(that.$show_button); |
|
|||
211 | that.$show_button.hide(); |
|
|||
212 | that.$close.hide(); |
|
|||
213 | } else { |
|
|||
214 | that.$minimize |
|
|||
215 | .addClass('fa-arrow-down') |
|
|||
216 | .removeClass('fa-arrow-up'); |
|
|||
217 |
|
||||
218 | that.$window |
|
|||
219 | .removeClass('docked-widget-modal') |
|
|||
220 | .addClass('widget-modal modal-content') |
|
|||
221 | .detach() |
|
|||
222 | .appendTo(that.$backdrop) |
|
|||
223 | .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}) |
|
|||
224 | .resizable() |
|
|||
225 | .children('.ui-resizable-handle').show(); |
|
|||
226 | that.show(); |
|
|||
227 | that.$show_button.show(); |
|
|||
228 | that.$close.show(); |
|
|||
229 | } |
|
|||
230 | event.stopPropagation(); |
|
|||
231 | }); |
|
|||
232 | this.$title = $('<div />') |
|
|||
233 | .addClass('widget-modal-title') |
|
|||
234 | .html(" ") |
|
|||
235 | .appendTo(this.$title_bar); |
|
|||
236 | this.$box = $('<div />') |
|
|||
237 | .addClass('modal-body') |
|
|||
238 | .addClass('widget-modal-body') |
|
|||
239 | .addClass('widget-box') |
|
|||
240 | .addClass('vbox') |
|
|||
241 | .appendTo(this.$window); |
|
|||
242 |
|
||||
243 | this.$show_button = $('<button />') |
|
|||
244 | .html(" ") |
|
|||
245 | .addClass('btn btn-info widget-modal-show') |
|
|||
246 | .appendTo(this.$el) |
|
|||
247 | .click(function(){ |
|
|||
248 | that.show(); |
|
|||
249 | }); |
|
|||
250 |
|
||||
251 | this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}); |
|
|||
252 | this.$window.resizable(); |
|
|||
253 | this.$window.on('resize', function(){ |
|
|||
254 | that.$box.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight()); |
|
|||
255 | }); |
|
|||
256 |
|
||||
257 | this._shown_once = false; |
|
|||
258 | this.popped_out = true; |
|
|||
259 |
|
||||
260 | this.children_views.update(this.model.get('children')) |
|
|||
261 | }, |
|
|||
262 |
|
||||
263 | hide: function() { |
|
|||
264 | /** |
|
|||
265 | * Called when the modal hide button is clicked. |
|
|||
266 | */ |
|
|||
267 | this.$window.hide(); |
|
|||
268 | this.$show_button.removeClass('btn-info'); |
|
|||
269 | }, |
|
|||
270 |
|
||||
271 | show: function() { |
|
|||
272 | /** |
|
|||
273 | * Called when the modal show button is clicked. |
|
|||
274 | */ |
|
|||
275 | this.$show_button.addClass('btn-info'); |
|
|||
276 | this.$window.show(); |
|
|||
277 | if (this.popped_out) { |
|
|||
278 | this.$window.css("positon", "absolute"); |
|
|||
279 | this.$window.css("top", "0px"); |
|
|||
280 | this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + |
|
|||
281 | $(window).scrollLeft()) + "px"); |
|
|||
282 | this.bring_to_front(); |
|
|||
283 | } |
|
|||
284 | }, |
|
|||
285 |
|
||||
286 | bring_to_front: function() { |
|
|||
287 | /** |
|
|||
288 | * Make the modal top-most, z-ordered about the other modals. |
|
|||
289 | */ |
|
|||
290 | var $widget_modals = $(".widget-modal"); |
|
|||
291 | var max_zindex = 0; |
|
|||
292 | $widget_modals.each(function (index, el){ |
|
|||
293 | var zindex = parseInt($(el).css('z-index')); |
|
|||
294 | if (!isNaN(zindex)) { |
|
|||
295 | max_zindex = Math.max(max_zindex, zindex); |
|
|||
296 | } |
|
|||
297 | }); |
|
|||
298 |
|
||||
299 | // Start z-index of widget modals at 2000 |
|
|||
300 | max_zindex = Math.max(max_zindex, 2000); |
|
|||
301 |
|
||||
302 | $widget_modals.each(function (index, el){ |
|
|||
303 | $el = $(el); |
|
|||
304 | if (max_zindex == parseInt($el.css('z-index'))) { |
|
|||
305 | $el.css('z-index', max_zindex - 1); |
|
|||
306 | } |
|
|||
307 | }); |
|
|||
308 | this.$window.css('z-index', max_zindex); |
|
|||
309 | }, |
|
|||
310 |
|
||||
311 | update: function(){ |
|
|||
312 | /** |
|
|||
313 | * Update the contents of this view |
|
|||
314 | * |
|
|||
315 | * Called when the model is changed. The model may have been |
|
|||
316 | * changed by another view or by a state update from the back-end. |
|
|||
317 | */ |
|
|||
318 | var description = this.model.get('description'); |
|
|||
319 | if (description.trim().length === 0) { |
|
|||
320 | this.$title.html(" "); // Preserve title height |
|
|||
321 | } else { |
|
|||
322 | this.typeset(this.$title, description); |
|
|||
323 | } |
|
|||
324 |
|
||||
325 | var button_text = this.model.get('button_text'); |
|
|||
326 | if (button_text.trim().length === 0) { |
|
|||
327 | this.$show_button.html(" "); // Preserve button height |
|
|||
328 | } else { |
|
|||
329 | this.$show_button.text(button_text); |
|
|||
330 | } |
|
|||
331 |
|
||||
332 | if (!this._shown_once) { |
|
|||
333 | this._shown_once = true; |
|
|||
334 | this.show(); |
|
|||
335 | } |
|
|||
336 |
|
||||
337 | return PopupView.__super__.update.apply(this); |
|
|||
338 | }, |
|
|||
339 |
|
||||
340 | _get_selector_element: function(selector) { |
|
|||
341 | /** |
|
|||
342 | * Get an element view a 'special' jquery selector. (see widget.js) |
|
|||
343 | * |
|
|||
344 | * Since the modal actually isn't within the $el in the DOM, we need to extend |
|
|||
345 | * the selector logic to allow the user to set css on the modal if need be. |
|
|||
346 | * The convention used is: |
|
|||
347 | * "modal" - select the modal div |
|
|||
348 | * "modal [selector]" - select element(s) within the modal div. |
|
|||
349 | * "[selector]" - select elements within $el |
|
|||
350 | * "" - select the $el |
|
|||
351 | */ |
|
|||
352 | if (selector.substring(0, 5) == 'modal') { |
|
|||
353 | if (selector == 'modal') { |
|
|||
354 | return this.$window; |
|
|||
355 | } else { |
|
|||
356 | return this.$window.find(selector.substring(6)); |
|
|||
357 | } |
|
|||
358 | } else { |
|
|||
359 | return PopupView.__super__._get_selector_element.apply(this, [selector]); |
|
|||
360 | } |
|
|||
361 | }, |
|
|||
362 | }); |
|
|||
363 |
|
||||
364 | return { |
|
149 | return { | |
365 | 'BoxView': BoxView, |
|
150 | 'BoxView': BoxView, | |
366 | 'PopupView': PopupView, |
|
|||
367 | 'FlexBoxView': FlexBoxView, |
|
151 | 'FlexBoxView': FlexBoxView, | |
368 | }; |
|
152 | }; | |
369 | }); |
|
153 | }); |
@@ -2,7 +2,7 b' from .widget import Widget, DOMWidget, CallbackDispatcher, register' | |||||
2 |
|
2 | |||
3 | from .widget_bool import Checkbox, ToggleButton |
|
3 | from .widget_bool import Checkbox, ToggleButton | |
4 | from .widget_button import Button |
|
4 | from .widget_button import Button | |
5 |
from .widget_box import Box, |
|
5 | from .widget_box import Box, FlexBox, HBox, VBox | |
6 | from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider |
|
6 | from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider | |
7 | from .widget_image import Image |
|
7 | from .widget_image import Image | |
8 | from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider |
|
8 | from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider | |
@@ -16,7 +16,7 b' from .widget_link import Link, link, DirectionalLink, dlink' | |||||
16 | # Deprecated classes |
|
16 | # Deprecated classes | |
17 | from .widget_bool import CheckboxWidget, ToggleButtonWidget |
|
17 | from .widget_bool import CheckboxWidget, ToggleButtonWidget | |
18 | from .widget_button import ButtonWidget |
|
18 | from .widget_button import ButtonWidget | |
19 |
from .widget_box import ContainerWidget |
|
19 | from .widget_box import ContainerWidget | |
20 | from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget |
|
20 | from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget | |
21 | from .widget_image import ImageWidget |
|
21 | from .widget_image import ImageWidget | |
22 | from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget |
|
22 | from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget |
@@ -45,15 +45,6 b' class Box(DOMWidget):' | |||||
45 | child._handle_displayed() |
|
45 | child._handle_displayed() | |
46 |
|
46 | |||
47 |
|
47 | |||
48 | @register('IPython.Popup') |
|
|||
49 | class Popup(Box): |
|
|||
50 | """Displays multiple widgets in an in page popup div.""" |
|
|||
51 | _view_name = Unicode('PopupView', sync=True) |
|
|||
52 |
|
||||
53 | description = Unicode(sync=True) |
|
|||
54 | button_text = Unicode(sync=True) |
|
|||
55 |
|
||||
56 |
|
||||
57 | @register('IPython.FlexBox') |
|
48 | @register('IPython.FlexBox') | |
58 | class FlexBox(Box): |
|
49 | class FlexBox(Box): | |
59 | """Displays multiple widgets using the flexible box model.""" |
|
50 | """Displays multiple widgets using the flexible box model.""" | |
@@ -87,5 +78,3 b' def HBox(*pargs, **kwargs):' | |||||
87 |
|
78 | |||
88 | # Remove in IPython 4.0 |
|
79 | # Remove in IPython 4.0 | |
89 | ContainerWidget = DeprecatedClass(Box, 'ContainerWidget') |
|
80 | ContainerWidget = DeprecatedClass(Box, 'ContainerWidget') | |
90 | PopupWidget = DeprecatedClass(Popup, 'PopupWidget') |
|
|||
91 |
|
General Comments 0
You need to be logged in to leave comments.
Login now