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