Skip to content

Commit

Permalink
Removed outdated button prop, added label props to pagination
Browse files Browse the repository at this point in the history 
Signed-off-by: StanZGenchev <[email protected]>
  • Loading branch information
@StanZGenchev
StanZGenchev committed Nov 21, 2024
1 parent 3b33f9c commit f821acd
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 59 deletions.
6 changes: 0 additions & 6 deletions docs/button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,6 @@ <h2>Attributes - Button</h2>
<td bk-table-cell>False</td>
<td bk-table-cell>If the button is part of a split button. (Internal use)</td>
</tr>
<tr bk-table-row>
<td bk-table-cell>in-group</td>
<td bk-table-cell>boolean</td>
<td bk-table-cell>False</td>
<td bk-table-cell>If the button is inside an bk-input-group-addon element.</td>
</tr>
<tr bk-table-row>
<td bk-table-cell>in-msg-strip</td>
<td bk-table-cell>boolean</td>
Expand Down
12 changes: 12 additions & 0 deletions docs/pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,24 @@ <h2>Attributes</h2>
<td bk-table-cell>True</td>
<td bk-table-cell>The total number of the items</td>
</tr>
<tr bk-table-row>
<td bk-table-cell>total-items-label</td>
<td bk-table-cell>string</td>
<td bk-table-cell>False</td>
<td bk-table-cell>Label for the total number of the items</td>
</tr>
<tr bk-table-row>
<td bk-table-cell>items-per-page</td>
<td bk-table-cell>number</td>
<td bk-table-cell>False</td>
<td bk-table-cell>The number of the items per page</td>
</tr>
<tr bk-table-row>
<td bk-table-cell>items-per-page-label</td>
<td bk-table-cell>string</td>
<td bk-table-cell>False</td>
<td bk-table-cell>Label for the items per page. Default is "Results per page:"</td>
</tr>
<tr bk-table-row>
<td bk-table-cell>current-page</td>
<td bk-table-cell>number</td>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "blimpkit",
"version": "1.0.5",
"version": "1.0.6",
"description": "BlimpKit is a UI component library",
"main": "dist/js/blimpkit.js",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/blimpkit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* SPDX-License-Identifier: EPL-2.0
*/
const blimpkit = angular.module('blimpKit', ['ngAria'])
.info({ version: '1.0.5' })
.info({ version: '1.0.6' })
.constant('ScreenEdgeMargin', {
FULL: 16,
DOUBLE: 32,
Expand Down
1 change: 0 additions & 1 deletion src/button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ blimpkit.constant('ButtonStates', {
arrowDirection: '@?',
isOverflow: '<?',
isSplit: '<?',
inGroup: '<?',
inMsgStrip: '<?',
nested: '<?',
decisive: '<?',
Expand Down
78 changes: 28 additions & 50 deletions src/pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ blimpkit.directive('bkPagination', (uuid, classNames, $injector) => {
replace: true,
scope: {
totalItems: '<',
totalItemsLabel: '@?',
itemsPerPage: '=?',
currentPage: '=?',
compact: '<?',
Expand All @@ -27,8 +28,9 @@ blimpkit.directive('bkPagination', (uuid, classNames, $injector) => {
pageChange: '&',
itemsPerPageChange: '&',
itemsPerPagePlacement: '@',
itemsPerPageLabel: '@?',
},
link: function (scope) {
link: (scope) => {
const maxButtonsInShortMode = 9; // must be an odd number (min 5)
const maxInnerButtonsInShortMode = maxButtonsInShortMode - 4; //excluding left and right arrow buttons and first and last number buttons

Expand All @@ -41,30 +43,26 @@ blimpkit.directive('bkPagination', (uuid, classNames, $injector) => {
scope.currentPageLabelId = `pag-page-label-${uuid.generate()}`;
scope.currentPageOfLabelId = `pag-of-label-${uuid.generate()}`;

scope.isShortMode = function () {
return scope.getPageCount() <= maxButtonsInShortMode;
};
scope.isShortMode = () => scope.getPageCount() <= maxButtonsInShortMode;

scope.isCurrentPageValid = function (pageNumber) {
return pageNumber >= 1 && pageNumber <= scope.getPageCount();
};
scope.isCurrentPageValid = (pageNumber) => pageNumber >= 1 && pageNumber <= scope.getPageCount();

scope.changePage = function () {
scope.changePage = () => {
scope.gotoPage(scope.currentPageInput);
};

scope.onCurrentPageInputChange = function () {
scope.onCurrentPageInputChange = () => {
scope.currentPageInputState = scope.isCurrentPageValid(scope.currentPageInput) ? null : 'error';
};

scope.onCurrentPageInputBlur = function () {
scope.onCurrentPageInputBlur = () => {
if (scope.currentPageInput != scope.currentPage) {
scope.currentPageInput = scope.currentPage;
scope.currentPageInputState = null;
}
};

scope.gotoPage = function (pageNumber) {
scope.gotoPage = (pageNumber) => {
if (scope.isCurrentPageValid(pageNumber)) {
scope.currentPage = pageNumber;
scope.currentPageInput = pageNumber;
Expand All @@ -73,47 +71,35 @@ blimpkit.directive('bkPagination', (uuid, classNames, $injector) => {
}
};

scope.gotoFirstPage = function () {
scope.gotoFirstPage = () => {
scope.gotoPage(1);
};

scope.gotoLastPage = function () {
scope.gotoLastPage = () => {
scope.gotoPage(scope.getPageCount());
};

scope.gotoPrevPage = function () {
scope.gotoPrevPage = () => {
scope.gotoPage(scope.currentPage - 1);
};

scope.gotoNextPage = function () {
scope.gotoNextPage = () => {
scope.gotoPage(scope.currentPage + 1);
};

scope.getPageCount = function () {
return Math.ceil(scope.totalItems / scope.itemsPerPage);
};
scope.getPageCount = () => Math.ceil(scope.totalItems / scope.itemsPerPage);

scope.isPrevButtonEnabled = function () {
return scope.currentPage > 1;
};
scope.isPrevButtonEnabled = () => scope.currentPage > 1;

scope.isNextButtonEnabled = function () {
return scope.currentPage < scope.getPageCount();
};
scope.isNextButtonEnabled = () => scope.currentPage < scope.getPageCount();

scope.hasStartEllipsys = function () {
return scope.getPageCount() > maxButtonsInShortMode && scope.currentPage > Math.ceil(maxButtonsInShortMode / 2);
};
scope.hasStartEllipsys = () => scope.getPageCount() > maxButtonsInShortMode && scope.currentPage > Math.ceil(maxButtonsInShortMode / 2);

scope.hasEndEllipsys = function () {
return scope.getPageCount() > maxButtonsInShortMode && scope.currentPage <= scope.getPageCount() - Math.ceil(maxButtonsInShortMode / 2);
};
scope.hasEndEllipsys = () => scope.getPageCount() > maxButtonsInShortMode && scope.currentPage <= scope.getPageCount() - Math.ceil(maxButtonsInShortMode / 2);

scope.showEllipsys = function (index, length) {
return (index === 0 && scope.hasStartEllipsys()) || (index === length - 2 && scope.hasEndEllipsys());
};
scope.showEllipsys = (index, length) => (index === 0 && scope.hasStartEllipsys()) || (index === length - 2 && scope.hasEndEllipsys());

scope.getPageNumbers = function () {
scope.getPageNumbers = () => {
let count = scope.getPageCount();
const numbers = [1];
if (count > 2) {
Expand Down Expand Up @@ -161,19 +147,13 @@ blimpkit.directive('bkPagination', (uuid, classNames, $injector) => {
'fd-button--compact': scope.compact === true,
});

scope.getNumberButtonAriaLabel = function (pageNumber) {
return pageNumber === scope.currentPage ? `Current Page, Page ${pageNumber}` : `Goto page ${pageNumber}`;
};
scope.getNumberButtonAriaLabel = (pageNumber) => pageNumber === scope.currentPage ? `Current Page, Page ${pageNumber}` : `Goto page ${pageNumber}`;

scope.getCurrentPageInputAriaLabelledBy = function () {
return [scope.currentPageLabelId, scope.currentPageOfLabelId].join(' ');
};
scope.getCurrentPageInputAriaLabelledBy = () => [scope.currentPageLabelId, scope.currentPageOfLabelId].join(' ');

scope.getTotal = function () {
return `${scope.totalItems} Results`;
};
scope.getTotal = () => `${scope.totalItems} ${scope.totalItemsLabel ?? 'Results'}`;

const itemsWatch = scope.$watch('itemsPerPage', function (newVal, oldVal) {
const itemsWatch = scope.$watch('itemsPerPage', (newVal, oldVal) => {
if (newVal !== oldVal) {
if (scope.itemsPerPageChange)
scope.itemsPerPageChange({ itemsPerPage: scope.itemsPerPage });
Expand All @@ -185,15 +165,13 @@ blimpkit.directive('bkPagination', (uuid, classNames, $injector) => {
}
});

scope.$on('$destroy', function () {
itemsWatch();
});
scope.$on('$destroy', () => { itemsWatch() });
},
template: `<div ng-class="getClasses()">
<div ng-if="itemsPerPageOptions" class="fd-pagination__per-page">
<label class="fd-form-label fd-pagination__per-page-label" id="{{ itemsPerPageLabelId }}">Results per page: </label>
<bk-select selected-value="$parent.itemsPerPage" compact="compact" label-id="{{ itemsPerPageLabelId }}" placement="{{ itemsPerPagePlacement }}">
<bk-option ng-repeat="option in itemsPerPageOptions" text="{{ option }}" value="option"></bk-option>
<label class="fd-form-label fd-pagination__per-page-label" id="{{::itemsPerPageLabelId}}">{{itemsPerPageLabel || 'Results per page:'}}</label>
<bk-select selected-value="$parent.itemsPerPage" compact="compact" label-id="{{::itemsPerPageLabelId}}" placement="{{ itemsPerPagePlacement }}">
<bk-option ng-repeat="option in itemsPerPageOptions track by option" text="{{ option }}" value="option"></bk-option>
</bk-select>
</div>
<nav class="fd-pagination__nav" role="navigation">
Expand Down

0 comments on commit f821acd

Please sign in to comment.