Set min and max bounds in page modal input. Closes #18

This commit is contained in:
Lucas Verney 2016-08-12 12:06:34 +02:00
parent e24e5cd6a9
commit 85dcf6d271
5 changed files with 26 additions and 14 deletions

View File

@ -16,7 +16,9 @@ Or you can use the [hosted version](https://phyks.github.io/ampache_react/).
## Requirements
To use this interface, you need:
* An Ampache server on which you have an account.
* An Ampache server on which you have an account, serving the [XML
API](https://github.com/ampache/ampache/wiki/XML-API). Ensures your server
has correct [CORS header](https://www.w3.org/wiki/CORS_Enabled) set.
* A modern browser.
For now, this is a work in progress and as such, the [hosted

View File

@ -40,10 +40,18 @@ class PaginationCSSIntl extends Component {
// Parse and check page number
const pageNumber = filterInt(this.refs.pageInput.value);
if (pageNumber && !isNaN(pageNumber)) {
if (pageNumber && !isNaN(pageNumber) && pageNumber > 0 && pageNumber <= this.props.nPages) {
// Remove error class from input form
this.refs.pageFormGroup.classList.remove("has-error");
this.refs.pageFormGroup.classList.add("has-success");
// Hide the modal and go to page
$(this.refs.paginationModal).modal("hide");
this.props.goToPage(pageNumber);
} else {
// Set error class on input form
this.refs.pageFormGroup.classList.add("has-error");
this.refs.pageFormGroup.classList.remove("has-success");
return;
}
}
@ -164,7 +172,9 @@ class PaginationCSSIntl extends Component {
</div>
<div className="modal-body">
<form onSubmit={this.goToPage}>
<input className="form-control" autoComplete="off" type="number" ref="pageInput" aria-label={formatMessage(paginationMessages["app.pagination.pageToGoTo"])} autoFocus />
<div className="form-group" ref="pageFormGroup">
<input className="form-control" autoComplete="off" type="number" ref="pageInput" aria-label={formatMessage(paginationMessages["app.pagination.pageToGoTo"])} min="1" max={this.props.nPages} step="1" defaultValue={this.props.currentPage} autoFocus />
</div>
</form>
</div>
<div className="modal-footer">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long