new tab view

tab_view.js

require('app/app');

var get = Ember.get , set = Ember.set, setPath = Ember.setPath, getPath = Ember.getPath;

// Tab View was created because a general Tab did not
// work because the flip animation

// with z-index opacity feature won't work, because it shows the hidden z-index panels
App.TabMainView = Ember.Mixin.create({

  panes: {},

  willInsertElement: function() {

    this._super();
    var panes = get( this, 'panes');

    var viewName, childViews, len, view, idx;

    childViews = get(this, '_childViews');
    len = get(childViews, 'length');

    for(idx = 0; idx < len; idx++) {
      view = childViews[idx];
      viewName = get(view, 'viewName');

      if ( App.TabPaneView.detect(view ) ) {

        panes[viewName] = view;

      }
    }

    idx = 0;
    for( viewName in panes ) {

      panes[viewName].$().css("left", "100%");
      // if i don't hide the element, it will be shown when
      // the tab is presented on a flip animation
      panes[viewName].set('isVisible', false);

// with z-index
      //panes[viewName].$().css("z-index", 1);
      idx++;
    }


    var currentView = this.get('currentView');

// with z-index
//panes[currentView].$().css("z-index", 100);

    panes[currentView].set('isVisible', true);

  },

  didInsertElement: function() {

    this._super();
    this.observesCurrentView();
  },

  observesBeforeCurrentView: function() {

    this.show(false);

  }.observesBefore('currentView'),

  observesCurrentView: function() {

    this.show(true);

  }.observes('currentView'),

// TODO: report feedback to emberjs community, this is a ugly hack
  appendTabPaneView: function(view) {

    ember_assert('appending a not App.TabPaneView', App.TabPaneView.detect(view) );

    view.set('_parentView', this);
    this.get('_childViews').pushObject(view);

  },

  show: function(visible, pane) {

    if ( pane === undefined ) {
      var currentView = get(this, 'currentView');
      var panes = get( this, 'panes');
      pane = panes[currentView];
    }

    if ( pane ) {
      var left = (visible)? "0%" : "100%";
      pane.$().css("left", left);

// with z-index
      //var index = (visible)? "100" : "1";
      //pane.$().css("z-index", index);
    }

  },

  willPresentElement: function(){

  },

  didPresentElement: function(){
    
    var viewName;
    var panes = this.get('panes');

    for( viewName in panes ) {
      panes[viewName].set('isVisible', true);
    }

  }


});

App.TabPaneView = Ember.Mixin.create({
  classNames: ['tab_pane'],
  viewName: null



});