widget_box.js
344 lines
| 13.3 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", | ||
|
r18895 | "base/js/utils", | ||
|
r17312 | "bootstrap", | ||
|
r18895 | ], function(widget, $, utils){ | ||
|
r14366 | |||
|
r17637 | var BoxView = widget.DOMWidgetView.extend({ | ||
|
r17349 | initialize: function(){ | ||
// Public constructor | ||||
|
r17637 | BoxView.__super__.initialize.apply(this, arguments); | ||
|
r18996 | this.children_views = new widget.ViewList(this.add_child_model, null, this); | ||
this.listenTo(this.model, 'change:children', function(model, value) { | ||||
this.children_views.update(value); | ||||
|
r14503 | }, this); | ||
|
r18996 | this.listenTo(this.model, 'change:overflow_x', function(model, value) { | ||
|
r17727 | this.update_overflow_x(); | ||
}, this); | ||||
|
r18996 | this.listenTo(this.model, 'change:overflow_y', function(model, value) { | ||
|
r17727 | this.update_overflow_y(); | ||
}, this); | ||||
|
r18996 | this.listenTo(this.model, 'change:box_style', function(model, value) { | ||
|
r17728 | this.update_box_style(); | ||
}, this); | ||||
|
r14503 | }, | ||
|
r17349 | |||
|
r17722 | update_attr: function(name, value) { | ||
// Set a css attr of the widget view. | ||||
this.$box.css(name, value); | ||||
}, | ||||
|
r17349 | render: function(){ | ||
// Called when view is rendered. | ||||
|
r17663 | this.$box = this.$el; | ||
|
r17661 | this.$box.addClass('widget-box'); | ||
|
r18996 | this.children_views.update(this.model.get('children')); | ||
|
r17727 | this.update_overflow_x(); | ||
this.update_overflow_y(); | ||||
|
r17728 | this.update_box_style(''); | ||
|
r17727 | }, | ||
update_overflow_x: function() { | ||||
// Called when the x-axis overflow setting is changed. | ||||
this.$box.css('overflow-x', this.model.get('overflow_x')); | ||||
}, | ||||
update_overflow_y: function() { | ||||
// Called when the y-axis overflow setting is changed. | ||||
this.$box.css('overflow-y', this.model.get('overflow_y')); | ||||
|
r14503 | }, | ||
|
r17728 | |||
update_box_style: function(previous_trait_value) { | ||||
var class_map = { | ||||
success: ['alert', 'alert-success'], | ||||
info: ['alert', 'alert-info'], | ||||
warning: ['alert', 'alert-warning'], | ||||
danger: ['alert', 'alert-danger'] | ||||
}; | ||||
this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box); | ||||
}, | ||||
|
r14503 | |||
|
r14598 | add_child_model: function(model) { | ||
|
r14609 | // Called when a model is added to the children list. | ||
|
r18142 | var that = this; | ||
|
r18883 | var dummy = $('<div/>'); | ||
that.$box.append(dummy); | ||||
|
r18896 | return this.create_child_view(model).then(function(view) { | ||
|
r18888 | dummy.replaceWith(view.el); | ||
|
r16660 | |||
|
r18142 | // Trigger the displayed event of the child view. | ||
that.after_displayed(function() { | ||||
view.trigger('displayed'); | ||||
}); | ||||
|
r18896 | return view; | ||
|
r19080 | }).catch(utils.reject("Couldn't add child view to box", true)); | ||
|
r14263 | }, | ||
|
r18996 | |||
remove: function() { | ||||
|
r19066 | // We remove this widget before removing the children as an optimization | ||
// we want to remove the entire container from the DOM first before | ||||
// removing each individual child separately. | ||||
|
r18996 | BoxView.__super__.remove.apply(this, arguments); | ||
this.children_views.remove(); | ||||
}, | ||||
|
r14263 | }); | ||
|
r17596 | |||
|
r17637 | var FlexBoxView = BoxView.extend({ | ||
|
r17596 | render: function(){ | ||
|
r17637 | FlexBoxView.__super__.render.apply(this); | ||
|
r18996 | this.listenTo(this.model, 'change:orientation', this.update_orientation, this); | ||
this.listenTo(this.model, 'change:flex', this._flex_changed, this); | ||||
this.listenTo(this.model, 'change:pack', this._pack_changed, this); | ||||
this.listenTo(this.model, 'change:align', this._align_changed, this); | ||||
|
r17596 | this._flex_changed(); | ||
this._pack_changed(); | ||||
this._align_changed(); | ||||
|
r17688 | this.update_orientation(); | ||
|
r17600 | }, | ||
update_orientation: function(){ | ||||
var orientation = this.model.get("orientation"); | ||||
if (orientation == "vertical") { | ||||
|
r17661 | this.$box.removeClass("hbox").addClass("vbox"); | ||
|
r17600 | } else { | ||
|
r17661 | this.$box.removeClass("vbox").addClass("hbox"); | ||
|
r17600 | } | ||
|
r17596 | }, | ||
_flex_changed: function(){ | ||||
if (this.model.previous('flex')) { | ||||
|
r17661 | this.$box.removeClass('box-flex' + this.model.previous('flex')); | ||
|
r17596 | } | ||
|
r17661 | this.$box.addClass('box-flex' + this.model.get('flex')); | ||
|
r17596 | }, | ||
_pack_changed: function(){ | ||||
if (this.model.previous('pack')) { | ||||
|
r17661 | this.$box.removeClass(this.model.previous('pack')); | ||
|
r17596 | } | ||
|
r17661 | this.$box.addClass(this.model.get('pack')); | ||
|
r17596 | }, | ||
_align_changed: function(){ | ||||
if (this.model.previous('align')) { | ||||
|
r17661 | this.$box.removeClass('align-' + this.model.previous('align')); | ||
|
r17596 | } | ||
|
r17661 | this.$box.addClass('align-' + this.model.get('align')); | ||
|
r17596 | }, | ||
}); | ||||
|
r17660 | var PopupView = BoxView.extend({ | ||
|
r17661 | |||
|
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 />') | ||
|
r17413 | .addClass('close fa fa-remove') | ||
|
r14443 | .css('margin-left', '5px') | ||
|
r14410 | .appendTo(this.$title_bar) | ||
|
r14409 | .click(function(){ | ||
that.hide(); | ||||
event.stopPropagation(); | ||||
}); | ||||
|
r14443 | this.$minimize = $('<button />') | ||
|
r17413 | .addClass('close fa fa-arrow-down') | ||
|
r14443 | .appendTo(this.$title_bar) | ||
.click(function(){ | ||||
that.popped_out = !that.popped_out; | ||||
if (!that.popped_out) { | ||||
that.$minimize | ||||
|
r17947 | .removeClass('fa-arrow-down') | ||
.addClass('fa-arrow-up'); | ||||
|
r14443 | |||
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 | ||||
|
r17947 | .addClass('fa-arrow-down') | ||
.removeClass('fa-arrow-up'); | ||||
|
r14443 | |||
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(" ") | ||
|
r17661 | .appendTo(this.$title_bar); | ||
this.$box = $('<div />') | ||||
|
r14409 | .addClass('modal-body') | ||
|
r14411 | .addClass('widget-modal-body') | ||
|
r17658 | .addClass('widget-box') | ||
|
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(){ | ||
|
r17661 | that.$box.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight()); | ||
|
r14466 | }); | ||
|
r14410 | |||
|
r14409 | this._shown_once = false; | ||
|
r14443 | this.popped_out = true; | ||
|
r14754 | |||
|
r18996 | this.children_views.update(this.model.get('children')) | ||
|
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 | }, | ||
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 | ||||
|
r17420 | // "" - select the $el | ||
|
r14419 | 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 { | ||||
|
r17637 | 'BoxView': BoxView, | ||
|
r17198 | 'PopupView': PopupView, | ||
|
r17637 | 'FlexBoxView': FlexBoxView, | ||
|
r17198 | }; | ||
|
r14409 | }); | ||