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

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Storytelling
 * (C) Copyright IBM Corp. 2017, 2018
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

define(['baglass/core-client/js/core-client/ui/core/Class', '../../util/AnimationHelper'], function (Class, AnimationHelper) {

	var TransitionDirector = Class.extend({

		layoutConfiguration: {
			'widget': {
				hasOpacity: true,
				hideIfNotLinked: true
			},
			'group': {
				hasOpacity: false,
				hideIfNotLinked: false
			}
		},

		init: function init(options) {
			TransitionDirector.inherited('init', this, arguments);
			this.rootLayout = options.rootLayout;
		},

		/*
   * returns a reduce callback suitable for layout view reduction.
   * The accumulator will be an array of promises that will be resolved once all the transitions have been completed.
   */
		getOnTransitionCallback: function getOnTransitionCallback(event) {
			return this._onTransitionCallback.bind(this, event);
		},
		/*
   * returns a reduce callback suitable for layout view reduction.
   * The accumulator will be an array of promises that will be resolved once all the transitions have been completed.
   */
		getAfterTransitionCallback: function getAfterTransitionCallback(event) {
			return this._afterTransitionCallback.bind(this, event);
		},

		_onTransitionCallback: function _onTransitionCallback(event, layoutView, promises) {
			promises = promises || [];
			if (event.to) {
				promises.push(this._animateToNext(event.linkIdMap, layoutView));
			} else if (event.from) {
				promises.push(this._animateFromPrevious(event.linkIdMap, layoutView));
			}
			return promises;
		},

		/*
   * Here we animate the current widget to the style of the widget/group in the next scene.
   */
		_animateToNext: function _animateToNext(linkIdMap, layoutView) {
			var config = this.layoutConfiguration[layoutView.model.type];
			var $node = layoutView.$el;

			var widgetInNextView = linkIdMap.forward[layoutView.id];
			if (!widgetInNextView) {
				// models not linked... hide the node if we are configured to do so for this type
				if (config && config.hideIfNotLinked) {
					$node.hide();
				}
				return Promise.resolve();
			}
			$node.show();

			var toWidget = this.rootLayout.findModel(widgetInNextView);
			var fromWidget = layoutView.model;

			var scaleX = parseFloat(toWidget.style.width, 10) / parseFloat(fromWidget.style.width, 10);
			var scaleY = parseFloat(toWidget.style.height, 10) / parseFloat(fromWidget.style.height, 10);

			var deltaXpercent = (parseFloat(toWidget.style.left, 10) - parseFloat(fromWidget.style.left, 10)) / 100;
			var deltaYpercent = (parseFloat(toWidget.style.top, 10) - parseFloat(fromWidget.style.top, 10)) / 100;

			var deltaXpx = $node.parent().width() * deltaXpercent;
			var deltaYpx = $node.parent().height() * deltaYpercent;

			// Make sure all widgets will start with a transform applied
			$node.css({
				transform: 'scale(1)'
			});

			var toWidgetTransform = this._getLayoutNodeTransform(toWidget);
			var cssProperties = {
				transition: 'transform 0.9s',
				transform: ' translate(' + deltaXpx + 'px, ' + deltaYpx + 'px) ' + toWidgetTransform + 'translate(-50%,-50%) scale(' + scaleX + ',' + scaleY + ') translate(50%,50%)'
			};

			if (config && config.hasOpacity) {
				cssProperties.transition += ', opacity 0.9s ease-in';
				cssProperties.opacity = '0';
			}

			return AnimationHelper.Animate($node, cssProperties);
		},

		/*
   * Here we animate the current widget to the style of the widget/group in the previous scene.
   */
		_animateFromPrevious: function _animateFromPrevious(linkIdMap, layoutView) {
			var config = this.layoutConfiguration[layoutView.model.type];
			var $node = layoutView.$el;

			var widgetInPreviousView = linkIdMap.backward[layoutView.id];
			if (!widgetInPreviousView) {
				return Promise.resolve();
			}

			var fromWidget = this.rootLayout.findModel(widgetInPreviousView);
			var toWidget = layoutView.model;

			var scaleX = parseFloat(toWidget.style.width, 10) / parseFloat(fromWidget.style.width, 10);
			var scaleY = parseFloat(toWidget.style.height, 10) / parseFloat(fromWidget.style.height, 10);

			var deltaXpercent = (parseFloat(toWidget.style.left, 10) - parseFloat(fromWidget.style.left, 10)) / 100;
			var deltaYpercent = (parseFloat(toWidget.style.top, 10) - parseFloat(fromWidget.style.top, 10)) / 100;

			var deltaXpx = $node.parent().width() * deltaXpercent;
			var deltaYpx = $node.parent().height() * deltaYpercent;

			var toWidgetTransform = this._getLayoutNodeTransform(toWidget);
			var fromWidgetTransform = this._getLayoutNodeTransform(fromWidget);

			var toCss = {
				transform: 'translate(' + -1 * deltaXpx + 'px, ' + -1 * deltaYpx + 'px)' + fromWidgetTransform + ' translate(-50%,-50%) scale(' + 1 / scaleX + ',' + 1 / scaleY + ') translate(50%,50%)'
			};

			if (config && config.hasOpacity) {
				toCss.opacity = '0';
			}

			$node.css(toCss);

			toCss = {
				transition: 'transform 0.9s',
				transform: 'translate(0px, 0px) ' + toWidgetTransform + 'translate(-50%,-50%) scale(1, 1) translate(50%,50%)'
			};

			if (config && config.hasOpacity) {
				toCss.transition += ', opacity 0.9s ease-out';
				toCss.opacity = 1;
				if (toWidget.style.opacity || toWidget.style.opacity === 0) {
					toCss.opacity = toWidget.style.opacity;
				}
			}
			return AnimationHelper.Animate($node, toCss);
		},

		/*
   * The styles on linked widgets modified in _animateFromPrevious and _animateToNext need to be restored
   * Widgets not in the next view hidden in _animateToNext need to be shown
   */
		_afterTransitionCallback: function _afterTransitionCallback(event, layoutView, promises) {
			promises = promises || [];

			var config = this.layoutConfiguration[layoutView.model.type];
			var $node = layoutView.$el;
			var model = layoutView.model;
			var transform = this._getLayoutNodeTransform(model);

			var css = {
				transition: 'none',
				transform: transform
			};
			if (config && config.hasOpacity) {
				css.opacity = 1;
				if (model.style.opacity || model.style.opacity === 0) {
					css.opacity = model.style.opacity;
				}
			}
			var widgetInPreviousView = event.linkIdMap.backward[layoutView.id];
			var widgetInNextView = event.linkIdMap.forward[layoutView.id];
			if (widgetInPreviousView || widgetInNextView) {
				$node.css(css);
			}
			if (!widgetInNextView) {
				$node.show();
			}
			promises.push(Promise.resolve());
			return promises;
		},

		_getLayoutNodeTransform: function _getLayoutNodeTransform(model) {
			var style = model.style;
			var transform;
			if (style && style.transform) {
				transform = style.transform;
			}
			if (!transform || transform === 'none' || transform === 'matrix(0, 0, 0, 0, 0, 0)') {
				transform = '';
			}
			return transform;
		}

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