Trainers Gallery

TrainersGallery.js

[
			[this.galleriesRowTop,    this.timelineGroups[0]],
			[this.galleriesRowBottom, this.timelineGroups[1]],
		].forEach(([galleries, timegroup]) => {
			galleries.forEach(gallery => {
				timegroup.addKeyframe(gallery, {
					start: 0,
					end: "css(--gallery-duration)",
					x: ["css(--gallery-gap)", "-1 * (css(--gallery-count) * (css(--gallery-item-width) + css(--gallery-gap))) + css(--gallery-gap)"],
					disabledWhen: ['static-layout'],
					easeFunction: "linear"
				});
			});

			requestAnimationFrame(() => {
				const start = parseFloat(getComputedStyle(galleries[0]).getPropertyValue('--gallery-start')) || 0;
				const count = parseInt(getComputedStyle(galleries[0]).getPropertyValue('--gallery-count'));
				timegroup.progress(start/count);
			});
		});
	}

	_updatePlayState() {
		if (this.playing && this.visible) {
			this.timelineGroups.forEach(tg => tg.play());
		} else {
			this.timelineGroups.forEach(tg => tg.pause());
		}
	}

	togglePlayback(event) {
		if (this.playbackControls.classList.contains("play-button")){
			this.playbackControls.classList.remove("play-button");
			this.playbackControls.classList.add("pause-button");
			this.playbackControls.dataset.analyticsTitle = this.playbackControls.dataset.analyticsTitle.replace(/\bpause\b/g, "play");
			this.playbackControls.dataset.analyticsClick = this.playbackControls.dataset.analyticsClick.replace(/\bpause\b/g, "play");
			this.playbackControls.setAttribute("aria-label", this.playbackControls.getAttribute('aria-label').replace(/\bPlay\b/g, "Pause"));
			this.playbackControls.childNodes[1].textContent = "Pause";
			this.playing = true;
		} else if (this.playbackControls.classList.contains("pause-button")) {
			this.playbackControls.classList.remove("pause-button");
			this.playbackControls.classList.add("play-button");
			this.playbackControls.dataset.analyticsTitle = this.playbackControls.dataset.analyticsTitle.replace(/\bplay\b/g, "pause");
			this.playbackControls.dataset.analyticsClick = this.playbackControls.dataset.analyticsClick.replace(/\bplay\b/g, "pause");
			this.playbackControls.setAttribute("aria-label", this.playbackControls.getAttribute('aria-label').replace(/\bPause\b/g, "Play"));
			this.playbackControls.childNodes[1].textContent = "Play";
			this.playing = false;
		}

		this._updatePlayState();
	}