##// END OF EJS Templates
unnecessary context variable specify
Sylvain Corlay -
Show More
@@ -1,290 +1,292 b''
1 // Copyright (c) IPython Development Team.
1 // Copyright (c) IPython Development Team.
2 // Distributed under the terms of the Modified BSD License.
2 // Distributed under the terms of the Modified BSD License.
3
3
4 define([
4 define([
5 "widgets/js/widget",
5 "widgets/js/widget",
6 "jqueryui",
6 "jqueryui",
7 "components/bootstrap/js/bootstrap.min",
7 "components/bootstrap/js/bootstrap.min",
8 ], function(widget, $){
8 ], function(widget, $){
9
9
10 var ContainerView = widget.DOMWidgetView.extend({
10 var ContainerView = widget.DOMWidgetView.extend({
11 render: function(){
11 render: function(){
12 // Called when view is rendered.
12 // Called when view is rendered.
13 this.$el.addClass('widget-container')
13 this.$el.addClass('widget-container')
14 .addClass('vbox');
14 .addClass('vbox');
15 this.update_children([], this.model.get('children'));
15 this.update_children([], this.model.get('children'));
16 this.model.on('change:children', function(model, value, options) {
16 this.model.on('change:children', function(model, value, options) {
17 this.update_children(model.previous('children'), value);
17 this.update_children(model.previous('children'), value);
18 }, this);
18 }, this);
19 this.update();
19 this.update();
20 },
20 },
21
21
22 update_children: function(old_list, new_list) {
22 update_children: function(old_list, new_list) {
23 // Called when the children list changes.
23 // Called when the children list changes.
24 this.do_diff(old_list,
24 this.do_diff(old_list,
25 new_list,
25 new_list,
26 $.proxy(this.remove_child_model, this),
26 $.proxy(this.remove_child_model, this),
27 $.proxy(this.add_child_model, this));
27 $.proxy(this.add_child_model, this));
28 },
28 },
29
29
30 remove_child_model: function(model) {
30 remove_child_model: function(model) {
31 // Called when a model is removed from the children list.
31 // Called when a model is removed from the children list.
32 this.pop_child_view(model).remove();
32 this.pop_child_view(model).remove();
33 },
33 },
34
34
35 add_child_model: function(model) {
35 add_child_model: function(model) {
36 // Called when a model is added to the children list.
36 // Called when a model is added to the children list.
37 var view = this.create_child_view(model);
37 var view = this.create_child_view(model);
38 this.$el.append(view.$el);
38 this.$el.append(view.$el);
39
39
40 // Trigger the displayed event once this model is displayed.
40 // Trigger the displayed event once this model is displayed.
41 this.once_displayed(function() { view.trigger('displayed'); }, this);
41 this.once_displayed(function() {
42 view.trigger('displayed');
43 });
42 },
44 },
43
45
44 update: function(){
46 update: function(){
45 // Update the contents of this view
47 // Update the contents of this view
46 //
48 //
47 // Called when the model is changed. The model may have been
49 // Called when the model is changed. The model may have been
48 // changed by another view or by a state update from the back-end.
50 // changed by another view or by a state update from the back-end.
49 return ContainerView.__super__.update.apply(this);
51 return ContainerView.__super__.update.apply(this);
50 },
52 },
51 });
53 });
52
54
53
55
54 var PopupView = widget.DOMWidgetView.extend({
56 var PopupView = widget.DOMWidgetView.extend({
55 render: function(){
57 render: function(){
56 // Called when view is rendered.
58 // Called when view is rendered.
57 var that = this;
59 var that = this;
58
60
59 this.$el.on("remove", function(){
61 this.$el.on("remove", function(){
60 that.$backdrop.remove();
62 that.$backdrop.remove();
61 });
63 });
62 this.$backdrop = $('<div />')
64 this.$backdrop = $('<div />')
63 .appendTo($('#notebook-container'))
65 .appendTo($('#notebook-container'))
64 .addClass('modal-dialog')
66 .addClass('modal-dialog')
65 .css('position', 'absolute')
67 .css('position', 'absolute')
66 .css('left', '0px')
68 .css('left', '0px')
67 .css('top', '0px');
69 .css('top', '0px');
68 this.$window = $('<div />')
70 this.$window = $('<div />')
69 .appendTo(this.$backdrop)
71 .appendTo(this.$backdrop)
70 .addClass('modal-content widget-modal')
72 .addClass('modal-content widget-modal')
71 .mousedown(function(){
73 .mousedown(function(){
72 that.bring_to_front();
74 that.bring_to_front();
73 });
75 });
74
76
75 // Set the elements array since the this.$window element is not child
77 // Set the elements array since the this.$window element is not child
76 // of this.$el and the parent widget manager or other widgets may
78 // of this.$el and the parent widget manager or other widgets may
77 // need to know about all of the top-level widgets. The IPython
79 // need to know about all of the top-level widgets. The IPython
78 // widget manager uses this to register the elements with the
80 // widget manager uses this to register the elements with the
79 // keyboard manager.
81 // keyboard manager.
80 this.additional_elements = [this.$window];
82 this.additional_elements = [this.$window];
81
83
82 this.$title_bar = $('<div />')
84 this.$title_bar = $('<div />')
83 .addClass('popover-title')
85 .addClass('popover-title')
84 .appendTo(this.$window)
86 .appendTo(this.$window)
85 .mousedown(function(){
87 .mousedown(function(){
86 that.bring_to_front();
88 that.bring_to_front();
87 });
89 });
88 this.$close = $('<button />')
90 this.$close = $('<button />')
89 .addClass('close icon-remove')
91 .addClass('close icon-remove')
90 .css('margin-left', '5px')
92 .css('margin-left', '5px')
91 .appendTo(this.$title_bar)
93 .appendTo(this.$title_bar)
92 .click(function(){
94 .click(function(){
93 that.hide();
95 that.hide();
94 event.stopPropagation();
96 event.stopPropagation();
95 });
97 });
96 this.$minimize = $('<button />')
98 this.$minimize = $('<button />')
97 .addClass('close icon-arrow-down')
99 .addClass('close icon-arrow-down')
98 .appendTo(this.$title_bar)
100 .appendTo(this.$title_bar)
99 .click(function(){
101 .click(function(){
100 that.popped_out = !that.popped_out;
102 that.popped_out = !that.popped_out;
101 if (!that.popped_out) {
103 if (!that.popped_out) {
102 that.$minimize
104 that.$minimize
103 .removeClass('icon-arrow-down')
105 .removeClass('icon-arrow-down')
104 .addClass('icon-arrow-up');
106 .addClass('icon-arrow-up');
105
107
106 that.$window
108 that.$window
107 .draggable('destroy')
109 .draggable('destroy')
108 .resizable('destroy')
110 .resizable('destroy')
109 .removeClass('widget-modal modal-content')
111 .removeClass('widget-modal modal-content')
110 .addClass('docked-widget-modal')
112 .addClass('docked-widget-modal')
111 .detach()
113 .detach()
112 .insertBefore(that.$show_button);
114 .insertBefore(that.$show_button);
113 that.$show_button.hide();
115 that.$show_button.hide();
114 that.$close.hide();
116 that.$close.hide();
115 } else {
117 } else {
116 that.$minimize
118 that.$minimize
117 .addClass('icon-arrow-down')
119 .addClass('icon-arrow-down')
118 .removeClass('icon-arrow-up');
120 .removeClass('icon-arrow-up');
119
121
120 that.$window
122 that.$window
121 .removeClass('docked-widget-modal')
123 .removeClass('docked-widget-modal')
122 .addClass('widget-modal modal-content')
124 .addClass('widget-modal modal-content')
123 .detach()
125 .detach()
124 .appendTo(that.$backdrop)
126 .appendTo(that.$backdrop)
125 .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
127 .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
126 .resizable()
128 .resizable()
127 .children('.ui-resizable-handle').show();
129 .children('.ui-resizable-handle').show();
128 that.show();
130 that.show();
129 that.$show_button.show();
131 that.$show_button.show();
130 that.$close.show();
132 that.$close.show();
131 }
133 }
132 event.stopPropagation();
134 event.stopPropagation();
133 });
135 });
134 this.$title = $('<div />')
136 this.$title = $('<div />')
135 .addClass('widget-modal-title')
137 .addClass('widget-modal-title')
136 .html("&nbsp;")
138 .html("&nbsp;")
137 .appendTo(this.$title_bar);
139 .appendTo(this.$title_bar);
138 this.$body = $('<div />')
140 this.$body = $('<div />')
139 .addClass('modal-body')
141 .addClass('modal-body')
140 .addClass('widget-modal-body')
142 .addClass('widget-modal-body')
141 .addClass('widget-container')
143 .addClass('widget-container')
142 .addClass('vbox')
144 .addClass('vbox')
143 .appendTo(this.$window);
145 .appendTo(this.$window);
144
146
145 this.$show_button = $('<button />')
147 this.$show_button = $('<button />')
146 .html("&nbsp;")
148 .html("&nbsp;")
147 .addClass('btn btn-info widget-modal-show')
149 .addClass('btn btn-info widget-modal-show')
148 .appendTo(this.$el)
150 .appendTo(this.$el)
149 .click(function(){
151 .click(function(){
150 that.show();
152 that.show();
151 });
153 });
152
154
153 this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
155 this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
154 this.$window.resizable();
156 this.$window.resizable();
155 this.$window.on('resize', function(){
157 this.$window.on('resize', function(){
156 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
158 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
157 });
159 });
158
160
159 this.$el_to_style = this.$body;
161 this.$el_to_style = this.$body;
160 this._shown_once = false;
162 this._shown_once = false;
161 this.popped_out = true;
163 this.popped_out = true;
162
164
163 this.update_children([], this.model.get('children'));
165 this.update_children([], this.model.get('children'));
164 this.model.on('change:children', function(model, value, options) {
166 this.model.on('change:children', function(model, value, options) {
165 this.update_children(model.previous('children'), value);
167 this.update_children(model.previous('children'), value);
166 }, this);
168 }, this);
167 this.update();
169 this.update();
168 },
170 },
169
171
170 hide: function() {
172 hide: function() {
171 // Called when the modal hide button is clicked.
173 // Called when the modal hide button is clicked.
172 this.$window.hide();
174 this.$window.hide();
173 this.$show_button.removeClass('btn-info');
175 this.$show_button.removeClass('btn-info');
174 },
176 },
175
177
176 show: function() {
178 show: function() {
177 // Called when the modal show button is clicked.
179 // Called when the modal show button is clicked.
178 this.$show_button.addClass('btn-info');
180 this.$show_button.addClass('btn-info');
179 this.$window.show();
181 this.$window.show();
180 if (this.popped_out) {
182 if (this.popped_out) {
181 this.$window.css("positon", "absolute");
183 this.$window.css("positon", "absolute");
182 this.$window.css("top", "0px");
184 this.$window.css("top", "0px");
183 this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) +
185 this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) +
184 $(window).scrollLeft()) + "px");
186 $(window).scrollLeft()) + "px");
185 this.bring_to_front();
187 this.bring_to_front();
186 }
188 }
187 },
189 },
188
190
189 bring_to_front: function() {
191 bring_to_front: function() {
190 // Make the modal top-most, z-ordered about the other modals.
192 // Make the modal top-most, z-ordered about the other modals.
191 var $widget_modals = $(".widget-modal");
193 var $widget_modals = $(".widget-modal");
192 var max_zindex = 0;
194 var max_zindex = 0;
193 $widget_modals.each(function (index, el){
195 $widget_modals.each(function (index, el){
194 var zindex = parseInt($(el).css('z-index'));
196 var zindex = parseInt($(el).css('z-index'));
195 if (!isNaN(zindex)) {
197 if (!isNaN(zindex)) {
196 max_zindex = Math.max(max_zindex, zindex);
198 max_zindex = Math.max(max_zindex, zindex);
197 }
199 }
198 });
200 });
199
201
200 // Start z-index of widget modals at 2000
202 // Start z-index of widget modals at 2000
201 max_zindex = Math.max(max_zindex, 2000);
203 max_zindex = Math.max(max_zindex, 2000);
202
204
203 $widget_modals.each(function (index, el){
205 $widget_modals.each(function (index, el){
204 $el = $(el);
206 $el = $(el);
205 if (max_zindex == parseInt($el.css('z-index'))) {
207 if (max_zindex == parseInt($el.css('z-index'))) {
206 $el.css('z-index', max_zindex - 1);
208 $el.css('z-index', max_zindex - 1);
207 }
209 }
208 });
210 });
209 this.$window.css('z-index', max_zindex);
211 this.$window.css('z-index', max_zindex);
210 },
212 },
211
213
212 update_children: function(old_list, new_list) {
214 update_children: function(old_list, new_list) {
213 // Called when the children list is modified.
215 // Called when the children list is modified.
214 this.do_diff(old_list,
216 this.do_diff(old_list,
215 new_list,
217 new_list,
216 $.proxy(this.remove_child_model, this),
218 $.proxy(this.remove_child_model, this),
217 $.proxy(this.add_child_model, this));
219 $.proxy(this.add_child_model, this));
218 },
220 },
219
221
220 remove_child_model: function(model) {
222 remove_child_model: function(model) {
221 // Called when a child is removed from children list.
223 // Called when a child is removed from children list.
222 this.pop_child_view(model).remove();
224 this.pop_child_view(model).remove();
223 },
225 },
224
226
225 add_child_model: function(model) {
227 add_child_model: function(model) {
226 // Called when a child is added to children list.
228 // Called when a child is added to children list.
227 var view = this.create_child_view(model);
229 var view = this.create_child_view(model);
228 this.$body.append(view.$el);
230 this.$body.append(view.$el);
229
231
230 // Trigger the displayed event once this model is displayed.
232 // Trigger the displayed event once this model is displayed.
231 this.once_displayed(function() {
233 this.once_displayed(function() {
232 view.trigger('displayed');
234 view.trigger('displayed');
233 }, this);
235 });
234 },
236 },
235
237
236 update: function(){
238 update: function(){
237 // Update the contents of this view
239 // Update the contents of this view
238 //
240 //
239 // Called when the model is changed. The model may have been
241 // Called when the model is changed. The model may have been
240 // changed by another view or by a state update from the back-end.
242 // changed by another view or by a state update from the back-end.
241 var description = this.model.get('description');
243 var description = this.model.get('description');
242 if (description.trim().length === 0) {
244 if (description.trim().length === 0) {
243 this.$title.html("&nbsp;"); // Preserve title height
245 this.$title.html("&nbsp;"); // Preserve title height
244 } else {
246 } else {
245 this.$title.text(description);
247 this.$title.text(description);
246 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$title.get(0)]);
248 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$title.get(0)]);
247 }
249 }
248
250
249 var button_text = this.model.get('button_text');
251 var button_text = this.model.get('button_text');
250 if (button_text.trim().length === 0) {
252 if (button_text.trim().length === 0) {
251 this.$show_button.html("&nbsp;"); // Preserve button height
253 this.$show_button.html("&nbsp;"); // Preserve button height
252 } else {
254 } else {
253 this.$show_button.text(button_text);
255 this.$show_button.text(button_text);
254 }
256 }
255
257
256 if (!this._shown_once) {
258 if (!this._shown_once) {
257 this._shown_once = true;
259 this._shown_once = true;
258 this.show();
260 this.show();
259 }
261 }
260
262
261 return PopupView.__super__.update.apply(this);
263 return PopupView.__super__.update.apply(this);
262 },
264 },
263
265
264 _get_selector_element: function(selector) {
266 _get_selector_element: function(selector) {
265 // Get an element view a 'special' jquery selector. (see widget.js)
267 // Get an element view a 'special' jquery selector. (see widget.js)
266 //
268 //
267 // Since the modal actually isn't within the $el in the DOM, we need to extend
269 // Since the modal actually isn't within the $el in the DOM, we need to extend
268 // the selector logic to allow the user to set css on the modal if need be.
270 // the selector logic to allow the user to set css on the modal if need be.
269 // The convention used is:
271 // The convention used is:
270 // "modal" - select the modal div
272 // "modal" - select the modal div
271 // "modal [selector]" - select element(s) within the modal div.
273 // "modal [selector]" - select element(s) within the modal div.
272 // "[selector]" - select elements within $el
274 // "[selector]" - select elements within $el
273 // "" - select the $el_to_style
275 // "" - select the $el_to_style
274 if (selector.substring(0, 5) == 'modal') {
276 if (selector.substring(0, 5) == 'modal') {
275 if (selector == 'modal') {
277 if (selector == 'modal') {
276 return this.$window;
278 return this.$window;
277 } else {
279 } else {
278 return this.$window.find(selector.substring(6));
280 return this.$window.find(selector.substring(6));
279 }
281 }
280 } else {
282 } else {
281 return PopupView.__super__._get_selector_element.apply(this, [selector]);
283 return PopupView.__super__._get_selector_element.apply(this, [selector]);
282 }
284 }
283 },
285 },
284 });
286 });
285
287
286 return {
288 return {
287 'ContainerView': ContainerView,
289 'ContainerView': ContainerView,
288 'PopupView': PopupView,
290 'PopupView': PopupView,
289 };
291 };
290 });
292 });
General Comments 0
You need to be logged in to leave comments. Login now