##// END OF EJS Templates
Added support for multiple spaces in a row...
Jonathan Frederic -
Show More
@@ -1,54 +1,55
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2013 The IPython Development Team
2 // Copyright (C) 2013 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // ButtonWidget
9 // ButtonWidget
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 **/
15 **/
16
16
17 define(["notebook/js/widget"], function(){
17 define(["notebook/js/widget"], function(){
18
18
19 var ButtonWidgetModel = IPython.WidgetModel.extend({});
19 var ButtonWidgetModel = IPython.WidgetModel.extend({});
20 IPython.widget_manager.register_widget_model('ButtonWidgetModel', ButtonWidgetModel);
20 IPython.widget_manager.register_widget_model('ButtonWidgetModel', ButtonWidgetModel);
21
21
22 var ButtonView = IPython.WidgetView.extend({
22 var ButtonView = IPython.WidgetView.extend({
23
23
24 // Called when view is rendered.
24 // Called when view is rendered.
25 render : function(){
25 render : function(){
26 var that = this;
26 var that = this;
27 this.$el = $("<button />")
27 this.$el = $("<button />")
28 .addClass('btn')
28 .addClass('btn')
29 .click(function() {
29 .click(function() {
30 that.model.set('clicks', that.model.get('clicks') + 1);
30 that.model.set('clicks', that.model.get('clicks') + 1);
31 that.model.update_other_views(that);
31 that.model.update_other_views(that);
32 });
32 });
33
33
34 this.update(); // Set defaults.
34 this.update(); // Set defaults.
35 },
35 },
36
36
37 // Handles: Backend -> Frontend Sync
37 // Handles: Backend -> Frontend Sync
38 // Frontent -> Frontend Sync
38 // Frontent -> Frontend Sync
39 update : function(){
39 update : function(){
40 var description = this.model.get('description');
40 var description = this.model.get('description');
41 if (description.length==0) {
41 description.replace(' ', '&nbsp;')
42 this.$el.html(' '); // Preserve button height
42 if (description.length == 0) {
43 this.$el.html('&nbsp;'); // Preserve button height
43 } else {
44 } else {
44 this.$el.html(description);
45 this.$el.html(this.model.get('description'));
45 }
46 }
46
47
47 return IPython.WidgetView.prototype.update.call(this);
48 return IPython.WidgetView.prototype.update.call(this);
48 },
49 },
49
50
50 });
51 });
51
52
52 IPython.widget_manager.register_widget_view('ButtonView', ButtonView);
53 IPython.widget_manager.register_widget_view('ButtonView', ButtonView);
53
54
54 });
55 });
@@ -1,276 +1,276
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2013 The IPython Development Team
2 // Copyright (C) 2013 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // SelectionWidget
9 // SelectionWidget
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 **/
15 **/
16
16
17 define(["notebook/js/widget"], function(){
17 define(["notebook/js/widget"], function(){
18 var SelectionWidgetModel = IPython.WidgetModel.extend({});
18 var SelectionWidgetModel = IPython.WidgetModel.extend({});
19 IPython.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
19 IPython.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
20
20
21 var DropdownView = IPython.WidgetView.extend({
21 var DropdownView = IPython.WidgetView.extend({
22
22
23 // Called when view is rendered.
23 // Called when view is rendered.
24 render : function(){
24 render : function(){
25
25
26 this.$el
26 this.$el
27 .addClass('widget-hbox-single')
27 .addClass('widget-hbox-single')
28 .html('');
28 .html('');
29 this.$label = $('<div />')
29 this.$label = $('<div />')
30 .appendTo(this.$el)
30 .appendTo(this.$el)
31 .addClass('widget-hlabel')
31 .addClass('widget-hlabel')
32 .hide();
32 .hide();
33 this.$buttongroup = $('<div />')
33 this.$buttongroup = $('<div />')
34 .addClass('widget_item')
34 .addClass('widget_item')
35 .addClass('btn-group')
35 .addClass('btn-group')
36 .appendTo(this.$el);
36 .appendTo(this.$el);
37 this.$el_to_style = this.$buttongroup; // Set default element to style
37 this.$el_to_style = this.$buttongroup; // Set default element to style
38 this.$droplabel = $('<button />')
38 this.$droplabel = $('<button />')
39 .addClass('btn')
39 .addClass('btn')
40 .addClass('widget-combo-btn')
40 .addClass('widget-combo-btn')
41 .html('&nbsp;')
41 .html('&nbsp;')
42 .appendTo(this.$buttongroup);
42 .appendTo(this.$buttongroup);
43 this.$dropbutton = $('<button />')
43 this.$dropbutton = $('<button />')
44 .addClass('btn')
44 .addClass('btn')
45 .addClass('dropdown-toggle')
45 .addClass('dropdown-toggle')
46 .addClass('widget-combo-carrot-btn')
46 .addClass('widget-combo-carrot-btn')
47 .attr('data-toggle', 'dropdown')
47 .attr('data-toggle', 'dropdown')
48 .html('<span class="caret"></span>')
48 .html('<span class="caret"></span>')
49 .appendTo(this.$buttongroup);
49 .appendTo(this.$buttongroup);
50 this.$droplist = $('<ul />')
50 this.$droplist = $('<ul />')
51 .addClass('dropdown-menu')
51 .addClass('dropdown-menu')
52 .appendTo(this.$buttongroup);
52 .appendTo(this.$buttongroup);
53
53
54 // Set defaults.
54 // Set defaults.
55 this.update();
55 this.update();
56 },
56 },
57
57
58 // Handles: Backend -> Frontend Sync
58 // Handles: Backend -> Frontend Sync
59 // Frontent -> Frontend Sync
59 // Frontent -> Frontend Sync
60 update : function(){
60 update : function(){
61
61
62 var selected_item_text = this.model.get('value');
62 var selected_item_text = this.model.get('value');
63 selected_item_text.replace(' ', '');
63 selected_item_text.replace(' ', '&nbsp;');
64 if (selected_item_text == '') {
64 if (selected_item_text.length == 0) {
65 this.$droplabel.html('&nbsp;');
65 this.$droplabel.html('&nbsp;');
66 } else {
66 } else {
67 this.$droplabel.html(this.model.get('value'));
67 this.$droplabel.html(this.model.get('value'));
68 }
68 }
69
69
70 var items = this.model.get('values');
70 var items = this.model.get('values');
71 this.$droplist.html('');
71 this.$droplist.html('');
72 for (var index in items) {
72 for (var index in items) {
73 var that = this;
73 var that = this;
74 var item_button = $('<a href="#"/>')
74 var item_button = $('<a href="#"/>')
75 .html(items[index])
75 .html(items[index])
76 .on('click', function(e){
76 .on('click', function(e){
77 that.model.set('value', $(e.target).html(), this);
77 that.model.set('value', $(e.target).html(), this);
78 that.model.update_other_views(that);
78 that.model.update_other_views(that);
79 })
79 })
80
80
81 this.$droplist.append($('<li />').append(item_button))
81 this.$droplist.append($('<li />').append(item_button))
82 }
82 }
83
83
84 if (this.model.get('disabled')) {
84 if (this.model.get('disabled')) {
85 this.$buttongroup.attr('disabled','disabled');
85 this.$buttongroup.attr('disabled','disabled');
86 this.$droplabel.attr('disabled','disabled');
86 this.$droplabel.attr('disabled','disabled');
87 this.$dropbutton.attr('disabled','disabled');
87 this.$dropbutton.attr('disabled','disabled');
88 this.$droplist.attr('disabled','disabled');
88 this.$droplist.attr('disabled','disabled');
89 } else {
89 } else {
90 this.$buttongroup.removeAttr('disabled');
90 this.$buttongroup.removeAttr('disabled');
91 this.$droplabel.removeAttr('disabled');
91 this.$droplabel.removeAttr('disabled');
92 this.$dropbutton.removeAttr('disabled');
92 this.$dropbutton.removeAttr('disabled');
93 this.$droplist.removeAttr('disabled');
93 this.$droplist.removeAttr('disabled');
94 }
94 }
95
95
96 var description = this.model.get('description');
96 var description = this.model.get('description');
97 if (description.length == 0) {
97 if (description.length == 0) {
98 this.$label.hide();
98 this.$label.hide();
99 } else {
99 } else {
100 this.$label.html(description);
100 this.$label.html(description);
101 this.$label.show();
101 this.$label.show();
102 }
102 }
103 return IPython.WidgetView.prototype.update.call(this);
103 return IPython.WidgetView.prototype.update.call(this);
104 },
104 },
105
105
106 });
106 });
107
107
108 IPython.widget_manager.register_widget_view('DropdownView', DropdownView);
108 IPython.widget_manager.register_widget_view('DropdownView', DropdownView);
109
109
110 var RadioButtonsView = IPython.WidgetView.extend({
110 var RadioButtonsView = IPython.WidgetView.extend({
111
111
112 // Called when view is rendered.
112 // Called when view is rendered.
113 render : function(){
113 render : function(){
114 this.$el
114 this.$el
115 .addClass('widget-hbox')
115 .addClass('widget-hbox')
116 .html('');
116 .html('');
117 this.$label = $('<div />')
117 this.$label = $('<div />')
118 .appendTo(this.$el)
118 .appendTo(this.$el)
119 .addClass('widget-hlabel')
119 .addClass('widget-hlabel')
120 .hide();
120 .hide();
121 this.$container = $('<div />')
121 this.$container = $('<div />')
122 .appendTo(this.$el)
122 .appendTo(this.$el)
123 .addClass('widget-container')
123 .addClass('widget-container')
124 .addClass('vbox');
124 .addClass('vbox');
125 this.$el_to_style = this.$container; // Set default element to style
125 this.$el_to_style = this.$container; // Set default element to style
126 this.update();
126 this.update();
127 },
127 },
128
128
129 // Handles: Backend -> Frontend Sync
129 // Handles: Backend -> Frontend Sync
130 // Frontent -> Frontend Sync
130 // Frontent -> Frontend Sync
131 update : function(){
131 update : function(){
132
132
133 // Add missing items to the DOM.
133 // Add missing items to the DOM.
134 var items = this.model.get('values');
134 var items = this.model.get('values');
135 var disabled = this.model.get('disabled');
135 var disabled = this.model.get('disabled');
136 for (var index in items) {
136 for (var index in items) {
137 var item_query = ' :input[value="' + items[index] + '"]';
137 var item_query = ' :input[value="' + items[index] + '"]';
138 if (this.$el.find(item_query).length == 0) {
138 if (this.$el.find(item_query).length == 0) {
139 var $label = $('<label />')
139 var $label = $('<label />')
140 .addClass('radio')
140 .addClass('radio')
141 .html(items[index])
141 .html(items[index])
142 .appendTo(this.$container);
142 .appendTo(this.$container);
143
143
144 var that = this;
144 var that = this;
145 $('<input />')
145 $('<input />')
146 .attr('type', 'radio')
146 .attr('type', 'radio')
147 .addClass(this.model)
147 .addClass(this.model)
148 .val(items[index])
148 .val(items[index])
149 .prependTo($label)
149 .prependTo($label)
150 .on('click', function(e){
150 .on('click', function(e){
151 that.model.set('value', $(e.target).val(), this);
151 that.model.set('value', $(e.target).val(), this);
152 that.model.update_other_views(that);
152 that.model.update_other_views(that);
153 });
153 });
154 }
154 }
155
155
156 var $item_element = this.$container.find(item_query);
156 var $item_element = this.$container.find(item_query);
157 if (this.model.get('value') == items[index]) {
157 if (this.model.get('value') == items[index]) {
158 $item_element.prop('checked', true);
158 $item_element.prop('checked', true);
159 } else {
159 } else {
160 $item_element.prop('checked', false);
160 $item_element.prop('checked', false);
161 }
161 }
162 $item_element.prop('disabled', disabled);
162 $item_element.prop('disabled', disabled);
163 }
163 }
164
164
165 // Remove items that no longer exist.
165 // Remove items that no longer exist.
166 this.$container.find('input').each(function(i, obj) {
166 this.$container.find('input').each(function(i, obj) {
167 var value = $(obj).val();
167 var value = $(obj).val();
168 var found = false;
168 var found = false;
169 for (var index in items) {
169 for (var index in items) {
170 if (items[index] == value) {
170 if (items[index] == value) {
171 found = true;
171 found = true;
172 break;
172 break;
173 }
173 }
174 }
174 }
175
175
176 if (!found) {
176 if (!found) {
177 $(obj).parent().remove();
177 $(obj).parent().remove();
178 }
178 }
179 });
179 });
180
180
181 var description = this.model.get('description');
181 var description = this.model.get('description');
182 if (description.length == 0) {
182 if (description.length == 0) {
183 this.$label.hide();
183 this.$label.hide();
184 } else {
184 } else {
185 this.$label.html(description);
185 this.$label.html(description);
186 this.$label.show();
186 this.$label.show();
187 }
187 }
188 return IPython.WidgetView.prototype.update.call(this);
188 return IPython.WidgetView.prototype.update.call(this);
189 },
189 },
190
190
191 });
191 });
192
192
193 IPython.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
193 IPython.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
194
194
195
195
196 var ToggleButtonsView = IPython.WidgetView.extend({
196 var ToggleButtonsView = IPython.WidgetView.extend({
197
197
198 // Called when view is rendered.
198 // Called when view is rendered.
199 render : function(){
199 render : function(){
200 this.$el
200 this.$el
201 .addClass('widget-hbox-single')
201 .addClass('widget-hbox-single')
202 .html('');
202 .html('');
203 this.$label = $('<div />')
203 this.$label = $('<div />')
204 .appendTo(this.$el)
204 .appendTo(this.$el)
205 .addClass('widget-hlabel')
205 .addClass('widget-hlabel')
206 .hide();
206 .hide();
207 this.$buttongroup = $('<div />')
207 this.$buttongroup = $('<div />')
208 .addClass('btn-group')
208 .addClass('btn-group')
209 .attr('data-toggle', 'buttons-radio')
209 .attr('data-toggle', 'buttons-radio')
210 .appendTo(this.$el);
210 .appendTo(this.$el);
211 this.$el_to_style = this.$buttongroup; // Set default element to style
211 this.$el_to_style = this.$buttongroup; // Set default element to style
212 this.update();
212 this.update();
213 },
213 },
214
214
215 // Handles: Backend -> Frontend Sync
215 // Handles: Backend -> Frontend Sync
216 // Frontent -> Frontend Sync
216 // Frontent -> Frontend Sync
217 update : function(){
217 update : function(){
218
218
219 // Add missing items to the DOM.
219 // Add missing items to the DOM.
220 var items = this.model.get('values');
220 var items = this.model.get('values');
221 var disabled = this.model.get('disabled');
221 var disabled = this.model.get('disabled');
222 for (var index in items) {
222 for (var index in items) {
223 var item_query = ' :contains("' + items[index] + '")';
223 var item_query = ' :contains("' + items[index] + '")';
224 if (this.$buttongroup.find(item_query).length == 0) {
224 if (this.$buttongroup.find(item_query).length == 0) {
225
225
226 var that = this;
226 var that = this;
227 $('<button />')
227 $('<button />')
228 .attr('type', 'button')
228 .attr('type', 'button')
229 .addClass('btn')
229 .addClass('btn')
230 .html(items[index])
230 .html(items[index])
231 .appendTo(this.$buttongroup)
231 .appendTo(this.$buttongroup)
232 .on('click', function(e){
232 .on('click', function(e){
233 that.model.set('value', $(e.target).html(), this);
233 that.model.set('value', $(e.target).html(), this);
234 that.model.update_other_views(that);
234 that.model.update_other_views(that);
235 });
235 });
236 }
236 }
237
237
238 var $item_element = this.$buttongroup.find(item_query);
238 var $item_element = this.$buttongroup.find(item_query);
239 if (this.model.get('value') == items[index]) {
239 if (this.model.get('value') == items[index]) {
240 $item_element.addClass('active');
240 $item_element.addClass('active');
241 } else {
241 } else {
242 $item_element.removeClass('active');
242 $item_element.removeClass('active');
243 }
243 }
244 $item_element.prop('disabled', disabled);
244 $item_element.prop('disabled', disabled);
245 }
245 }
246
246
247 // Remove items that no longer exist.
247 // Remove items that no longer exist.
248 this.$buttongroup.find('button').each(function(i, obj) {
248 this.$buttongroup.find('button').each(function(i, obj) {
249 var value = $(obj).html();
249 var value = $(obj).html();
250 var found = false;
250 var found = false;
251 for (var index in items) {
251 for (var index in items) {
252 if (items[index] == value) {
252 if (items[index] == value) {
253 found = true;
253 found = true;
254 break;
254 break;
255 }
255 }
256 }
256 }
257
257
258 if (!found) {
258 if (!found) {
259 $(obj).remove();
259 $(obj).remove();
260 }
260 }
261 });
261 });
262
262
263 var description = this.model.get('description');
263 var description = this.model.get('description');
264 if (description.length == 0) {
264 if (description.length == 0) {
265 this.$label.hide();
265 this.$label.hide();
266 } else {
266 } else {
267 this.$label.html(description);
267 this.$label.html(description);
268 this.$label.show();
268 this.$label.show();
269 }
269 }
270 return IPython.WidgetView.prototype.update.call(this);
270 return IPython.WidgetView.prototype.update.call(this);
271 },
271 },
272
272
273 });
273 });
274
274
275 IPython.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
275 IPython.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
276 });
276 });
General Comments 0
You need to be logged in to leave comments. Login now