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

   1 (function( $, undefined ) {
   2
   3 $.widget( "mobile.collapsible", $.mobile.widget, {
   4         options: {
   5                 expandCueText: " Expandable list, tap to open list",
   6                 collapseCueText: " Expandable list, tap to close list",
   7                 collapsed: true,
   8                 heading: "h1,h2,h3,h4,h5,h6,legend",
   9                 theme: null,
  10                 contentTheme: null,
  11                 inset: true,
  12                 mini: false,
  13                 initSelector: ":jqmData(role='collapsible')"
  14         },
  15         _create: function() {
  16
  17                 var $el = this.element,
  18                         o = this.options,
  19                         collapsible = $el.addClass( "ui-collapsible" ),
  20                         collapsibleHeading = $el.children( o.heading ).first(),
  21                         collapsedIcon = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "collapsed-icon" ) || o.collapsedIcon,
  22                         expandedIcon = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "expanded-icon" ) || o.expandedIcon,
  23                         collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
  24                         collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
  25
  26                 // Replace collapsibleHeading if it's a legend
  27                 if ( collapsibleHeading.is( "legend" ) ) {
  28                         collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
  29                         collapsibleHeading.next().remove();
  30                 }
  31
  32                 // If we are in a collapsible set
  33                 if ( collapsibleSet.length ) {
  34                         // Inherit the theme from collapsible-set
  35                         if ( !o.theme ) {
  36                                 o.theme = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "theme" ) || $.mobile.getInheritedTheme( collapsibleSet, "c" );
  37                         }
  38                         // Inherit the content-theme from collapsible-set
  39                         if ( !o.contentTheme ) {
  40                                 o.contentTheme = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "content-theme" );
  41                         }
  42
  43                         // Get the preference for collapsed icon in the set
  44                         if ( !o.collapsedIcon ) {
  45                                 o.collapsedIcon = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "collapsed-icon" );
  46                         }
  47                         // Get the preference for expanded icon in the set
  48                         if ( !o.expandedIcon ) {
  49                                 o.expandedIcon = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "expanded-icon" );
  50                         }
  51                         // Gets the preference icon position in the set
  52                         if ( !o.iconPos ) {
  53                                 o.iconPos = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "iconpos" );
  54                         }
  55                         // Inherit the preference for inset from collapsible-set or set the default value to ensure equalty within a set
  56                         if ( $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "inset" ) !== undefined ) {
  57                                 o.inset = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "inset" );
  58                         } else {
  59                                 o.inset = true;
  60                         }
  61                         // Gets the preference for mini in the set
  62                         if ( !o.mini ) {
  63                                 o.mini = $.mobile.getAttrFixed( collapsibleSet[0], "data-" + $.mobile.ns + "mini" );
  64                         }
  65                 } else {
  66                         // get inherited theme if not a set and no theme has been set
  67                         if ( !o.theme ) {
  68                                 o.theme = $.mobile.getInheritedTheme( $el, "c" );
  69                         }
  70                 }
  71
  72                 if ( !!o.inset ) {
  73                         collapsible.addClass( "ui-collapsible-inset" );
  74                 }
  75
  76                 collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
  77
  78                 collapsedIcon = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "collapsed-icon" ) || o.collapsedIcon || "plus";
  79                 expandedIcon = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "expanded-icon" ) || o.expandedIcon || "minus";
  80
  81                 collapsibleHeading
  82                         //drop heading in before content
  83                         .insertBefore( collapsibleContent )
  84                         //modify markup & attributes
  85                         .addClass( "ui-collapsible-heading" )
  86                         .append( "<span class='ui-collapsible-heading-status'></span>" )
  87                         .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
  88                         .find( "a" )
  89                                 .first()
  90                                 .buttonMarkup({
  91                                         shadow: false,
  92                                         corners: false,
  93                                         iconpos: $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "iconpos" ) || o.iconPos || "left",
  94                                         icon: collapsedIcon,
  95                                         mini: o.mini,
  96                                         theme: o.theme
  97                                 })
  98                                 .attr( "role", "");
  99
 100                 if ( !!o.inset ) {
 101                         collapsibleHeading
 102                                 .find( "a" ).first().add( ".ui-btn-inner", $el )
 103                                         .addClass( "ui-corner-top ui-corner-bottom" );
 104                 }
 105
 106                 //events
 107                 collapsible
 108                         .bind( "expand collapse", function( event ) {
 109                                 if ( !event.isDefaultPrevented() ) {
 110                                         var $this = $( this ),
 111                                                 isCollapse = ( event.type === "collapse" ),
 112                                                 contentTheme = o.contentTheme;
 113
 114                                         event.preventDefault();
 115
 116                                         // Custom event callback
 117                                         if ( o.customEventHandler ) { o.customEventHandler.call( this, isCollapse ) };
 118
 119                                         collapsibleHeading
 120                                                 .toggleClass( "ui-collapsible-heading-collapsed", isCollapse )
 121                                                 .find( ".ui-collapsible-heading-status" )
 122                                                         .text( isCollapse ? o.expandCueText : o.collapseCueText )
 123                                                 .end()
 124                                                 .find( ".ui-icon" )
 125                                                         .toggleClass( "ui-icon-" + expandedIcon, !isCollapse )
 126                                                         // logic or cause same icon for expanded/collapsed state would remove the ui-icon-class
 127                                                         .toggleClass( "ui-icon-" + collapsedIcon, ( isCollapse || expandedIcon === collapsedIcon ) )
 128                                                 .end()
 129                                                 .find( "a" ).first().removeClass( $.mobile.activeBtnClass );
 130
 131                                         $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
 132                                         collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
 133                                         collapsibleContent.children( "li" ).not( "ui-collapsible-content" ).attr( "tabindex", isCollapse ? "" : "0" );
 134
 135                                         if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
 136                                                 collapsibleHeading
 137                                                         .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
 138                                                         .toggleClass( "ui-corner-bottom", isCollapse );
 139                                                 collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
 140                                         }
 141                                         collapsibleContent.trigger( "updatelayout" );
 142                                 }
 143                         })
 144                         .trigger( o.collapsed ? "collapse" : "expand" );
 145
 146                 collapsibleHeading
 147                         .bind( "tap", function( event ) {
 148                                 collapsibleHeading.find( "a" ).first().addClass( $.mobile.activeBtnClass );
 149                         })
 150                         .bind( "click", function( event ) {
 151
 152                                 var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ? "expand" : "collapse";
 153
 154                                 collapsible.trigger( type );
 155
 156                                 event.preventDefault();
 157                                 event.stopPropagation();
 158                         });
 159         }
 160 });
 161
 162 //delegate auto self-init widgets
 163 $.delegateSelfInitWithSingleSelector( $.mobile.collapsible );
 164
 165 })( jQuery );