Permalink
Browse files

Added pure CSS corner styling for collapsible and collapsible set

  • Loading branch information...
jaspermdegroot committed Nov 6, 2012
1 parent 2721133 commit 3b563365ee718cdcd4cf494fffd8d44239204ffc
Showing with 43 additions and 55 deletions.
  1. +26 −0 css/structure/jquery.mobile.collapsible.css
  2. +12 −15 js/widgets/collapsible.js
  3. +5 −40 js/widgets/collapsibleSet.js
@@ -27,6 +27,32 @@
.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-content-collapsed { display: none; }
/* Corner styling */
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-collapsible-content,
.ui-collapsible-set .ui-collapsible:last-child {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-collapsible-set .ui-collapsible:first-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) .ui-collapsible-heading {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
.ui-collapsible-set { margin: .5em 0; }
.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
View
@@ -18,6 +18,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
theme: null,
contentTheme: null,
inset: true,
corners: true,
mini: false,
initSelector: ":jqmData(role='collapsible')"
},
@@ -67,6 +68,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
} else {
o.inset = true;
}
// Set corners for individual collapsibles to false when in a collapsible-set
o.corners = false;
// Gets the preference for mini in the set
if ( !o.mini ) {
o.mini = collapsibleSet.jqmData( "mini" );
@@ -79,7 +82,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
}
if ( !!o.inset ) {
collapsible.addClass( "ui-collapsible-inset" );
var collapsibleClasses = "ui-collapsible-inset";
if ( !!o.corners ) {
collapsibleClasses += " ui-corner-all";
}
if ( o.contentTheme ) {
collapsibleClasses += " ui-collapsible-themed-content";
}
collapsible.addClass( collapsibleClasses );
}
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
@@ -105,19 +115,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
theme: o.theme
});
if ( !!o.inset ) {
collapsibleHeading
.find( "a" ).first().add( ".ui-btn-inner", $el )
.addClass( "ui-corner-top ui-corner-bottom" );
}
//events
collapsible
.bind( "expand collapse", function( event ) {
if ( !event.isDefaultPrevented() ) {
var $this = $( this ),
isCollapse = ( event.type === "collapse" ),
contentTheme = o.contentTheme;
isCollapse = ( event.type === "collapse" );
event.preventDefault();
@@ -136,12 +139,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
collapsibleHeading
.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
.toggleClass( "ui-corner-bottom", isCollapse );
collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
}
collapsibleContent.trigger( "updatelayout" );
}
})
@@ -30,24 +30,16 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
o.inset = $el.jqmData( "inset" );
}
o.inset = o.inset !== undefined ? o.inset : true;
o.corners = o.corners !== undefined ? o.corners : true;
if ( !!o.corners && !!o.inset ) {
$el.addClass( "ui-corner-all" );
}
// Initialize the collapsible set if it's not already initialized
if ( !$el.jqmData( "collapsiblebound" ) ) {
$el
.jqmData( "collapsiblebound", true )
.bind( "expand collapse", function( event ) {
var isCollapse = ( event.type === "collapse" ),
collapsible = $( event.target ).closest( ".ui-collapsible" ),
widget = collapsible.data( "collapsible" );
if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
collapsible.find( ".ui-collapsible-heading" ).first()
.find( "a" ).first()
.toggleClass( "ui-corner-bottom", isCollapse )
.find( ".ui-btn-inner" )
.toggleClass( "ui-corner-bottom", isCollapse );
collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
}
})
.bind( "expand", function( event ) {
var closestCollapsible = $( event.target )
.closest( ".ui-collapsible" );
@@ -77,33 +69,6 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
// clean up borders
if ( !!o.inset ) {
collapsiblesInSet.each(function() {
$( this ).jqmRemoveData( "collapsible-last" )
.find( ".ui-collapsible-heading" )
.find( "a" ).first()
.removeClass( "ui-corner-top ui-corner-bottom" )
.find( ".ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});
collapsiblesInSet.first()
.find( "a" )
.first()
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );
collapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a" )
.first()
.addClass( "ui-corner-bottom" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
}
}
});

0 comments on commit 3b56336

Please sign in to comment.