Method render

src/js/WinJS/Controls/Pivot/_Pivot.ts:1399–1514

(goPrevious?: boolean)

    }

    render(goPrevious?: boolean) {
        var pivot = this.pivot;
        if (this._blocked || pivot._pendingRefresh || !pivot._items) {
            return;
        }

        var restoreFocus = pivot._headersContainerElement.contains(<HTMLElement>_Global.document.activeElement);

        _Dispose._disposeElement(pivot._headersContainerElement);
        _ElementUtilities.empty(pivot._headersContainerElement);


        if (pivot._items.length === 1) {
            var header = this.renderHeader(0, true);
            header.classList.add(_Constants._ClassNames.pivotHeaderSelected);
            pivot._headersContainerElement.appendChild(header);

            pivot._viewportElement.style.overflow = "hidden";
            pivot._headersContainerElement.style.marginLeft = "0px";
            pivot._headersContainerElement.style.marginRight = "0px";
        } else if (pivot._items.length > 1) {
            // We always render 1 additional header before the current item.
            // When going backwards, we render 2 additional headers, the first one as usual, and the second one for
            // fading out the previous last header.
            var numberOfHeadersToRender = pivot._items.length + (goPrevious ? 2 : 1);
            var maxHeaderWidth = pivot._getHeaderItemsWidth() * 0.8;
            var indexToRender = pivot.selectedIndex - 1;

            if (pivot._viewportElement.style.overflow) {
                pivot._viewportElement.style.overflow = "";
            }

            for (var i = 0; i < numberOfHeadersToRender; i++) {
                if (indexToRender === -1) {
                    indexToRender = pivot._items.length - 1;
                } else if (indexToRender === pivot._items.length) {
                    indexToRender = 0;
                }

                var header = this.renderHeader(indexToRender, true);
                pivot._headersContainerElement.appendChild(header);

                if (header.offsetWidth > maxHeaderWidth) {
                    header.style.textOverflow = "ellipsis";
                    header.style.width = maxHeaderWidth + "px";
                }

                if (indexToRender === pivot.selectedIndex) {
                    header.classList.add(_Constants._ClassNames.pivotHeaderSelected);
                }
                indexToRender++;
            }
            if (!pivot._firstLoad && !this._firstRender) {
                var start: string, end: string;
                if (goPrevious) {
                    start = "";
                    end = "0";
                } else {