gd-bs 6.9.1 → 6.9.2

package/build/components/pagination/index.js

@@ -17,6 +17,10 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = exports.PaginationAlignment = void 0;
 var base_1 = require("../base");
+var skipBackward_1 = require("../../icons/svgs/skipBackward");
+var skipForward_1 = require("../../icons/svgs/skipForward");
+var skipEnd_1 = require("../../icons/svgs/skipEnd");
+var skipStart_1 = require("../../icons/svgs/skipStart");
 var templates_1 = require("./templates");
 /**
  * Pagination Alignment
@@ -37,8 +41,14 @@ var _Pagination = /** @class */ (function (_super) {
         if (template === void 0) { template = templates_1.HTML; }
         if (itemTemplate === void 0) { itemTemplate = templates_1.HTMLItem; }
         var _this = _super.call(this, template, props) || this;
+        _this._activePage = null;
         _this._elList = null;
         _this._items = null;
+        _this._showDefault = true;
+        // Buttons
+        _this._buttons = null;
+        // Create the default buttons
+        _this.createButtons(itemTemplate);
         // Configure the collapse
         _this.configure(itemTemplate);
         // Configure the parent
@@ -66,104 +76,208 @@ var _Pagination = /** @class */ (function (_super) {
                     break;
             }
             // Render the page numbers
-            this.renderPageNumbers(1, itemTemplate);
+            this.renderPageNumbers(itemTemplate);
         }
     };
-    // Configures the next/previous buttons, based on the active index
-    _Pagination.prototype.configureNextPrevButtons = function (activePage) {
+    // Configures the default buttons, based on the active index
+    _Pagination.prototype.configureDefaultButtons = function () {
         // Update the previous button
-        var prevItem = this._items[0];
-        if (activePage == 1) {
-            // Ensure the previous item is disabled
-            prevItem.classList.add("disabled");
+        if (this._activePage == 1) {
+            // Ensure the first/previous item is disabled
+            this._buttons.First.classList.add("disabled");
+            this._buttons.Previous.classList.add("disabled");
         }
         else {
-            // Ensure the previous item is enabled
-            prevItem.classList.remove("disabled");
+            // Ensure the first/previous item is enabled
+            this._buttons.First.classList.remove("disabled");
+            this._buttons.Previous.classList.remove("disabled");
         }
-        // Update the next button
-        var nextItem = this._items[this._items.length - 1];
-        if (activePage == this._items.length - 2) {
-            // Ensure the previous item is disabled
-            nextItem.classList.add("disabled");
+        // Update the next/last button
+        if (this._activePage == this._items.length) {
+            // Ensure the next/last item is disabled
+            this._buttons.Next.classList.add("disabled");
+            this._buttons.Last.classList.add("disabled");
         }
         else {
-            // Ensure the previous item is enabled
-            nextItem.classList.remove("disabled");
+            // Ensure the next/last item is enabled
+            this._buttons.Next.classList.remove("disabled");
+            this._buttons.Last.classList.remove("disabled");
         }
     };
     // Configure the events
-    _Pagination.prototype.configureEvents = function (item) {
+    _Pagination.prototype.configureEvents = function (item, itemTemplate) {
         var _this = this;
-        // See if this is the next or previous item and skip it
+        // See if this is a spacer
         var link = item.querySelector("a").getAttribute("aria-label");
+        if (link == "...") {
+            // Do nothing
+            return;
+        }
+        // See if this is the next or previous item and skip it
         if (link == "Previous" || link == "Next") {
             var isPrevious_1 = link == "Previous";
             // Add a click event
             item.addEventListener("click", function (ev) {
+                var _a;
                 // Prevent the page from moving to the top
                 ev.preventDefault();
                 // Do nothing if it's disabled
                 if (item.classList.contains("disabled")) {
                     return;
                 }
-                // Parse the items, excluding the next/previous items
-                for (var i = 1; i < _this._items.length - 1; i++) {
-                    var item_1 = _this._items[i];
-                    // See if this item is active
-                    if (item_1.classList.contains("active")) {
-                        // See if the previous button was clicked
-                        if (isPrevious_1) {
-                            // Click the previous item if it's available
-                            i - 1 > 0 ? _this._items[i - 1].click() : null;
-                        }
-                        else {
-                            // Click the next item if it's available
-                            i < _this._items.length - 2 ? _this._items[i + 1].click() : null;
-                        }
-                        // Break from the loop
-                        break;
+                // Update the active page
+                isPrevious_1 ? _this._activePage-- : _this._activePage++;
+                // See if we are rendering the default
+                if (_this._showDefault) {
+                    // Click the item
+                    (_a = _this._items[_this._activePage]) === null || _a === void 0 ? void 0 : _a.click();
+                }
+                else {
+                    // Render the active buttons
+                    _this.renderActivePageNumbers(itemTemplate);
+                    // Call the click event
+                    _this.props.onClick ? _this.props.onClick(_this._activePage) : null;
+                }
+            });
+        }
+        else if (link == "First" || link == "Last") {
+            var isLast_1 = link == "Last";
+            // Add a click event
+            item.addEventListener("click", function (ev) {
+                var _a, _b;
+                // Prevent the page from moving to the top
+                ev.preventDefault();
+                // Do nothing if it's disabled
+                if (item.classList.contains("disabled")) {
+                    return;
+                }
+                // See if we are rendering the default
+                if (_this._showDefault) {
+                    // See if this is the last item
+                    if (isLast_1) {
+                        // Click on the last item
+                        (_a = _this._items[_this._items.length - 1]) === null || _a === void 0 ? void 0 : _a.click();
                     }
+                    else {
+                        // Click on the first item
+                        (_b = _this._items[0]) === null || _b === void 0 ? void 0 : _b.click();
+                    }
+                }
+                else {
+                    // Update the active page
+                    _this._activePage = isLast_1 ? _this.props.numberOfPages : 1;
+                    // Render the active buttons
+                    _this.renderActivePageNumbers(itemTemplate);
+                    // Call the click event
+                    _this.props.onClick ? _this.props.onClick(_this._activePage) : null;
                 }
             });
         }
+        else if (link == "&lt;&lt;" || link == "&lt;" || link == "&gt;" || link == "&gt;&gt;") {
+            // Add a click event
+            item.addEventListener("click", function (ev) {
+                // Prevent the page from moving to the top
+                ev.preventDefault();
+                // Update the active page
+                switch (link) {
+                    case "&lt;&lt;":
+                        _this._activePage -= 10;
+                        break;
+                    case "&lt;":
+                        _this._activePage -= 5;
+                        break;
+                    case "&gt;":
+                        _this._activePage += 5;
+                        break;
+                    case "&gt;&gt;":
+                        _this._activePage += 10;
+                        break;
+                }
+                // Validate the page number
+                if (_this._activePage <= 0) {
+                    _this._activePage = 1;
+                }
+                else if (_this._activePage > _this.props.numberOfPages) {
+                    _this._activePage = _this.props.numberOfPages;
+                }
+                // Render the active buttons
+                _this.renderActivePageNumbers(itemTemplate);
+                // Call the click event
+                _this.props.onClick ? _this.props.onClick(_this._activePage) : null;
+            });
+        }
         else {
             var pageNumber_1 = parseInt(link);
             // Add a click event
             item.addEventListener("click", function (ev) {
                 // Prevent the page from moving to the top
                 ev.preventDefault();
-                // Parse the active items
-                var activeItems = _this.el.querySelectorAll(".page-item.active");
-                for (var i = 0; i < activeItems.length; i++) {
-                    var item_2 = activeItems[i];
-                    // Clear the active class
-                    item_2.classList.remove("active");
-                    // Remove the active span
-                    var span_1 = item_2.querySelector("span");
-                    span_1 ? span_1.parentNode.removeChild(span_1) : null;
+                // Set the active index
+                _this._activePage = pageNumber_1;
+                // See if we are showing the default
+                if (_this._showDefault) {
+                    // Clear the active item
+                    var activeItem = _this._items[_this._activePage - 1];
+                    if (activeItem) {
+                        // Clear the active class
+                        activeItem.classList.remove("active");
+                        // Remove the active span
+                        var span_1 = activeItem.querySelector("span");
+                        span_1 ? span_1.parentNode.removeChild(span_1) : null;
+                    }
+                    // Show the active item
+                    _this._items[_this._activePage - 1].classList.add("active");
+                    // Add the span
+                    var span = document.createElement("span");
+                    span.classList.add("visually-hidden");
+                    span.innerHTML = "(current)";
+                    _this._items[_this._activePage - 1].appendChild(span);
+                    // Configure the default buttons
+                    _this.configureDefaultButtons();
                 }
-                // Make this item active
-                item.classList.add("active");
-                // Add the span
-                var span = document.createElement("span");
-                span.classList.add("visually-hidden");
-                span.innerHTML = "(current)";
-                item.appendChild(span);
-                // Configure the next/previous buttons
-                _this.configureNextPrevButtons(pageNumber_1);
-                // Class the click event
-                _this.props.onClick ? _this.props.onClick(pageNumber_1, ev) : null;
+                else {
+                    // Render the active buttons
+                    _this.renderActivePageNumbers(itemTemplate);
+                }
+                // Call the click event
+                _this.props.onClick ? _this.props.onClick(pageNumber_1) : null;
             });
         }
     };
+    // Creates the default buttons
+    _Pagination.prototype.createButtons = function (itemTemplate) {
+        this._buttons = {
+            First: this.createItem("First", itemTemplate, true),
+            Last: this.createItem("Last", itemTemplate, true),
+            Next: this.createItem("Next", itemTemplate, true),
+            Previous: this.createItem("Previous", itemTemplate, true),
+            SkipBack10: this.createItem("<<", itemTemplate, true),
+            SkipBack5: this.createItem("<", itemTemplate, true),
+            SkipForward5: this.createItem(">", itemTemplate, true),
+            SkipForward10: this.createItem(">>", itemTemplate, true)
+        };
+        // Set the default classes
+        this._buttons.First.classList.add("first");
+        this._buttons.Last.classList.add("last");
+        this._buttons.Next.classList.add("next");
+        this._buttons.Previous.classList.add("previous");
+        // Disable the first and previous buttons by default
+        this._buttons.First.classList.add("disabled");
+        this._buttons.Previous.classList.add("disabled");
+        // Set the icons
+        this._buttons.SkipBack10.querySelector("a").innerHTML = (0, skipBackward_1.skipBackward)(15, 15).outerHTML;
+        this._buttons.SkipBack5.querySelector("a").innerHTML = (0, skipStart_1.skipStart)(15, 15).outerHTML;
+        this._buttons.SkipForward5.querySelector("a").innerHTML = (0, skipEnd_1.skipEnd)(15, 15).outerHTML;
+        this._buttons.SkipForward10.querySelector("a").innerHTML = (0, skipForward_1.skipForward)(15, 15).outerHTML;
+    };
     // Creates an page number item
-    _Pagination.prototype.createItem = function (text, itemTemplate) {
+    _Pagination.prototype.createItem = function (text, itemTemplate, isDefault) {
+        if (isDefault === void 0) { isDefault = false; }
         // Create the item
         var el = document.createElement("div");
         el.innerHTML = itemTemplate;
         var item = el.firstChild;
-        this._items.push(item);
+        isDefault ? null : this._items.push(item);
         // Update the link
         var link = item.querySelector("a");
         if (link) {
@@ -171,42 +285,131 @@ var _Pagination = /** @class */ (function (_super) {
             link.setAttribute("aria-label", link.innerHTML);
         }
         // Configure the events
-        this.configureEvents(item);
+        this.configureEvents(item, itemTemplate);
         // Return the item
         return item;
     };
     // Renders the page numbers
-    _Pagination.prototype.renderPageNumbers = function (activeItem, itemTemplate) {
+    _Pagination.prototype.renderPageNumbers = function (itemTemplate) {
         // Clear the items
+        this._activePage = 1;
         this._items = [];
         // Determine if there are > 10 pages
         var pages = this.props.numberOfPages || 1;
-        var showFirstLast = pages > 10;
-        // Create the previous link
-        var item = this.createItem("Previous", itemTemplate);
-        item.classList.add("disabled");
-        item.classList.add("previous");
-        this._elList.appendChild(item);
-        // See if we are showing the first/last links
-        if (showFirstLast) {
-            item = this.createItem("1", itemTemplate);
-            activeItem == 1 ? item.classList.add("active") : null;
-            item.classList.add("next");
+        var maxPages = typeof (this.props.maxPages) === "number" ? this.props.maxPages : 10;
+        this._showDefault = pages < maxPages;
+        // See if we are rendering the default
+        if (this._showDefault) {
+            // Append the first/previous link
+            this._elList.appendChild(this._buttons.First);
+            this._elList.appendChild(this._buttons.Previous);
+            // Loop for the number of pages to create
+            for (var i = 1; i <= pages; i++) {
+                // Create a link
+                var item = this.createItem(i.toString(), itemTemplate);
+                i == this._activePage ? item.classList.add("active") : null;
+                this._elList.appendChild(item);
+            }
+            // Append the next/last link
+            this._elList.appendChild(this._buttons.Next);
+            this._elList.appendChild(this._buttons.Last);
+            if (pages == 1) {
+                this._buttons.Next.classList.add("disabled");
+                this._buttons.Last.classList.add("disabled");
+            }
+        }
+        else {
+            // Render the active page numbers
+            this.renderActivePageNumbers(itemTemplate);
+        }
+    };
+    // Renders the active page numbers
+    _Pagination.prototype.renderActivePageNumbers = function (itemTemplate) {
+        // Clear the items and list element
+        this._items = [];
+        while (this._elList.firstChild) {
+            this._elList.removeChild(this._elList.firstChild);
+        }
+        // Append the first/previous link
+        this._elList.appendChild(this._buttons.First);
+        this._elList.appendChild(this._buttons.Previous);
+        if (this._activePage == 1) {
+            this._buttons.First.classList.add("disabled");
+            this._buttons.Previous.classList.add("disabled");
+        }
+        else {
+            this._buttons.First.classList.remove("disabled");
+            this._buttons.Previous.classList.remove("disabled");
+        }
+        // See if we are at the beginning
+        if (this._activePage < 5) {
+            // Render the first five
+            for (var i = 1; i <= 5; i++) {
+                // Create a link
+                var item_1 = this.createItem(i.toString(), itemTemplate);
+                i == this._activePage ? item_1.classList.add("active") : null;
+                this._elList.appendChild(item_1);
+            }
+            // Render a spacer
+            var item = this.createItem("...", itemTemplate, true);
             this._elList.appendChild(item);
+            // Render the last 3
+            var diff = Math.round((this.props.numberOfPages - 5) / 3);
+            for (var i = 2; i >= 0; i--) {
+                // Create a link
+                var idx = this.props.numberOfPages - i * diff;
+                var item_2 = this.createItem((idx).toString(), itemTemplate);
+                this._elList.appendChild(item_2);
+            }
         }
-        // Loop for the number of pages to create
-        // Parse the number of pages
-        for (var i = 2; i <= pages; i++) {
-            // Create a link
-            item = this.createItem(i.toString(), itemTemplate);
-            i == activeItem ? item.classList.add("active") : null;
+        // Else, see if we are at the end
+        else if (this._activePage > this.props.numberOfPages - 5) {
+            // Render the first 3
+            var diff = Math.round((this.props.numberOfPages - 5) / 3);
+            for (var i = 0; i <= 2; i++) {
+                // Create a link
+                var idx = i == 0 ? 1 : i * diff;
+                var item_3 = this.createItem((idx).toString(), itemTemplate);
+                this._elList.appendChild(item_3);
+            }
+            // Render a spacer
+            var item = this.createItem("...", itemTemplate, true);
             this._elList.appendChild(item);
+            // Render the last five
+            for (var i = this.props.numberOfPages - 5; i <= this.props.numberOfPages; i++) {
+                // Create a link
+                var item_4 = this.createItem(i.toString(), itemTemplate);
+                i == this._activePage ? item_4.classList.add("active") : null;
+                this._elList.appendChild(item_4);
+            }
+        }
+        // Else, render the skip buttons
+        else {
+            // Render the skip buttons
+            this._elList.appendChild(this._buttons.SkipBack10);
+            this._elList.appendChild(this._buttons.SkipBack5);
+            // Render +/- 2 from the active index
+            for (var i = this._activePage - 2; i <= this._activePage + 2; i++) {
+                // Create a link
+                var item = this.createItem(i.toString(), itemTemplate);
+                i == this._activePage ? item.classList.add("active") : null;
+                this._elList.appendChild(item);
+            }
+            // Render the skip buttons
+            this._elList.appendChild(this._buttons.SkipForward5);
+            this._elList.appendChild(this._buttons.SkipForward10);
+        }
+        // Append the next/last link
+        this._elList.appendChild(this._buttons.Next);
+        this._elList.appendChild(this._buttons.Last);
+        if (this._activePage == this.props.numberOfPages) {
+            this._buttons.Next.classList.add("disabled");
+            this._buttons.Last.classList.add("disabled");
+        }
+        else {
+            this._buttons.Next.classList.remove("disabled");
+            this._buttons.Last.classList.remove("disabled");
         }
-        // Create the next link
-        item = this.createItem("Next", itemTemplate);
-        pages > 1 ? null : item.classList.add("disabled");
-        item.classList.add("next");
-        this._elList.appendChild(item);
     };
     return _Pagination;
 }(base_1.Base));