ACQ Op Online

acqoponline.js

function __acqOp() {
	$(document).ready(function () {
		var acqOpVideos = {


			/*
			 ———————————————————————————————————————————————————————————————————————————————————————————————
			 |
			 |	PROPERTIES
			 |
			 ———————————————————————————————————————————————————————————————————————————————————————————————
			 */

			/**
			 *  @param {Object}	Container for all YouTube player objects
			 */
			players: {},

			/**
			 * @param {Array}	Array of video Ids
			 */
			ids: ["yOBmvvYHa0U", "Q8p4kGqpjOU", "swSjHJXyNIw", "uyXxAsTtnho", "C9S4vS22V64", "M3x4z0H-JI0", "vDiaCG5yEXk"],

			/**
			 * @param {String}	The video quality
			 * @link https://developers.google.com/youtube/iframe_api_reference#Playback_quality
 			 */
			QUALITY: "hd720",


			/*
			 ———————————————————————————————————————————————————————————————————————————————————————————————
			 |
			 |	PUBLIC METHODS
			 |
			 ———————————————————————————————————————————————————————————————————————————————————————————————
			 */

			/**
			 * Initialize swiper, DOM, and event handlers methods.
			 */
			init: function () {
				this.initSwiper();
				this.cacheDOM();
				this.attachEventHandlers();
			},

			/**
			 * Initialize the Swiper class
			 */
			initSwiper: function () {
				this.swiper = new Swiper('.swiper-container', {
					spaceBetween: 10,
				});
			},

			/**
			 * Cache the DOM using jQuery selectors. This will be used to manipulate the video titles, lesson link list,
			 * and video notes when sliders are changed.
			 */
			cacheDOM: function () {
				this.$container = $(".onlinecourse-acqop");
				this.$lessonList = $(".lesson-list");
				this.$lessonLinks = this.$container.find(".lesson-link");
				this.$lessonNotes = this.$container.find(".lesson-notes");
				this.$videoTitle = this.$container.find("#video-title");
				this.$videoNotesBefore = this.$container.find("#before");
				this.$videoNotesAfter = this.$container.find("#after");
			},

			/**
			 * Attach event handlers for lesson advance (clicks on list of lessons) and the video player.
			 *
			 */
			attachEventHandlers: function () {
				if (typeof(YT) === "undefined" || typeof(YT.Player) === "undefined") {
					var _this = this;
					window.onYouTubeIframeAPIReady = function () {
						_this.initVideoPlayer();
					}
				} else {
					this.initVideoPlayer();
				}
			},

			/**
			 * Event handler for clicks on the lesson links
			 */
			lessonAdvanceEventHandler: function () {
				var _this = this;
				this.$lessonLinks.on("click", function (e) {
					e.preventDefault();
					var index = $(this).data("index");
					_this._pauseVideos();
					_this.swiper.slideTo(index);
					_this.$lessonLinks.removeClass("bold");
					$(this).addClass("bold");
					_this._scrollToVideo($(window).width());
					_this._showLessonNotes(index);
					_this._playVideo(index);
				});
			},

			/**
			 * Initialize video player object for each id using the YT.Player class
			 */
			initVideoPlayer: function() {
				for (var i = 0; i < this.ids.length; ++i) {
					var id = this.ids[i];
					this.players[i] = new YT.Player(id, {
						events: {
							"onReady": this._onPlayerReady.bind(this, i, "hd720")
						}
					});
				}
				this.lessonAdvanceEventHandler();
				this._showLessonList();
			},


			/*
			 ———————————————————————————————————————————————————————————————————————————————————————————————
			 |
			 |	PRIVATE METHODS
			 |
			 ———————————————————————————————————————————————————————————————————————————————————————————————
			 */

			/**
			 * Show lesson notes when a slide advances
			 * @param {int} index	The index of the slide being advanced to
			 * @private
			 */
			_showLessonNotes: function (index) {
				this.$lessonNotes.addClass("hide");
				var $toShow = $(this.$lessonNotes[index]);
				this.$videoTitle.text($toShow.find("h4").text());
				this.$videoNotesBefore.html("");
				this.$videoNotesAfter.html("");
				this.$videoNotesBefore.html(($toShow.find("li.before").html()));
				this.$videoNotesAfter.html(($toShow.find("li.after").html()));

			},

			/**
			 * Show lesson list when event handlers have been added
			 * @private
			 */
			_showLessonList: function() {
				this.$lessonList.removeClass("hide");
			},

			/**
			 * Pause all videos using the YT.Player.pauseVideo() method.
			 * Occurs when a slide advances.
			 *
			 * @private
			 */
			_pauseVideos: function () {
				for (var i = 0; i < this.ids.length; ++i) {
					this.players[i].pauseVideo();
				}
			},

			/**
			 * Play a video using the YT.Player.playVideo() method
			 * Occurs when a slider advances
			 *
			 * @param {int} index	The index of the video being advanced to
			 * @private
			 */
			_playVideo: function(index) {
				this.players[index].playVideo();
			},

			/**
			 * Set the player to HD video quality
			 *
			 * @param {int} index	The index of the video being advanced to
			 * @private
			 */
			_onPlayerReady: function(index, quality) {
				this.players[index].setPlaybackQuality(quality);
			},

			/**
			 *
			 * @param {Integer} width	Current Screen Width
			 * @private
			 */
			_scrollToVideo: function(width) {
				if (width < 801) {
					$("html,body").animate({
						scrollTop: this.$videoTitle.offset().top
					});
				}
			}

		}; //end swiperHandler

		acqOpVideos.init();

	});
}