Permalink
Browse files

Collapsible: Implement the "enhanced" option.

  • Loading branch information...
gabrielschulhof committed Jul 12, 2013
1 parent 2efcb7a commit c135660d2dcef188d88113aa42dc633e24d7f1ae
Showing with 59 additions and 45 deletions.
  1. +59 −45 js/widgets/collapsible.js
View
@@ -17,6 +17,7 @@ var rInitialLetter = /([A-Z])/g;
$.widget( "mobile.collapsible", {
options: {
enhanced: false,
expandCueText: null,
collapseCueText: null,
collapsed: true,
@@ -32,68 +33,77 @@ $.widget( "mobile.collapsible", {
},
_create: function() {
var anchor, placeholder,
$el = this.element.addClass( "ui-collapsible" ),
opts = this.options,
heading = $el.children( opts.heading ).first(),
replacementHeading = heading,
content = $el.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
accordion = $el.closest( ":jqmData(role='collapsible-set')" + ( $.mobile.collapsibleset ? ", :mobile-collapsibleset" : "" ) ).addClass( "ui-collapsible-set" );
// Replace collapsibleHeading if it's a legend
if ( heading.is( "legend" ) ) {
replacementHeading = $( "<div role='heading'>"+ heading.html() +"</div>" );
placeholder = $( "<div><!-- placeholder for legend --></div>" ).insertBefore( heading );
heading.remove();
}
anchor = replacementHeading
.detach()
//modify markup & attributes
.addClass( "ui-collapsible-heading" )
.append( "<span class='ui-collapsible-heading-status'></span>" )
.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
.find( "a" )
.first()
.addClass( "ui-btn" );
//drop heading in before content
replacementHeading.insertBefore( content );
var elem = this.element,
ui = {
accordion: elem
.closest( ":jqmData(role='collapsible-set')" +
( $.mobile.collapsibleset ? ", :mobile-collapsibleset" : "" ) )
.addClass( "ui-collapsible-set" )
},
opts = this.options;
$.extend( this, {
_accordion: accordion,
_accordionWidget: null,
_anchorClasses: "",
_elClasses: "",
_contentTheme: "",
_ui: {
placeholder: placeholder,
originalHeading: heading,
anchor: anchor,
content: content,
heading: replacementHeading
}
_ui: ui
});
if ( opts.enhanced ) {
ui.heading = $( ".ui-collapsible-heading", this.element[ 0 ] );
ui.content = ui.heading.next();
ui.anchor = $( "a", ui.heading[ 0 ] ).first();
} else {
this._enhance( elem, ui );
this._setOptions( opts );
}
//events
this._on({
"expand": "_handleExpandCollapse",
"collapse": "_handleExpandCollapse"
});
this._on( heading, {
"tap": function(/* event */) {
heading.find( "a" ).first().addClass( $.mobile.activeBtnClass );
this._on( ui.heading, {
"tap": function() {
ui.heading.find( "a" ).first().addClass( $.mobile.activeBtnClass );
},
"click": function( event ) {
this._handleExpandCollapse( !heading.hasClass( "ui-collapsible-heading-collapsed" ) );
this._handleExpandCollapse( !ui.heading.hasClass( "ui-collapsible-heading-collapsed" ) );
event.preventDefault();
event.stopPropagation();
}
});
},
_enhance: function( elem, ui ) {
elem.addClass( "ui-collapsible" );
ui.originalHeading = elem.children( this.options.heading ).first(),
ui.content = elem.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
ui.heading = ui.originalHeading;
// Replace collapsibleHeading if it's a legend
if ( ui.heading.is( "legend" ) ) {
ui.heading = $( "<div role='heading'>"+ ui.heading.html() +"</div>" );
ui.placeholder = $( "<div><!-- placeholder for legend --></div>" ).insertBefore( ui.originalHeading );
ui.originalHeading.remove();
}
this._setOptions( opts );
ui.anchor = ui.heading
.detach()
//modify markup & attributes
.addClass( "ui-collapsible-heading" )
.append( "<span class='ui-collapsible-heading-status'></span>" )
.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
.find( "a" )
.first()
.addClass( "ui-btn" );
//drop heading in before content
ui.heading.insertBefore( ui.content );
return ui;
},
_handleExpandCollapse: function( isCollapse ) {
@@ -131,11 +141,11 @@ $.widget( "mobile.collapsible", {
// parent accordion, then from the defaults.
_optionValue: function( options, name ) {
var ret,
accordion = this._accordion,
accordionWidget = this._accordionWidget;
accordion = this._ui.accordion,
accordionWidget = this._ui.accordionWidget;
if ( accordion.length && !accordionWidget ) {
this._accordionWidget = accordionWidget = accordion.data( "mobile-collapsibleset" );
this._ui.accordionWidget = accordionWidget = accordion.data( "mobile-collapsibleset" );
}
ret =
@@ -166,6 +176,10 @@ $.widget( "mobile.collapsible", {
_destroy: function() {
var ui = this._ui;
if ( this.options.enhanced ) {
return;
}
if ( ui.placeholder ) {
ui.originalHeading.insertBefore( ui.placeholder );
ui.placeholder.remove();
@@ -200,7 +214,7 @@ $.widget( "mobile.collapsible", {
}
// Set corners for individual collapsibles to false when in a collapsible-set
if ( this._accordion.length > 0 ) {
if ( this._ui.accordion.length > 0 ) {
opts.corners = false;
}

0 comments on commit c135660

Please sign in to comment.