1 <html><head><title>../roojs1/Roo/bootstrap/TabGroup.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
9 * @class Roo.bootstrap.TabGroup
10 * @extends Roo.bootstrap.Column
11 * Bootstrap Column class
12 * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
13 * @cfg {Boolean} carousel true to make the group behave like a carousel
14 * @cfg {Boolean} bullets show bullets for the panels
15 * @cfg {Boolean} autoslide (true|false) auto slide .. default false
16 * @cfg {Number} timer auto slide timer .. default 0 millisecond
17 * @cfg {Boolean} showarrow (true|false) show arrow default true
20 * Create a new TabGroup
21 * @param {Object} config The config object
24 </span><span class="jsdoc-var">Roo.bootstrap.TabGroup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
25 </span><span class="jsdoc-var">Roo.bootstrap.TabGroup.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
26 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.navId</span><span class="jsdoc-syntax">) {
27 </span><span class="jsdoc-var">this.navId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
29 </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= [];
30 </span><span class="jsdoc-var">Roo.bootstrap.TabGroup.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
34 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.TabGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Column</span><span class="jsdoc-syntax">, {
36 </span><span class="jsdoc-var">carousel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
37 </span><span class="jsdoc-var">transition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-var">bullets </span><span class="jsdoc-syntax">: 0,
39 </span><span class="jsdoc-var">timer </span><span class="jsdoc-syntax">: 0,
40 </span><span class="jsdoc-var">autoslide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
41 </span><span class="jsdoc-var">slideFn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
42 </span><span class="jsdoc-var">slideOnTouch </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
43 </span><span class="jsdoc-var">showarrow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
45 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
47 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">Roo.bootstrap.TabGroup.superclass.getAutoCreate.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
49 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' tab-content'</span><span class="jsdoc-syntax">;
51 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.carousel</span><span class="jsdoc-syntax">) {
52 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' carousel slide'</span><span class="jsdoc-syntax">;
54 </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [{
55 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-inner'</span><span class="jsdoc-syntax">,
56 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
59 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bullets </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
61 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bullets </span><span class="jsdoc-syntax">= {
62 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-bullets'</span><span class="jsdoc-syntax">,
63 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
66 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bullets_cls</span><span class="jsdoc-syntax">){
67 </span><span class="jsdoc-var">bullets.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">bullets.cls </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.bullets_cls</span><span class="jsdoc-syntax">;
70 </span><span class="jsdoc-var">bullets.cn.push</span><span class="jsdoc-syntax">({
71 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'clear'
72 </span><span class="jsdoc-syntax">});
74 </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bullets</span><span class="jsdoc-syntax">);
77 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showarrow</span><span class="jsdoc-syntax">){
78 </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
79 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
80 </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-arrow'</span><span class="jsdoc-syntax">,
81 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
83 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
84 </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-prev'</span><span class="jsdoc-syntax">,
85 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
87 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
88 </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-chevron-left'
89 </span><span class="jsdoc-syntax">}
93 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
94 </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-next'</span><span class="jsdoc-syntax">,
95 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
97 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
98 </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-chevron-right'
99 </span><span class="jsdoc-syntax">}
108 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
111 </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
113 </span><span class="jsdoc-comment">// if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
114 // this.el.on("touchstart", this.onTouchStart, this);
117 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">){
118 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
120 </span><span class="jsdoc-var">this.slideFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
121 </span><span class="jsdoc-var">_this.showPanelNext</span><span class="jsdoc-syntax">();
122 }, </span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
125 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showarrow</span><span class="jsdoc-syntax">){
126 </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-prev'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showPanelPrev</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
127 </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-next'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showPanelNext</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
133 </span><span class="jsdoc-comment">// onTouchStart : function(e, el, o)
135 // if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
139 // this.showPanelNext();
143 </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
145 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.carousel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-inner'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
148 </span><span class="jsdoc-comment">/**
149 * register a Navigation item
150 * @param {Roo.bootstrap.NavItem} the navitem to add
152 </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">)
154 </span><span class="jsdoc-var">this.tabs.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
155 </span><span class="jsdoc-var">item.navId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.navId</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// not really needed..
156 </span><span class="jsdoc-var">this.addBullet</span><span class="jsdoc-syntax">();
160 </span><span class="jsdoc-var">getActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
162 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
163 </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) {
164 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.active</span><span class="jsdoc-syntax">) {
165 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
166 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
168 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
170 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
173 </span><span class="jsdoc-var">getPanelByName </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">)
175 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
176 </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) {
177 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.tabId </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">) {
178 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
179 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
181 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
183 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
185 </span><span class="jsdoc-var">indexOfPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">)
187 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
188 </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
189 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.tabId </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">p.tabId</span><span class="jsdoc-syntax">) {
190 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
191 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
193 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
195 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
197 </span><span class="jsdoc-comment">/**
198 * show a specific panel
199 * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
200 * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
202 </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">)
204 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.transition </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
205 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"waiting for the transitionend"</span><span class="jsdoc-syntax">);
206 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
209 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">) {
210 </span><span class="jsdoc-var">pan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">];
213 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
214 </span><span class="jsdoc-var">pan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanelByName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">);
217 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cur </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">();
219 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">pan </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">cur</span><span class="jsdoc-syntax">){
220 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pan or acitve pan is undefined'</span><span class="jsdoc-syntax">);
221 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
224 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan.tabId </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.tabId</span><span class="jsdoc-syntax">) {
225 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
228 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">cur.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforedeactivate'</span><span class="jsdoc-syntax">)) {
229 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
232 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bullets </span><span class="jsdoc-syntax">> 0 && !</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
233 </span><span class="jsdoc-var">this.setActiveBullet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">));
236 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.carousel </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom.style.transition</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
238 </span><span class="jsdoc-var">this.transition </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
239 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dir </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) > </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cur</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-string">'next' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'prev'</span><span class="jsdoc-syntax">;
240 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dir </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'next' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'left' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">;
241 </span><span class="jsdoc-var">pan.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// or prev
242 </span><span class="jsdoc-var">pan.el.dom.offsetWidth</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// find the offset with - causing a reflow?
243 </span><span class="jsdoc-var">cur.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// or right
244 </span><span class="jsdoc-var">pan.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">);
246 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
247 </span><span class="jsdoc-var">cur.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'transitionend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
248 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"trans end?"</span><span class="jsdoc-syntax">);
250 </span><span class="jsdoc-var">pan.el.removeClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">]);
251 </span><span class="jsdoc-var">pan.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
253 </span><span class="jsdoc-var">cur.el.removeClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]);
254 </span><span class="jsdoc-var">cur.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
256 </span><span class="jsdoc-var">_this.transition </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
258 }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, { </span><span class="jsdoc-var">single</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">} );
260 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
263 </span><span class="jsdoc-var">cur.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
264 </span><span class="jsdoc-var">pan.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
266 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
269 </span><span class="jsdoc-var">showPanelNext </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
271 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">());
273 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">>= </span><span class="jsdoc-var">this.tabs.length </span><span class="jsdoc-syntax">- 1 && !</span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
274 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
277 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">>= </span><span class="jsdoc-var">this.tabs.length </span><span class="jsdoc-syntax">- 1 && </span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
278 </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= -1;
281 </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+1]);
284 </span><span class="jsdoc-var">showPanelPrev </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
286 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">());
288 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< 1 && !</span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
289 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
292 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< 1 && </span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
293 </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.length</span><span class="jsdoc-syntax">;
296 </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">-1]);
300 </span><span class="jsdoc-var">addBullet</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
302 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bullets </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
303 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
305 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-bullets'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
306 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-bullets .bullet'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getCount</span><span class="jsdoc-syntax">() ;
307 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bullet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ctr.createChild</span><span class="jsdoc-syntax">({
308 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'bullet bullet-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i
309 </span><span class="jsdoc-syntax">},</span><span class="jsdoc-var">ctr.dom.lastChild</span><span class="jsdoc-syntax">);
312 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
314 </span><span class="jsdoc-var">bullet.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ii</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
316 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
318 </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ii</span><span class="jsdoc-syntax">);
320 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoslide </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.slideFn</span><span class="jsdoc-syntax">){
321 </span><span class="jsdoc-var">clearInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.slideFn</span><span class="jsdoc-syntax">);
322 </span><span class="jsdoc-var">this.slideFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
323 </span><span class="jsdoc-var">_this.showPanelNext</span><span class="jsdoc-syntax">();
324 }, </span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
327 })</span><span class="jsdoc-var">.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bullet</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
332 </span><span class="jsdoc-var">setActiveBullet </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">)
334 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
335 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
338 </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.bullet'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.elements</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
339 </span><span class="jsdoc-var">el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'selected'</span><span class="jsdoc-syntax">);
342 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bullet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.bullet-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
344 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">bullet</span><span class="jsdoc-syntax">){
345 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
348 </span><span class="jsdoc-var">bullet.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'selected'</span><span class="jsdoc-syntax">);
359 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.TabGroup</span><span class="jsdoc-syntax">, {
361 </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">: {},
362 </span><span class="jsdoc-comment">/**
363 * register a Navigation Group
364 * @param {Roo.bootstrap.NavGroup} the navgroup to add
366 </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">navgrp</span><span class="jsdoc-syntax">)
368 </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">navgrp.navId</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">navgrp</span><span class="jsdoc-syntax">;
371 </span><span class="jsdoc-comment">/**
372 * fetch a Navigation Group based on the navigation ID
373 * if one does not exist , it will get created.
374 * @param {string} the navgroup to add
375 * @returns {Roo.bootstrap.NavGroup} the navgroup
377 </span><span class="jsdoc-var">get</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">navId</span><span class="jsdoc-syntax">) {
378 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">navId</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
379 </span><span class="jsdoc-var">this.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.bootstrap.TabGroup</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">navId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">navId </span><span class="jsdoc-syntax">}));
381 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">navId</span><span class="jsdoc-syntax">] ;
388 </span></code></body></html>