newpagdir

import {
    AfterViewInit,
    Directive,
    Host,
    Optional,
    Renderer2,
    Self,
    ViewContainerRef,
    Input
} from "@angular/core";

import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatButton } from '@angular/material/button';

@Directive({
    selector: "[appCustomPaginator]"
})
export class CustomPaginatorDirective implements AfterViewInit {

    private currentPage: number;

    private totalPages: number;

    private pageButtons: MatButton[];

    private enableSkipForwardButton: boolean;

    private enableSkipBackwardButton: boolean;

    @Input() totalViewablePages: number;

    constructor(
        @Host() @Self() @Optional() private readonly matPaginator: MatPaginator,
        private viewRef: ViewContainerRef,
        private renderer: Renderer2) {
            this.currentPage = 0;
            this.pageButtons = [];

            this.enableSkipForwardButton = false;
            this.enableSkipBackwardButton = false;

            this.matPaginator.page.subscribe((v: { pageIndex: number; }) => this.changePage(v.pageIndex));
    }

    public ngAfterViewInit() {
        let interval = setInterval(() => {
            if (this.matPaginator.getNumberOfPages() !== 0) {
                this.totalPages = this.matPaginator.getNumberOfPages();
                this.renderPageButtons();

                clearInterval(interval);
            }
        }, 250);
    }

    private changePage(page: number): void {
        this.currentPage = page;
        this.matPaginator.pageIndex = page;

        this.renderPageButtons();
    }

    private renderPageButtons() {
        this.applyPagingDirectionChange();

        const matPaginatorActionsElem = this.viewRef.element.nativeElement
                                            .querySelector("div.mat-paginator-range-actions");

        const matPaginatorNextPageElem = this.viewRef.element.nativeElement
                                            .querySelector("button.mat-paginator-navigation-next");

        this.pageButtons.forEach(button => { this.renderer.removeChild(matPaginatorActionsElem, button) });

        if (this.enableSkipBackwardButton) {
            this.renderer.insertBefore(
                matPaginatorActionsElem, this.createPageButton(0, this.matPaginator.pageIndex), matPaginatorNextPageElem);

            if (this.currentPage - this.totalViewablePages === 0) {
                this.renderer.insertBefore(
                    matPaginatorActionsElem, this.createPageButton(1, this.matPaginator.pageIndex), matPaginatorNextPageElem);
            } else {
                this.renderer.insertBefore(
                    matPaginatorActionsElem, this.createSkipButton(false), matPaginatorNextPageElem);
            }

        }

        let start = Math.min(this.currentPage, this.totalPages - this.totalViewablePages - 1);
        start = Math.max(0, start);
        let end   = Math.min(this.totalPages, this.currentPage + this.totalViewablePages);

        for (let page = start; page < end; page++) {
            this.renderer.insertBefore(
                matPaginatorActionsElem, this.createPageButton(page, this.matPaginator.pageIndex), matPaginatorNextPageElem);
        }

        if (this.enableSkipForwardButton) {
            if (this.currentPage + this.totalViewablePages < this.totalPages - 1) {
                this.renderer.insertBefore(
                    matPaginatorActionsElem, this.createSkipButton(true), matPaginatorNextPageElem);
            }

            this.renderer.insertBefore(
                matPaginatorActionsElem, this.createPageButton(this.totalPages - 1, this.matPaginator.pageIndex), matPaginatorNextPageElem);
        }
    }

    private createPageButton(pageBtnContent: number, currentPageIndex: number): any {
        const pageBtn = this.createButton(pageBtnContent + 1 + "");

        if (pageBtnContent === currentPageIndex) {
            this.renderer.setAttribute(pageBtn, "disabled", "disabled");
        } else {
            this.renderer.listen(pageBtn, "click", () => {
                this.matPaginator.page.emit({
                    pageIndex: pageBtnContent,
                    pageSize: this.matPaginator.pageSize,
                    length: this.matPaginator.getNumberOfPages()
                });
            });
        }

        return pageBtn;
    }

    private createSkipButton(incrementOnClick: boolean): any {
        const pageBtn = this.createButton("...");

        let nextPageIndex: number;
        if (incrementOnClick) {
            nextPageIndex = this.currentPage + this.totalViewablePages;
        } else {
            nextPageIndex = this.currentPage - this.totalViewablePages;
        }

        this.renderer.listen(pageBtn, "click", () => {
            this.matPaginator.page.emit({
                pageIndex: nextPageIndex,
                pageSize: this.matPaginator.pageSize,
                length: this.matPaginator.getNumberOfPages()
            });
        });

        return pageBtn;
    }

    private createButton(btnContent: string): any {
        const pageBtn = this.renderer.createElement("mat-button");

        this.renderer.addClass(pageBtn, "mat-mini-fab");
        this.renderer.addClass(pageBtn, "mat-custom-page");

        this.renderer.appendChild(pageBtn, this.renderer.createText(btnContent));

        this.pageButtons.push(pageBtn);

        return pageBtn;
    }

    private applyPagingDirectionChange(): void {
        if (this.totalPages - this.totalViewablePages > this.totalViewablePages) {
            this.enableSkipForwardButton  = (this.totalPages - this.currentPage > this.totalViewablePages);

            this.enableSkipBackwardButton = !(this.currentPage < this.totalViewablePages);
        }
    }
}