analytics/webcontent/bi/js/storytelling/layout/views/SlideShow.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Storytelling
 * (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(['./SceneLayout', '../../navigation/NavigationController', '../../navigation/slideShow/AnimatedPathSlideShowTransitionController', '../../navigation/slideShow/SlideShowTransitionController', '../../navigation/slideShow/NoTransitionSlideShowTransitionController', '../../navigation/slideShow/SlideShowSceneLoader', 'text!./templates/SlideShow.html', 'text!./templates/SlideShowItems.html', 'underscore', '../../StoryService'], function (SceneLayout, NavigationController, AnimatedPathSlideShowTransitionController, SlideShowTransitionController, NoTransitionSlideShowTransitionController, SceneLoader, SlideShowTemplate, SlideShowItemsTemplate, _, StoryService) {

	var SlideShow = SceneLayout.extend({

		_pageNavigationController: null,
		transitionControllers: {
			animatedPath: AnimatedPathSlideShowTransitionController,
			scaleAndSlide: SlideShowTransitionController,
			none: NoTransitionSlideShowTransitionController
		},

		init: function init() {
			SlideShow.inherited('init', this, arguments);

			// upgrade older stories to use sweep transition
			if (!this.model.transition) {
				this.model.transition = 'scaleAndSlide';
			}

			// upgrade older stories to use animatedPath transition
			if (this.model.transition === 'progressive') {
				this.model.transition = 'animatedPath';
			}

			this._sceneLoader = new SceneLoader({
				logger: this.logger,
				dashboardApi: this.dashboardApi,
				layoutController: this.layoutController
			});

			this.transitionController = this.transitionControllers[this.model.transition];

			this._pageNavigationController = new NavigationController({
				sceneLayoutApi: this.getSceneLayoutApi(),
				transitionController: new this.transitionController({
					timeline: this.model.boardModel.timeline
				}),
				logger: this.logger,
				sceneLoader: this._sceneLoader
			});

			this.model.on('change:transition', this._setTransitionController, this);
		},

		destroy: function destroy() {
			this._sceneLoader.stopBackgroundLoad();
			SlideShow.inherited('destroy', this, arguments);
		},
		onLayoutReady: function onLayoutReady() {
			SlideShow.inherited('onLayoutReady', this, arguments);

			// Set the selected sceneId to the first scene in the list
			if (this.sceneId === null) {
				this.sceneId = this._scenes[0].id;
			}

			this._setupNavigationEvents();

			return this.onSceneSelected({
				modelId: this.sceneId,
				play: false
			});
		},

		getProperties: function getProperties() {
			var _this = this;

			return SlideShow.inherited('getProperties', this, arguments).then(function (properties) {
				properties.push({
					'type': 'DropDown',
					'label': _this.stringResources.get('sceneTransitionPropertyLabel'),
					'name': 'sceneTransition',
					'id': 'sceneTransition',
					'defaultValue': _this.model.get('transition'),
					'options': [{ label: _this.stringResources.get('noSceneTransitionLabel'), value: 'none' }, { label: _this.stringResources.get('animatedPathSceneTransitionLabel'), value: 'animatedPath' }, { label: _this.stringResources.get('sweepSceneTransitionLabel'), value: 'scaleAndSlide' }],
					'tabName': _this.stringResources.get('tabName_general'),
					'sectionName': _this.stringResources.get('scenesPropertiesSection'),
					'coachMark': {
						render: function render(options) {
							var coachMarkOptions = {
								id: 'com.ibm.bi.dashboard.storyProperties.animatedPath',
								title: _this.stringResources.get('animatedPathCoachmarkTitle'),
								contents: _this.stringResources.get('animatedPathCoachmarkContents'),
								placement: 'top',
								domElement: options.$el[0]
							};
							_this.dashboardApi.prepareGlassOptions(coachMarkOptions);
							var coachMarkApi = _this.dashboardApi.getFeature('CoachMark');
							coachMarkApi.addCoachMark(coachMarkOptions);
						}
					},
					'onChange': function onChange(propertyName, propertyValue) {
						if (_this.model.layoutPositioning !== 'relative') {
							_this._updateStory(propertyValue);
						} else {
							_this._changeTransition(propertyValue);
						}
					}
				});
				return properties;
			});
		},

		_updateStory: function _updateStory(propertyValue) {
			var storyService = new StoryService({
				dashboardApi: this.dashboardApi
			});
			storyService.updateStory({
				boardModel: this.model.boardModel,
				targetInfo: {
					type: 'slideshow',
					transition: propertyValue
				}
			});
		},

		_changeTransition: function _changeTransition(propertyValue) {
			var data = {
				undoRedoTransactionId: _.uniqueId('layout_transitionChange_')
			};
			this.model.set({
				transition: propertyValue
			}, {
				sender: this,
				payloadData: data
			});
		},

		_setupNavigationEvents: function _setupNavigationEvents() {
			this.$el.on('swiperight', this._onPlaybackPrevious.bind(this)).on('swipeleft', this._onPlaybackNext.bind(this));
		},

		_setTransitionController: function _setTransitionController(payload) {
			this.transitionController = this.transitionControllers[this.model.transition];
			this._pageNavigationController.setTransitionController(new this.transitionController({ timeline: this.model.boardModel.timeline }));
			this._refreshPropertiesPane(payload);
		},

		_refreshPropertiesPane: function _refreshPropertiesPane(payload) {
			if (payload && payload.sender === 'UndoRedoController') {
				this.eventRouter.trigger('properties:refreshPane');
			}
		}
	});

	/* used by HtmlTemplates.js */
	SlideShow.getTemplate = function () {
		return [SlideShowTemplate, SlideShowItemsTemplate];
	};

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