widget_container.js
315 lines
| 12.2 KiB
| application/javascript
|
JavascriptLexer
|
r17198 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
|
r14366 | |||
|
r17198 | define([ | ||
"widgets/js/widget", | ||||
|
r17216 | "jqueryui", | ||
|
r17312 | "bootstrap", | ||
|
r17215 | ], function(widget, $){ | ||
|
r14366 | |||
|
r17198 | var ContainerView = widget.DOMWidgetView.extend({ | ||
|
r14333 | render: function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r15015 | this.$el.addClass('widget-container') | ||
.addClass('vbox'); | ||||
|
r17173 | this.update_children([], this.model.get('children')); | ||
this.model.on('change:children', function(model, value, options) { | ||||
this.update_children(model.previous('children'), value); | ||||
|
r14503 | }, this); | ||
|
r14792 | this.update(); | ||
|
r16660 | |||
// Trigger model displayed events for any models that are child to | ||||
// this model when this model is displayed. | ||||
var that = this; | ||||
|
r17179 | this.on('displayed', function(){ | ||
|
r16660 | that.is_displayed = true; | ||
for (var property in that.child_views) { | ||||
if (that.child_views.hasOwnProperty(property)) { | ||||
|
r17179 | that.child_views[property].trigger('displayed'); | ||
|
r16660 | } | ||
} | ||||
}); | ||||
|
r14503 | }, | ||
update_children: function(old_list, new_list) { | ||||
|
r14609 | // Called when the children list changes. | ||
|
r14792 | this.do_diff(old_list, | ||
|
r14598 | new_list, | ||
$.proxy(this.remove_child_model, this), | ||||
$.proxy(this.add_child_model, this)); | ||||
}, | ||||
remove_child_model: function(model) { | ||||
|
r14609 | // Called when a model is removed from the children list. | ||
|
r17178 | this.pop_child_view(model).remove(); | ||
|
r14598 | }, | ||
add_child_model: function(model) { | ||||
|
r14609 | // Called when a model is added to the children list. | ||
|
r14598 | var view = this.create_child_view(model); | ||
this.$el.append(view.$el); | ||||
|
r16660 | |||
// Trigger the displayed event if this model is displayed. | ||||
if (this.is_displayed) { | ||||
|
r17179 | view.trigger('displayed'); | ||
|
r16660 | } | ||
|
r14263 | }, | ||
|
r14333 | update: function(){ | ||
|
r14568 | // 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. | ||||
|
r14583 | return ContainerView.__super__.update.apply(this); | ||
|
r14268 | }, | ||
|
r14263 | }); | ||
|
r14792 | |||
|
r17198 | |||
var PopupView = widget.DOMWidgetView.extend({ | ||||
|
r14409 | render: function(){ | ||
|
r14609 | // Called when view is rendered. | ||
|
r14409 | var that = this; | ||
|
r14507 | |||
|
r14792 | this.$el.on("remove", function(){ | ||
|
r16955 | that.$backdrop.remove(); | ||
|
r14409 | }); | ||
|
r16955 | this.$backdrop = $('<div />') | ||
|
r14443 | .appendTo($('#notebook-container')) | ||
|
r16955 | .addClass('modal-dialog') | ||
.css('position', 'absolute') | ||||
.css('left', '0px') | ||||
.css('top', '0px'); | ||||
this.$window = $('<div />') | ||||
.appendTo(this.$backdrop) | ||||
.addClass('modal-content widget-modal') | ||||
|
r14443 | .mousedown(function(){ | ||
that.bring_to_front(); | ||||
}); | ||||
|
r15022 | |||
// 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. | ||||
|
r16660 | this.additional_elements = [this.$window]; | ||
|
r15022 | |||
|
r14410 | this.$title_bar = $('<div />') | ||
|
r14409 | .addClass('popover-title') | ||
|
r14443 | .appendTo(this.$window) | ||
.mousedown(function(){ | ||||
that.bring_to_front(); | ||||
|
r14466 | }); | ||
|
r14443 | this.$close = $('<button />') | ||
.addClass('close icon-remove') | ||||
.css('margin-left', '5px') | ||||
|
r14410 | .appendTo(this.$title_bar) | ||
|
r14409 | .click(function(){ | ||
that.hide(); | ||||
event.stopPropagation(); | ||||
}); | ||||
|
r14443 | this.$minimize = $('<button />') | ||
.addClass('close icon-arrow-down') | ||||
.appendTo(this.$title_bar) | ||||
.click(function(){ | ||||
that.popped_out = !that.popped_out; | ||||
if (!that.popped_out) { | ||||
that.$minimize | ||||
.removeClass('icon-arrow-down') | ||||
.addClass('icon-arrow-up'); | ||||
that.$window | ||||
.draggable('destroy') | ||||
.resizable('destroy') | ||||
|
r16955 | .removeClass('widget-modal modal-content') | ||
|
r14443 | .addClass('docked-widget-modal') | ||
.detach() | ||||
.insertBefore(that.$show_button); | ||||
that.$show_button.hide(); | ||||
that.$close.hide(); | ||||
} else { | ||||
that.$minimize | ||||
.addClass('icon-arrow-down') | ||||
.removeClass('icon-arrow-up'); | ||||
that.$window | ||||
.removeClass('docked-widget-modal') | ||||
|
r16955 | .addClass('widget-modal modal-content') | ||
|
r14443 | .detach() | ||
|
r16955 | .appendTo(that.$backdrop) | ||
|
r14443 | .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(); | ||||
}); | ||||
|
r14409 | this.$title = $('<div />') | ||
.addClass('widget-modal-title') | ||||
|
r15329 | .html(" ") | ||
|
r14410 | .appendTo(this.$title_bar); | ||
|
r14409 | this.$body = $('<div />') | ||
.addClass('modal-body') | ||||
|
r14411 | .addClass('widget-modal-body') | ||
|
r14409 | .addClass('widget-container') | ||
|
r15015 | .addClass('vbox') | ||
|
r14409 | .appendTo(this.$window); | ||
this.$show_button = $('<button />') | ||||
|
r15329 | .html(" ") | ||
|
r16914 | .addClass('btn btn-info widget-modal-show') | ||
|
r14409 | .appendTo(this.$el) | ||
.click(function(){ | ||||
that.show(); | ||||
}); | ||||
this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}); | ||||
this.$window.resizable(); | ||||
|
r14410 | this.$window.on('resize', function(){ | ||
that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight()); | ||||
|
r14466 | }); | ||
|
r14410 | |||
|
r14419 | this.$el_to_style = this.$body; | ||
|
r14409 | this._shown_once = false; | ||
|
r14443 | this.popped_out = true; | ||
|
r14754 | |||
|
r17173 | this.update_children([], this.model.get('children')); | ||
this.model.on('change:children', function(model, value, options) { | ||||
this.update_children(model.previous('children'), value); | ||||
|
r14754 | }, this); | ||
this.update(); | ||||
|
r16660 | |||
// Trigger model displayed events for any models that are child to | ||||
// this model when this model is displayed. | ||||
|
r17179 | this.on('displayed', function(){ | ||
|
r16660 | that.is_displayed = true; | ||
for (var property in that.child_views) { | ||||
if (that.child_views.hasOwnProperty(property)) { | ||||
|
r17179 | that.child_views[property].trigger('displayed'); | ||
|
r16660 | } | ||
} | ||||
}); | ||||
|
r14409 | }, | ||
hide: function() { | ||||
|
r14609 | // Called when the modal hide button is clicked. | ||
|
r14409 | this.$window.hide(); | ||
this.$show_button.removeClass('btn-info'); | ||||
}, | ||||
show: function() { | ||||
|
r14609 | // Called when the modal show button is clicked. | ||
|
r14409 | this.$show_button.addClass('btn-info'); | ||
|
r14425 | this.$window.show(); | ||
|
r14443 | if (this.popped_out) { | ||
|
r14466 | this.$window.css("positon", "absolute"); | ||
|
r14443 | 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() { | ||||
|
r14609 | // Make the modal top-most, z-ordered about the other modals. | ||
|
r14443 | var $widget_modals = $(".widget-modal"); | ||
var max_zindex = 0; | ||||
$widget_modals.each(function (index, el){ | ||||
|
r16955 | var zindex = parseInt($(el).css('z-index')); | ||
if (!isNaN(zindex)) { | ||||
max_zindex = Math.max(max_zindex, zindex); | ||||
} | ||||
|
r14443 | }); | ||
// Start z-index of widget modals at 2000 | ||||
max_zindex = Math.max(max_zindex, 2000); | ||||
|
r16955 | |||
|
r14443 | $widget_modals.each(function (index, el){ | ||
|
r14466 | $el = $(el); | ||
|
r14443 | if (max_zindex == parseInt($el.css('z-index'))) { | ||
$el.css('z-index', max_zindex - 1); | ||||
} | ||||
}); | ||||
this.$window.css('z-index', max_zindex); | ||||
|
r14409 | }, | ||
|
r14507 | update_children: function(old_list, new_list) { | ||
|
r14609 | // Called when the children list is modified. | ||
|
r14598 | this.do_diff(old_list, | ||
new_list, | ||||
$.proxy(this.remove_child_model, this), | ||||
$.proxy(this.add_child_model, this)); | ||||
}, | ||||
remove_child_model: function(model) { | ||||
|
r14609 | // Called when a child is removed from children list. | ||
|
r17178 | this.pop_child_view(model).remove(); | ||
|
r14598 | }, | ||
add_child_model: function(model) { | ||||
|
r14609 | // Called when a child is added to children list. | ||
|
r14598 | var view = this.create_child_view(model); | ||
this.$body.append(view.$el); | ||||
|
r16660 | |||
// Trigger the displayed event if this model is displayed. | ||||
if (this.is_displayed) { | ||||
|
r17179 | view.trigger('displayed'); | ||
|
r16660 | } | ||
|
r14507 | }, | ||
|
r14409 | update: function(){ | ||
|
r14568 | // 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. | ||||
|
r14409 | var description = this.model.get('description'); | ||
|
r15330 | if (description.trim().length === 0) { | ||
|
r15329 | this.$title.html(" "); // Preserve title height | ||
|
r14409 | } else { | ||
|
r14663 | this.$title.text(description); | ||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$title.get(0)]); | ||
|
r14409 | } | ||
var button_text = this.model.get('button_text'); | ||||
|
r15330 | if (button_text.trim().length === 0) { | ||
|
r15329 | this.$show_button.html(" "); // Preserve button height | ||
|
r14409 | } else { | ||
|
r14663 | this.$show_button.text(button_text); | ||
|
r14409 | } | ||
if (!this._shown_once) { | ||||
this._shown_once = true; | ||||
this.show(); | ||||
} | ||||
|
r14676 | return PopupView.__super__.update.apply(this); | ||
|
r14409 | }, | ||
|
r14419 | _get_selector_element: function(selector) { | ||
|
r14609 | // Get an element view a 'special' jquery selector. (see widget.js) | ||
// | ||||
|
r14419 | // 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_to_style | ||||
if (selector.substring(0, 5) == 'modal') { | ||||
if (selector == 'modal') { | ||||
return this.$window; | ||||
} else { | ||||
return this.$window.find(selector.substring(6)); | ||||
} | ||||
} else { | ||||
|
r14676 | return PopupView.__super__._get_selector_element.apply(this, [selector]); | ||
|
r14419 | } | ||
}, | ||||
|
r14409 | }); | ||
|
r17198 | |||
return { | ||||
'ContainerView': ContainerView, | ||||
'PopupView': PopupView, | ||||
}; | ||||
|
r14409 | }); | ||