update jqm

This commit is contained in:
Luke Pulverenti 2015-09-05 12:58:27 -04:00
parent 6b21f2fbd0
commit 8996ae4eab
39 changed files with 1162 additions and 686 deletions

View file

@ -0,0 +1,102 @@

.ui-collapsible {
margin: 0 -1em;
}
.ui-collapsible-inset,
.ui-collapsible-set {
margin: .5em 0;
}
.ui-collapsible-heading {
display: block;
margin: 0;
padding: 0;
position: relative;
}
.ui-collapsible-heading .ui-btn {
text-align: left;
margin: 0;
border-left-width: 0;
border-right-width: 0;
}
.ui-collapsible-heading .ui-btn-icon-top,
.ui-collapsible-heading .ui-btn-icon-bottom {
text-align: center;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
}
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
border-top-width: 0;
}
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
border-top-width: 1px;
}
.ui-collapsible-heading-status {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-collapsible-content {
display: block;
margin: 0;
padding: .5em 1em;
}
.ui-collapsible-themed-content .ui-collapsible-content {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content {
border-left-width: 1px;
border-right-width: 1px;
}
.ui-collapsible-inset .ui-collapsible-content {
margin: 0;
}
.ui-collapsible-content-collapsed {
display: none;
}
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-collapsible-set .ui-collapsible.ui-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-content,
.ui-collapsible-set .ui-collapsible.ui-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-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 .ui-collapsible {
margin: -1px -1em 0;
}
.ui-collapsible-set .ui-collapsible-inset {
margin: -1px 0 0;
}
.ui-collapsible-set .ui-collapsible.ui-first-child {
margin-top: 0;
}

View file

@ -0,0 +1,348 @@
(function ($, undefined) {
var rInitialLetter = /([A-Z])/g,
// Construct iconpos class from iconpos value
iconposClass = function (iconpos) {
return ("ui-btn-icon-" + (iconpos === null ? "left" : iconpos));
};
$.widget("mobile.collapsible", {
options: {
enhanced: false,
expandCueText: null,
collapseCueText: null,
collapsed: true,
heading: "h1,h2,h3,h4,h5,h6,legend",
collapsedIcon: null,
expandedIcon: null,
iconpos: null,
theme: null,
contentTheme: null,
inset: null,
corners: null,
mini: null
},
_create: function () {
var elem = this.element,
ui = {
accordion: elem
.closest(":jqmData(role='collapsible-set')," +
":jqmData(role='collapsibleset')" +
($.mobile.collapsibleset ? ", :mobile-collapsibleset" :
""))
.addClass("ui-collapsible-set")
};
this._ui = ui;
this._renderedOptions = this._getOptions(this.options);
if (this.options.enhanced) {
ui.heading = this.element.children(".ui-collapsible-heading");
ui.content = ui.heading.next();
ui.anchor = ui.heading.children();
ui.status = ui.anchor.children(".ui-collapsible-heading-status");
} else {
this._enhance(elem, ui);
}
this._on(ui.heading, {
"tap": function () {
ui.heading.find("a").first().addClass($.mobile.activeBtnClass);
},
"click": function (event) {
this._handleExpandCollapse(!ui.heading.hasClass("ui-collapsible-heading-collapsed"));
event.preventDefault();
event.stopPropagation();
}
});
},
// Adjust the keys inside options for inherited values
_getOptions: function (options) {
var key,
accordion = this._ui.accordion,
accordionWidget = this._ui.accordionWidget;
// Copy options
options = $.extend({}, options);
if (accordion.length && !accordionWidget) {
this._ui.accordionWidget =
accordionWidget = accordion.data("mobile-collapsibleset");
}
for (key in options) {
// Retrieve the option value first from the options object passed in and, if
// null, from the parent accordion or, if that's null too, or if there's no
// parent accordion, then from the defaults.
options[key] =
(options[key] != null) ? options[key] :
(accordionWidget) ? accordionWidget.options[key] :
accordion.length ? $.mobile.getAttribute(accordion[0],
key.replace(rInitialLetter, "-$1").toLowerCase()) :
null;
if (null == options[key]) {
options[key] = $.mobile.collapsible.defaults[key];
}
}
return options;
},
_themeClassFromOption: function (prefix, value) {
return (value ? (value === "none" ? "" : prefix + value) : "");
},
_enhance: function (elem, ui) {
var iconclass,
opts = this._renderedOptions,
contentThemeClass = this._themeClassFromOption("ui-body-", opts.contentTheme);
elem.addClass("ui-collapsible " +
(opts.inset ? "ui-collapsible-inset " : "") +
(opts.inset && opts.corners ? "ui-corner-all " : "") +
(contentThemeClass ? "ui-collapsible-themed-content " : ""));
ui.originalHeading = elem.children(this.options.heading).first(),
ui.content = elem
.wrapInner("<div " +
"class='ui-collapsible-content " +
contentThemeClass + "'></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();
}
iconclass = (opts.collapsed ? (opts.collapsedIcon ? "ui-icon-" + opts.collapsedIcon : "") :
(opts.expandedIcon ? "ui-icon-" + opts.expandedIcon : ""));
ui.status = $("<span class='ui-collapsible-heading-status'></span>");
ui.anchor = ui.heading
.detach()
//modify markup & attributes
.addClass("ui-collapsible-heading")
.append(ui.status)
.wrapInner("<a href='#' class='ui-collapsible-heading-toggle'></a>")
.find("a")
.first()
.addClass("ui-btn " +
(iconclass ? iconclass + " " : "") +
(iconclass ? iconposClass(opts.iconpos) +
" " : "") +
this._themeClassFromOption("ui-btn-", opts.theme) + " " +
(opts.mini ? "ui-mini " : ""));
//drop heading in before content
ui.heading.insertBefore(ui.content);
this._handleExpandCollapse(this.options.collapsed);
return ui;
},
refresh: function () {
this._applyOptions(this.options);
this._renderedOptions = this._getOptions(this.options);
},
_applyOptions: function (options) {
var isCollapsed, newTheme, oldTheme, hasCorners, hasIcon,
elem = this.element,
currentOpts = this._renderedOptions,
ui = this._ui,
anchor = ui.anchor,
status = ui.status,
opts = this._getOptions(options);
// First and foremost we need to make sure the collapsible is in the proper
// state, in case somebody decided to change the collapsed option at the
// same time as another option
if (options.collapsed !== undefined) {
this._handleExpandCollapse(options.collapsed);
}
isCollapsed = elem.hasClass("ui-collapsible-collapsed");
// We only need to apply the cue text for the current state right away.
// The cue text for the alternate state will be stored in the options
// and applied the next time the collapsible's state is toggled
if (isCollapsed) {
if (opts.expandCueText !== undefined) {
status.text(opts.expandCueText);
}
} else {
if (opts.collapseCueText !== undefined) {
status.text(opts.collapseCueText);
}
}
// Update icon
// Is it supposed to have an icon?
hasIcon =
// If the collapsedIcon is being set, consult that
(opts.collapsedIcon !== undefined ? opts.collapsedIcon !== false :
// Otherwise consult the existing option value
currentOpts.collapsedIcon !== false);
// If any icon-related options have changed, make sure the new icon
// state is reflected by first removing all icon-related classes
// reflecting the current state and then adding all icon-related
// classes for the new state
if (!(opts.iconpos === undefined &&
opts.collapsedIcon === undefined &&
opts.expandedIcon === undefined)) {
// Remove all current icon-related classes
anchor.removeClass([iconposClass(currentOpts.iconpos)]
.concat((currentOpts.expandedIcon ?
["ui-icon-" + currentOpts.expandedIcon] : []))
.concat((currentOpts.collapsedIcon ?
["ui-icon-" + currentOpts.collapsedIcon] : []))
.join(" "));
// Add new classes if an icon is supposed to be present
if (hasIcon) {
anchor.addClass(
[iconposClass(opts.iconpos !== undefined ?
opts.iconpos : currentOpts.iconpos)]
.concat(isCollapsed ?
["ui-icon-" + (opts.collapsedIcon !== undefined ?
opts.collapsedIcon :
currentOpts.collapsedIcon)] :
["ui-icon-" + (opts.expandedIcon !== undefined ?
opts.expandedIcon :
currentOpts.expandedIcon)])
.join(" "));
}
}
if (opts.theme !== undefined) {
oldTheme = this._themeClassFromOption("ui-btn-", currentOpts.theme);
newTheme = this._themeClassFromOption("ui-btn-", opts.theme);
anchor.removeClass(oldTheme).addClass(newTheme);
}
if (opts.contentTheme !== undefined) {
oldTheme = this._themeClassFromOption("ui-body-",
currentOpts.contentTheme);
newTheme = this._themeClassFromOption("ui-body-",
opts.contentTheme);
ui.content.removeClass(oldTheme).addClass(newTheme);
}
if (opts.inset !== undefined) {
elem.toggleClass("ui-collapsible-inset", opts.inset);
hasCorners = !!(opts.inset && (opts.corners || currentOpts.corners));
}
if (opts.corners !== undefined) {
hasCorners = !!(opts.corners && (opts.inset || currentOpts.inset));
}
if (hasCorners !== undefined) {
elem.toggleClass("ui-corner-all", hasCorners);
}
if (opts.mini !== undefined) {
anchor.toggleClass("ui-mini", opts.mini);
}
},
_setOptions: function (options) {
this._applyOptions(options);
this._super(options);
this._renderedOptions = this._getOptions(this.options);
},
_handleExpandCollapse: function (isCollapse) {
var opts = this._renderedOptions,
ui = this._ui;
ui.status.text(isCollapse ? opts.expandCueText : opts.collapseCueText);
ui.heading
.toggleClass("ui-collapsible-heading-collapsed", isCollapse)
.find("a").first()
.toggleClass("ui-icon-" + opts.expandedIcon, !isCollapse)
// logic or cause same icon for expanded/collapsed state would remove the ui-icon-class
.toggleClass("ui-icon-" + opts.collapsedIcon, (isCollapse || opts.expandedIcon === opts.collapsedIcon))
.removeClass($.mobile.activeBtnClass);
this.element.toggleClass("ui-collapsible-collapsed", isCollapse);
ui.content
.toggleClass("ui-collapsible-content-collapsed", isCollapse)
.attr("aria-hidden", isCollapse)
.trigger("updatelayout");
this.options.collapsed = isCollapse;
this._trigger(isCollapse ? "collapse" : "expand");
},
expand: function () {
this._handleExpandCollapse(false);
},
collapse: function () {
this._handleExpandCollapse(true);
},
_destroy: function () {
var ui = this._ui,
opts = this.options;
if (opts.enhanced) {
return;
}
if (ui.placeholder) {
ui.originalHeading.insertBefore(ui.placeholder);
ui.placeholder.remove();
ui.heading.remove();
} else {
ui.status.remove();
ui.heading
.removeClass("ui-collapsible-heading ui-collapsible-heading-collapsed")
.children()
.contents()
.unwrap();
}
ui.anchor.contents().unwrap();
ui.content.contents().unwrap();
this.element
.removeClass("ui-collapsible ui-collapsible-collapsed " +
"ui-collapsible-themed-content ui-collapsible-inset ui-corner-all");
}
});
// Defaults to be used by all instances of collapsible if per-instance values
// are unset or if nothing is specified by way of inheritance from an accordion.
// Note that this hash does not contain options "collapsed" or "heading",
// because those are not inheritable.
$.mobile.collapsible.defaults = {
expandCueText: " click to expand contents",
collapseCueText: " click to collapse contents",
collapsedIcon: "plus",
contentTheme: "inherit",
expandedIcon: "minus",
iconpos: "left",
inset: true,
corners: true,
theme: "inherit",
mini: false
};
})(jQuery);

View file

@ -770,9 +770,12 @@ $.ui.plugin = {
window.scrollTo(0, ypos);
},
getClosestBaseUrl: function( ele ) {
getClosestBaseUrl: function (ele) {
var page = parentWithClass(ele, 'ui-page');
// Find the closest page and extract out its url.
var url = parentWithClass(ele, 'ui-page').getAttribute("data-url"),
var url = (page ? page.getAttribute("data-url") : null),
base = $.mobile.path.documentBase.hrefNoHash;
if ( !$.mobile.dynamicBaseEnabled || !url || !$.mobile.path.isPath( url ) ) {
@ -3565,6 +3568,8 @@ $.fn.fieldcontain = function(/* options */) {
(function( $, undefined ) {
var pageCache = {};
$.widget( "mobile.pagecontainer", {
options: {
theme: "a"
@ -4029,10 +4034,13 @@ $.fn.fieldcontain = function(/* options */) {
_loadSuccess: function( absUrl, triggerData, settings, deferred ) {
var fileUrl = this._createFileUrl( absUrl );
return $.proxy(function (html, textStatus, xhr) {
return $.proxy(function (html, wasCached) {
if ($.mobile.filterHtml) {
html = $.mobile.filterHtml(html);
if (!wasCached || typeof (wasCached) != 'boolean') {
if ($.mobile.filterHtml) {
html = $.mobile.filterHtml(html);
}
pageCache[absUrl.split('?')[0]] = html;
}
//dont update the base tag if we are prefetching
@ -4045,10 +4053,6 @@ $.fn.fieldcontain = function(/* options */) {
this._setLoadedTitle( content, html );
// Add the content reference and xhr to our triggerData.
triggerData.xhr = xhr;
triggerData.textStatus = textStatus;
// DEPRECATED
triggerData.page = content;
@ -4069,6 +4073,7 @@ $.fn.fieldcontain = function(/* options */) {
dependencies.push('jqmicons');
dependencies.push('jqmpopup');
dependencies.push('jqmlistview');
dependencies.push('jqmcollapsible');
}
var currentSelf = this;
@ -4214,6 +4219,13 @@ $.fn.fieldcontain = function(/* options */) {
return deferred.promise();
}
var successFn = this._loadSuccess(absUrl, triggerData, settings, deferred);
var cachedResult = pageCache[absUrl.split('?')[0]];
if (cachedResult) {
successFn(cachedResult, true);
return deferred.promise();
}
// Load the new content.
$.ajax({
url: fileUrl,
@ -4221,7 +4233,7 @@ $.fn.fieldcontain = function(/* options */) {
data: settings.data,
contentType: settings.contentType,
dataType: "html",
success: this._loadSuccess( absUrl, triggerData, settings, deferred ),
success: successFn,
error: this._loadError( absUrl, triggerData, settings, deferred )
});
@ -5050,41 +5062,6 @@ $.mobile.links = function( target ) {
})( jQuery );
(function( $ ) {
var meta = $( "meta[name=viewport]" ),
initialContent = meta.attr( "content" ),
disabledZoom = initialContent + ",maximum-scale=1, user-scalable=no",
enabledZoom = initialContent + ",maximum-scale=10, user-scalable=yes",
disabledInitially = /(user-scalable[\s]*=[\s]*no)|(maximum-scale[\s]*=[\s]*1)[$,\s]/.test( initialContent );
$.mobile.zoom = $.extend( {}, {
enabled: !disabledInitially,
locked: false,
disable: function( lock ) {
if ( !disabledInitially && !$.mobile.zoom.locked ) {
meta.attr( "content", disabledZoom );
$.mobile.zoom.enabled = false;
$.mobile.zoom.locked = lock || false;
}
},
enable: function( unlock ) {
if ( !disabledInitially && ( !$.mobile.zoom.locked || unlock === true ) ) {
meta.attr( "content", enabledZoom );
$.mobile.zoom.enabled = true;
$.mobile.zoom.locked = false;
}
},
restore: function() {
if ( !disabledInitially ) {
meta.attr( "content", initialContent );
$.mobile.zoom.enabled = true;
}
}
});
}( jQuery ));
(function( $, undefined ) {
var uiScreenHiddenRegex = /\bui-screen-hidden\b/;
@ -5135,354 +5112,6 @@ $.mobile.behaviors.addFirstLastClasses = {
(function( $, undefined ) {
var rInitialLetter = /([A-Z])/g,
// Construct iconpos class from iconpos value
iconposClass = function( iconpos ) {
return ( "ui-btn-icon-" + ( iconpos === null ? "left" : iconpos ) );
};
$.widget( "mobile.collapsible", {
options: {
enhanced: false,
expandCueText: null,
collapseCueText: null,
collapsed: true,
heading: "h1,h2,h3,h4,h5,h6,legend",
collapsedIcon: null,
expandedIcon: null,
iconpos: null,
theme: null,
contentTheme: null,
inset: null,
corners: null,
mini: null
},
_create: function() {
var elem = this.element,
ui = {
accordion: elem
.closest( ":jqmData(role='collapsible-set')," +
":jqmData(role='collapsibleset')" +
( $.mobile.collapsibleset ? ", :mobile-collapsibleset" :
"" ) )
.addClass( "ui-collapsible-set" )
};
this._ui = ui;
this._renderedOptions = this._getOptions( this.options );
if ( this.options.enhanced ) {
ui.heading = this.element.children( ".ui-collapsible-heading" );
ui.content = ui.heading.next();
ui.anchor = ui.heading.children();
ui.status = ui.anchor.children( ".ui-collapsible-heading-status" );
} else {
this._enhance( elem, ui );
}
this._on( ui.heading, {
"tap": function() {
ui.heading.find( "a" ).first().addClass( $.mobile.activeBtnClass );
},
"click": function( event ) {
this._handleExpandCollapse( !ui.heading.hasClass( "ui-collapsible-heading-collapsed" ) );
event.preventDefault();
event.stopPropagation();
}
});
},
// Adjust the keys inside options for inherited values
_getOptions: function( options ) {
var key,
accordion = this._ui.accordion,
accordionWidget = this._ui.accordionWidget;
// Copy options
options = $.extend( {}, options );
if ( accordion.length && !accordionWidget ) {
this._ui.accordionWidget =
accordionWidget = accordion.data( "mobile-collapsibleset" );
}
for ( key in options ) {
// Retrieve the option value first from the options object passed in and, if
// null, from the parent accordion or, if that's null too, or if there's no
// parent accordion, then from the defaults.
options[ key ] =
( options[ key ] != null ) ? options[ key ] :
( accordionWidget ) ? accordionWidget.options[ key ] :
accordion.length ? $.mobile.getAttribute( accordion[ 0 ],
key.replace( rInitialLetter, "-$1" ).toLowerCase() ):
null;
if ( null == options[ key ] ) {
options[ key ] = $.mobile.collapsible.defaults[ key ];
}
}
return options;
},
_themeClassFromOption: function( prefix, value ) {
return ( value ? ( value === "none" ? "" : prefix + value ) : "" );
},
_enhance: function( elem, ui ) {
var iconclass,
opts = this._renderedOptions,
contentThemeClass = this._themeClassFromOption( "ui-body-", opts.contentTheme );
elem.addClass( "ui-collapsible " +
( opts.inset ? "ui-collapsible-inset " : "" ) +
( opts.inset && opts.corners ? "ui-corner-all " : "" ) +
( contentThemeClass ? "ui-collapsible-themed-content " : "" ) );
ui.originalHeading = elem.children( this.options.heading ).first(),
ui.content = elem
.wrapInner( "<div " +
"class='ui-collapsible-content " +
contentThemeClass + "'></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();
}
iconclass = ( opts.collapsed ? ( opts.collapsedIcon ? "ui-icon-" + opts.collapsedIcon : "" ):
( opts.expandedIcon ? "ui-icon-" + opts.expandedIcon : "" ) );
ui.status = $( "<span class='ui-collapsible-heading-status'></span>" );
ui.anchor = ui.heading
.detach()
//modify markup & attributes
.addClass( "ui-collapsible-heading" )
.append( ui.status )
.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
.find( "a" )
.first()
.addClass( "ui-btn " +
( iconclass ? iconclass + " " : "" ) +
( iconclass ? iconposClass( opts.iconpos ) +
" " : "" ) +
this._themeClassFromOption( "ui-btn-", opts.theme ) + " " +
( opts.mini ? "ui-mini " : "" ) );
//drop heading in before content
ui.heading.insertBefore( ui.content );
this._handleExpandCollapse( this.options.collapsed );
return ui;
},
refresh: function() {
this._applyOptions( this.options );
this._renderedOptions = this._getOptions( this.options );
},
_applyOptions: function( options ) {
var isCollapsed, newTheme, oldTheme, hasCorners, hasIcon,
elem = this.element,
currentOpts = this._renderedOptions,
ui = this._ui,
anchor = ui.anchor,
status = ui.status,
opts = this._getOptions( options );
// First and foremost we need to make sure the collapsible is in the proper
// state, in case somebody decided to change the collapsed option at the
// same time as another option
if ( options.collapsed !== undefined ) {
this._handleExpandCollapse( options.collapsed );
}
isCollapsed = elem.hasClass( "ui-collapsible-collapsed" );
// We only need to apply the cue text for the current state right away.
// The cue text for the alternate state will be stored in the options
// and applied the next time the collapsible's state is toggled
if ( isCollapsed ) {
if ( opts.expandCueText !== undefined ) {
status.text( opts.expandCueText );
}
} else {
if ( opts.collapseCueText !== undefined ) {
status.text( opts.collapseCueText );
}
}
// Update icon
// Is it supposed to have an icon?
hasIcon =
// If the collapsedIcon is being set, consult that
( opts.collapsedIcon !== undefined ? opts.collapsedIcon !== false :
// Otherwise consult the existing option value
currentOpts.collapsedIcon !== false );
// If any icon-related options have changed, make sure the new icon
// state is reflected by first removing all icon-related classes
// reflecting the current state and then adding all icon-related
// classes for the new state
if ( !( opts.iconpos === undefined &&
opts.collapsedIcon === undefined &&
opts.expandedIcon === undefined ) ) {
// Remove all current icon-related classes
anchor.removeClass( [ iconposClass( currentOpts.iconpos ) ]
.concat( ( currentOpts.expandedIcon ?
[ "ui-icon-" + currentOpts.expandedIcon ] : [] ) )
.concat( ( currentOpts.collapsedIcon ?
[ "ui-icon-" + currentOpts.collapsedIcon ] : [] ) )
.join( " " ) );
// Add new classes if an icon is supposed to be present
if ( hasIcon ) {
anchor.addClass(
[ iconposClass( opts.iconpos !== undefined ?
opts.iconpos : currentOpts.iconpos ) ]
.concat( isCollapsed ?
[ "ui-icon-" + ( opts.collapsedIcon !== undefined ?
opts.collapsedIcon :
currentOpts.collapsedIcon ) ] :
[ "ui-icon-" + ( opts.expandedIcon !== undefined ?
opts.expandedIcon :
currentOpts.expandedIcon ) ] )
.join( " " ) );
}
}
if ( opts.theme !== undefined ) {
oldTheme = this._themeClassFromOption( "ui-btn-", currentOpts.theme );
newTheme = this._themeClassFromOption( "ui-btn-", opts.theme );
anchor.removeClass( oldTheme ).addClass( newTheme );
}
if ( opts.contentTheme !== undefined ) {
oldTheme = this._themeClassFromOption( "ui-body-",
currentOpts.contentTheme );
newTheme = this._themeClassFromOption( "ui-body-",
opts.contentTheme );
ui.content.removeClass( oldTheme ).addClass( newTheme );
}
if ( opts.inset !== undefined ) {
elem.toggleClass( "ui-collapsible-inset", opts.inset );
hasCorners = !!( opts.inset && ( opts.corners || currentOpts.corners ) );
}
if ( opts.corners !== undefined ) {
hasCorners = !!( opts.corners && ( opts.inset || currentOpts.inset ) );
}
if ( hasCorners !== undefined ) {
elem.toggleClass( "ui-corner-all", hasCorners );
}
if ( opts.mini !== undefined ) {
anchor.toggleClass( "ui-mini", opts.mini );
}
},
_setOptions: function( options ) {
this._applyOptions( options );
this._super( options );
this._renderedOptions = this._getOptions( this.options );
},
_handleExpandCollapse: function( isCollapse ) {
var opts = this._renderedOptions,
ui = this._ui;
ui.status.text( isCollapse ? opts.expandCueText : opts.collapseCueText );
ui.heading
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse )
.find( "a" ).first()
.toggleClass( "ui-icon-" + opts.expandedIcon, !isCollapse )
// logic or cause same icon for expanded/collapsed state would remove the ui-icon-class
.toggleClass( "ui-icon-" + opts.collapsedIcon, ( isCollapse || opts.expandedIcon === opts.collapsedIcon ) )
.removeClass( $.mobile.activeBtnClass );
this.element.toggleClass( "ui-collapsible-collapsed", isCollapse );
ui.content
.toggleClass( "ui-collapsible-content-collapsed", isCollapse )
.attr( "aria-hidden", isCollapse )
.trigger( "updatelayout" );
this.options.collapsed = isCollapse;
this._trigger( isCollapse ? "collapse" : "expand" );
},
expand: function() {
this._handleExpandCollapse( false );
},
collapse: function() {
this._handleExpandCollapse( true );
},
_destroy: function() {
var ui = this._ui,
opts = this.options;
if ( opts.enhanced ) {
return;
}
if ( ui.placeholder ) {
ui.originalHeading.insertBefore( ui.placeholder );
ui.placeholder.remove();
ui.heading.remove();
} else {
ui.status.remove();
ui.heading
.removeClass( "ui-collapsible-heading ui-collapsible-heading-collapsed" )
.children()
.contents()
.unwrap();
}
ui.anchor.contents().unwrap();
ui.content.contents().unwrap();
this.element
.removeClass( "ui-collapsible ui-collapsible-collapsed " +
"ui-collapsible-themed-content ui-collapsible-inset ui-corner-all" );
}
});
// Defaults to be used by all instances of collapsible if per-instance values
// are unset or if nothing is specified by way of inheritance from an accordion.
// Note that this hash does not contain options "collapsed" or "heading",
// because those are not inheritable.
$.mobile.collapsible.defaults = {
expandCueText: " click to expand contents",
collapseCueText: " click to collapse contents",
collapsedIcon: "plus",
contentTheme: "inherit",
expandedIcon: "minus",
iconpos: "left",
inset: true,
corners: true,
theme: "inherit",
mini: false
};
})( jQuery );
(function( $, undefined ) {
$.widget( "mobile.controlgroup", $.extend( {
options: {
enhanced: false,

View file

@ -613,107 +613,6 @@ li.ui-block-e {
}
.ui-collapsible {
margin: 0 -1em;
}
.ui-collapsible-inset,
.ui-collapsible-set {
margin: .5em 0;
}
.ui-collapsible-heading {
display: block;
margin: 0;
padding: 0;
position: relative;
}
.ui-collapsible-heading .ui-btn {
text-align: left;
margin: 0;
border-left-width: 0;
border-right-width: 0;
}
.ui-collapsible-heading .ui-btn-icon-top,
.ui-collapsible-heading .ui-btn-icon-bottom {
text-align: center;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
}
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
border-top-width: 0;
}
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
border-top-width: 1px;
}
.ui-collapsible-heading-status {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-collapsible-content {
display: block;
margin: 0;
padding: .5em 1em;
}
.ui-collapsible-themed-content .ui-collapsible-content {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content {
border-left-width: 1px;
border-right-width: 1px;
}
.ui-collapsible-inset .ui-collapsible-content {
margin: 0;
}
.ui-collapsible-content-collapsed {
display: none;
}
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-collapsible-set .ui-collapsible.ui-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-content,
.ui-collapsible-set .ui-collapsible.ui-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-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 .ui-collapsible {
margin: -1px -1em 0;
}
.ui-collapsible-set .ui-collapsible-inset {
margin: -1px 0 0;
}
.ui-collapsible-set .ui-collapsible.ui-first-child {
margin-top: 0;
}
.ui-controlgroup,
fieldset.ui-controlgroup {
padding: 0;