diff --git a/IPython/html/static/widgets/js/widget_box.js b/IPython/html/static/widgets/js/widget_box.js index e7850ce20..f31f40b40 100644 --- a/IPython/html/static/widgets/js/widget_box.js +++ b/IPython/html/static/widgets/js/widget_box.js @@ -146,224 +146,8 @@ define([ }, }); - var PopupView = BoxView.extend({ - - render: function(){ - /** - * Called when view is rendered. - */ - var that = this; - - this.$el.on("remove", function(){ - that.$backdrop.remove(); - }); - this.$backdrop = $('
') - .appendTo($('#notebook-container')) - .addClass('modal-dialog') - .css('position', 'absolute') - .css('left', '0px') - .css('top', '0px'); - this.$window = $('') - .appendTo(this.$backdrop) - .addClass('modal-content widget-modal') - .mousedown(function(){ - that.bring_to_front(); - }); - - // Set the elements array since the this.$window element is not child - // of this.$el and the parent widget manager or other widgets may - // need to know about all of the top-level widgets. The IPython - // widget manager uses this to register the elements with the - // keyboard manager. - this.additional_elements = [this.$window]; - - this.$title_bar = $('') - .addClass('popover-title') - .appendTo(this.$window) - .mousedown(function(){ - that.bring_to_front(); - }); - this.$close = $('') - .addClass('close fa fa-remove') - .css('margin-left', '5px') - .appendTo(this.$title_bar) - .click(function(){ - that.hide(); - event.stopPropagation(); - }); - this.$minimize = $('') - .addClass('close fa fa-arrow-down') - .appendTo(this.$title_bar) - .click(function(){ - that.popped_out = !that.popped_out; - if (!that.popped_out) { - that.$minimize - .removeClass('fa-arrow-down') - .addClass('fa-arrow-up'); - - that.$window - .draggable('destroy') - .resizable('destroy') - .removeClass('widget-modal modal-content') - .addClass('docked-widget-modal') - .detach() - .insertBefore(that.$show_button); - that.$show_button.hide(); - that.$close.hide(); - } else { - that.$minimize - .addClass('fa-arrow-down') - .removeClass('fa-arrow-up'); - - that.$window - .removeClass('docked-widget-modal') - .addClass('widget-modal modal-content') - .detach() - .appendTo(that.$backdrop) - .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}) - .resizable() - .children('.ui-resizable-handle').show(); - that.show(); - that.$show_button.show(); - that.$close.show(); - } - event.stopPropagation(); - }); - this.$title = $('') - .addClass('widget-modal-title') - .html(" ") - .appendTo(this.$title_bar); - this.$box = $('') - .addClass('modal-body') - .addClass('widget-modal-body') - .addClass('widget-box') - .addClass('vbox') - .appendTo(this.$window); - - this.$show_button = $('') - .html(" ") - .addClass('btn btn-info widget-modal-show') - .appendTo(this.$el) - .click(function(){ - that.show(); - }); - - this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}); - this.$window.resizable(); - this.$window.on('resize', function(){ - that.$box.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight()); - }); - - this._shown_once = false; - this.popped_out = true; - - this.children_views.update(this.model.get('children')) - }, - - hide: function() { - /** - * Called when the modal hide button is clicked. - */ - this.$window.hide(); - this.$show_button.removeClass('btn-info'); - }, - - show: function() { - /** - * Called when the modal show button is clicked. - */ - this.$show_button.addClass('btn-info'); - this.$window.show(); - if (this.popped_out) { - this.$window.css("positon", "absolute"); - this.$window.css("top", "0px"); - this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + - $(window).scrollLeft()) + "px"); - this.bring_to_front(); - } - }, - - bring_to_front: function() { - /** - * Make the modal top-most, z-ordered about the other modals. - */ - var $widget_modals = $(".widget-modal"); - var max_zindex = 0; - $widget_modals.each(function (index, el){ - var zindex = parseInt($(el).css('z-index')); - if (!isNaN(zindex)) { - max_zindex = Math.max(max_zindex, zindex); - } - }); - - // Start z-index of widget modals at 2000 - max_zindex = Math.max(max_zindex, 2000); - - $widget_modals.each(function (index, el){ - $el = $(el); - if (max_zindex == parseInt($el.css('z-index'))) { - $el.css('z-index', max_zindex - 1); - } - }); - this.$window.css('z-index', max_zindex); - }, - - update: function(){ - /** - * Update the contents of this view - * - * Called when the model is changed. The model may have been - * changed by another view or by a state update from the back-end. - */ - var description = this.model.get('description'); - if (description.trim().length === 0) { - this.$title.html(" "); // Preserve title height - } else { - this.typeset(this.$title, description); - } - - var button_text = this.model.get('button_text'); - if (button_text.trim().length === 0) { - this.$show_button.html(" "); // Preserve button height - } else { - this.$show_button.text(button_text); - } - - if (!this._shown_once) { - this._shown_once = true; - this.show(); - } - - return PopupView.__super__.update.apply(this); - }, - - _get_selector_element: function(selector) { - /** - * Get an element view a 'special' jquery selector. (see widget.js) - * - * Since the modal actually isn't within the $el in the DOM, we need to extend - * the selector logic to allow the user to set css on the modal if need be. - * The convention used is: - * "modal" - select the modal div - * "modal [selector]" - select element(s) within the modal div. - * "[selector]" - select elements within $el - * "" - select the $el - */ - if (selector.substring(0, 5) == 'modal') { - if (selector == 'modal') { - return this.$window; - } else { - return this.$window.find(selector.substring(6)); - } - } else { - return PopupView.__super__._get_selector_element.apply(this, [selector]); - } - }, - }); - return { 'BoxView': BoxView, - 'PopupView': PopupView, 'FlexBoxView': FlexBoxView, }; }); diff --git a/IPython/html/widgets/__init__.py b/IPython/html/widgets/__init__.py index cb474206b..0a5c7cced 100644 --- a/IPython/html/widgets/__init__.py +++ b/IPython/html/widgets/__init__.py @@ -2,7 +2,7 @@ from .widget import Widget, DOMWidget, CallbackDispatcher, register from .widget_bool import Checkbox, ToggleButton from .widget_button import Button -from .widget_box import Box, Popup, FlexBox, HBox, VBox +from .widget_box import Box, FlexBox, HBox, VBox from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider from .widget_image import Image from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider @@ -16,7 +16,7 @@ from .widget_link import Link, link, DirectionalLink, dlink # Deprecated classes from .widget_bool import CheckboxWidget, ToggleButtonWidget from .widget_button import ButtonWidget -from .widget_box import ContainerWidget, PopupWidget +from .widget_box import ContainerWidget from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget from .widget_image import ImageWidget from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget diff --git a/IPython/html/widgets/widget_box.py b/IPython/html/widgets/widget_box.py index ca9c62635..555db2270 100644 --- a/IPython/html/widgets/widget_box.py +++ b/IPython/html/widgets/widget_box.py @@ -45,15 +45,6 @@ class Box(DOMWidget): child._handle_displayed() -@register('IPython.Popup') -class Popup(Box): - """Displays multiple widgets in an in page popup div.""" - _view_name = Unicode('PopupView', sync=True) - - description = Unicode(sync=True) - button_text = Unicode(sync=True) - - @register('IPython.FlexBox') class FlexBox(Box): """Displays multiple widgets using the flexible box model.""" @@ -87,5 +78,3 @@ def HBox(*pargs, **kwargs): # Remove in IPython 4.0 ContainerWidget = DeprecatedClass(Box, 'ContainerWidget') -PopupWidget = DeprecatedClass(Popup, 'PopupWidget') -