mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2024-12-21 04:10:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added ModalView

Browse Source
This commit is contained in:
Jonathan Frederic 2013-11-23 00:48:06 +00:00
parent ad25488041
commit 4e1e091648
2 changed files with 124 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
IPython/html/static/notebook/js/widgets/container.js
View File

@ -59,4 +59,124 @@ define(["notebook/js/widget"], function(widget_manager) {
});
widget_manager.register_widget_view('ContainerView', ContainerView);
});
var ModalView = IPython.WidgetView.extend({
render: function(){
var that = this;
this.$el
.html('')
.on("remove", function(){
that.$window.remove();
});
this.$window = $('<div />')
.addClass('modal widget-modal')
.appendTo($('#notebook-container'));
var title_bar = $('<div />')
.addClass('popover-title')
.appendTo(this.$window);
var that = this;
$('<button />')
.addClass('close')
.html('&times;')
.appendTo(title_bar)
.click(function(){
that.hide();
event.stopPropagation();
});
this.$title = $('<div />')
.addClass('widget-modal-title')
.html('&nbsp;')
.appendTo(title_bar);
this.$body = $('<div />')
.addClass('modal-body')
.addClass('widget-container')
.appendTo(this.$window);
this.$show_button = $('<button />')
.html('&nbsp;')
.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._shown_once = false;
},
hide: function() {
this.$window.hide();
this.$show_button.removeClass('btn-info');
},
show: function() {
this.$window.show();
this.$show_button.addClass('btn-info');
var position = this.$show_button.offset();
this.$window.css('left', position.left + this.$show_button.outerWidth());
this.$window.css('top', position.top);
},
update: function(){
// Apply flexible box model properties by adding and removing
// corrosponding CSS classes.
// Defined in IPython/html/static/base/less/flexbox.less
this.set_flex_property('vbox', this.model.get('_vbox'));
this.set_flex_property('hbox', this.model.get('_hbox'));
this.set_flex_property('start', this.model.get('_pack_start'));
this.set_flex_property('center', this.model.get('_pack_center'));
this.set_flex_property('end', this.model.get('_pack_end'));
this.set_flex_property('align-start', this.model.get('_align_start'));
this.set_flex_property('align-center', this.model.get('_align_center'));
this.set_flex_property('align-end', this.model.get('_align_end'));
this.set_flex_property('box-flex0', this.model.get('_flex0'));
this.set_flex_property('box-flex1', this.model.get('_flex1'));
this.set_flex_property('box-flex2', this.model.get('_flex2'));
var description = this.model.get('description');
description = description.replace(/ /g, '&nbsp;', 'm');
description = description.replace(/\n/g, '<br>\n', 'm');
if (description.length == 0) {
this.$title.html('&nbsp;'); // Preserve title height
} else {
this.$title.html(description);
}
var button_text = this.model.get('button_text');
button_text = button_text.replace(/ /g, '&nbsp;', 'm');
button_text = button_text.replace(/\n/g, '<br>\n', 'm');
if (button_text.length == 0) {
this.$show_button.html('&nbsp;'); // Preserve button height
} else {
this.$show_button.html(button_text);
}
if (!this._shown_once) {
this._shown_once = true;
this.show();
}
return IPython.WidgetView.prototype.update.call(this);
},
set_flex_property: function(property_name, enabled) {
if (enabled) {
this.$body.addClass(property_name);
} else {
this.$body.removeClass(property_name);
}
},
display_child: function(view) {
this.$body.append(view.$el);
},
});
widget_manager.register_widget_view('ModalView', ModalView);
});

4
IPython/html/widgets/widget_container.py
View File

@ -27,7 +27,9 @@ class ContainerWidget(Widget):
# classes...
_keys = ['_vbox', '_hbox', '_align_start', '_align_end', '_align_center',
'_pack_start', '_pack_end', '_pack_center', '_flex0', '_flex1',
'_flex2']
'_flex2', 'description', 'button_text']
description = Unicode()
button_text = Unicode()
_hbox = Bool(False)
_vbox = Bool(False)
_align_start = Bool(False)