resizeImage()

in static/src/javascripts/projects/commercial/modules/hosted/gallery.js [255:320]
61 lines of code
12 McCabe index (conditional complexity)

	resizeImage(imgIndex) {
		const $galleryFrame = this.$galleryFrame;
		const width = $galleryFrame.clientWidth;
		const height = $galleryFrame.clientHeight;

		const getFrame = (desiredRatio, w = width, h = height) => {
			const frame = {
				height: h,
				width: w,
				topBottom: 0,
				leftRight: 0,
			};
			if (!desiredRatio) return frame;
			if (desiredRatio > w / h) {
				// portrait screens
				frame.height = w / desiredRatio;
				frame.topBottom = (h - frame.height) / 2;
			} else {
				// landscape screens
				frame.width = h * desiredRatio;
				frame.leftRight = (w - frame.width) / 2;
			}
			return frame;
		};

		const $imageDiv = this.$images[imgIndex];
		const $ctaFloat = this.$ctaFloat;
		const $ojFloat = this.$ojFloat;
		const $meta = this.$meta;
		const $images = this.$images;
		const $sizer = $imageDiv.querySelector(
			'.js-hosted-gallery-image-sizer',
		);
		const imgRatio = this.imageRatios[imgIndex];
		const ctaSize = getFrame(0);
		const ctaIndex = HostedGallery.ctaIndex();
		const tabletSize = 740;
		const imageSize = getFrame(imgRatio);

		fastdom.mutate(() => {
			if ($sizer) {
				$sizer.style.setProperty('width', imageSize.width);
				$sizer.style.setProperty('height', imageSize.height);
				$sizer.style.setProperty('top', imageSize.topBottom);
				$sizer.style.setProperty('left', imageSize.leftRight);
			}
			if (imgIndex === ctaIndex) {
				$ctaFloat.style.setProperty('bottom', ctaSize.topBottom);
			}
			if (imgIndex === $images.length - 1) {
				$ojFloat.style.setProperty('bottom', ctaSize.topBottom);
			}
			if (imgIndex === $images.length - 1) {
				$ojFloat.style.setProperty(
					'padding-bottom',
					ctaSize.topBottom > 40 || width > tabletSize ? 0 : 40,
				);
			}
			if (imgIndex === 0) {
				$meta.style.setProperty(
					'padding-bottom',
					imageSize.topBottom > 40 || width > tabletSize ? 20 : 40,
				);
			}
		});
	}