##// END OF EJS Templates
Font-awesome icons for toggle buttons
Sylvain Corlay -
Show More
@@ -307,17 +307,21 b' define(['
307 if (options === undefined || options.updated_view != this) {
307 if (options === undefined || options.updated_view != this) {
308 // Add missing items to the DOM.
308 // Add missing items to the DOM.
309 var items = this.model.get('_options_labels');
309 var items = this.model.get('_options_labels');
310 var icons = this.model.get('icons');
311 var previous_icons = this.model.previous('icons') || [];
310 var disabled = this.model.get('disabled');
312 var disabled = this.model.get('disabled');
311 var that = this;
313 var that = this;
312 var item_html;
314 var item_html;
313 _.each(items, function(item, index) {
315 _.each(items, function(item, index) {
314 if (item.trim().length === 0) {
316 if (item.trim().length === 0 && (!icons[index] ||
317 icons[index].trim().length === 0)) {
315 item_html = " ";
318 item_html = " ";
316 } else {
319 } else {
317 item_html = utils.escape_html(item);
320 item_html = utils.escape_html(item);
318 }
321 }
319 var item_query = '[data-value="' + encodeURIComponent(item) + '"]';
322 var item_query = '[data-value="' + encodeURIComponent(item) + '"]';
320 var $item_element = that.$buttongroup.find(item_query);
323 var $item_element = that.$buttongroup.find(item_query);
324 var $icon_element = $item_element.find('.fa');
321 if (!$item_element.length) {
325 if (!$item_element.length) {
322 $item_element = $('<button/>')
326 $item_element = $('<button/>')
323 .attr('type', 'button')
327 .attr('type', 'button')
@@ -329,6 +333,7 b' define(['
329 .attr('value', item)
333 .attr('value', item)
330 .on('click', $.proxy(that.handle_click, that));
334 .on('click', $.proxy(that.handle_click, that));
331 that.update_style_traits($item_element);
335 that.update_style_traits($item_element);
336 $icon_element = $('<i class="fa"></i>').prependTo($item_element);
332 }
337 }
333 if (that.model.get('selected_label') == item) {
338 if (that.model.get('selected_label') == item) {
334 $item_element.addClass('active');
339 $item_element.addClass('active');
@@ -336,7 +341,10 b' define(['
336 $item_element.removeClass('active');
341 $item_element.removeClass('active');
337 }
342 }
338 $item_element.prop('disabled', disabled);
343 $item_element.prop('disabled', disabled);
339 $item_element.attr('title', that.model.get('tooltips')[index]);
344 $item_element.attr('title', that.model.get('tooltips')[index]);
345 $icon_element
346 .removeClass(previous_icons[index])
347 .addClass(icons[index]);
340 });
348 });
341
349
342 // Remove items that no longer exist.
350 // Remove items that no longer exist.
@@ -201,6 +201,7 b' class ToggleButtons(_Selection):'
201 button can be toggled at any point in time."""
201 button can be toggled at any point in time."""
202 _view_name = Unicode('ToggleButtonsView', sync=True)
202 _view_name = Unicode('ToggleButtonsView', sync=True)
203 tooltips = List(Unicode(), sync=True)
203 tooltips = List(Unicode(), sync=True)
204 icons = List(Unicode(), sync=True)
204
205
205 button_style = CaselessStrEnum(
206 button_style = CaselessStrEnum(
206 values=['primary', 'success', 'info', 'warning', 'danger', ''],
207 values=['primary', 'success', 'info', 'warning', 'danger', ''],
General Comments 0
You need to be logged in to leave comments. Login now