mirror of
https://github.com/jupyter/notebook.git
synced 2024-12-21 04:10:17 +08:00
Remove the popup widget
This commit is contained in:
parent
b7a1bb5943
commit
3f2dc88154
@ -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 = $('<div />')
|
|
||||||
.appendTo($('#notebook-container'))
|
|
||||||
.addClass('modal-dialog')
|
|
||||||
.css('position', 'absolute')
|
|
||||||
.css('left', '0px')
|
|
||||||
.css('top', '0px');
|
|
||||||
this.$window = $('<div />')
|
|
||||||
.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 = $('<div />')
|
|
||||||
.addClass('popover-title')
|
|
||||||
.appendTo(this.$window)
|
|
||||||
.mousedown(function(){
|
|
||||||
that.bring_to_front();
|
|
||||||
});
|
|
||||||
this.$close = $('<button />')
|
|
||||||
.addClass('close fa fa-remove')
|
|
||||||
.css('margin-left', '5px')
|
|
||||||
.appendTo(this.$title_bar)
|
|
||||||
.click(function(){
|
|
||||||
that.hide();
|
|
||||||
event.stopPropagation();
|
|
||||||
});
|
|
||||||
this.$minimize = $('<button />')
|
|
||||||
.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 = $('<div />')
|
|
||||||
.addClass('widget-modal-title')
|
|
||||||
.html(" ")
|
|
||||||
.appendTo(this.$title_bar);
|
|
||||||
this.$box = $('<div />')
|
|
||||||
.addClass('modal-body')
|
|
||||||
.addClass('widget-modal-body')
|
|
||||||
.addClass('widget-box')
|
|
||||||
.addClass('vbox')
|
|
||||||
.appendTo(this.$window);
|
|
||||||
|
|
||||||
this.$show_button = $('<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 {
|
return {
|
||||||
'BoxView': BoxView,
|
'BoxView': BoxView,
|
||||||
'PopupView': PopupView,
|
|
||||||
'FlexBoxView': FlexBoxView,
|
'FlexBoxView': FlexBoxView,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -2,7 +2,7 @@ from .widget import Widget, DOMWidget, CallbackDispatcher, register
|
|||||||
|
|
||||||
from .widget_bool import Checkbox, ToggleButton
|
from .widget_bool import Checkbox, ToggleButton
|
||||||
from .widget_button import Button
|
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_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider
|
||||||
from .widget_image import Image
|
from .widget_image import Image
|
||||||
from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider
|
from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider
|
||||||
@ -16,7 +16,7 @@ from .widget_link import Link, link, DirectionalLink, dlink
|
|||||||
# Deprecated classes
|
# Deprecated classes
|
||||||
from .widget_bool import CheckboxWidget, ToggleButtonWidget
|
from .widget_bool import CheckboxWidget, ToggleButtonWidget
|
||||||
from .widget_button import ButtonWidget
|
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_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget
|
||||||
from .widget_image import ImageWidget
|
from .widget_image import ImageWidget
|
||||||
from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
|
from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
|
||||||
|
@ -45,15 +45,6 @@ class Box(DOMWidget):
|
|||||||
child._handle_displayed()
|
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')
|
@register('IPython.FlexBox')
|
||||||
class FlexBox(Box):
|
class FlexBox(Box):
|
||||||
"""Displays multiple widgets using the flexible box model."""
|
"""Displays multiple widgets using the flexible box model."""
|
||||||
@ -87,5 +78,3 @@ def HBox(*pargs, **kwargs):
|
|||||||
|
|
||||||
# Remove in IPython 4.0
|
# Remove in IPython 4.0
|
||||||
ContainerWidget = DeprecatedClass(Box, 'ContainerWidget')
|
ContainerWidget = DeprecatedClass(Box, 'ContainerWidget')
|
||||||
PopupWidget = DeprecatedClass(Popup, 'PopupWidget')
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user