'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 = $('
').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 = $('
').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 = $('
'); 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