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 | 149 | return { |
|
365 | 150 | 'BoxView': BoxView, |
|
366 | 'PopupView': PopupView, | |
|
367 | 151 | 'FlexBoxView': FlexBoxView, |
|
368 | 152 | }; |
|
369 | 153 | }); |
@@ -2,7 +2,7 b' from .widget import Widget, DOMWidget, CallbackDispatcher, register' | |||
|
2 | 2 | |
|
3 | 3 | from .widget_bool import Checkbox, ToggleButton |
|
4 | 4 | from .widget_button import Button |
|
5 |
from .widget_box import Box, |
|
|
5 | from .widget_box import Box, FlexBox, HBox, VBox | |
|
6 | 6 | from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider |
|
7 | 7 | from .widget_image import Image |
|
8 | 8 | from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider |
@@ -16,7 +16,7 b' from .widget_link import Link, link, DirectionalLink, dlink' | |||
|
16 | 16 | # Deprecated classes |
|
17 | 17 | from .widget_bool import CheckboxWidget, ToggleButtonWidget |
|
18 | 18 | from .widget_button import ButtonWidget |
|
19 |
from .widget_box import ContainerWidget |
|
|
19 | from .widget_box import ContainerWidget | |
|
20 | 20 | from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget |
|
21 | 21 | from .widget_image import ImageWidget |
|
22 | 22 | from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget |
@@ -45,15 +45,6 b' class Box(DOMWidget):' | |||
|
45 | 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 | 48 | @register('IPython.FlexBox') |
|
58 | 49 | class FlexBox(Box): |
|
59 | 50 | """Displays multiple widgets using the flexible box model.""" |
@@ -87,5 +78,3 b' def HBox(*pargs, **kwargs):' | |||
|
87 | 78 | |
|
88 | 79 | # Remove in IPython 4.0 |
|
89 | 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