tizen-web-ui-fw/latest/js/src/widgets/collapsibleSet.js

   1 (function( $, undefined ) {
   2
   3 $.widget( "mobile.collapsibleset", $.mobile.widget, {
   4         options: {
   5                 initSelector: ":jqmData(role='collapsible-set')"
   6         },
   7         _create: function() {
   8                 var $el = this.element.addClass( "ui-collapsible-set" ),
   9                         o = this.options;
  10
  11                 // Inherit the theme from collapsible-set
  12                 if ( !o.theme ) {
  13                         o.theme = $.mobile.getInheritedTheme( $el, "c" );
  14                 }
  15                 // Inherit the content-theme from collapsible-set
  16                 if ( !o.contentTheme ) {
  17                         o.contentTheme = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "content-theme" );
  18                 }
  19
  20                 if ( $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "inset" ) !== undefined ) {
  21                         o.inset = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "inset" );
  22                 }
  23                 o.inset = o.inset !== undefined ? o.inset : true;
  24
  25                 // Initialize the collapsible set if it's not already initialized
  26                 if ( !$el.jqmData( "collapsiblebound" ) ) {
  27                         $el
  28                                 .jqmData( "collapsiblebound", true )
  29                                 .bind( "expand collapse", function( event ) {
  30                                         var isCollapse = ( event.type === "collapse" ),
  31                                                 collapsible = $( event.target ).closest( ".ui-collapsible" ),
  32                                                 widget = collapsible.data( "collapsible" );
  33                                         if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
  34                                                 collapsible.find( ".ui-collapsible-heading" ).first()
  35                                                         .find( "a" ).first()
  36                                                         .toggleClass( "ui-corner-bottom", isCollapse )
  37                                                         .find( ".ui-btn-inner" )
  38                                                         .toggleClass( "ui-corner-bottom", isCollapse );
  39                                                 collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
  40                                         }
  41                                 })
  42                                 .bind( "expand", function( event ) {
  43                                         var closestCollapsible = $( event.target )
  44                                                 .closest( ".ui-collapsible" );
  45                                         if ( closestCollapsible.parent().is( ":jqmData(role='collapsible-set')" ) ) {
  46                                                 closestCollapsible
  47                                                         .siblings( ".ui-collapsible" )
  48                                                         .trigger( "collapse" );
  49                                         }
  50                                 });
  51                 }
  52         },
  53
  54         _init: function() {
  55                 var $el = this.element,
  56                         collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" ),
  57                         expanded = collapsiblesInSet.filter( ":jqmData(collapsed='false')" );
  58                 this.refresh();
  59
  60                 // Because the corners are handled by the collapsible itself and the default state is collapsed
  61                 // That was causing https://github.com/jquery/jquery-mobile/issues/4116
  62                 expanded.trigger( "expand" );
  63         },
  64
  65         refresh: function() {
  66                 var $el = this.element,
  67                         o = this.options,
  68                         collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
  69
  70                 $.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
  71
  72                 // clean up borders
  73                 if ( !!o.inset ) {
  74                         collapsiblesInSet.each(function() {
  75                                 $( this ).jqmRemoveData( "collapsible-last" )
  76                                         .find( ".ui-collapsible-heading" )
  77                                         .find( "a" ).first()
  78                                         .removeClass( "ui-corner-top ui-corner-bottom" )
  79                                         .find( ".ui-btn-inner" )
  80                                         .removeClass( "ui-corner-top ui-corner-bottom" );
  81                         });
  82
  83                         collapsiblesInSet.first()
  84                                 .find( "a" )
  85                                         .first()
  86                                         .addClass( "ui-corner-top" )
  87                                         .find( ".ui-btn-inner" )
  88                                                 .addClass( "ui-corner-top" );
  89
  90                         collapsiblesInSet.last()
  91                                 .jqmData( "collapsible-last", true )
  92                                 .find( "a" )
  93                                         .first()
  94                                         .addClass( "ui-corner-bottom" )
  95                                         .find( ".ui-btn-inner" )
  96                                                 .addClass( "ui-corner-bottom" );
  97                 }
  98         }
  99 });
 100
 101 //delegate auto self-init widgets
 102 $.delegateSelfInitWithSingleSelector( $.mobile.collapsibleset );
 103
 104 })( jQuery );