render: function overflowState_render()

in src/Clients/Web/winjs/js/winjs.js [60572:60682]

• 93 lines of code
• 26 McCabe index (conditional complexity)

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

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

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

                        var maxHeaderWidth = (pivot._viewportWidth * 0.8) + "px";

                        if (pivot._items.length === 1) {
                            var header = headersStates.common.renderHeader(pivot, 0, true);
                            header.classList.add(Pivot._ClassName.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 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 = headersStates.common.renderHeader(pivot, indexToRender, true);
                                header.style.maxWidth = maxHeaderWidth;
                                pivot._headersContainerElement.appendChild(header);
                                if (indexToRender === pivot.selectedIndex) {
                                    header.classList.add(Pivot._ClassName.pivotHeaderSelected);
                                }
                                indexToRender++;
                            }
                            if (!pivot._firstLoad && !this._firstRender) {
                                var start, end;
                                if (goPrevious) {
                                    start = "";
                                    end = "0";
                                } else {
                                    start = "0";
                                    end = "";
                                }

                                var lastHeader = pivot._headersContainerElement.children[numberOfHeadersToRender - 1];
                                lastHeader.style.opacity = start;
                                var lastHeaderFadeInDuration = 0.167;
                                lastHeader.style[_BaseUtils._browserStyleEquivalents["transition"].scriptName] = "opacity " + _TransitionAnimation._animationTimeAdjustment(lastHeaderFadeInDuration) + "s";
                                _Global.getComputedStyle(lastHeader).opacity;
                                lastHeader.style.opacity = end;
                            }

                            pivot._headersContainerElement.children[0].setAttribute("aria-hidden", "true");
                            pivot._headersContainerElement.style.marginLeft = "0px";
                            pivot._headersContainerElement.style.marginRight = "0px";
                            var leadingMargin = pivot._rtl ? "marginRight" : "marginLeft";
                            var trailingPadding = pivot._rtl ? "paddingLeft" : "paddingRight";
                            var firstHeader = pivot._headersContainerElement.children[0];
                            var leadingSpace = firstHeader.offsetWidth + parseFloat(_Global.getComputedStyle(firstHeader)[leadingMargin]) - parseFloat(_Global.getComputedStyle(firstHeader)[trailingPadding]);
                            if (firstHeader !== pivot._headersContainerElement.children[0]) {
                                // Calling offsetWidth caused a layout which can trigger a synchronous resize which in turn
                                // calls renderHeaders. We can ignore this one since its the old headers which are not in the DOM.
                                return;
                            }
                            pivot._headersContainerElement.style[leadingMargin] = (-1 * leadingSpace) + "px";

                            // Create header track nav button elements
                            pivot._prevButton = _Global.document.createElement("button");
                            _ElementUtilities.addClass(pivot._prevButton, Pivot._ClassName.pivotNavButton);
                            _ElementUtilities.addClass(pivot._prevButton, Pivot._ClassName.pivotNavButtonPrev);
                            pivot._prevButton.addEventListener("click", function () {
                                if (pivot.locked) {
                                    return;
                                }
                                pivot._rtl ? pivot._goNext() : pivot._goPrevious();
                            });
                            pivot._headersContainerElement.appendChild(pivot._prevButton);
                            pivot._prevButton.style.left = pivot._rtl ? "0px" : leadingSpace + "px";

                            pivot._nextButton = _Global.document.createElement("button");
                            _ElementUtilities.addClass(pivot._nextButton, Pivot._ClassName.pivotNavButton);
                            _ElementUtilities.addClass(pivot._nextButton, Pivot._ClassName.pivotNavButtonNext);
                            pivot._nextButton.addEventListener("click", function () {
                                if (pivot.locked) {
                                    return;
                                }
                                pivot._rtl ? pivot._goPrevious() : pivot._goNext();
                            });
                            pivot._headersContainerElement.appendChild(pivot._nextButton);
                            pivot._nextButton.style.right = pivot._rtl ? leadingSpace + "px" : "0px";
                        }
                        var firstHeaderIndex = pivot._headersContainerElement.children.length > 1 ? 1 : 0;
                        pivot._tabContainer.childFocus = pivot._headersContainerElement.children[firstHeaderIndex];
                        if (restoreFocus) {
                            pivot._headersContainerElement.children[firstHeaderIndex].focus();
                        }
                        this._firstRender = false;
                    },