diff --git a/packages/oui-file/src/file.html b/packages/oui-file/src/file.html index d6b7eeed..7b25076e 100644 --- a/packages/oui-file/src/file.html +++ b/packages/oui-file/src/file.html @@ -1,18 +1,21 @@ - + + - - { const getAttachments = (element) => element[0].querySelector(".oui-file-attachments"); const getDropArea = (element) => element[0].querySelector(".oui-file-droparea"); - const getInputFile = (element) => element[0].querySelector("input[type='file']"); - const getInputHidden = (element) => element[0].querySelector("input[type='hidden']"); + const getInputFile = (element) => element[0].querySelector(".oui-file__input_file"); + const getInputHidden = (element) => element[0].querySelector(".oui-file__input_hidden"); const getMultipleSelector = (element) => element[0].querySelector(".oui-file-multiple"); const getCustomSelector = (element) => element[0].querySelector(".oui-file-selector"); diff --git a/packages/oui-pagination/README.md b/packages/oui-pagination/README.md index 1e37f928..e138c112 100644 --- a/packages/oui-pagination/README.md +++ b/packages/oui-pagination/README.md @@ -4,6 +4,16 @@ ## Usage +### One page + +```html:preview + + +``` + ### A few pages ```html:preview @@ -25,13 +35,14 @@ ``` -### One page +### Huge amount of pages ```html:preview + current-offset="$ctrl.pagination3.offset" + page-size="$ctrl.pagination3.pageSize" + total-items="$ctrl.pagination3.totalItems" + on-change="$ctrl.onChange('pagination3', $event)"> ``` diff --git a/packages/oui-pagination/src/pagination.controller.js b/packages/oui-pagination/src/pagination.controller.js index 505f8dc7..14965ecb 100644 --- a/packages/oui-pagination/src/pagination.controller.js +++ b/packages/oui-pagination/src/pagination.controller.js @@ -1,3 +1,6 @@ +import clamp from "lodash/clamp"; +import range from "lodash/range"; + export default class { constructor ($attrs, ouiPaginationConfiguration) { "ngInject"; @@ -35,17 +38,23 @@ export default class { processPaginationChange () { this.pageCount = this.getPageCount(); - this.pageRange = this.getPageRange(); this.currentPage = this.getCurrentPage(); + this.inputPage = this.getCurrentPage(); // Update model for input } processTranslations () { - this.translations = Object.assign({}, this.config.translations); + this.translations = { ...this.config.translations }; this.translations.ofNResults = this.translations.ofNResults .replace("{{totalItems}}", this.totalItems); this.translations.currentPageOfPageCount = this.translations.currentPageOfPageCount .replace("{{currentPage}}", this.currentPage) .replace("{{pageCount}}", this.pageCount); + + // For huge amount of pages, we replaced "{{currentPage}}" by a number input + const translations = { ...this.config.translations }; + this.translations.inputPageOfPageCount = translations.currentPageOfPageCount + .replace("{{pageCount}}", this.pageCount) + .split("{{currentPage}}"); } getPageAriaLabel (page) { @@ -71,9 +80,19 @@ export default class { onPageChange (page) { this.currentOffset = (this.pageSize * (page - 1)) + 1; + this.currentPage = this.getCurrentPage(); + this.inputPage = this.getCurrentPage(); // Update model for input this._onChange(); } + checkPageRange (page) { + const currentPage = Number.isInteger(page) ? + clamp(page, 1, this.pageCount) : + this.currentPage; + + this.onPageChange(currentPage); + } + getLastItemOffset () { return Math.min(this.currentOffset + this.pageSize - 1, this.totalItems); } @@ -87,8 +106,7 @@ export default class { } getPageRange () { - return Array(...{ length: this.getPageCount() }) - .map((item, index) => index + 1); + return range(1, this.getPageCount() + 1); } _onChange () { diff --git a/packages/oui-pagination/src/pagination.html b/packages/oui-pagination/src/pagination.html index 225321bb..61c38146 100644 --- a/packages/oui-pagination/src/pagination.html +++ b/packages/oui-pagination/src/pagination.html @@ -27,18 +27,20 @@
- + +
- + + + + - -