analytics/webcontent/bi/js/storytelling/features/properties/StorytellingPropertiesProvider.js

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

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

define(['underscore', 'gemini/lib/@waca/dashboard-common/dist/core/APIFactory', 'gemini/lib/@waca/dashboard-common/dist/api/PropertiesProviderAPI', 'baglass/utils/Utils', 'storytelling/nls/StringResources', '../../StoryService', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/guided-journey-1_32', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/guided-journey-2_32', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/guided-journey-3_32', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/guided-journey-4_32', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/guided-journey-5_32', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/timesequence_32', '../../lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/help_16'], function (_, APIFactory, PropertiesProviderAPI, GlassUtils, StringResources, StoryService, PanAndZoomLayout1, PanAndZoomLayout2, PanAndZoomLayout3, PanAndZoomLayout4, PanAndZoomLayout5, PanAndZoomLayout6, HelpIcon) {

	var PAN_AND_ZOOM_ITEMS = [{
		name: 'panAndZoom1',
		label: StringResources.get('PanAndZoomLayout1'),
		type: 'svg',
		value: PanAndZoomLayout1.default.id
	}, {
		name: 'panAndZoom2',
		label: StringResources.get('PanAndZoomLayout2'),
		type: 'svg',
		value: PanAndZoomLayout2.default.id
	}, {
		name: 'panAndZoom3',
		label: StringResources.get('PanAndZoomLayout3'),
		type: 'svg',
		value: PanAndZoomLayout3.default.id
	}, {
		name: 'panAndZoom4',
		label: StringResources.get('PanAndZoomLayout4'),
		type: 'svg',
		value: PanAndZoomLayout4.default.id
	}, {
		name: 'panAndZoom5',
		label: StringResources.get('PanAndZoomLayout5'),
		type: 'svg',
		value: PanAndZoomLayout5.default.id
	}, {
		name: 'panAndZoom6',
		label: StringResources.get('PanAndZoomLayout6'),
		type: 'svg',
		value: PanAndZoomLayout6.default.id
	}];

	var StorytellingPropertiesProvider = function () {
		function StorytellingPropertiesProvider(options) {
			_classCallCheck(this, StorytellingPropertiesProvider);

			this.dashboardApi = options.dashboardApi || options.dashboardAPI;
			this._api = APIFactory.createAPI(this, [PropertiesProviderAPI]);
			// register self as a properties provider contributing storytelling properties
			this.dashboardApi.getFeature('Properties').registerProvider(this.getAPI());
		}

		StorytellingPropertiesProvider.prototype.getAPI = function getAPI() {
			return this._api;
		};

		StorytellingPropertiesProvider.prototype.getPropertyLayoutList = function getPropertyLayoutList() {
			return [{
				value: StringResources.get('storyProperties'),
				id: 'banner',
				type: 'Banner',
				editable: false
			}, {
				id: 'scenes',
				type: 'Section',
				label: StringResources.get('scenesPropertiesSection'),
				position: 0
			}];
		};

		StorytellingPropertiesProvider.prototype.getPropertyList = function getPropertyList() {
			return this._getScenesPropertiesList();
		};

		StorytellingPropertiesProvider.prototype._getScenesPropertiesList = function _getScenesPropertiesList() {
			var scenesProperties = [];
			scenesProperties.push.apply(scenesProperties, this._getStoryPropertiesList());
			var storyType = this._getBoardModel().layout.type;
			if (storyType === 'slideshow') {
				scenesProperties.push.apply(scenesProperties, this._getSlideShowPropertiesList());
			} else if (storyType.indexOf('panAndZoom') !== -1) {
				scenesProperties.push.apply(scenesProperties, this._getPanAndZoomPropertiesList());
			}
			return scenesProperties;
		};

		StorytellingPropertiesProvider.prototype._getBoardModel = function _getBoardModel() {
			// TODO: temporary (short term) solution
			return this.dashboardApi.getFeature('internal').getBoardModel();
		};

		StorytellingPropertiesProvider.prototype._getStoryPropertiesList = function _getStoryPropertiesList() {
			var _this = this;

			var collapsiblePickerSelectedName = void 0;
			var currentLayout = this._getPropertyValueFromModel('type') || 'slideshow';
			if (currentLayout.indexOf('panAndZoom') != -1) {
				var index = currentLayout.substring(currentLayout.length - 1, currentLayout.length) - 1;
				currentLayout = currentLayout.substring(0, currentLayout.length - 1);
				collapsiblePickerSelectedName = PAN_AND_ZOOM_ITEMS[index].name;
			}
			var collapsiblePickerOptions = {
				type: 'CollapsiblePicker',
				name: 'storyType',
				label: StringResources.get('layoutLabel'),
				selectedName: collapsiblePickerSelectedName,
				placeholder: {
					name: '',
					label: '',
					type: 'svg',
					value: HelpIcon.default.id
				},
				contentSize: 'large',
				items: PAN_AND_ZOOM_ITEMS,
				isRequired: true
			};
			var dropDownOptions = {
				name: 'storyType',
				label: StringResources.get('storyTypeLabel'),
				defaultValue: currentLayout,
				options: [{
					label: StringResources.get('slideshowLabel'),
					value: 'slideshow'
				}, {
					label: StringResources.get('panAndZoomLabel'),
					value: 'panAndZoom'
				}]
			};
			return [{
				id: 'storyType',
				getPropertyValue: function getPropertyValue() {
					return currentLayout;
				},
				setPropertyValue: function setPropertyValue(propertyValue) {
					var value = propertyValue;
					if (propertyValue && propertyValue.name) {
						value = value.name;
					}
					var storyService = new StoryService({
						dashboardApi: _this.dashboardApi
					});
					storyService.updateStory({
						boardModel: _this._getBoardModel(),
						targetInfo: {
							type: value
						}
					});
				},
				editor: {
					sectionId: 'general.scenes',
					position: 1,
					uiControl: {
						type: 'TwoStageCombo',
						dropDownOptions: dropDownOptions,
						collapsiblePickerOptions: [null, collapsiblePickerOptions]
					}
				}
			}];
		};

		StorytellingPropertiesProvider.prototype._getSlideShowPropertiesList = function _getSlideShowPropertiesList() {
			var _this2 = this;

			return [{
				id: 'sceneTransition',
				getPropertyValue: function getPropertyValue() {
					return _this2._getPropertyValueFromModel('transition');
				},
				setPropertyValue: function setPropertyValue(propertyValue) {
					if (_this2._getBoardModel().layout.layoutPositioning !== 'relative') {
						_this2._updateStory(propertyValue);
					} else {
						_this2._changeTransition(propertyValue);
					}
				},
				editor: {
					sectionId: 'general.scenes',
					position: 2,
					uiControl: {
						type: 'DropDown',
						label: StringResources.get('sceneTransitionPropertyLabel'),
						options: [{
							label: StringResources.get('noSceneTransitionLabel'),
							value: 'none'
						}, {
							label: StringResources.get('animatedPathSceneTransitionLabel'),
							value: 'animatedPath'
						}, {
							label: StringResources.get('sweepSceneTransitionLabel'),
							value: 'scaleAndSlide'
						}],
						coachMark: {
							render: function render(options) {
								GlassUtils.addCoachmark({
									id: 'com.ibm.bi.dashboard.storyProperties.animatedPath',
									title: StringResources.get('animatedPathCoachmarkTitle'),
									contents: StringResources.get('animatedPathCoachmarkContents'),
									placement: 'top',
									glassContext: options.glassContext,
									$el: options.$el
								});
							}
						}
					}
				}
			}];
		};

		StorytellingPropertiesProvider.prototype._getPanAndZoomPropertiesList = function _getPanAndZoomPropertiesList() {
			var _this3 = this;

			// the overview property name are very generic
			// to prevent clashing with other properties we add a prefix
			var propertyPrefix = 'overview_';

			var updateOverviewModel = function updateOverviewModel(propertyName, propertyValue) {
				var _showOverviews;

				var updateOptions = {
					updateArray: [{
						id: _this3._getBoardModel().layout.id,
						showOverviews: (_showOverviews = {}, _showOverviews[propertyName] = propertyValue, _showOverviews)
					}]
				};
				_this3._getBoardModel().layout.updateModel(updateOptions, _this3, {
					undoRedoTransactionId: _.uniqueId('layoutShowOverview_')
				});
			};
			return [{
				id: propertyPrefix + 'showStart',
				getPropertyValue: function getPropertyValue() {
					return _this3._getPropertyValueFromModel('showOverviews').showStart;
				},
				setPropertyValue: function setPropertyValue(value) {
					updateOverviewModel('showStart', value);
				},
				editor: {
					sectionId: 'general.scenes',
					position: 1,
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('propShowStoryOverviewFirstSlide')
					}
				}
			}, {
				id: propertyPrefix + 'showEnd',
				getPropertyValue: function getPropertyValue() {
					return _this3._getPropertyValueFromModel('showOverviews').showEnd;
				},
				setPropertyValue: function setPropertyValue(value) {
					updateOverviewModel('showEnd', value);
				},
				editor: {
					sectionId: 'general.scenes',
					position: 2,
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('propShowStoryOverviewLastSlide')
					}
				}
			}];
		};

		StorytellingPropertiesProvider.prototype._getPropertyValueFromModel = function _getPropertyValueFromModel(propName) {
			// TODO: temporary (short term) solution
			var model = this._getBoardModel().layout;
			return model.get(propName);
		};

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

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

		return StorytellingPropertiesProvider;
	}();

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