gd-bs 6.9.0 → 6.9.2

package/indexv2.html

@@ -380,7 +380,7 @@
 
     <h5>Paging</h5>
 
-    <bs-paging number-of-pages="5" on-click="MyLib.pagingOnClick"></bs-paging>
+    <bs-paging number-of-pages="85" on-click="MyLib.pagingOnClick"></bs-paging>
 
     <h5>Popover</h5>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.9.0",
+    "version": "6.9.2",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/dropdown/index.ts

@@ -82,6 +82,12 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         // Render the items
         this.renderItems();
 
+        // See if values were defined
+        if (this.props.value) {
+            // Set the values
+            this.setValue(this.props.value);
+        }
+
         // Set the menu element
         this._elMenu = this.el.querySelector(".dropdown-menu");
         if (this._elMenu) {

package/src/components/pagination/index.ts

@@ -1,5 +1,9 @@
 import { IPagination, IPaginationProps } from "./types";
 import { Base } from "../base";
+import { skipBackward } from "../../icons/svgs/skipBackward";
+import { skipForward } from "../../icons/svgs/skipForward";
+import { skipEnd } from "../../icons/svgs/skipEnd";
+import { skipStart } from "../../icons/svgs/skipStart";
 import { HTML, HTMLItem } from "./templates";
 
 /**
@@ -15,13 +19,24 @@ export enum PaginationAlignment {
  * Pagination
  */
 class _Pagination extends Base<IPaginationProps> implements IPagination {
+    private _activePage: number = null;
     private _elList: HTMLUListElement = null;
     private _items: Array<HTMLLIElement> = null;
+    private _showDefault: boolean = true;
+
+    // Buttons
+    private _buttons: {
+        First: HTMLLIElement, Last: HTMLLIElement, Next: HTMLLIElement, Previous: HTMLLIElement,
+        SkipBack10: HTMLLIElement, SkipBack5: HTMLLIElement, SkipForward5: HTMLLIElement, SkipForward10: HTMLLIElement
+    } = null;
 
     // Constructor
     constructor(props: IPaginationProps, template: string = HTML, itemTemplate: string = HTMLItem) {
         super(template, props);
 
+        // Create the default buttons
+        this.createButtons(itemTemplate);
+
         // Configure the collapse
         this.configure(itemTemplate);
 
@@ -53,37 +68,45 @@ class _Pagination extends Base<IPaginationProps> implements IPagination {
             }
 
             // Render the page numbers
-            this.renderPageNumbers(1, itemTemplate);
+            this.renderPageNumbers(itemTemplate);
         }
     }
 
-    // Configures the next/previous buttons, based on the active index
-    private configureNextPrevButtons(activePage: number) {
+    // Configures the default buttons, based on the active index
+    private configureDefaultButtons() {
         // Update the previous button
-        let 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
-        let 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
-    private configureEvents(item: HTMLLIElement) {
-        // See if this is the next or previous item and skip it
+    private configureEvents(item: HTMLLIElement, itemTemplate: string) {
+        // See if this is a spacer
         let 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") {
             let isPrevious = link == "Previous";
 
@@ -95,26 +118,88 @@ class _Pagination extends Base<IPaginationProps> implements IPagination {
                 // Do nothing if it's disabled
                 if (item.classList.contains("disabled")) { return; }
 
-                // Parse the items, excluding the next/previous items
-                for (let i = 1; i < this._items.length - 1; i++) {
-                    let item = this._items[i];
-
-                    // See if this item is active
-                    if (item.classList.contains("active")) {
-                        // See if the previous button was clicked
-                        if (isPrevious) {
-                            // 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 ? this._activePage-- : this._activePage++;
+
+                // See if we are rendering the default
+                if (this._showDefault) {
+                    // Click the item
+                    this._items[this._activePage]?.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") {
+            let isLast = link == "Last";
+
+            // Add a click event
+            item.addEventListener("click", ev => {
+                // 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) {
+                        // Click on the last item
+                        this._items[this._items.length - 1]?.click();
+                    } else {
+                        // Click on the first item
+                        this._items[0]?.click();
                     }
+                } else {
+                    // Update the active page
+                    this._activePage = isLast ? 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", 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 {
             let pageNumber = parseInt(link);
 
@@ -123,44 +208,81 @@ class _Pagination extends Base<IPaginationProps> implements IPagination {
                 // Prevent the page from moving to the top
                 ev.preventDefault();
 
-                // Parse the active items
-                let activeItems = this.el.querySelectorAll(".page-item.active");
-                for (let i = 0; i < activeItems.length; i++) {
-                    let item = activeItems[i];
+                // Set the active index
+                this._activePage = pageNumber;
 
-                    // Clear the active class
-                    item.classList.remove("active");
+                // See if we are showing the default
+                if (this._showDefault) {
+                    // Clear the active item
+                    let activeItem = this._items[this._activePage - 1];
+                    if (activeItem) {
+                        // Clear the active class
+                        activeItem.classList.remove("active");
 
-                    // Remove the active span
-                    let span = item.querySelector("span") as HTMLSpanElement;
-                    span ? span.parentNode.removeChild(span) : null;
-                }
+                        // Remove the active span
+                        let span = activeItem.querySelector("span") as HTMLSpanElement;
+                        span ? span.parentNode.removeChild(span) : null;
+                    }
 
-                // Make this item active
-                item.classList.add("active");
+                    // Show the active item
+                    this._items[this._activePage - 1].classList.add("active");
 
-                // Add the span
-                let span = document.createElement("span");
-                span.classList.add("visually-hidden");
-                span.innerHTML = "(current)";
-                item.appendChild(span);
+                    // Add the span
+                    let span = document.createElement("span");
+                    span.classList.add("visually-hidden");
+                    span.innerHTML = "(current)";
+                    this._items[this._activePage - 1].appendChild(span);
 
-                // Configure the next/previous buttons
-                this.configureNextPrevButtons(pageNumber);
+                    // Configure the default buttons
+                    this.configureDefaultButtons();
+                } else {
+                    // Render the active buttons
+                    this.renderActivePageNumbers(itemTemplate);
+                }
 
-                // Class the click event
-                this.props.onClick ? this.props.onClick(pageNumber, ev) : null;
+                // Call the click event
+                this.props.onClick ? this.props.onClick(pageNumber) : null;
             });
         }
     }
 
+    // Creates the default buttons
+    private createButtons(itemTemplate: string) {
+        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 = skipBackward(15, 15).outerHTML;
+        this._buttons.SkipBack5.querySelector("a").innerHTML = skipStart(15, 15).outerHTML;
+        this._buttons.SkipForward5.querySelector("a").innerHTML = skipEnd(15, 15).outerHTML;
+        this._buttons.SkipForward10.querySelector("a").innerHTML = skipForward(15, 15).outerHTML;
+    }
+
     // Creates an page number item
-    private createItem(text: string, itemTemplate: string): HTMLLIElement {
+    private createItem(text: string, itemTemplate: string, isDefault: boolean = false): HTMLLIElement {
         // Create the item
         let el = document.createElement("div");
         el.innerHTML = itemTemplate;
         let item = el.firstChild as HTMLLIElement;
-        this._items.push(item);
+        isDefault ? null : this._items.push(item);
 
         // Update the link
         let link = item.querySelector("a");
@@ -170,49 +292,143 @@ class _Pagination extends Base<IPaginationProps> implements IPagination {
         }
 
         // Configure the events
-        this.configureEvents(item);
+        this.configureEvents(item, itemTemplate);
 
         // Return the item
         return item;
     }
 
     // Renders the page numbers
-    private renderPageNumbers(activeItem: number, itemTemplate: string) {
+    private renderPageNumbers(itemTemplate: string) {
         // Clear the items
+        this._activePage = 1;
         this._items = [];
 
         // Determine if there are > 10 pages
         let pages = this.props.numberOfPages || 1;
-        let showFirstLast = pages > 10;
-
-        // Create the previous link
-        let 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");
+        let 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 (let i = 1; i <= pages; i++) {
+                // Create a link
+                let 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
+    private renderActivePageNumbers(itemTemplate: string) {
+        // 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 (let i = 1; i <= 5; i++) {
+                // Create a link
+                let item = this.createItem(i.toString(), itemTemplate);
+                i == this._activePage ? item.classList.add("active") : null;
+                this._elList.appendChild(item);
+            }
+
+            // Render a spacer
+            let item = this.createItem("...", itemTemplate, true);
             this._elList.appendChild(item);
+
+            // Render the last 3
+            let diff = Math.round((this.props.numberOfPages - 5) / 3);
+            for (let i = 2; i >= 0; i--) {
+                // Create a link
+                let idx = this.props.numberOfPages - i * diff;
+                let item = this.createItem((idx).toString(), itemTemplate);
+                this._elList.appendChild(item);
+            }
         }
+        // Else, see if we are at the end
+        else if (this._activePage > this.props.numberOfPages - 5) {
+
+            // Render the first 3
+            let diff = Math.round((this.props.numberOfPages - 5) / 3);
+            for (let i = 0; i <= 2; i++) {
+                // Create a link
+                let idx = i == 0 ? 1 : i * diff;
+                let item = this.createItem((idx).toString(), itemTemplate);
+                this._elList.appendChild(item);
+            }
 
-        // Loop for the number of pages to create
-        // Parse the number of pages
-        for (let i = 2; i <= pages; i++) {
-            // Create a link
-            item = this.createItem(i.toString(), itemTemplate);
-            i == activeItem ? item.classList.add("active") : null;
+            // Render a spacer
+            let item = this.createItem("...", itemTemplate, true);
             this._elList.appendChild(item);
+
+            // Render the last five
+            for (let i = this.props.numberOfPages - 5; i <= this.props.numberOfPages; i++) {
+                // Create a link
+                let item = this.createItem(i.toString(), itemTemplate);
+                i == this._activePage ? item.classList.add("active") : null;
+                this._elList.appendChild(item);
+            }
+        }
+        // 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 (let i = this._activePage - 2; i <= this._activePage + 2; i++) {
+                // Create a link
+                let 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);
         }
 
-        // Create the next link
-        item = this.createItem("Next", itemTemplate);
-        pages > 1 ? null : item.classList.add("disabled");
-        item.classList.add("next");
-        this._elList.appendChild(item);
+        // 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");
+        }
     }
 }
 export const Pagination = (props: IPaginationProps, template?: string, itemTemplate?: string): IPagination => { return new _Pagination(props, template, itemTemplate); }

package/src/components/pagination/types.d.ts

@@ -62,8 +62,9 @@ export interface IPaginationProps extends IBaseProps<IPagination> {
     isLarge?: boolean;
     isSmall?: boolean;
     label?: string;
+    maxPages?: number;
     numberOfPages?: number;
-    onClick?: (pageNumber?: number, ev?: Event) => void;
+    onClick?: (pageNumber?: number) => void;
 }
 
 /**

package/src/styles/_custom.scss

@@ -43,6 +43,10 @@
         -webkit-mask-repeat: no-repeat;
     }
 
+    .badge {
+        cursor: pointer;
+    }
+
     .bg-danger {
         background-color: var(--sp-error-icon, #a80000) !important;
     }
@@ -751,6 +755,14 @@
         height: 100vh;
     }
 
+    .page-item {
+        cursor: pointer;
+
+        .page-link {
+            cursor: pointer;
+        }
+    }
+
     /* Color match the pagination link color to 'SharePoint Blue' */
     .page-link {
         border-color: var(--sp-info-icon, #605e5c);