15 //>>css.structure: ../../themes/base/core.css |
15 //>>css.structure: ../../themes/base/core.css |
16 //>>css.structure: ../../themes/base/tabs.css |
16 //>>css.structure: ../../themes/base/tabs.css |
17 //>>css.theme: ../../themes/base/theme.css |
17 //>>css.theme: ../../themes/base/theme.css |
18 |
18 |
19 ( function( factory ) { |
19 ( function( factory ) { |
|
20 "use strict"; |
|
21 |
20 if ( typeof define === "function" && define.amd ) { |
22 if ( typeof define === "function" && define.amd ) { |
21 |
23 |
22 // AMD. Register as an anonymous module. |
24 // AMD. Register as an anonymous module. |
23 define( [ |
25 define( [ |
24 "jquery", |
26 "jquery", |
88 this._processTabs(); |
91 this._processTabs(); |
89 options.active = this._initialActive(); |
92 options.active = this._initialActive(); |
90 |
93 |
91 // Take disabling tabs via class attribute from HTML |
94 // Take disabling tabs via class attribute from HTML |
92 // into account and update option properly. |
95 // into account and update option properly. |
93 if ( $.isArray( options.disabled ) ) { |
96 if ( Array.isArray( options.disabled ) ) { |
94 options.disabled = $.unique( options.disabled.concat( |
97 options.disabled = $.uniqueSort( options.disabled.concat( |
95 $.map( this.tabs.filter( ".ui-state-disabled" ), function( li ) { |
98 $.map( this.tabs.filter( ".ui-state-disabled" ), function( li ) { |
96 return that.tabs.index( li ); |
99 return that.tabs.index( li ); |
97 } ) |
100 } ) |
98 ) ).sort(); |
101 ) ).sort(); |
99 } |
102 } |
171 if ( this._handlePageNav( event ) ) { |
174 if ( this._handlePageNav( event ) ) { |
172 return; |
175 return; |
173 } |
176 } |
174 |
177 |
175 switch ( event.keyCode ) { |
178 switch ( event.keyCode ) { |
176 case $.ui.keyCode.RIGHT: |
179 case $.ui.keyCode.RIGHT: |
177 case $.ui.keyCode.DOWN: |
180 case $.ui.keyCode.DOWN: |
178 selectedIndex++; |
181 selectedIndex++; |
179 break; |
182 break; |
180 case $.ui.keyCode.UP: |
183 case $.ui.keyCode.UP: |
181 case $.ui.keyCode.LEFT: |
184 case $.ui.keyCode.LEFT: |
182 goingForward = false; |
185 goingForward = false; |
183 selectedIndex--; |
186 selectedIndex--; |
184 break; |
187 break; |
185 case $.ui.keyCode.END: |
188 case $.ui.keyCode.END: |
186 selectedIndex = this.anchors.length - 1; |
189 selectedIndex = this.anchors.length - 1; |
187 break; |
190 break; |
188 case $.ui.keyCode.HOME: |
191 case $.ui.keyCode.HOME: |
189 selectedIndex = 0; |
192 selectedIndex = 0; |
190 break; |
193 break; |
191 case $.ui.keyCode.SPACE: |
194 case $.ui.keyCode.SPACE: |
192 |
195 |
193 // Activate only, no collapsing |
196 // Activate only, no collapsing |
194 event.preventDefault(); |
197 event.preventDefault(); |
195 clearTimeout( this.activating ); |
198 clearTimeout( this.activating ); |
196 this._activate( selectedIndex ); |
199 this._activate( selectedIndex ); |
197 return; |
200 return; |
198 case $.ui.keyCode.ENTER: |
201 case $.ui.keyCode.ENTER: |
199 |
202 |
200 // Toggle (cancel delayed activation, allow collapsing) |
203 // Toggle (cancel delayed activation, allow collapsing) |
201 event.preventDefault(); |
204 event.preventDefault(); |
202 clearTimeout( this.activating ); |
205 clearTimeout( this.activating ); |
203 |
206 |
204 // Determine if we should collapse or activate |
207 // Determine if we should collapse or activate |
205 this._activate( selectedIndex === this.options.active ? false : selectedIndex ); |
208 this._activate( selectedIndex === this.options.active ? false : selectedIndex ); |
206 return; |
209 return; |
207 default: |
210 default: |
208 return; |
211 return; |
209 } |
212 } |
210 |
213 |
211 // Focus the appropriate tab, based on which key was pressed |
214 // Focus the appropriate tab, based on which key was pressed |
212 event.preventDefault(); |
215 event.preventDefault(); |
213 clearTimeout( this.activating ); |
216 clearTimeout( this.activating ); |
325 // Was collapsed or no tabs |
328 // Was collapsed or no tabs |
326 if ( options.active === false || !this.anchors.length ) { |
329 if ( options.active === false || !this.anchors.length ) { |
327 options.active = false; |
330 options.active = false; |
328 this.active = $(); |
331 this.active = $(); |
329 |
332 |
330 // was active, but active tab is gone |
333 // was active, but active tab is gone |
331 } else if ( this.active.length && !$.contains( this.tablist[ 0 ], this.active[ 0 ] ) ) { |
334 } else if ( this.active.length && !$.contains( this.tablist[ 0 ], this.active[ 0 ] ) ) { |
332 |
335 |
333 // all remaining tabs are disabled |
336 // all remaining tabs are disabled |
334 if ( this.tabs.length === options.disabled.length ) { |
337 if ( this.tabs.length === options.disabled.length ) { |
335 options.active = false; |
338 options.active = false; |
336 this.active = $(); |
339 this.active = $(); |
337 |
340 |
338 // activate previous tab |
341 // activate previous tab |
339 } else { |
342 } else { |
340 this._activate( this._findNextTab( Math.max( 0, options.active - 1 ), false ) ); |
343 this._activate( this._findNextTab( Math.max( 0, options.active - 1 ), false ) ); |
341 } |
344 } |
342 |
345 |
343 // was active, active tab still exists |
346 // was active, active tab still exists |
344 } else { |
347 } else { |
345 |
348 |
346 // make sure active index is correct |
349 // make sure active index is correct |
347 options.active = this.tabs.index( this.active ); |
350 options.active = this.tabs.index( this.active ); |
348 } |
351 } |
443 if ( that._isLocal( anchor ) ) { |
445 if ( that._isLocal( anchor ) ) { |
444 selector = anchor.hash; |
446 selector = anchor.hash; |
445 panelId = selector.substring( 1 ); |
447 panelId = selector.substring( 1 ); |
446 panel = that.element.find( that._sanitizeSelector( selector ) ); |
448 panel = that.element.find( that._sanitizeSelector( selector ) ); |
447 |
449 |
448 // remote tab |
450 // remote tab |
449 } else { |
451 } else { |
450 |
452 |
451 // If the tab doesn't already have aria-controls, |
453 // If the tab doesn't already have aria-controls, |
452 // generate an id by using a throw-away element |
454 // generate an id by using a throw-away element |
453 panelId = tab.attr( "aria-controls" ) || $( {} ).uniqueId()[ 0 ].id; |
455 panelId = tab.attr( "aria-controls" ) || $( {} ).uniqueId()[ 0 ].id; |
496 }, |
498 }, |
497 |
499 |
498 _setOptionDisabled: function( disabled ) { |
500 _setOptionDisabled: function( disabled ) { |
499 var currentItem, li, i; |
501 var currentItem, li, i; |
500 |
502 |
501 if ( $.isArray( disabled ) ) { |
503 if ( Array.isArray( disabled ) ) { |
502 if ( !disabled.length ) { |
504 if ( !disabled.length ) { |
503 disabled = false; |
505 disabled = false; |
504 } else if ( disabled.length === this.anchors.length ) { |
506 } else if ( disabled.length === this.anchors.length ) { |
505 disabled = true; |
507 disabled = true; |
506 } |
508 } |
601 |
603 |
602 event.preventDefault(); |
604 event.preventDefault(); |
603 |
605 |
604 if ( tab.hasClass( "ui-state-disabled" ) || |
606 if ( tab.hasClass( "ui-state-disabled" ) || |
605 |
607 |
606 // tab is already loading |
608 // tab is already loading |
607 tab.hasClass( "ui-tabs-loading" ) || |
609 tab.hasClass( "ui-tabs-loading" ) || |
608 |
610 |
609 // can't switch durning an animation |
611 // can't switch durning an animation |
610 this.running || |
612 this.running || |
611 |
613 |
612 // click on active header, but not collapsible |
614 // click on active header, but not collapsible |
613 ( clickedIsActive && !options.collapsible ) || |
615 ( clickedIsActive && !options.collapsible ) || |
614 |
616 |
615 // allow canceling activation |
617 // allow canceling activation |
616 ( this._trigger( "beforeActivate", event, eventData ) === false ) ) { |
618 ( this._trigger( "beforeActivate", event, eventData ) === false ) ) { |
617 return; |
619 return; |
618 } |
620 } |
619 |
621 |
620 options.active = collapsing ? false : this.tabs.index( tab ); |
622 options.active = collapsing ? false : this.tabs.index( tab ); |
621 |
623 |
727 _getIndex: function( index ) { |
729 _getIndex: function( index ) { |
728 |
730 |
729 // meta-function to give users option to provide a href string instead of a numerical index. |
731 // meta-function to give users option to provide a href string instead of a numerical index. |
730 if ( typeof index === "string" ) { |
732 if ( typeof index === "string" ) { |
731 index = this.anchors.index( this.anchors.filter( "[href$='" + |
733 index = this.anchors.index( this.anchors.filter( "[href$='" + |
732 $.ui.escapeSelector( index ) + "']" ) ); |
734 $.escapeSelector( index ) + "']" ) ); |
733 } |
735 } |
734 |
736 |
735 return index; |
737 return index; |
736 }, |
738 }, |
737 |
739 |
784 |
786 |
785 if ( index === undefined ) { |
787 if ( index === undefined ) { |
786 disabled = false; |
788 disabled = false; |
787 } else { |
789 } else { |
788 index = this._getIndex( index ); |
790 index = this._getIndex( index ); |
789 if ( $.isArray( disabled ) ) { |
791 if ( Array.isArray( disabled ) ) { |
790 disabled = $.map( disabled, function( num ) { |
792 disabled = $.map( disabled, function( num ) { |
791 return num !== index ? num : null; |
793 return num !== index ? num : null; |
792 } ); |
794 } ); |
793 } else { |
795 } else { |
794 disabled = $.map( this.tabs, function( li, num ) { |
796 disabled = $.map( this.tabs, function( li, num ) { |
810 } else { |
812 } else { |
811 index = this._getIndex( index ); |
813 index = this._getIndex( index ); |
812 if ( $.inArray( index, disabled ) !== -1 ) { |
814 if ( $.inArray( index, disabled ) !== -1 ) { |
813 return; |
815 return; |
814 } |
816 } |
815 if ( $.isArray( disabled ) ) { |
817 if ( Array.isArray( disabled ) ) { |
816 disabled = $.merge( [ index ], disabled ).sort(); |
818 disabled = $.merge( [ index ], disabled ).sort(); |
817 } else { |
819 } else { |
818 disabled = [ index ]; |
820 disabled = [ index ]; |
819 } |
821 } |
820 } |
822 } |