`textVisible` loader option is inadequately named/documented #5547

Closed
jhogervorst opened this Issue Jan 28, 2013 · 1 comment

Comments

Projects
None yet
1 participant
Contributor

jhogervorst commented Jan 28, 2013

Issue description

Reading the documentation (1.3.0 beta 1), it seems like the textVisible loader option only controls whether the supplied text will be shown:

textVisible (boolean, default: false) If true, the text value will be used under the spinner.

However, when using the html option to specify custom HTML for the loader, it turns out that the textVisible option still controls whether the loader is shown as simple circle or as a bigger box (with space for text or other content).

This is not clear from the documentation, so it would help to add information about this. The underlying problem is, however, that the naming for the textVisible option does not make clear that it controls more things than only showing text. It might be better to add another option to control whether the loader is shown as circle or as a box (or rename this option to something more appropriate).

Test code

Specifically look at the latest class name. This class seems to determine whether the loader is just a circle (ui-loader-default) or a bigger box (ui-loader-verbose).

Default loader

Output: circle loader

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
    <span class="ui-icon ui-icon-loading"></span>
    <h1>loading</h1>
</div>

Loader with text

Configuration

$.mobile.loader.prototype.options.text = 'Hi there';
$.mobile.loader.prototype.options.textVisible = true;

Output: box loader

<div class="ui-loader ui-corner-all ui-body-a ui-loader-verbose">
    <span class="ui-icon ui-icon-loading"></span>
    <h1>Hi there</h1>
</div>

Loader with custom HTML

Configuration

$.mobile.loader.prototype.options.html = 'Hello';

Output: circle loader (why?)

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
    Hello
</div>

Loader with custom HTML and textVisible option

Configuration

$.mobile.loader.prototype.options.html = 'Hello';
$.mobile.loader.prototype.options.textVisible = true;

Output: box loader (why?)

<div class="ui-loader ui-corner-all ui-body-a ui-loader-verbose">
    Hello
</div>

jQuery Mobile and jQuery core version used

  • JS Bin test page: jQuery Mobile latest and jQuery 1.9.0.

Other relevant information

Please let me know if test pages are required, in that case I will add them to this issue.

Contributor

jhogervorst commented May 23, 2013

Moved to the API repo: jquery/api.jquerymobile.com#122

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment