YUI TabView: "add tab" button stuck on the left side when all tabs are closed

Question

I'm using the YUI TabView widget for adding and removing tabs like described in yuilibrary-tabview-add-remove.

I've noticed a "bug" or maybe just a missing functionality: When you close all tabs and then add a new tab, the "add tab" button will get stuck on the left side of the tab bar, and all new tabs will be sorted on the right side. If you don't close all tabs, the button will always stay on the right side no matter what.

Now, I've added a workaround: When adding a new tab, the no-tabs state will be detected and the DOM li-item will be sorted with the jQuery after() method. Finally, the newly added tab will be selected:

onAddClick : function(e) {
  e.stopPropagation();
  var tabview = this.get('host'), input = this.getTabInput();
  tabview.add(input, input.index);

  // When previously no tabs present, move 'add button' to end after adding a new tab
  if ( tabview.size() == 1) {
    var addTabButton = $('#addTabButton');
    addTabButton.next().after(addTabButton);
    tabview.selectChild(0);
  };
}

However, I'm not happy with this solution. Might there be a more elegant way to solve this issue?

Answer 1

Your solution is definitely valid. I'd just write it using YUI because loading YUI and jQuery is really expensive in kweight and maintenance cost (you and your coworkers need to master two libraries).

One clean option is to create a node in the initializer and keep a reference to it so that you can move it around later:

initializer: function (config) {
  var tabview = this.get('host');

  // create the node before rendering and keep a reference to it
  this._addNode = Y.Node.create(this.ADD_TEMPLATE);

  tabview.after('render', this.afterRender, this);

  tabview.get('contentBox')
    .delegate('click', this.onAddClick, '.yui3-tab-add', this);
},

_appendAddNode: function () {
  var tabview = this.get('host');
  tabview.get('contentBox').one('> ul').append(this._addNode);
},

afterRender: function (e) {
  this._appendAddNode();
},

onAddClick: function (e) {
  e.stopPropagation();

  var tabview = this.get('host'), input = this.getTabInput();
  tabview.add(input, input.index);

  // When previously no tabs present, move 'add button' to end after adding a new tab
  if ( tabview.size() == 1) {
    // _addNode will already be present, but by using append() it'll be moved to the
    // last place in the list
    this._appendAddNode();
  };
}

Here's a working version: http://jsbin.com/iLiM/2/