pragma-views2/webcomponents/pragma-pager/pragma-pager.js

import {BaseElement} from "../../baremetal/lib/base-element.js";
import {BaseShortcuts} from '../lib/base-shortcuts.js';

class PragmaPager extends BaseElement {
    get currentPagerButton() {
        return this.allPagerButtons[this.currentPagerIndex];
    }
    
    get firstPagerButton() {
        return this.allPagerButtons[0];
    }
    
    get lastPagerButton() {
        return this.allPagerButtons[this.allPagerButtons.length -1];
    }
    
    get nextPagerButton() {
        this.currentPagerIndex++;
        if (this.currentPagerIndex > this.allPagerButtons.length -1) {
            this.currentPagerIndex = this.allPagerButtons.length -1;
        }
        
        return this.currentPagerButton;
    }
    
    get pagerOrientation() {
        return this.getAttribute('aria-orientation');
    }
    
    get previousPagerButton() {
        this.currentPagerIndex--;
        if (this.currentPagerIndex < 0) {
            this.currentPagerIndex = 0;
        }
        
        return this.currentPagerButton;
    }
    
    click(event) {
        if (event.target.getAttribute('role') != 'tab') {
            return;
        }
        event.preventDefault();
        const pagerButton = event.target;
        this.handleBehaviour(pagerButton);
    }

    connectedCallback() {
        super.connectedCallback();

        this._baseShortcuts = new BaseShortcuts();
        this.currentPagerIndex = 0;
        this.nextPageId = -1;
        this.allPagerButtons = [];
        this.initTemplate();
        
        this.registerEvent(this, "click", this.click.bind(this));
        this.registerEvent(this, "keydown", this.keyDown.bind(this));
    }

    disconnectedCallback() {
        super.disconnectedCallback();
        this.allPagerButtons = null;
        this.nextPageId = null;
        this.currentPagerIndex = null;
        if (this._baseShortcuts != null) {
            this._baseShortcuts.dispose();
            this._baseShortcuts = null;
        }
    }

    getPageByControl(control) {
        return document.querySelector(`#${control}`);
    }

    handleBehaviour(pagerButton, force) {
        if (pagerButton == this.currentPagerButton && force != true) return;
        this.selectPagerButton(pagerButton);
        this.showPage(pagerButton.controls, pagerButton.id);
    }

    initTemplate() {
        this.setAttribute('role', 'tablist');
    }

    keyDown(event) {
        if (event.target.getAttribute('role') != 'tab' || event.altKey) {
            return;
        }
        if (this.pagerOrientation == 'vertical' && (event.keyCode === this._baseShortcuts.keyCodes.rightArrow || event.keyCode === this._baseShortcuts.keyCodes.leftArrow)) {
            return;
        }
        if (this.pagerOrientation != 'vertical' && (event.keyCode === this._baseShortcuts.keyCodes.upArrow || event.keyCode === this._baseShortcuts.keyCodes.downArrow)) {
            return;
        }
        event.preventDefault();
        const activePagerButton = this.currentPagerButton;
        
        let pagerButton;

        switch (event.keyCode) {
            case this._baseShortcuts.keyCodes.upArrow:
                pagerButton = this.previousPagerButton;
                break;
            case this._baseShortcuts.keyCodes.downArrow:
                pagerButton = this.nextPagerButton;
                break;
            case this._baseShortcuts.keyCodes.rightArrow:
                pagerButton = this.nextPagerButton;
                break;
            case this._baseShortcuts.keyCodes.leftArrow:
                pagerButton = this.previousPagerButton;
                break;
            case this._baseShortcuts.keyCodes.home:
                pagerButton = this.firstPagerButton;
                break;
            case this._baseShortcuts.keyCodes.end:
                pagerButton = this.lastPagerButton;
                break;
        }

        if (activePagerButton != pagerButton) {
            activePagerButton.selected = false;
            this.handleBehaviour(pagerButton, true);    
        }
    }

    // JHR: todo: we will need to add a remove button here so that if you remove a page on the designer it will not be part of this anymore.
    registerChild(pagerButton) {
        this.allPagerButtons.push(pagerButton);
        const isFirstButton = this.allPagerButtons.length == 1;
        this.nextPageId++;
        
        pagerButton.id = `pb-${this.nextPageId}_${pagerButton.controls}`;
        pagerButton.role = 'tab';
        pagerButton.selected = isFirstButton;

        const page = this.getPageByControl(pagerButton.controls);
        page.setAttribute('role', 'tabpanel');
        page.setAttribute('aria-labelledby', pagerButton.id);
        this.setPageVisibility(page, pagerButton.selected == "true");

        if (isFirstButton == true) {
            this.lastPage = page;
        }
    }
    
    resetState() {
        for(const pagerButton of this.activePagerButtons) {
            pagerButton.selected = false;
        }

        const activePages = this.allLinkedPages.filter(page => page.hidden == false);
        for(const page of activePages) {
            this.setPageVisibility(page, false);
        }
    }

    selectPagerButton(pagerButton) {
        if (this.currentPagerButton != undefined) {
            this.currentPagerButton.selected = false;
        }

        this.currentPagerIndex = this.allPagerButtons.indexOf(pagerButton);
        pagerButton.selected = true;
        pagerButton.focus();
    }

    setPageVisibility(page, isVisible) {
        page.hidden = !isVisible;
        page.setAttribute('aria-hidden', page.hidden);
    }

    showPage(controls) {
        const page = this.getPageByControl(controls);
        this.setPageVisibility(page, true);

        if (this.lastPage != undefined) {
            this.setPageVisibility(this.lastPage, false);
        }
        
        this.lastPage = page;
    }
}

customElements.define('pragma-pager', PragmaPager);

class PagerButton extends HTMLElement {
    get controls() {
        return this.getAttribute('aria-controls');
    }

    set controls(value) {
        if (this.controls === value) {
            return;
        }
        this.setAttribute('aria-controls', value);
    }

    //TODO JN: Remove getter and setter for properties that will not change (controls, roles...)
    get role() {
        return this.getAttribute('role');
    }

    set role(value) {
        if (this.role === value) {
            return;
        }
        this.setAttribute('role', value);
    }

    get selected() {
        return this.getAttribute('aria-selected');
    }

    set selected(value) {
        if (this.selected === value) {
            return;
        }
        
        this.setAttribute('aria-selected', value);
        this.tabIndex = this.selected === 'true' ? 0 : -1;
    }

    get tabIndex() {
        return this.getAttribute('tabindex');
    }

    set tabIndex(value) {
        if (this.tabIndex === value) {
            return;
        }
        this.setAttribute('tabindex', value);
    }

    connectedCallback() {
        this.parentElement.parentElement.registerChild(this);
    }

    disconnectedCallback() {
        this.controls = null;
        this.role = null;
        this.selected = null;
        this.tabIndex = null;
    }
}

customElements.define('pager-button', PagerButton);