analytics/webcontent/bi/js/gemini/features/content/pageProperties/PagePropertiesProvider.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(['../../../app/nls/StringResources', '../../../lib/@waca/dashboard-common/dist/core/APIFactory', '../../../lib/@waca/dashboard-common/dist/api/PropertiesProviderAPI', '../util/IconList', 'underscore'], function (StringResources, APIFactory, PropertiesProviderAPI, IconList, _) {
	var PageProperties = function () {
		function PageProperties(options) {
			_classCallCheck(this, PageProperties);

			this.dashboard = options.dashboardAPI;
			this.content = options.content;
			this.content.getFeature('Properties').registerProvider(this.getAPI());
			this._icons = options.features['Dashboard.Icons'];
		}

		PageProperties.prototype.getAPI = function getAPI() {
			return APIFactory.createAPI(this, [PropertiesProviderAPI]);
		};

		PageProperties.prototype._isTopLevelPage = function _isTopLevelPage() {
			return !this.content.getContainer();
		};

		PageProperties.prototype.getPropertyList = function getPropertyList() {
			var _this = this;

			if (this._isTopLevelPage()) {
				return [];
			}
			var restoreMasterStyling = function restoreMasterStyling() {
				var transaction = _this.dashboard.getFeature('Transaction');
				var transactionToken = transaction.startTransaction();
				_this.content.setPropertyValue('tabTextColor', 'transparent', transactionToken);
				_this.content.setPropertyValue('tabSelectedLineColor', 'transparent', transactionToken);
				_this.content.setPropertyValue('tabBackgroundColor', 'transparent', transactionToken);
				_this.content.setPropertyValue('tabIconColor', 'transparent', transactionToken);
				transaction.endTransaction(transactionToken);
				_this.dashboard.triggerDashboardEvent('properties:refreshChild', {
					content: _this.content,
					focusSelector: '.clickCallback_left_0_tabRestoreDefaults'
				});
			};
			var translationService = this.dashboard.getFeature('TranslationService');
			return [{
				id: 'title',
				getPropertyValue: function getPropertyValue() {
					var layoutModel = _this.getLayoutModel();
					return layoutModel.get('title');
				},
				setPropertyValue: function setPropertyValue(value) {
					var layoutModel = _this.getLayoutModel();
					if (layoutModel) {
						layoutModel.set({ title: value }, {
							payloadData: { skipUndoRedo: true }
						});
					}
				},
				editor: {
					sectionId: 'page.titleSection',
					uiControl: {
						type: 'InputLabel',
						label: StringResources.get('propTabTitle'),
						ariaLabel: StringResources.get('propTabTitle'),
						handleReturnKey: true,
						appendTranslationIcon: translationService.appendTranslationIcon.bind(translationService)
					}
				}
			}, {
				id: 'tabTextColor',
				getPropertyValue: function getPropertyValue() {
					var layoutModel = _this.getLayoutModel();
					return layoutModel.get('tabTextColor');
				},
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this._changeTabColor('tabTextColor', value, transactionToken);
				},
				editor: {
					sectionId: 'page.titleSection',
					uiControl: {
						type: 'ColorPicker',
						label: StringResources.get('propTabTextColor'),
						ariaLabel: StringResources.get('propTabTextColor'),
						paletteType: 'DashboardColorSet',
						open: false,
						showHexValue: true,
						addButton: true,
						onChange: function onChange(propertyName) {
							var propertyValueInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

							_this.content.setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabIcon',
				getPropertyValue: function getPropertyValue() {
					var layoutModel = _this.getLayoutModel();
					var icon = layoutModel.get('tabIcon');
					if (icon && icon !== 'transparent') {
						return _this._icons.getIcon(icon).id;
					} else {
						return 'transparent';
					}
				},
				setPropertyValue: function setPropertyValue(value) {
					var layoutModel = _this.getLayoutModel();
					if (layoutModel) {
						// Transform string to object if input is string
						var iconList = IconList.getTabIcons(_this._icons);
						if (typeof value === 'string') {
							value = _.find(iconList, function (icon) {
								return icon.value === value;
							});
							value = value || iconList[0]; // the first element is the transparent option
						}
						layoutModel.set({ tabIcon: value.name }, {
							payloadData: { skipUndoRedo: true }
						});
					}
				},
				editor: {
					sectionId: 'page.tabIconArea',
					uiControl: {
						type: 'CollapsiblePicker',
						label: StringResources.get('propTabIcon'),
						ariaLabel: StringResources.get('propTabIcon'),
						selectedName: this.getLayoutModel().get('tabIcon'),
						placeholder: {
							name: 'transparent',
							label: StringResources.get('no_icon'),
							type: 'string',
							value: 'transparent'
						},
						contentSize: 'small',
						items: IconList.getTabIcons(this._icons)
					}
				}
			}, {
				id: 'tabIconColor',
				getPropertyValue: function getPropertyValue() {
					var layoutModel = _this.getLayoutModel();
					return layoutModel.get('tabIconColor');
				},
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this._changeTabColor('tabIconColor', value, transactionToken);
				},
				editor: {
					sectionId: 'page.tabIconArea',
					uiControl: {
						type: 'ColorPicker',
						label: StringResources.get('propTabIconColor'),
						ariaLabel: StringResources.get('propTabIconColor'),
						paletteType: 'DashboardColorSet',
						open: false,
						showHexValue: true,
						addButton: true,
						onChange: function onChange(propertyName) {
							var propertyValueInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

							_this.content.setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabSelectedLineColor',
				getPropertyValue: function getPropertyValue() {
					var layoutModel = _this.getLayoutModel();
					return layoutModel.get('tabSelectedLineColor');
				},
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this._changeTabColor('tabSelectedLineColor', value, transactionToken);
				},
				editor: {
					sectionId: 'page.titleBackground',
					uiControl: {
						type: 'ColorPicker',
						label: StringResources.get('propTabSelectedBarColor'),
						ariaLabel: StringResources.get('propTabSelectedBarColor'),
						paletteType: 'DashboardColorSet',
						open: false,
						showHexValue: true,
						addButton: true,
						onChange: function onChange(propertyName) {
							var propertyValueInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

							_this.content.setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabBackgroundColor',
				getPropertyValue: function getPropertyValue() {
					var layoutModel = _this.getLayoutModel();
					return layoutModel.get('tabBackgroundColor');
				},
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this._changeTabColor('tabBackgroundColor', value, transactionToken);
				},
				editor: {
					sectionId: 'page.titleBackground',
					uiControl: {
						type: 'ColorPicker',
						label: StringResources.get('propTabBackgroundColor'),
						ariaLabel: StringResources.get('propTabBackgroundColor'),
						paletteType: 'DashboardColorSet',
						open: false,
						showHexValue: true,
						addButton: true,
						onChange: function onChange(propertyName) {
							var propertyValueInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

							_this.content.setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabRestoreDefaults',
				editor: {
					sectionId: 'page.titleBackground',
					uiControl: {
						type: 'SingleLineLinks',
						items: [{
							align: 'left',
							items: [{
								type: 'icon',
								class: 'iconTextLink',
								svgIcon: this._icons.getIcon('restore').id,
								iconTooltip: StringResources.get('propTabRestoreDefaults'),
								clickCallback: restoreMasterStyling
							}]
						}, {
							align: 'right',
							items: [{
								type: 'text',
								class: 'iconTextLink',
								value: StringResources.get('propTabRestoreDefaults'),
								ariaLabel: StringResources.get('propTabRestoreDefaults'),
								clickCallback: restoreMasterStyling
							}]
						}]
					}
				}
			}];
		};

		PageProperties.prototype.getPropertyLayoutList = function getPropertyLayoutList() {
			if (this._isTopLevelPage()) {
				return [];
			}
			return [{
				value: StringResources.get('individualTabProperties'),
				centerLabel: true,
				id: 'banner',
				type: 'Banner',
				backButton: true,
				ariaLabel: StringResources.get('individualTabProperties')
			}, {
				id: 'page',
				type: 'Group'
			}, {
				id: 'titleSection',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('sectionName_tabTitle')
			}, {
				id: 'titleBackground',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('sectionName_tabBackground')
			}, {
				id: 'tabIconArea',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('propTabIconLabel')
			}];
		};

		PageProperties.prototype.getLayoutModel = function getLayoutModel() {
			var boardModel = this.dashboard.getFeature('internal').getBoardModel();
			return boardModel.layout.findModel(this.content.getId());
		};

		PageProperties.prototype._changeTabColor = function _changeTabColor(propertyName, propertyValue) {
			// get layout and update CSS

			var payload = {};
			// Treat transparent as reset to default
			if (propertyValue) {
				payload[propertyName] = propertyValue == 'transparent' ? null : this.dashboard.getFeature('Colors').getColorClassName(propertyValue);
			} else {
				payload[propertyName] = null;
			}
			this.dashboard.getFeature('Colors').prepareForColorModelChange(payload, propertyName);

			var model = this.getLayoutModel();
			model.set(payload, {
				sender: this.senderId,
				payloadData: { skipUndoRedo: true }
			});
		};

		return PageProperties;
	}();

	return PageProperties;
});
//# sourceMappingURL=PagePropertiesProvider.js.map