renderCardsInViewPort()

in lib/@uncharted/cards/src/components/inlineCardsView/inlineCardsView.js [112:148]

• 33 lines of code
• 11 McCabe index (conditional complexity)

    renderCardsInViewPort() {
        const scrollLeft = this.$element[0].scrollLeft;
        const viewportWidth = this.$element[0].offsetWidth;
        const CARD_WIDTH = this.CARD_WIDTH;
        const indexOfFirstCardInViewPort = this._getIndexOfFirstCardInViewPort(scrollLeft);
        const paddingLeft = indexOfFirstCardInViewPort * CARD_WIDTH;

        const newItemsInViewPort = [];

        // get cards to render
        for (let i = indexOfFirstCardInViewPort, remainingSpaceInViewPort = viewportWidth + (this.CARD_EXPANDED_WIDTH - CARD_WIDTH); remainingSpaceInViewPort > 0; i++) {
            const card = this.cardInstances[i];
            card && newItemsInViewPort.push(card);
            i !== indexOfFirstCardInViewPort && (remainingSpaceInViewPort -= CARD_WIDTH);
        }

        if (this.cardsInViewPort[0] !== newItemsInViewPort[0] || this.cardsInViewPort[this.cardsInViewPort.length - 1] !== newItemsInViewPort[newItemsInViewPort.length - 1]) {
            this.cardsInViewPort.forEach(card => {
                newItemsInViewPort.indexOf(card) < 0 && card.$element && card.$element.remove() && (card.$element = undefined);
            });
            const fragments = document.createDocumentFragment();
            newItemsInViewPort.forEach((card, index) => {
                const isCardAlreadyRendered = Boolean(card.$element);
                const $cardElement = isCardAlreadyRendered ? card.$element : card.render();
                $cardElement.css({
                    'order': index + 1,
                });
                !isCardAlreadyRendered && fragments.appendChild($cardElement[0]);
            });
            this._$cardsContainer.css({
                'padding-left': paddingLeft,
            });
            this._$cardsContainer.append(fragments);
            this.cardsInViewPort = newItemsInViewPort;
        }
        this.postRender();
    }