##// END OF EJS Templates
Moved flexible box model attrs out of Container and Modal js...
Jonathan Frederic -
Show More
@@ -1,188 +1,172 b''
1 1 //----------------------------------------------------------------------------
2 2 // Copyright (C) 2013 The IPython Development Team
3 3 //
4 4 // Distributed under the terms of the BSD License. The full license is in
5 5 // the file COPYING, distributed as part of this software.
6 6 //----------------------------------------------------------------------------
7 7
8 8 //============================================================================
9 9 // ContainerWidget
10 10 //============================================================================
11 11
12 12 /**
13 13 * @module IPython
14 14 * @namespace IPython
15 15 **/
16 16
17 17 define(["notebook/js/widget"], function(widget_manager) {
18
19 var set_flex_property = function(element, property_name, enabled) {
20 if (enabled) {
21 element.addClass(property_name);
22 } else {
23 element.removeClass(property_name);
24 }
25 };
26
27 var set_flex_properties = function(context, element) {
28
29 // Apply flexible box model properties by adding and removing
30 // corrosponding CSS classes.
31 // Defined in IPython/html/static/base/less/flexbox.less
32 set_flex_property(element, 'vbox', context.model.get('_vbox'));
33 set_flex_property(element, 'hbox', context.model.get('_hbox'));
34 set_flex_property(element, 'start', context.model.get('_pack_start'));
35 set_flex_property(element, 'center', context.model.get('_pack_center'));
36 set_flex_property(element, 'end', context.model.get('_pack_end'));
37 set_flex_property(element, 'align-start', context.model.get('_align_start'));
38 set_flex_property(element, 'align-center', context.model.get('_align_center'));
39 set_flex_property(element, 'align-end', context.model.get('_align_end'));
40 set_flex_property(element, 'box-flex0', context.model.get('_flex0'));
41 set_flex_property(element, 'box-flex1', context.model.get('_flex1'));
42 set_flex_property(element, 'box-flex2', context.model.get('_flex2'));
43 };
44
45
46
18 47 var ContainerModel = IPython.WidgetModel.extend({});
19 48 widget_manager.register_widget_model('ContainerWidgetModel', ContainerModel);
20 49
21 50 var ContainerView = IPython.WidgetView.extend({
22 51
23 52 render: function(){
24 53 this.$el
25 54 .addClass('widget-container');
26 55 },
27 56
28 57 update: function(){
29
30 // Apply flexible box model properties by adding and removing
31 // corrosponding CSS classes.
32 // Defined in IPython/html/static/base/less/flexbox.less
33 this.set_flex_property('vbox', this.model.get('_vbox'));
34 this.set_flex_property('hbox', this.model.get('_hbox'));
35 this.set_flex_property('start', this.model.get('_pack_start'));
36 this.set_flex_property('center', this.model.get('_pack_center'));
37 this.set_flex_property('end', this.model.get('_pack_end'));
38 this.set_flex_property('align-start', this.model.get('_align_start'));
39 this.set_flex_property('align-center', this.model.get('_align_center'));
40 this.set_flex_property('align-end', this.model.get('_align_end'));
41 this.set_flex_property('box-flex0', this.model.get('_flex0'));
42 this.set_flex_property('box-flex1', this.model.get('_flex1'));
43 this.set_flex_property('box-flex2', this.model.get('_flex2'));
44
58 set_flex_properties(this, this.$el);
45 59 return IPython.WidgetView.prototype.update.call(this);
46 60 },
47 61
48 set_flex_property: function(property_name, enabled) {
49 if (enabled) {
50 this.$el.addClass(property_name);
51 } else {
52 this.$el.removeClass(property_name);
53 }
54 },
55
56 62 display_child: function(view) {
57 63 this.$el.append(view.$el);
58 64 },
59 65 });
60 66
61 67 widget_manager.register_widget_view('ContainerView', ContainerView);
62 68
63 69
64 70 var ModalView = IPython.WidgetView.extend({
65 71
66 72 render: function(){
67 73 var that = this;
68 74 this.$el
69 75 .html('')
70 76 .on("remove", function(){
71 77 that.$window.remove();
72 78 });
73 79 this.$window = $('<div />')
74 80 .addClass('modal widget-modal')
75 81 .appendTo($('#notebook-container'));
76 82 this.$title_bar = $('<div />')
77 83 .addClass('popover-title')
78 84 .appendTo(this.$window);
79 85 var that = this;
80 86 $('<button />')
81 87 .addClass('close')
82 88 .html('&times;')
83 89 .appendTo(this.$title_bar)
84 90 .click(function(){
85 91 that.hide();
86 92 event.stopPropagation();
87 93 });
88 94 this.$title = $('<div />')
89 95 .addClass('widget-modal-title')
90 96 .html('&nbsp;')
91 97 .appendTo(this.$title_bar);
92 98 this.$body = $('<div />')
93 99 .addClass('modal-body')
94 100 .addClass('widget-modal-body')
95 101 .addClass('widget-container')
96 102 .appendTo(this.$window);
97 103
98 104 this.$show_button = $('<button />')
99 105 .html('&nbsp;')
100 106 .addClass('btn btn-info widget-modal-show')
101 107 .appendTo(this.$el)
102 108 .click(function(){
103 109 that.show();
104 110 });
105 111
106 112 this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
107 113 this.$window.resizable();
108 114 this.$window.on('resize', function(){
109 115 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
110 116 })
111 117
112 118 this._shown_once = false;
113 119 },
114 120
115 121 hide: function() {
116 122 this.$window.hide();
117 123 this.$show_button.removeClass('btn-info');
118 124 },
119 125
120 126 show: function() {
121 127 this.$window.show();
122 128 this.$show_button.addClass('btn-info');
123 129 this.$window.css("top", Math.max(0, (($(window).height() - this.$window.outerHeight()) / 2) +
124 130 $(window).scrollTop()) + "px");
125 131 this.$window.css("left", Math.max(0, (($(window).width() - this.$window.outerWidth()) / 2) +
126 132 $(window).scrollLeft()) + "px");
127 133 },
128 134
129 135 update: function(){
130
131 // Apply flexible box model properties by adding and removing
132 // corrosponding CSS classes.
133 // Defined in IPython/html/static/base/less/flexbox.less
134 this.set_flex_property('vbox', this.model.get('_vbox'));
135 this.set_flex_property('hbox', this.model.get('_hbox'));
136 this.set_flex_property('start', this.model.get('_pack_start'));
137 this.set_flex_property('center', this.model.get('_pack_center'));
138 this.set_flex_property('end', this.model.get('_pack_end'));
139 this.set_flex_property('align-start', this.model.get('_align_start'));
140 this.set_flex_property('align-center', this.model.get('_align_center'));
141 this.set_flex_property('align-end', this.model.get('_align_end'));
142 this.set_flex_property('box-flex0', this.model.get('_flex0'));
143 this.set_flex_property('box-flex1', this.model.get('_flex1'));
144 this.set_flex_property('box-flex2', this.model.get('_flex2'));
136 set_flex_properties(this, this.$body);
145 137
146 138 var description = this.model.get('description');
147 139 description = description.replace(/ /g, '&nbsp;', 'm');
148 140 description = description.replace(/\n/g, '<br>\n', 'm');
149 141 if (description.length == 0) {
150 142 this.$title.html('&nbsp;'); // Preserve title height
151 143 } else {
152 144 this.$title.html(description);
153 145 }
154 146
155 147 var button_text = this.model.get('button_text');
156 148 button_text = button_text.replace(/ /g, '&nbsp;', 'm');
157 149 button_text = button_text.replace(/\n/g, '<br>\n', 'm');
158 150 if (button_text.length == 0) {
159 151 this.$show_button.html('&nbsp;'); // Preserve button height
160 152 } else {
161 153 this.$show_button.html(button_text);
162 154 }
163 155
164 156 if (!this._shown_once) {
165 157 this._shown_once = true;
166 158 this.show();
167 159 }
168 160
169 161 return IPython.WidgetView.prototype.update.call(this);
170 162 },
171 163
172 set_flex_property: function(property_name, enabled) {
173 if (enabled) {
174 this.$body.addClass(property_name);
175 } else {
176 this.$body.removeClass(property_name);
177 }
178 },
179
180 164 display_child: function(view) {
181 165 this.$body.append(view.$el);
182 166 },
183 167
184 168
185 169 });
186 170
187 171 widget_manager.register_widget_view('ModalView', ModalView);
188 172 });
General Comments 0
You need to be logged in to leave comments. Login now