Roo/bootstrap/TabPanel.js

/*
 * - LGPL
 *
 * TabPanel
 * 
 */

/**
 * @class Roo.bootstrap.TabPanel
 * @extends Roo.bootstrap.Component
 * Bootstrap TabPanel class
 * @cfg {Boolean} active panel active
 * @cfg {String} html panel content
 * @cfg {String} tabId  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
 * @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
 * @cfg {String} href click to link..
 * 
 * 
 * @constructor
 * Create a new TabPanel
 * @param {Object} config The config object
 */

Roo.bootstrap.TabPanel = function(config){
    Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
    this.addEvents({
        /**
	     * @event changed
	     * Fires when the active status changes
	     * @param {Roo.bootstrap.TabPanel} this
	     * @param {Boolean} state the new state
	    
         */
        'changed': true,
        /**
	     * @event beforedeactivate
	     * Fires before a tab is de-activated - can be used to do validation on a form.
	     * @param {Roo.bootstrap.TabPanel} this
	     * @return {Boolean} false if there is an error
	    
         */
        'beforedeactivate': true
     });

    this.tabId = this.tabId || Roo.id();

};

Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {

    active: false,
    html: false,
    tabId: false,
    navId : false,
    href : '',

    getAutoCreate : function(){


	var cfg = {
            tag: 'div',
            // item is needed for carousel - not sure if it has any effect otherwise
            cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
            html: this.html || ''
        };

        if(this.active){
            cfg.cls += ' active';
        }

        if(this.tabId){
            cfg.tabId = this.tabId;
        }



        return cfg;
    },

    initEvents:  function()
    {
        var p = this.parent();

        this.navId = this.navId || p.navId;

        if (typeof(this.navId) != 'undefined') {
            // not really needed.. but just in case.. parent should be a NavGroup.
            var tg = Roo.bootstrap.TabGroup.get(this.navId);

            tg.register(this);

            var i = tg.tabs.length - 1;

            if(this.active && tg.bullets > 0 && i < tg.bullets){
                tg.setActiveBullet(i);
            }
        }

        this.el.on('click', this.onClick, this);

        if(Roo.isTouch){
            this.el.on("touchstart", this.onTouchStart, this);
            this.el.on("touchmove", this.onTouchMove, this);
            this.el.on("touchend", this.onTouchEnd, this);
        }

    },

    onRender : function(ct, position)
    {
        Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
    },

    setActive : function(state)
    {
        Roo.log("panel - set active " + this.tabId + "=" + state);

        this.active = state;
        if (!state) {
            this.el.removeClass('active');

        } else  if (!this.el.hasClass('active')) {
            this.el.addClass('active');
        }

        this.fireEvent('changed', this, state);
    },

    onClick : function(e)
    {
        e.preventDefault();

        if(!this.href.length){
            return;
        }

        window.location.href = this.href;
    },

    startX : 0,
    startY : 0,
    endX : 0,
    endY : 0,
    swiping : false,

    onTouchStart : function(e)
    {
        this.swiping = false;

        this.startX = e.browserEvent.touches[0].clientX;
        this.startY = e.browserEvent.touches[0].clientY;
    },

    onTouchMove : function(e)
    {
        this.swiping = true;

        this.endX = e.browserEvent.touches[0].clientX;
        this.endY = e.browserEvent.touches[0].clientY;
    },

    onTouchEnd : function(e)
    {
        if(!this.swiping){
            this.onClick(e);
            return;
        }

        var tabGroup = this.parent();

        if(this.endX > this.startX){ // swiping right
            tabGroup.showPanelPrev();
            return;
        }

        if(this.startX > this.endX){ // swiping left
            tabGroup.showPanelNext();
            return;
        }
    }


});