jquery / jquery/api.jquerymobile.com

`textVisible` loader option is inadequately named/documented

Open
#122 0 comments 0 reactions 0 assignees View on GitHub

@johnbender is already working on this.

Since Jun 12, 2013.

Dominant language
HTML
Stars
55
Forks
57
PR merge metrics
No merged PRs in 30d

Description

Issue description

Reading the documentation, it seems like the textVisible loader option only controls whether the supplied text will be shown:

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 guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the textVisible option documentation at api.jquerymobile.com/page-loading/#option-textVisible and compare it with the loader output examples in this issue. Check how the ui-loader-default and ui-loader-verbose classes are selected when html and textVisible are configured; done means documenting that behavior clearly or reaching a decided naming/API change.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.