wordRotator/src/js/lib/pwa-assets.js

import { Helper, Fragment, Translator } from './pwa-lib.js';

class DelayPromise extends Promise {
    static async delay(delay) {
        return new Promise((resolve) => {
            setTimeout(resolve, delay);
        });
    }
}

class ScaleHelper {
    scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
        margin = Helper.nonNull(margin, 10);
        ignoreHeight = Helper.nonNull(ignoreHeight, false);
        ignoreWidth = Helper.nonNull(ignoreWidth, false);
        fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);

        let hasNoTransitionClass = container.classList.contains("no-transition");
        container.classList.add("no-transition");

        let currentFontSize = 1;
        let diff = 0;
        let widthDiff = 0;
        let heightDiff = 0;
        let containerWidth = 0;
        let containerHeight = 0;
        do {
            currentFontSize += diff / (fontWeight + 1);
            fontElement.style.fontSize = currentFontSize + 'px';

            let containerStyle = window.getComputedStyle(container);

            containerWidth = containerStyle.getPropertyValue("width").replace('px', '');
            containerHeight = containerStyle.getPropertyValue("height").replace('px', '');

            widthDiff = containerWidth - fontElement.offsetWidth;
            heightDiff = containerHeight - fontElement.offsetHeight;

            let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff)));
            if (newDiff === diff) {
                break;
            }
            diff = newDiff;
        } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight));
        fontElement.style.fontSize = (currentFontSize - margin) + 'px';

        if (!hasNoTransitionClass) {
            container.classList.remove("no-transition");
        }

        let self = this;
        window.addEventListener("resize", function () {
            setTimeout(() => {
                self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
            }, 255);
        });
    }

    scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
        return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
    }
}

class TabbedFragment extends Fragment {
    constructor(site) {
        super(site, 'pwaAssets/html/fragment/tabbedFragment.html');
        this.fragments = {};
        this.tabHeadingTemplate = null;
        this.tabHeadingContainer = null;
        this.tabContainer = null;
        this.tabKeys = [];
        this.currentTabIndex = 0;
    }

    onFirstStart() {
        super.onFirstStart();
        this.tabContainer = this.findBy(".tab-container");
        this.showTab(0);
    }

    addFragment(name, fragment, translationArgs, isTranslatable) {
        isTranslatable = Helper.nonNull(isTranslatable, true);
        if (translationArgs === false) {
            isTranslatable = false;
        }

        this.fragments[name] = fragment;
        const tabIndex = this.tabKeys.length;
        this.tabKeys.push(name);

        const _self = this;
        this.inflatePromise = this.inflatePromise.then(function (siteContent) {
            if (Helper.isNull(_self.tabHeadingTemplate)) {
                _self.tabHeadingTemplate = siteContent.querySelector(".tab-header-template");
            }
            const newTabHeader = Helper.cloneNode(_self.tabHeadingTemplate);
            newTabHeader.classList.add("tab-" + tabIndex);
            newTabHeader.querySelector(".tab-name").appendChild((isTranslatable) ? Translator.makePersistentTranslation(name, translationArgs) : document.createTextNode(name));
            newTabHeader.addEventListener("click", function(){
                _self.showTab(tabIndex);
            });

            if (Helper.isNull(_self.tabHeadingContainer)) {
                _self.tabHeadingContainer = siteContent.querySelector(".tab-header-container");
            }
            _self.tabHeadingContainer.appendChild(newTabHeader);
            return siteContent;
        });
    }

    showTab(index) {
        if (index >= 0 && index < this.tabKeys.length) {
            this.findBy(".tab-" + this.currentTabIndex).classList.remove("active");
            this.findBy(".tab-" + index).classList.add("active");
            this.tabContainer.removeAllChildren().appendChild(Helper.createLoadingSymbol());

            this.currentTabIndex = index;

            const _self = this;
            this.fragments[this.tabKeys[index]].inflatePromise.then(tabView => {
                if (_self.currentTabIndex === index) {
                    _self.tabContainer.removeAllChildren().appendChild(tabView);
                }
            });
        }
    }
}

export { DelayPromise, ScaleHelper, TabbedFragment };