major doc changes

[roojs1] / Roo / bootstrap / TabGroup.js

diff --git a/Roo/bootstrap/TabGroup.js b/Roo/bootstrap/TabGroup.js
index e5f0467..a0913af 100644 (file)
--- a/Roo/bootstrap/TabGroup.js
+++ b/Roo/bootstrap/TabGroup.js
@@ -1,20 +1,14 @@
-/*
- * - LGPL
- *
- * column
- * 
- */
-
 /**
  * @class Roo.bootstrap.TabGroup
  * @extends Roo.bootstrap.Column
+ * @children Roo.bootstrap.TabPanel
  * Bootstrap Column class
  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
  * @cfg {Boolean} carousel true to make the group behave like a carousel
  * @cfg {Boolean} bullets show bullets for the panels
  * @cfg {Boolean} autoslide (true|false) auto slide .. default false
- * @cfg {Boolean} slideOnTouch (true|false) slide on touch .. default false
  * @cfg {Number} timer auto slide timer .. default 0 millisecond
+ * @cfg {Boolean} showarrow (true|false) show arrow default true
  * 
  * @constructor
  * Create a new TabGroup
@@ -40,6 +34,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
     autoslide : false,
     slideFn : false,
     slideOnTouch : false,
+    showarrow : true,
     
     getAutoCreate : function()
     {
@@ -51,10 +46,11 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
             cfg.cls += ' carousel slide';
             
             cfg.cn = [{
-               cls : 'carousel-inner'
+               cls : 'carousel-inner',
+               cn : []
             }];
         
-            if(this.bullets){
+            if(this.bullets  && !Roo.isTouch){
                 
                 var bullets = {
                     cls : 'carousel-bullets',
@@ -64,20 +60,42 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
                 if(this.bullets_cls){
                     bullets.cls = bullets.cls + ' ' + this.bullets_cls;
                 }
-                 /*
-                for (var i = 0; i < this.bullets; i++){
-                    bullets.cn.push({
-                        cls : 'bullet bullet-' + i
-                    });
-                }
-                */
+                
                 bullets.cn.push({
                     cls : 'clear'
                 });
                 
-                cfg.cn[0].cn = bullets;
+                cfg.cn[0].cn.push(bullets);
             }
             
+            if(this.showarrow){
+                cfg.cn[0].cn.push({
+                    tag : 'div',
+                    class : 'carousel-arrow',
+                    cn : [
+                        {
+                            tag : 'div',
+                            class : 'carousel-prev',
+                            cn : [
+                                {
+                                    tag : 'i',
+                                    class : 'fa fa-chevron-left'
+                                }
+                            ]
+                        },
+                        {
+                            tag : 'div',
+                            class : 'carousel-next',
+                            cn : [
+                                {
+                                    tag : 'i',
+                                    class : 'fa fa-chevron-right'
+                                }
+                            ]
+                        }
+                    ]
+                });
+            }
             
         }
         
@@ -86,9 +104,9 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
     
     initEvents:  function()
     {
-        if(Roo.isTouch && this.slideOnTouch){
-            this.el.on("touchstart", this.onTouchStart, this);
-        }
+//        if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
+//            this.el.on("touchstart", this.onTouchStart, this);
+//        }
         
         if(this.autoslide){
             var _this = this;
@@ -98,17 +116,24 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
             }, this.timer);
         }
         
-    },
-    
-    onTouchStart : function(e, el, o)
-    {
-        if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
-            return;
+        if(this.showarrow){
+            this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
+            this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
         }
         
-        this.showPanelNext();
+        
     },
     
+//    onTouchStart : function(e, el, o)
+//    {
+//        if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
+//            return;
+//        }
+//        
+//        this.showPanelNext();
+//    },
+    
+    
     getChildContainer : function()
     {
         return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
@@ -116,7 +141,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
     
     /**
     * register a Navigation item
-    * @param {Roo.bootstrap.NavItem} the navitem to add
+    * @param {Roo.bootstrap.nav.Item} the navitem to add
     */
     register : function(item)
     {
@@ -172,7 +197,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
     {
         if(this.transition || typeof(pan) == 'undefined'){
             Roo.log("waiting for the transitionend");
-            return;
+            return false;
         }
         
         if (typeof(pan) == 'number') {
@@ -204,22 +229,28 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
         
         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
             
+            //class="carousel-item carousel-item-next carousel-item-left"
+            
             this.transition = true;
             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
             var lr = dir == 'next' ? 'left' : 'right';
             pan.el.addClass(dir); // or prev
+            pan.el.addClass('carousel-item-' + dir); // or prev
             pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
             cur.el.addClass(lr); // or right
             pan.el.addClass(lr);
+            cur.el.addClass('carousel-item-' +lr); // or right
+            pan.el.addClass('carousel-item-' +lr);
+            
             
             var _this = this;
             cur.el.on('transitionend', function() {
                 Roo.log("trans end?");
                 
-                pan.el.removeClass([lr,dir]);
+                pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
                 pan.setActive(true);
                 
-                cur.el.removeClass([lr]);
+                cur.el.removeClass([lr, 'carousel-item-' + lr]);
                 cur.setActive(false);
                 
                 _this.transition = false;
@@ -330,7 +361,7 @@ Roo.apply(Roo.bootstrap.TabGroup, {
     groups: {},
      /**
     * register a Navigation Group
-    * @param {Roo.bootstrap.NavGroup} the navgroup to add
+    * @param {Roo.bootstrap.nav.Group} the navgroup to add
     */
     register : function(navgrp)
     {
@@ -341,7 +372,7 @@ Roo.apply(Roo.bootstrap.TabGroup, {
     * fetch a Navigation Group based on the navigation ID
     * if one does not exist , it will get created.
     * @param {string} the navgroup to add
-    * @returns {Roo.bootstrap.NavGroup} the navgroup 
+    * @returns {Roo.bootstrap.nav.Group} the navgroup 
     */
     get: function(navId) {
         if (typeof(this.groups[navId]) == 'undefined') {