##// END OF EJS Templates
Remove the popup widget
Jonathan Frederic -
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("&nbsp;")
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("&nbsp;")
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("&nbsp;"); // 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("&nbsp;"); // 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, Popup, FlexBox, HBox, VBox
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, PopupWidget
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