Permalink
Browse files

Loader: Implement classes option

Fixes gh-7699
Closes gh-8075
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Jul 31, 2015
1 parent 5d111f5 commit e2f8f064cd09e731a72251fb758dbe4eaec56cc4
@@ -42,6 +42,8 @@ module.exports = {
"js/widgets/popup.arrow.js",
"js/widgets/popup.backcompat.js",
"js/widgets/popup.js",
"js/widgets/loader.js",
"js/widgets/loader.backcompat.js",
// Tests
"tests/unit/textinput/settings.js",
@@ -60,7 +62,9 @@ module.exports = {
"tests/unit/enhancer/enhancer.js",
"tests/integration/popup/popup_core.js",
"tests/integration/popup/backcompat_core.js",
"tests/unit/popup/popup_core.js"
"tests/unit/popup/popup_core.js",
"tests/unit/loader/loader_core.js",
"tests/unit/loader/backcompat_core.js"
]
},
tests: {
@@ -145,10 +145,6 @@ div.ui-mobile-viewport {
.ui-loader-textonly .ui-icon-loading {
display: none;
}
.ui-loader-fakefix {
position: absolute;
}
/* Headers, content panels */
.ui-bar,
.ui-body {
View
@@ -55,15 +55,15 @@
<button class="show-page-loading-msg" data-textonly="false" data-textvisible="false" data-msgtext="" data-inline="true">Icon (default)</button>
<button class="show-page-loading-msg" data-textonly="false" data-textvisible="true" data-msgtext="" data-inline="true">Icon + text</button>
<button class="show-page-loading-msg" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-inline="true">Text only</button>
<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
<button class="hide-page-loading-msg" data-inline="true" data-icon="ui-icon-delete">Hide</button>
</div><!--/demo-html -->
<h2>Custom HTML</h2>
<p>Any HTML can be added to the loader overlay</p>
<div data-demo-html="true" data-demo-js="true">
<button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-inline="true" data-html="&lt;span class=&quot;ui-bar ui-shadow ui-overlay-d ui-corner-all&quot;&gt;&lt;img src=&quot;../_assets/img/jquery-logo.png&quot;&gt;&lt;h2&gt;is loading for you ...&lt;/h2&gt;&lt;/span&gt;" data-iconpos="right">Custom HTML</button>
<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
<button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-inline="true" data-html="&lt;span class=&quot;ui-bar ui-shadow ui-overlay-d ui-corner-all&quot;&gt;&lt;img src=&quot;../_assets/img/jquery-logo.png&quot;&gt;&lt;h2&gt;is loading for you ...&lt;/h2&gt;&lt;/span&gt;">Custom HTML</button>
<button class="hide-page-loading-msg" data-inline="true" data-icon="ui-icon-delete">Hide</button>
</div><!--/demo-html -->
@@ -73,7 +73,7 @@
<div data-demo-html="true" data-demo-js="true">
<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-inline="true">A</button>
<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-inline="true">B</button>
<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
<button class="hide-page-loading-msg" data-inline="true" data-icon="ui-icon-delete">Hide</button>
</div><!--/demo-html -->
</div><!-- /content -->
View
@@ -240,7 +240,7 @@ $.extend( $.mobile, {
loading: function() {
// If this is the first call to this function, instantiate a loader widget
var loader = this.loading._widget || $( $.mobile.loader.prototype.defaultHtml ).loader(),
var loader = this.loading._widget || $.mobile.loader().element,
// Call the appropriate method on the loader
returnValue = loader.loader.apply( loader, arguments );
View
@@ -29,6 +29,7 @@
'widgets/page.dialog.js',
'widgets/page.dialog.backcompat.js',
'widgets/loader.js',
'widgets/loader.backcompat.js',
'events/navigate.js',
'navigation/path.js',
View
@@ -14,6 +14,7 @@
define( [
"require",
"./widgets/loader",
"./widgets/loader.backcompat",
"./events/navigate",
"./navigation/path",
"./navigation/history",
@@ -0,0 +1,69 @@
/*!
* jQuery Mobile Loader Backcompat @VERSION
* http://jquerymobile.com
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
//>>label: Loading Message Backcompat
//>>group: Widgets
//>>description: The backwards compatible portions of the loader widget
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [
"jquery",
"./loader" ], factory );
} else {
// Browser globals
factory( jQuery );
}
} )( function( $ ) {
if ( $.mobileBackcompat !== false ) {
$.widget( "mobile.loader", $.mobile.loader, {
options: {
// custom html for the inner content of the loading message
html: ""
},
// DEPRECATED as of 1.5.0 and will be removed in 1.6.0 - we no longer support browsers
// incapable of native fixed support
fakeFixLoader: $.noop,
// DEPRECATED as of 1.5.0 and will be removed in 1.6.0 - we no longer support browsers
// incapable of native fixed support
checkLoaderPosition: $.noop,
show: function( theme ) {
var html;
this.resetHtml();
this._superApply( arguments );
html = ( $.type( theme ) === "object" && theme.html || this.options.html );
if ( html ) {
this.element.html( html );
}
},
resetHtml: function() {
this.element
.empty()
.append( this.loader.span )
.append( this.loader.header.empty() );
}
} );
}
return $.mobile.loader;
} );
View
@@ -23,6 +23,7 @@
"jquery",
"../helpers",
"../defaults",
"./widget.theme",
"../widget" ], factory );
} else {
@@ -31,139 +32,117 @@
}
} )( function( $ ) {
// TODO move loader class down into the widget settings
var loaderClass = "ui-loader",
$html = $( "html" );
var html = $( "html" );
return $.widget( "mobile.loader", {
$.widget( "mobile.loader", {
version: "@VERSION",
// NOTE if the global config settings are defined they will override these
// options
options: {
// the theme for the loading message
classes: {
"ui-loader": "ui-corner-all",
"ui-loader-icon": "ui-icon-loading"
},
enhanced: false,
// The theme for the loading message
theme: "a",
// whether the text in the loading message is shown
// Whether the text in the loading message is shown
textVisible: false,
// custom html for the inner content of the loading message
html: "",
// the text to be displayed when the popup is shown
// The text to be displayed when the popup is shown
text: "loading"
},
defaultHtml: "<div class='" + loaderClass + "'>" +
"<span class='ui-icon-loading'></span>" +
"<h1></h1>" +
"</div>",
_create: function() {
this.loader = {};
// For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
fakeFixLoader: function() {
var activeBtn = $( ".ui-button-active" ).first();
if ( this.options.enhanced ) {
this.loader.span = this.element.children( "span" );
this.loader.header = this.element.children( "h1" );
} else {
this.loader.span = $( "<span>" );
this.loader.header = $( "<h1>" );
}
this.element
.css( {
top: $.support.scrollTop && this.window.scrollTop() + this.window.height() / 2 ||
activeBtn.length && activeBtn.offset().top || 100
} );
},
this._addClass( "ui-loader" );
this._addClass( this.loader.span, "ui-loader-icon" );
this._addClass( this.loader.header, "ui-loader-header" );
// check position of loader to see if it appears to be "fixed" to center
// if not, use abs positioning
checkLoaderPosition: function() {
var offset = this.element.offset(),
scrollTop = this.window.scrollTop(),
screenHeight = this.window.height();
if ( offset.top < scrollTop || ( offset.top - scrollTop ) > screenHeight ) {
this.element.addClass( "ui-loader-fakefix" );
this.fakeFixLoader();
this.window
.unbind( "scroll", this.checkLoaderPosition )
.bind( "scroll", $.proxy( this.fakeFixLoader, this ) );
if ( !this.options.enhanced ) {
this.element
.append( this.loader.span )
.append( this.loader.header );
}
},
resetHtml: function() {
this.element.html( $( this.defaultHtml ).html() );
_themeElements: function() {
return [ {
element: this.element,
prefix: "ui-body-"
} ];
},
// Turn on/off page loading message. Theme doubles as an object argument
// with the following shape: { theme: '', text: '', html: '', textVisible: '' }
// Turn on/off page loading message. Theme doubles as an object argument with the following
// shape: { theme: '', text: '', html: '', textVisible: '' }
// NOTE that the $.mobile.loading* settings and params past the first are deprecated
// TODO sweet jesus we need to break some of this out
show: function( theme, msgText, textonly ) {
var textVisible, message, loadSettings;
this.resetHtml();
var textVisible, message, loadSettings, currentTheme;
// use the prototype options so that people can set them globally at
// mobile init. Consistency, it's what's for dinner
// Use the prototype options so that people can set them globally at mobile init.
// Consistency, it's what's for dinner.
if ( $.type( theme ) === "object" ) {
loadSettings = $.extend( {}, this.options, theme );
theme = loadSettings.theme;
} else {
loadSettings = this.options;
// here we prefer the theme value passed as a string argument, then
// we prefer the global option because we can't use undefined default
// prototype options, then the prototype option
// Here we prefer the theme value passed as a string argument, then we prefer the
// global option because we can't use undefined default prototype options, then the
// prototype option
theme = theme || loadSettings.theme;
}
// set the message text, prefer the param, then the settings object
// then loading message
// Set the message text, prefer the param, then the settings object then loading message
message = msgText || ( loadSettings.text === false ? "" : loadSettings.text );
// prepare the dom
$html.addClass( "ui-loading" );
// Prepare the DOM
this._addClass( html, "ui-loading" );
textVisible = loadSettings.textVisible;
// add the proper css given the options (theme, text, etc)
// Force text visibility if the second argument was supplied, or
// if the text was explicitly set in the object args
this.element.attr( "class", loaderClass +
" ui-corner-all ui-body-" + theme +
" ui-loader-" + ( textVisible || msgText || theme.text ? "verbose" : "default" ) +
( loadSettings.textonly || textonly ? " ui-loader-textonly" : "" ) );
// TODO verify that jquery.fn.html is ok to use in both cases here
// this might be overly defensive in preventing unknowing xss
// if the html attribute is defined on the loading settings, use that
// otherwise use the fallbacks from above
if ( loadSettings.html ) {
this.element.html( loadSettings.html );
} else {
this.element.find( "h1" ).text( message );
}
currentTheme = this.element.attr( "class" ).match( /\bui-body-[a-z]\b/ ) || [];
// If the pagecontainer widget has been defined we may use the :mobile-pagecontainer
// and attach to the element on which the pagecontainer widget has been defined. If not,
// we attach to the body.
this.element.appendTo( $.mobile.pagecontainer ?
$( ":mobile-pagecontainer" ) : $( "body" ) );
// Add the proper css given the options (theme, text, etc). Force text visibility if the
// second argument was supplied, or if the text was explicitly set in the object args.
this._removeClass.apply( this,
[ "ui-loader-verbose ui-loader-default ui-loader-textonly" ]
.concat( currentTheme ) )
._addClass( "ui-loader-" +
( textVisible || msgText || theme.text ? "verbose" : "default" ) +
( loadSettings.textonly || textonly ? " ui-loader-textonly" : "" ),
"ui-body-" + theme );
// check that the loader is visible
this.checkLoaderPosition();
this.loader.header.text( message );
// on scroll check the loader position
this.window.bind( "scroll", $.proxy( this.checkLoaderPosition, this ) );
// If the pagecontainer widget has been defined we may use the :mobile-pagecontainer and
// attach to the element on which the pagecontainer widget has been defined. If not, we
// attach to the body.
// TODO: Replace the selector below with $.mobile.pagecontainers[] once #7947 lands
this.element.appendTo( $.mobile.pagecontainer ?
$( ":mobile-pagecontainer" ) : $( "body" ) );
},
hide: function() {
$html.removeClass( "ui-loading" );
if ( this.options.text ) {
this.element.removeClass( "ui-loader-fakefix" );
}
this.window.unbind( "scroll", this.fakeFixLoader );
this.window.unbind( "scroll", this.checkLoaderPosition );
this._removeClass( html, "ui-loading" );
}
} );
return $.widget( "mobile.loader", $.mobile.loader, $.mobile.widget.theme );
} );
@@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Init Test Suite</title>
<!-- meta viewport left out on purpose for test append -->
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script src="../../jquery.testHelper.js"></script>
<script src="backcompat_core.js"></script>
<script src="../../../js/"></script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page" id="foo"></div>
</body>
</html>
Oops, something went wrong.

0 comments on commit e2f8f06

Please sign in to comment.