constructor()

in static/src/javascripts/projects/commercial/modules/hosted/gallery.js [17:112]

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

	constructor() {
		// CONFIG
		const breakpoint = getBreakpoint();
		this.useSwipe =
			hasTouchScreen() &&
			(breakpoint === 'mobile' || breakpoint === 'tablet');
		this.swipeThreshold = 0.05;
		this.index = this.index || 1;
		this.imageRatios = [];

		// ELEMENT BINDINGS
		this.$galleryEl = document.querySelector(
			'.js-hosted-gallery-container',
		);
		this.$galleryFrame = document.querySelector('.js-hosted-gallery-frame');
		this.$header = document.querySelector('.js-hosted-headerwrap');
		this.$imagesContainer = this.$galleryEl.querySelector(
			'.js-hosted-gallery-images',
		);
		this.$captionContainer = document.querySelector(
			'.js-gallery-caption-bar',
		);
		this.$captions = [
			...this.$captionContainer.querySelectorAll(
				'.js-hosted-gallery-caption',
			),
		];
		this.$scrollEl = this.$galleryEl.querySelector(
			'.js-hosted-gallery-scroll-container',
		);

		this.$images = [
			...this.$imagesContainer.querySelectorAll(
				'.js-hosted-gallery-image',
			),
		];
		this.$progress = this.$galleryEl.querySelector(
			'.js-hosted-gallery-progress',
		);
		this.$border = this.$progress.querySelector(
			'.js-hosted-gallery-rotating-border',
		);
		this.prevBtn = this.$progress.querySelector('.inline-arrow-up');
		this.nextBtn = this.$progress.querySelector('.inline-arrow-down');
		this.infoBtn = this.$captionContainer.querySelector(
			'.js-gallery-caption-button',
		);
		this.$counter = this.$progress.querySelector(
			'.js-hosted-gallery-image-count',
		);
		this.$ctaFloat = this.$galleryEl.querySelector(
			'.js-hosted-gallery-cta',
		);
		this.$ojFloat = this.$galleryEl.querySelector('.js-hosted-gallery-oj');
		this.$meta = this.$galleryEl.querySelector('.js-hosted-gallery-meta');
		this.ojClose = this.$ojFloat.querySelector(
			'.js-hosted-gallery-oj-close',
		);

		if (this.$galleryEl) {
			this.resize = this.trigger.bind(this, 'resize');
			mediator.on('window:throttledResize', this.resize);

			// FSM CONFIG
			this.fsm = new FiniteStateMachine({
				initial: 'image',
				onChangeState() {},
				context: this,

				states: this.states,
			});

			this.infoBtn.addEventListener(
				'click',
				this.trigger.bind(this, 'toggle-info'),
			);
			this.ojClose.addEventListener('click', this.toggleOj.bind(this));

			if (document.body) {
				document.body.addEventListener(
					'keydown',
					this.handleKeyEvents.bind(this),
				);
			}
			this.loadSurroundingImages(1, this.$images.length);
			this.setPageWidth();

			if (this.useSwipe) {
				this.$galleryEl.classList.add('use-swipe');
				this.initSwipe();
			} else {
				this.$galleryEl.classList.add('use-scroll');
				this.initScroll();
			}
		}
	}