@wcardinal/wcardinal-ui 0.154.0 → 0.155.0

package/dist/wcardinal/ui/d-pagination.js

@@ -3,269 +3,512 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __extends } from "tslib";
-import { DButton } from "./d-button";
 import { DLayoutHorizontal } from "./d-layout-horizontal";
-import { DPaginationDynamicButtons } from "./d-pagination-dynamic-buttons";
-import { DPaginationNavigationButton } from "./d-pagination-navigation-button";
-import { DThemes } from "./theme/d-themes";
+import { DPaginationDots } from "./d-pagination-dots";
+import { DPaginationButtonLast } from "./d-pagination-button-last";
+import { DPaginationButtonNext } from "./d-pagination-button-next";
+import { DPaginationButtonPage } from "./d-pagination-button-page";
+import { DPaginationButtonPrevious } from "./d-pagination-button-previous";
+import { DPaginationButtonTop } from "./d-pagination-button-top";
+import { isNumber } from "./util/is-number";
+import { DPaginationPage } from "./d-pagination-page";
+import { DLayoutSpace } from "./d-layout-space";
 var DPagination = /** @class */ (function (_super) {
     __extends(DPagination, _super);
-    function DPagination() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DPagination(options) {
+        var _a, _b, _c, _d;
+        var _this = _super.call(this, options) || this;
+        if (options != null) {
+            _this._size = (_b = (_a = options.size) !== null && _a !== void 0 ? _a : options.total) !== null && _b !== void 0 ? _b : 10;
+            _this._value = (_d = (_c = options.value) !== null && _c !== void 0 ? _c : options.selected) !== null && _d !== void 0 ? _d : 0;
+        }
+        else {
+            _this._size = 10;
+            _this._value = 0;
+        }
+        var buttonTop = _this.buttonTop;
+        var buttonPrevious = _this.buttonPrevious;
+        if (buttonTop != null) {
+            _this.addChild(buttonTop);
+        }
+        if (buttonPrevious != null) {
+            _this.addChild(buttonPrevious);
+        }
+        if (buttonTop != null || buttonPrevious != null) {
+            _this.addChild(_this.newSpace());
+        }
+        var buttonPages0 = _this.buttonPages0;
+        var buttonPages0Length = buttonPages0.length;
+        _this.addChild(buttonPages0[buttonPages0Length - 1]);
+        _this.addChild(_this.dots0);
+        for (var i = buttonPages0Length - 2; 0 <= i; --i) {
+            _this.addChild(buttonPages0[i]);
+        }
+        _this.addChild(_this.page);
+        var buttonPages1 = _this.buttonPages1;
+        var buttonPages1Length = buttonPages1.length;
+        for (var i = 0, imax = buttonPages1Length - 1; i < imax; ++i) {
+            _this.addChild(buttonPages1[i]);
+        }
+        _this.addChild(_this.dots1);
+        _this.addChild(buttonPages1[buttonPages1Length - 1]);
+        var buttonNext = _this.buttonNext;
+        var buttonLast = _this.buttonLast;
+        if (buttonNext != null || buttonLast != null) {
+            _this.addChild(_this.newSpace());
+        }
+        if (buttonNext != null) {
+            _this.addChild(buttonNext);
+        }
+        if (buttonLast != null) {
+            _this.addChild(buttonLast);
+        }
+        _this.update();
+        return _this;
     }
-    DPagination.prototype.init = function (options) {
-        var _this = this;
-        var _a;
-        _super.prototype.init.call(this, options);
-        this.DEFAULT_SELECTED = 0; // set default selected index page is page 0
-        // get total pages
-        this._total = options.total;
-        // get selected page
-        this._selected = (_a = options.selected) !== null && _a !== void 0 ? _a : this.DEFAULT_SELECTED;
-        // get button options
-        var button = options.button;
-        this._buttonOptions = {
-            first: !!(button === null || button === void 0 ? void 0 : button.first),
-            last: !!(button === null || button === void 0 ? void 0 : button.last),
-            width: button === null || button === void 0 ? void 0 : button.width
-        };
-        this.initButtons(this.getButtonWidth());
-        this.listenButtonClicked();
-        this.on("resize", function () {
-            _this._numberPageButtonVisible = _this.toNumberVisible();
-            _this.update();
+    DPagination.prototype.newSpace = function () {
+        var _a, _b, _c;
+        return new DLayoutSpace({
+            width: (_c = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.space) !== null && _c !== void 0 ? _c : this.theme.getButtonSpace()
         });
     };
+    Object.defineProperty(DPagination.prototype, "value", {
+        /**
+         * Returns a value that is an index of a current page.
+         *
+         * @returns a value that is an index of a selected page.
+         */
+        get: function () {
+            return this._value;
+        },
+        /**
+         * Sets a value that is an index of a current page.
+         *
+         * @param value a value that is an index of a page
+         */
+        set: function (value) {
+            if (0 <= value && value < this._size && this._value !== value) {
+                this._value = value;
+                this.update();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DPagination.prototype, "selected", {
         /**
-         * Get selected page.
+         * Returns an index of the selected page.
          *
-         * @returns index of selected page.
+         * @returns an index of the selected page.
+         * @deprecated in favor of {@link value}.
          */
         get: function () {
-            return this._selected;
+            return this.value;
         },
         /**
-         * Set selected page.
+         * Selects a page.
          *
-         * @param selected page's index want to select.
+         * @param index an index of a page
+         * @deprecated in favor of {@link #value}.
          */
-        set: function (selected) {
-            if (selected < 0 || selected >= this._total || !Number.isInteger(selected)) {
-                selected = this.DEFAULT_SELECTED;
+        set: function (index) {
+            this.value = index;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DPagination.prototype, "size", {
+        /**
+         * Returns a number of total pages.
+         *
+         * @returns a number of total pages.
+         */
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets a number of total pages.
+         *
+         * @param size a number of pages
+         */
+        set: function (size) {
+            if (0 <= size && this._size !== size) {
+                this._size = size;
+                if (size === 0) {
+                    this._value = -1;
+                }
+                else {
+                    this._value = Math.max(0, Math.min(this._size - 1, this._value));
+                }
+                this.update();
             }
-            this._selected = selected;
-            this.update();
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(DPagination.prototype, "total", {
         /**
-         * Get total pages.
+         * Returns a number of total pages.
          *
-         * @returns number of total pages.
+         * @returns a number of total pages.
+         * @deprecated in favor of {@link size}
          */
         get: function () {
-            return this._total;
+            return this.size;
         },
         /**
-         * Set total page.
+         * Sets a number of total pages.
          *
-         * @param total number of page want to present in pagination.
+         * @param total a number of pages
+         * @deprecated in favor of {@link size}
          */
         set: function (total) {
-            if (total >= 0 && Number.isInteger(total)) {
-                this._total = total;
-                this._numberPageButtonVisible = this.toNumberVisible();
-                this.selected = this._selected;
-                this._lastPageBtn.text = this._total;
-                this.update();
+            this.size = total;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DPagination.prototype, "dots0", {
+        get: function () {
+            var result = this._dots0;
+            if (result == null) {
+                result = this.newDots();
+                this._dots0 = result;
             }
+            return result;
         },
         enumerable: false,
         configurable: true
     });
-    DPagination.prototype.initButtons = function (width) {
-        this._previousBtn = new DPaginationNavigationButton({
-            width: width,
-            image: {
-                source: DThemes.getInstance().getAtlas().mappings
-                    .pagination_navigation_button_previous
+    Object.defineProperty(DPagination.prototype, "dots1", {
+        get: function () {
+            var result = this._dots1;
+            if (result == null) {
+                result = this.newDots();
+                this._dots1 = result;
             }
-        });
-        this._nextBtn = new DPaginationNavigationButton({
-            width: width,
-            image: {
-                source: DThemes.getInstance().getAtlas().mappings.pagination_navigation_button_next
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newDots = function () {
+        return new DPaginationDots();
+    };
+    Object.defineProperty(DPagination.prototype, "buttonLast", {
+        get: function () {
+            var result = this._buttonLast;
+            if (result === undefined) {
+                result = this.newButtonLast();
+                this._buttonLast = result;
             }
-        });
-        this._goFirstBtn = new DPaginationNavigationButton({
-            width: width,
-            image: {
-                source: DThemes.getInstance().getAtlas().mappings
-                    .pagination_navigation_button_go_first
-            },
-            visible: this._buttonOptions.first
-        });
-        this._goLastBtn = new DPaginationNavigationButton({
-            width: width,
-            image: {
-                source: DThemes.getInstance().getAtlas().mappings
-                    .pagination_navigation_button_go_last
-            },
-            visible: this._buttonOptions.last
-        });
-        this._dynamicPageBtns = new DPaginationDynamicButtons({
-            button: {
-                width: width
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newButtonLast = function () {
+        var _this = this;
+        var _a, _b;
+        var last = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.last;
+        if (last !== null && last !== false && last !== undefined) {
+            var result = new DPaginationButtonLast(last !== true ? last : undefined);
+            result.on("active", function () {
+                _this.onButtonLastActive();
+            });
+            return result;
+        }
+        return null;
+    };
+    DPagination.prototype.onButtonLastActive = function () {
+        this.moveTo(this._size - 1);
+    };
+    DPagination.prototype.moveTo = function (index) {
+        if (0 <= index && index < this._size && this._value !== index) {
+            var oldIndex = this._value;
+            this._value = index;
+            this.emit("change", index, oldIndex, this);
+            this.update();
+        }
+    };
+    Object.defineProperty(DPagination.prototype, "buttonNext", {
+        get: function () {
+            var result = this._buttonNext;
+            if (result === undefined) {
+                result = this.newButtonNext();
+                this._buttonNext = result;
             }
-        });
-        this._firstPageBtn = new DButton({
-            width: width,
-            text: {
-                value: 1
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newButtonNext = function () {
+        var _this = this;
+        var _a, _b;
+        var next = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.next;
+        if (next !== null && next !== false) {
+            var result = new DPaginationButtonNext(next !== true ? next : undefined);
+            result.on("active", function () {
+                _this.onButtonNextActive();
+            });
+            return result;
+        }
+        return null;
+    };
+    DPagination.prototype.onButtonNextActive = function () {
+        this.moveTo(this._value + 1);
+    };
+    Object.defineProperty(DPagination.prototype, "buttonPrevious", {
+        get: function () {
+            var result = this._buttonPrevious;
+            if (result === undefined) {
+                result = this.newButtonPrevious();
+                this._buttonPrevious = result;
             }
-        });
-        this._lastPageBtn = new DButton({
-            width: width,
-            text: {
-                value: this._total
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newButtonPrevious = function () {
+        var _this = this;
+        var _a, _b;
+        var previous = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.previous;
+        if (previous !== null && previous !== false) {
+            var result = new DPaginationButtonPrevious(previous !== true ? previous : undefined);
+            result.on("active", function () {
+                _this.onButtonPreviousActive();
+            });
+            return result;
+        }
+        return null;
+    };
+    DPagination.prototype.onButtonPreviousActive = function () {
+        this.moveTo(this._value - 1);
+    };
+    Object.defineProperty(DPagination.prototype, "buttonTop", {
+        get: function () {
+            var result = this._buttonTop;
+            if (result === undefined) {
+                result = this.newButtonTop();
+                this._buttonTop = result;
             }
-        });
-        this.addChild(this._goFirstBtn);
-        this.addChild(this._previousBtn);
-        this.addChild(this._firstPageBtn);
-        this.addChild(this._dynamicPageBtns);
-        this.addChild(this._lastPageBtn);
-        this.addChild(this._nextBtn);
-        this.addChild(this._goLastBtn);
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newButtonTop = function () {
+        var _this = this;
+        var _a, _b;
+        var top = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.top;
+        if (top !== null && top !== false && top !== undefined) {
+            var result = new DPaginationButtonTop(top !== true ? top : undefined);
+            result.on("active", function () {
+                _this.onButtonTopActive();
+            });
+            return result;
+        }
+        return null;
     };
-    DPagination.prototype.listenButtonClicked = function () {
+    DPagination.prototype.onButtonTopActive = function () {
+        this.moveTo(0);
+    };
+    DPagination.prototype.newButtonPage = function () {
         var _this = this;
-        this._firstPageBtn.on("active", function (btn) {
-            _this.onClickPageButton(btn);
-        });
-        this._lastPageBtn.on("active", function (btn) {
-            _this.onClickPageButton(btn);
+        var _a, _b;
+        var result = new DPaginationButtonPage((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.page);
+        result.on("active", function () {
+            _this.onButtonPageActive(result);
         });
-        this._dynamicPageBtns.on("active", function (btn) {
-            _this.onClickPageButton(btn);
-        });
-        this._goFirstBtn.on("active", function (btn) {
-            _this.selected = _this.DEFAULT_SELECTED;
-        });
-        this._goLastBtn.on("active", function (btn) {
-            _this.selected = _this._total - 1;
-        });
-        this._nextBtn.on("active", function (btn) {
-            if (_this.selected !== _this._total + 1) {
-                _this.selected = _this._selected + 1;
+        return result;
+    };
+    Object.defineProperty(DPagination.prototype, "buttonPages0", {
+        get: function () {
+            var result = this._buttonPages0;
+            if (result == null) {
+                result = this.newButtonPages0();
+                this._buttonPages0 = result;
             }
-        });
-        this._previousBtn.on("active", function (btn) {
-            if (_this._selected !== 0) {
-                _this.selected = _this._selected - 1;
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newButtonPages0 = function () {
+        return [
+            this.newButtonPage(),
+            this.newButtonPage(),
+            this.newButtonPage(),
+            this.newButtonPage()
+        ];
+    };
+    Object.defineProperty(DPagination.prototype, "buttonPages1", {
+        get: function () {
+            var result = this._buttonPages1;
+            if (result == null) {
+                result = this.newButtonPages1();
+                this._buttonPages1 = result;
             }
-        });
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newButtonPages1 = function () {
+        return [
+            this.newButtonPage(),
+            this.newButtonPage(),
+            this.newButtonPage(),
+            this.newButtonPage()
+        ];
     };
-    DPagination.prototype.update = function () {
-        var startDynamic;
-        var endDynamic;
-        var dotsLeft;
-        var dotsRight;
-        var numberButtonsInLeft = 0;
-        var numberButtonsInRight = 0;
-        this.updateStaticButtons();
-        // Number displayed buttons from first button to selected button when select center button of all buttons.
-        // Not including selected button.
-        var numberButtonsFirstToCenter = Math.ceil((this._numberPageButtonVisible - 1) * 0.5);
-        var numberButtonsCenterToEnd = Math.floor((this._numberPageButtonVisible - 1) * 0.5);
-        if (this._selected < numberButtonsFirstToCenter) {
-            numberButtonsInLeft = this._selected;
-            numberButtonsInRight = this._numberPageButtonVisible - numberButtonsInLeft - 1;
-        }
-        else if (this._selected + numberButtonsCenterToEnd > this._total - 1) {
-            numberButtonsInRight = this._total - 1 - this.selected;
-            numberButtonsInLeft = this._numberPageButtonVisible - numberButtonsInRight - 1;
-        }
-        else {
-            numberButtonsInLeft = numberButtonsFirstToCenter;
-            numberButtonsInRight = numberButtonsCenterToEnd;
-        }
-        if (this._selected <= numberButtonsInLeft) {
-            startDynamic = 1;
-            dotsLeft = false;
-        }
-        else {
-            startDynamic = this._selected - numberButtonsInLeft + 2;
-            dotsLeft = true;
-        }
-        if (this._selected + numberButtonsInRight >= this._total - 1) {
-            endDynamic = this._total - 2;
-            dotsRight = false;
-        }
-        else {
-            endDynamic = this._selected + numberButtonsInRight - 2;
-            dotsRight = true;
-        }
-        this._dynamicPageBtns.update({
-            start: startDynamic,
-            end: endDynamic,
-            selected: this._selected,
-            button: {
-                width: this.getButtonWidth(),
-                dotsLeft: dotsLeft,
-                dotsRight: dotsRight
+    Object.defineProperty(DPagination.prototype, "page", {
+        get: function () {
+            var result = this._page;
+            if (result == null) {
+                result = this.newPage();
+                this._page = result;
             }
-        });
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DPagination.prototype.newPage = function () {
+        var _a;
+        return new DPaginationPage((_a = this._options) === null || _a === void 0 ? void 0 : _a.page);
     };
-    DPagination.prototype.updateStaticButtons = function () {
-        if (this._total > 0) {
-            this._firstPageBtn.show();
-        }
-        else {
-            this._firstPageBtn.hide();
-        }
-        if (this._total > 1) {
-            this._lastPageBtn.show();
-        }
-        else {
-            this._lastPageBtn.hide();
+    DPagination.prototype.onButtonPageActive = function (button) {
+        var text = button.text;
+        if (isNumber(text)) {
+            this.moveTo(text - 1);
+            if (button.state.isFocused) {
+                button.state.isHovered = false;
+                this.page.focus();
+            }
         }
-        var isFirst = this._selected === this.DEFAULT_SELECTED;
-        var isLast = this._selected === this._total - 1 || this._total === 0;
-        this._firstPageBtn.state.isActive = isFirst;
-        this._lastPageBtn.state.isActive = isLast;
-        this._goFirstBtn.state.isDisabled = isFirst;
-        this._previousBtn.state.isDisabled = isFirst;
-        this._nextBtn.state.isDisabled = isLast;
-        this._goLastBtn.state.isDisabled = isLast;
-    };
-    DPagination.prototype.getButtonWidth = function () {
-        return this._buttonOptions.width ? this._buttonOptions.width : this.theme.getButtonWidth();
     };
-    DPagination.prototype.toNumberVisible = function () {
-        var numberNavigationBtn = 2; // 2 buttons always displayed are "next" and "previous" button
-        if (this._buttonOptions.first) {
-            numberNavigationBtn++;
-        }
-        if (this._buttonOptions.last) {
-            numberNavigationBtn++;
+    DPagination.prototype.update = function () {
+        var size = this._size;
+        var value = this._value;
+        if (size <= 0) {
+            var buttonTop = this.buttonTop;
+            if (buttonTop != null) {
+                buttonTop.state.isEnabled = false;
+            }
+            var buttonPrevious = this.buttonPrevious;
+            if (buttonPrevious != null) {
+                buttonPrevious.state.isEnabled = false;
+            }
+            this.dots0.hide();
+            var buttonPages0 = this.buttonPages0;
+            for (var i = 0, imax = buttonPages0.length; i < imax; ++i) {
+                buttonPages0[i].hide();
+            }
+            this.page.hide();
+            var buttonPages1 = this.buttonPages1;
+            for (var i = 0, imax = buttonPages1.length; i < imax; ++i) {
+                buttonPages1[i].hide();
+            }
+            this.dots1.hide();
+            var buttonNext = this.buttonNext;
+            if (buttonNext != null) {
+                buttonNext.state.isEnabled = false;
+            }
+            var buttonLast = this.buttonLast;
+            if (buttonLast) {
+                buttonLast.state.isEnabled = false;
+            }
         }
-        var widthOfNavigationBtns = numberNavigationBtn * (this.getButtonWidth() + this._margin.horizontal * 2);
-        var widthOfPageBtns = this.width - widthOfNavigationBtns;
-        var numberVisible = Math.floor(widthOfPageBtns / (this.getButtonWidth() + this._margin.horizontal * 2));
-        /* set numberVisible is 5, if it less than 5
-             If total pages less than numberVisible, set numberVisible equal total pages
-        **/
-        return Math.min(this._total, Math.max(numberVisible, 5));
-    };
-    DPagination.prototype.onClickPageButton = function (btn) {
-        var btnIndex = Number(btn.text) - 1;
-        if (this._selected !== btnIndex) {
-            this._selected = btnIndex;
-            this.update();
+        else {
+            var from = value - 2;
+            var to = value + 2;
+            if (from < 0) {
+                to = to - from;
+                from = 0;
+            }
+            else if (size <= to) {
+                var delta = to - size + 1;
+                to -= delta;
+                from -= delta;
+            }
+            var top_1 = false;
+            if (0 < from) {
+                top_1 = true;
+                from = Math.min(from + 1, value);
+            }
+            var last = false;
+            if (to < size - 1) {
+                last = true;
+                to = Math.max(to - 1, value);
+            }
+            var buttonTop = this.buttonTop;
+            if (buttonTop != null) {
+                buttonTop.state.isEnabled = 0 < value;
+            }
+            var buttonPrevious = this.buttonPrevious;
+            if (buttonPrevious != null) {
+                buttonPrevious.state.isEnabled = 0 < value;
+            }
+            if (top_1) {
+                this.dots0.show();
+            }
+            else {
+                this.dots0.hide();
+            }
+            var buttonPages0 = this.buttonPages0;
+            for (var i = 0, imax = buttonPages0.length; i < imax; ++i) {
+                var index = value - i - 1;
+                var buttonPage = buttonPages0[i];
+                if (from <= index && index <= to) {
+                    buttonPage.text = index + 1;
+                    buttonPage.show();
+                }
+                else {
+                    if (top_1 && i === imax - 1) {
+                        buttonPage.text = 1;
+                        buttonPage.show();
+                    }
+                    else {
+                        buttonPage.hide();
+                    }
+                }
+            }
+            this.page.text = value + 1;
+            var buttonPages1 = this.buttonPages1;
+            for (var i = 0, imax = buttonPages1.length; i < imax; ++i) {
+                var index = value + i + 1;
+                var buttonPage = buttonPages1[i];
+                if (from <= index && index <= to) {
+                    buttonPage.text = index + 1;
+                    buttonPage.show();
+                }
+                else {
+                    if (last && i === imax - 1) {
+                        buttonPage.text = size;
+                        buttonPage.show();
+                    }
+                    else {
+                        buttonPage.hide();
+                    }
+                }
+            }
+            if (last) {
+                this.dots1.show();
+            }
+            else {
+                this.dots1.hide();
+            }
+            var buttonNext = this.buttonNext;
+            if (buttonNext != null) {
+                buttonNext.state.isEnabled = value < size - 1;
+            }
+            var buttonLast = this.buttonLast;
+            if (buttonLast != null) {
+                buttonLast.state.isEnabled = value < size - 1;
+            }
         }
     };
     DPagination.prototype.getType = function () {