analytics/webcontent/bi/js/storytelling/navigation/slideShow/SlideShowTransitionController.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2014, 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['./SlideTransitionController', 'jquery', 'underscore', '../../util/AnimationHelper'], function (BaseClass, $, _, AnimationHelper) {

	var SlideShowTransitionController = BaseClass.extend({

		$fromShim: null,
		$toShim: null,
		$backdrop: null,

		_minScale: null,

		init: function init(options) {
			SlideShowTransitionController.inherited('init', this, arguments);
			this._minScale = options.minScale ? options.minScale : 0.7;
		},

		_beforeNext: function _beforeNext(from, to) {
			// z-index manipulations are necessary for navigation across the end-of-story boundary
			this.$fromShim = this._makeShim(from.$el).css(this._cssOnScreen).css({ 'z-index': 1 });

			from.$el.css(this._cssOnScreen).css({ 'z-index': 1 });

			this.$toShim = this._makeShim(to.$el).css(this._cssOnScreen).css({
				left: from.$el.width(),
				'z-index': 2,
				opacity: 1
			});

			to.$el.css(this._cssOnScreen).css({
				left: from.$el.width(),
				'z-index': 2,
				opacity: 1
			});

			this._showWidgets(to);

			this.$backdrop = $('<div class="animationBackdrop"/>').insertBefore(this.$fromShim);
			return SlideShowTransitionController.inherited('_beforeNext', this, arguments);
		},

		_next: function _next(from, to) {
			return Promise.all([this._scaleOut(from), this._slideIn(to)]);
		},

		_afterNext: function _afterNext(from, to) {
			this._hideWidgets(from);
			from.$el.css({ transform: AnimationHelper.SCALE_ZERO });
			this._cleanAnimationArtifacts(from, to);
			return SlideShowTransitionController.inherited('_afterNext', this, arguments);
		},

		_beforePrevious: function _beforePrevious(from, to) {
			// z-index manipulations are necessary for navigation across the end-of-story boundary
			this.$fromShim = this._makeShim(from.$el).css(this._cssOnScreen).css({ 'z-index': 1 });
			from.$el.css(this._cssOnScreen).css({ 'z-index': 1 });

			this.$toShim = this._makeShim(to.$el).css(this._cssOnScreen).css({
				'z-index': 2,
				opacity: 0
			});

			to.$el.css(this._cssOnScreen).css({
				'z-index': 2,
				opacity: 0
			});

			this._showWidgets(to);

			this.$backdrop = $('<div class="animationBackdrop"/>').insertBefore(this.$toShim);
			return SlideShowTransitionController.inherited('_beforePrevious', this, arguments);
		},

		_previous: function _previous(from, to) {
			return Promise.all([this._slideOut(from), this._scaleIn(to)]);
		},

		_afterPrevious: function _afterPrevious(from) {
			this._hideWidgets(from);
			from.$el.css({
				transform: AnimationHelper.SCALE_ZERO
			});
			this._cleanAnimationArtifacts();
			return SlideShowTransitionController.inherited('_afterPrevious', this, arguments);
		},

		// Animations

		_slideIn: function _slideIn(scene) {
			var _this = this;

			return new Promise(function (resolve) {
				scene.$el.addClass('slideShowSlide');
				_this._slideTo(_this.$toShim, '0px', function () {});
				_this._slideTo(scene.$el, '0px', function () {
					scene.$el.removeClass('slideShowSlide');
					resolve();
				});
			});
		},

		_slideOut: function _slideOut(scene) {
			var _this2 = this;

			return new Promise(function (resolve) {
				scene.$el.addClass('slideShowSlide');
				_this2._slideTo(_this2.$fromShim, scene.$el.width(), function () {});
				_this2._slideTo(scene.$el, scene.$el.width(), function () {
					scene.$el.removeClass('slideShowSlide');
					resolve();
				});
			});
		},

		_slideTo: function _slideTo($el, left, complete) {
			$el.animate({
				left: left
			}, {
				duration: this._duration,
				complete: complete,
				queue: false,
				easing: 'swing'
			});
		},

		_scaleIn: function _scaleIn(scene) {
			var _this3 = this;

			return new Promise(function (resolve) {
				scene.$el.addClass('slideShowScale');
				_this3._scaleInAnimation(_this3.$toShim, function () {});
				_this3._scaleInAnimation(scene.$el, function () {
					scene.$el.removeClass('slideShowScale');
					resolve();
				});
			});
		},

		_scaleInAnimation: function _scaleInAnimation($el, complete) {
			var minScale = this._minScale;
			$el.animate({
				transform: 1,
				opacity: 1
			}, {
				step: function step(now, fx) {
					if (fx.prop === 'transform') {
						$el.css({
							transform: 'scale(' + (now * (1 - minScale) + minScale) + ')'
						});
					}
				},
				duration: this._duration,
				complete: complete
			}, 'swing');
		},

		_scaleOut: function _scaleOut(scene) {
			var _this4 = this;

			return new Promise(function (resolve) {
				scene.$el.addClass('slideShowScale');
				_this4._scaleOutAnimation(_this4.$fromShim, function () {});
				_this4._scaleOutAnimation(scene.$el, function () {
					scene.$el.removeClass('slideShowScale');
					scene.$el.css({ opacity: 1 });
					resolve();
				});
			});
		},

		_scaleOutAnimation: function _scaleOutAnimation($el, complete) {
			var minScale = this._minScale;
			var duration = this._duration * 0.8;

			$el.delay(this._duration - duration).animate({
				transform: 1,
				opacity: 0
			}, {
				step: function step(now) {
					$el.css({
						transform: 'scale(' + (now * (1 - minScale) + minScale) + ')'
					});
				},
				duration: duration,
				complete: complete
			}, 'swing');
		},

		_makeShim: function _makeShim($el) {
			var $shimRoot = $('<div class="animationShim"/>');
			var parents = $el.parents('.contentViewPane *').get();
			var $shimTree = $shimRoot;
			_.each(parents.reverse(), function (parent) {
				var $clone = $(parent.cloneNode(false));
				$shimTree.append($clone);
				$shimTree = $clone;
			});
			$shimRoot.insertBefore($el);
			return $shimRoot;
		},

		_cleanAnimationArtifacts: function _cleanAnimationArtifacts(from, to) {
			if (from && from.$el) {
				from.$el.css({ 'z-index': '' });
			}

			if (to && to.$el) {
				to.$el.css({ 'z-index': '' });
			}

			if (this.$toShim) {
				this.$toShim.remove();
				this.$toShim = null;
			}

			if (this.$fromShim) {
				this.$fromShim.remove();
				this.$fromShim = null;
			}

			if (this.$backdrop) {
				this.$backdrop.remove();
				this.$backdrop = null;
			}
		}

	});
	return SlideShowTransitionController;
});
//# sourceMappingURL=SlideShowTransitionController.js.map