_getIndexOfFirstCardInViewPort()

in lib/@uncharted/cards/src/components/inlineCardsView/inlineCardsView.js [65:110]

• 45 lines of code
• 9 McCabe index (conditional complexity)

    _getIndexOfFirstCardInViewPort(scrollLeft) {
        const {
            closingCard,
            closingCardIndex,
            expandingCard,
            expandingCardIndex,
            expandedCard,
            expandedCardIndex,
        } = this.cardExpansionState;
        const CARD_WIDTH = this.CARD_WIDTH;
        const responsivePaddingWidth = this._$responsivePadding[0].getBoundingClientRect().width;
        let index;
        if (closingCard && expandingCard && closingCardIndex < expandingCardIndex) {
            const closingCardOffSetLeft = closingCardIndex * CARD_WIDTH;
            if (closingCardOffSetLeft >= scrollLeft) {
                // [|][][][  c  ][][|]
                index = Math.floor(scrollLeft / CARD_WIDTH);
            } else if (closingCardOffSetLeft < scrollLeft && closingCardOffSetLeft + this.CARD_EXPANDED_WIDTH >= scrollLeft) {
                // [   c | ][][][]|
                index = closingCardIndex;
            } else {
                // [  c  ][]|[][][]|
                index = Math.floor((Math.max(scrollLeft - responsivePaddingWidth, 0)) / CARD_WIDTH);
            }
        } else if (expandedCard && expandedCardIndex * CARD_WIDTH < scrollLeft) {
            const expandedReaderLeftPosition = expandedCardIndex * CARD_WIDTH;
            const expandedReaderWidth = this.CARD_EXPANDED_WIDTH;
            const widthBetweenExpandedCardToScrollLeftPosition = scrollLeft - (expandedReaderLeftPosition + expandedReaderWidth);
            if (widthBetweenExpandedCardToScrollLeftPosition > 0) {
                const paddingWidth = expandedReaderWidth - CARD_WIDTH;
                index = Math.floor(widthBetweenExpandedCardToScrollLeftPosition / CARD_WIDTH) + expandedCardIndex + 1;
                this._$cardsContainer.css({ 'min-width': this.CARD_WIDTH * this.cardInstances.length + paddingWidth});
                this._$responsivePadding.css({ width: paddingWidth });
                // console.log('in left offscreen');
            } else {
                index = expandedCardIndex;
                this._$responsivePadding.css({ width: 0 });
                // console.log('in viewport');
            }
        } else {
            // console.log('other cases');
            index = Math.floor(scrollLeft / CARD_WIDTH);
            this._$responsivePadding.css({ width: 0 });
        }
        return index;
    }