analytics/webcontent/bi/js/storytelling/glass/StoryView.js

'use strict';

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

define(['gemini/dashboard/glass/BaseBoardView', 'jquery', '../nls/StringResources', '../views/TimelinePlayerView', '../views/StoryNavControl', '../views/MouseOverArea', 'gemini/lib/@waca/dashboard-common/dist/ui/CenterLoadingSpinner', 'react-dom', '../api/impl/StoryAPIImpl', '../api/impl/TimelineAPIImpl', 'gemini/app/util/ErrorUtils', './InlineContributions', './controllers/StoryPrint'], function (BaseBoardView, $, StorytellingResources, TimelinePlayerView, StoryNavControl, MouseOverArea, CenterLoadingSpinner, ReactDom, StoryAPIImpl, TimelineAPIImpl, ErrorUtils, InlineContributions, StoryPrint) {

	var StoryView = BaseBoardView.extend({

		initialize: function initialize(options) {
			StoryView.inherited('initialize', this, arguments);

			this.dashboard = this.getDashboardApi();
			this.navControl = null;

			this.inlineContributions = options.inlineContributions || InlineContributions;

			// register our string resource, top priority
			this.stringService.register(StorytellingResources, 1);

			this.timelinePlayerView = null;

			// these params are from shareable URL
			this.sceneId = options.sceneId;
			this.sceneTime = parseInt(options.sceneTime, 10) || undefined;

			this.eventRouter.on('navigation:started', this._onNavigationStarted, this);
			this.eventRouter.on('navigation:complete', this._onNavigationComplete, this);
		},

		/**
   * Glass will call this method to get the type which, in turn, be used to match storytelling share action handler.
   * In <i>perspectives/common/story.json</i>, the shared feature types should contain this type.
   * @override
   */
		getType: function getType() {
			return 'storytelling';
		},

		getApplicationLabel: function getApplicationLabel() {
			return this.stringService.get('story');
		},

		/**
   * overridden from dashboard-core to pass desired shareable URL parameters to 'appSettings'
   * @override
   */
		getContent: function getContent() {
			var state = StoryView.inherited('getContent', this, arguments);

			state.sceneId = this.sceneId || null;

			return state;
		},

		render: function render() {
			var _this = this,
			    _arguments = arguments;

			ReactDom.render(CenterLoadingSpinner({ variant: 'circle', size: 'normal' }), this.$el[0]);

			return this._addInlineContribToCollections().then(function () {
				return StoryView.inherited('render', _this, _arguments);
			}).then(function () {
				var dashboardState = _this.dashboard.getFeature('DashboardState');
				dashboardState.onUiStateChange(_this._onStateChange.bind(_this));
				_this.$content.on('click', '>.page', _this._onContentClick.bind(_this));
				_this.eventRouter.on('navigation:change', _this.onNavigationChange, _this);

				_this.boardController.layoutController.getTopLayoutViewWhenReady().then(function () {
					_this.storyPaneController.onStoryLayoutReady(_this.sceneId, _this.sceneTime);
				});

				var printFeature = _this.dashboard.getFeature('Print');
				var storyPrint = new StoryPrint().getAPI();
				printFeature.registerContent('slideshow', storyPrint);
				printFeature.registerContent('panAndZoom1', storyPrint);
				printFeature.registerContent('panAndZoom2', storyPrint);
				printFeature.registerContent('panAndZoom3', storyPrint);
				printFeature.registerContent('panAndZoom4', storyPrint);
				printFeature.registerContent('panAndZoom5', storyPrint);
				printFeature.registerContent('panAndZoom6', storyPrint);

				_this._appendTimelinePlayerView();
			});
		},

		_onStateChange: function _onStateChange(state) {
			if (state.fullScreen === this.oldFullScreenState) {
				return;
			}

			if (state.fullScreen) {
				this.setupFullScreenControls();
			} else if (!state.fullScreen) {
				this.teardownFullScreenControls();
			}

			this.oldFullScreenState = state.fullScreen;
		},

		_addInlineContribToCollections: function _addInlineContribToCollections() {
			var _this2 = this;

			return Promise.all(this.inlineContributions.map(function (contribution) {
				return _this2.options.glassContext.appController.findCollection(contribution.containerId).then(function (collection) {
					if (collection) {
						if (collection.filter(function (e) {
							return e.id === contribution.id;
						}).length) {
							// when we get this message we should remove it from inline contributions.
							console.warn('WARNING: storytelling contribution already exists in collection id =', contribution.id);
						} else {
							console.log('adding contribution ' + contribution.id + ' to collection ' + contribution.containerId);
							collection.push(contribution);
						}
					} else {
						console.error('ERROR: not adding contribution to non-existent collection. id =', contribution.containerId);
					}
				});
			}));
		},

		remove: function remove() {
			if (this.storyPaneController) {
				this.storyPaneController.destroy();
				this.storyPaneController = null;
			}
			if (this._timelineController) {
				this._timelineController.destroy();
				this._timelineController = null;
			}
			if (this.mouseOverArea) {
				this.mouseOverArea.remove();
				this.mouseOverArea = null;
			}
			if (this.navControl) {
				this.navControl.destroy();
				this.navControl = null;
			}
			if (this.eventRouter) {
				this.eventRouter.off('navigation:change', this.onNavigationChange, this);
				this.eventRouter.off('navigation:started', this._onNavigationStarted, this);
				this.eventRouter.off('navigation:complete', this._onNavigationComplete, this);
			}
			StoryView.inherited('remove', this, arguments);
		},

		getSplitterState: function getSplitterState() {
			return this.isAuthorMode() ? 'open' : 'close';
		},

		onCanvasReady: function onCanvasReady() {
			this._setupControllers(this.options);
		},

		deactivate: function deactivate() {
			if (this.storyPaneController) {
				this.storyPaneController.pause();
			}
			return StoryView.inherited('deactivate', this, arguments);
		},

		onNavigationChange: function onNavigationChange(evt) {
			this.boardModel.updateLayoutType(evt);
		},

		_onNavigationStarted: function _onNavigationStarted() {
			this.$content.toggleClass('animating', true);
		},

		_onNavigationComplete: function _onNavigationComplete() {
			this.$content.toggleClass('animating', false);
		},

		setupFullScreenControls: function setupFullScreenControls() {
			StoryView.inherited('setupFullScreenControls', this, arguments);

			this.$el.addClass('disableScroll');

			this.timelinePlayerView.toggleFullscreenControls(true);

			var el = $('<div />').addClass('storyNavControlContainer').appendTo(this.$el.parent());
			this.navControl = new StoryNavControl({
				el: el,
				subview: this.timelinePlayerView,
				startHidden: true,
				autohide: 4000
			});

			this._buildMouseOverArea();

			return this.navControl.render().then(function () {
				this.eventRouter.trigger('filterDock:disable');
				this.storyPaneController.didEnterFullScreen();
				this._showNavControl({ delay: 1000 });
			}.bind(this));
		},

		_buildMouseOverArea: function _buildMouseOverArea() {
			var el = $('<div />').addClass('mouseOverArea').prependTo(this.$el.parent());
			this.mouseOverArea = new MouseOverArea({
				el: el,
				onActivate: this._showNavControl.bind(this)
			});
		},

		teardownFullScreenControls: function teardownFullScreenControls() {
			if (!this.navControl) {
				return Promise.resolve();
			}
			this.storyPaneController.didExitFullScreen();

			this.$el.removeClass('disableScroll');
			this.navControl.subview = null;

			this.timelinePlayerView.$el.appendTo(this.$el).show();
			this.timelinePlayerView.toggleFullscreenControls(false);
			if (this.mouseOverArea) {
				this.mouseOverArea.remove();
				this.mouseOverArea = null;
			}
			if (!this.storyPaneController.isOverview()) {
				this.eventRouter.trigger('filterDock:enable');
			}

			return this.navControl.destroy().then(function () {
				this.navControl = null;
				StoryView.inherited('teardownFullScreenControls', this, arguments);
			}.bind(this));
		},

		_setupControllers: function _setupControllers(options) {
			var dashboardApi = this.getDashboardApi();

			this._timelineController = new TimelineAPIImpl({
				canvasController: this.boardLoader.canvasController,
				dashboardApi: dashboardApi,
				eventRouter: this.eventRouter,
				model: this.boardModel,
				authoring: options.isAuthoringMode,
				services: this.services
			});

			this.storyPaneController = new StoryAPIImpl({
				eventRouter: this.eventRouter,
				model: this.boardModel,
				authoring: options.isAuthoringMode,
				timelineController: this._timelineController,
				dashboardApi: dashboardApi
			});
			// TODO this is deprecated from dashboard API
			// and the parameters we need do not allow for it to be a contribution
			dashboardApi.registerDashboardSvc('.StoryPaneService', this.storyPaneController);

			this._storyApi = this.storyPaneController.getAPI();
		},

		_appendTimelinePlayerView: function _appendTimelinePlayerView() {
			var _this3 = this;

			if (!this.timelinePlayerView) {

				this.getDashboardApi().getDashboardSvc('.StoryPaneService').then(function (storyPaneController) {
					_this3.timelinePlayerView = new TimelinePlayerView({
						controller: storyPaneController,
						dashboardApi: _this3.getDashboardApi(),
						glassContext: _this3.options.glassContext,
						services: _this3.services
					});
					_this3.$el.append(_this3.timelinePlayerView.$el);
					_this3.timelinePlayerView.render();

					_this3.lifeCycleManager.registerLifeCycleHandler('post:dashboard.focus', _this3.timelinePlayerView.onSmallScreenUpdate.bind(_this3.timelinePlayerView));
				});
			}
		},

		getIconTooltip: function getIconTooltip() {
			// this.stringService comes from the BaseClass (BaseBoardView)
			return this.stringService.get('story');
		},

		getIcon: function getIcon() {
			return 'common-catalog';
		},

		_onContentClick: function _onContentClick(event) {
			if (!this.isAuthoringMode && !$(event.target).parentsUntil(event.currentTarget, '.widget').length) {
				this._showNavControl();
				this.eventRouter.trigger('playback:togglePlayPause');
			}
		},

		_processKeyDown: function _processKeyDown(e) {
			StoryView.inherited('_processKeyDown', this, arguments);

			var preventDefault = e.isDefaultPrevented && e.isDefaultPrevented() || false;

			if ((this.isPressed(37) || this.isPressed(38)) && !this.isAuthoringMode && !preventDefault) {
				this.eventRouter.trigger('playback:prev');
			} else if ((this.isPressed(39) || this.isPressed(40)) && !this.isAuthoringMode && !preventDefault) {
				this.eventRouter.trigger('playback:next');
			} else if (this.isPressed(32) && !$(e.target).is(':tabbable') && !preventDefault) {
				this._showNavControl();
				this.eventRouter.trigger('playback:togglePlayPause');
			}
		},

		_showNavControl: function _showNavControl(options) {
			if (this.navControl) {
				// navControl only exist in fullscreen
				this.navControl.show(options);
			}
		},

		// LEAVE BLANK
		// This method overrides a dashboard specific case that we in storytelling
		// don't want to run
		addFullScreenControl: function addFullScreenControl() {},

		getStoryAPI: function getStoryAPI() {
			return this._storyApi;
		},

		hasAuthoringCapability: function hasAuthoringCapability() {
			return ErrorUtils.hasCapability(this.glassContext, 'canAuthorDashboard');
		},

		shouldShowCloseConfirmationDialog: function shouldShowCloseConfirmationDialog() {
			return this.isDirty() && this.hasAuthoringCapability();
		}
	});

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