Permalink
Browse files

Added pure CSS corner styling for collapsible and collapsible set

  • Loading branch information...
1 parent 2721133 commit 3b563365ee718cdcd4cf494fffd8d44239204ffc @jaspermdegroot jaspermdegroot committed Nov 6, 2012
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; }
@@ -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.