render()

in lib/@uncharted/cards/src/components/headerImage/headerImage.js [31:57]

• 27 lines of code
• 7 McCabe index (conditional complexity)

    render() {
        const lastImageUrl = this.imageUrls[this.imageUrls.length - 1];
        const wrapImages = this.imageHeight > this.DEFAULT_IMAGE_HEIGHT && this.imageUrls.length > 2;
        this.$element = $('<div class="uncharted-cards-header-image"></div>')
            .css({
                'background-color': this._mirrorLastImage ? this._mirrorImageGradientColor : this.DEFAULT_IMAGE_BG_COLOR,
                'height': `${this.imageHeight}px`,
                'flex-wrap': wrapImages ? 'wrap' : 'nowrap',
            });
        this._$partialImages = this.imageUrls.map(imageUrl => {
            const $image = $('<div class="image"></div>')
                .css({
                    'background-image': `url(${imageUrl})`,
                    'max-width': this.imgMaxWidth,
                });
            return wrapImages ? $image.css({ height: '50%', width: '50%', 'flex-grow': 0 }) : $image;
        });
        if (this._mirrorLastImage && lastImageUrl) {
            this._$partialImages.push($(`
                <div class="mirror-image-box">
                    <div class="gradient" style="background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, ${ this._mirrorImageGradientColor } 61.8%); max-width: ${this.imgMaxWidth}"></div>
                    <div class="image" style="background-image: url(${lastImageUrl}); max-width: ${this.imgMaxWidth};" ></div>
                </div>
            `));
        }
        return this.$element.append(this._$partialImages);
    }