analytics/webcontent/bi/js/gemini/features/content/tabProperties/TabPropertiesProvider.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 Cognos Products: Dashboard
 * (C) Copyright IBM Corp. 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'], function (StringResources, APIFactory, PropertiesProviderAPI) {
	var TAB_POSITION = [{
		'value': 'top',
		'label': StringResources.get('propTop')
	}, {
		'value': 'left',
		'label': StringResources.get('propLeft')
	}, {
		'value': 'bottom',
		'label': StringResources.get('propBottom')
	}, {
		'value': 'right',
		'label': StringResources.get('propRight')
	}];

	var TAB_ICON_POSITION = [{
		'value': 'right',
		'label': StringResources.get('propRightTitle')
	}, {
		'value': 'left',
		'label': StringResources.get('propLeftTitle')
	}, {
		'value': 'top',
		'label': StringResources.get('propTopTitle')
	}, {
		'value': 'bottom',
		'label': StringResources.get('propBottomTitle')
	}];

	var TabProperties = function () {
		function TabProperties(_ref) {
			var dashboardApi = _ref.dashboardApi,
			    dashboardAPI = _ref.dashboardAPI,
			    features = _ref.features,
			    content = _ref.content,
			    options = _ref.options;

			_classCallCheck(this, TabProperties);

			this._dashboard = dashboardApi || dashboardAPI;
			this._content = content;
			this._icons = features['Dashboard.Icons'];
			this._allowHidingMultipleTabs = !options || options.allowHidingMultipleTabs !== false;
		}

		TabProperties.prototype.initialize = function initialize() {
			this._content.getFeature('Properties').registerProvider(this.getAPI());
		};

		TabProperties.prototype._getCanvas = function _getCanvas() {
			if (!this._canvas) {
				this._canvas = this._dashboard.getCanvas();
			}
			return this._canvas;
		};

		TabProperties.prototype.getLayoutModel = function getLayoutModel() {
			var boardModel = this._dashboard.getFeature('internal').getBoardModel();
			return boardModel.layout.findModel(this._content.getId());
		};

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

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

			var propertyList = this._getTabPropertiesList();

			// Default the setPropertyValue and getPropertyValue for any property that doesn't define those methods
			propertyList.forEach(function (property) {
				if (!property.setPropertyValue) {
					property.setPropertyValue = function (value) {
						return _this._setPropertyValueInModel(property.id, value);
					};
				}

				if (!property.getPropertyValue) {
					property.getPropertyValue = function () {
						return _this._getPropertyValueFromModel(property.id);
					};
				}
			});

			return propertyList;
		};

		TabProperties.prototype.getPropertyLayoutList = function getPropertyLayoutList() {
			var propertiesLayoutSpec = [{
				id: 'general',
				type: 'Group',
				label: StringResources.get('tabName_general')
			}, {
				id: 'tabs',
				type: 'Section',
				label: StringResources.get('sectionName_tabs'),
				position: 3
			}, {
				id: 'masterTabStyles',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('propMasterTabStylesLabel')
			}, {
				id: 'individualTabStyles',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('propIndividualTabStylesLabel')
			}];

			return propertiesLayoutSpec;
		};

		TabProperties.prototype._individualTabSlideOut = function _individualTabSlideOut(page) {
			var propertiesManager = this._dashboard.getFeature('propertiesManager');
			return propertiesManager.getPropertyLayoutList([page]).then(function (properties) {
				return propertiesManager.addChild({
					overlay: true,
					label: StringResources.get('individualTabProperties'),
					content: {
						module: 'dashboard/contentpane/PropertyUIControlView',
						items: properties,
						content: page,
						refreshChild: true
					},
					pageChildId: page.getId()
				});
			});
		};

		TabProperties.prototype._getIndividualTabStylesLinks = function _getIndividualTabStylesLinks() {
			var _this2 = this;

			var pages = this._getCanvas().findContent({ type: 'page' });
			return pages.map(function (page, index) {
				var clickCallback = function clickCallback() {
					_this2._individualTabSlideOut(page);
				};
				var tabIcon = page.getPropertyValue('tabIcon');
				return {
					id: 'tabIndividualStylingLink' + index,
					editor: {
						sectionId: 'general.tabs.individualTabStyles',
						uiControl: {
							type: 'SingleLineLinks',
							clickCallback: clickCallback,
							items: [{
								align: 'left',
								items: [{
									type: 'icon',
									svgIcon: tabIcon !== 'transparent' ? tabIcon : null,
									iconTooltip: StringResources.get('propIndividualTabStylesAriaLabel')
								}]
							}, {
								align: 'right',
								items: [{
									type: 'text',
									value: page.getPropertyValue('title'),
									showRightArrow: true
								}]
							}]
						}
					}
				};
			});
		};

		TabProperties.prototype._getTabPropertiesList = function _getTabPropertiesList() {
			var _this3 = this;

			var restoreMasterStyling = function restoreMasterStyling() {
				var transaction = _this3._dashboard.getFeature('Transaction');
				var transactionToken = transaction.startTransaction();
				_this3._getCanvas().setPropertyValue('tabTextColor', 'transparent', transactionToken);
				_this3._getCanvas().setPropertyValue('tabSelectedLineColor', 'transparent', transactionToken);
				_this3._getCanvas().setPropertyValue('tabBackgroundColor', 'transparent', transactionToken);
				transaction.endTransaction(transactionToken);
				_this3._dashboard.triggerDashboardEvent('properties:refreshPane', {
					focusSelector: '.clickCallback_left_0_tabRestoreDefaults'
				});
			};

			var model = this.getLayoutModel();
			var disableShowTabs = !this._allowHidingMultipleTabs && model.items.length > 1;
			return [{
				id: 'showTabsInPreview',
				supportsUndoRedo: true,
				getPropertyValue: function getPropertyValue() {
					return !model.get('hideTab');
				},
				setPropertyValue: function setPropertyValue(value) {
					var oldValue = !model.get('hideTab');
					if (!oldValue || oldValue !== value) {
						model.set({
							'hideTab': !value
						}, {
							payloadData: { skipUndoRedo: true }
						});
					}
				},
				editor: {
					sectionId: 'general.tabs',
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('propShowTabsInPreview'),
						readOnly: disableShowTabs,
						disabled: disableShowTabs
					}
				}
			}, {
				id: 'tabPosition',
				supportsUndoRedo: true,
				getPropertyValue: function getPropertyValue() {
					return model.get('tabPosition');
				},
				setPropertyValue: function setPropertyValue(value) {
					var oldValue = model.get('tabPosition');
					if (!oldValue || oldValue !== value) {
						model.set({
							'tabPosition': value
						}, {
							payloadData: { skipUndoRedo: true }
						});
					}
				},
				editor: {
					sectionId: 'general.tabs',
					uiControl: {
						type: 'DropDown',
						label: StringResources.get('propTabPosition'),
						options: TAB_POSITION
					}
				}
			}, {
				id: 'tabIconPosition',
				supportsUndoRedo: true,
				getPropertyValue: function getPropertyValue() {
					return model.get('tabIconPosition');
				},
				setPropertyValue: function setPropertyValue(value) {
					var oldValue = model.get('tabIconPosition');
					if (!oldValue || oldValue !== value) {
						model.set({
							'tabIconPosition': value
						}, {
							payloadData: { skipUndoRedo: true }
						});
					}
				},
				editor: {
					sectionId: 'general.tabs',
					uiControl: {
						type: 'DropDown',
						label: StringResources.get('propTabIconPosition'),
						options: TAB_ICON_POSITION
					}
				}
			}, {
				id: 'tabTextColor',
				supportsUndoRedo: true,
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this3._changeTabColor('tabTextColor', value, transactionToken);
				},
				editor: {
					sectionId: 'general.tabs.masterTabStyles',
					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] : {};

							_this3._getCanvas().setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabSelectedLineColor',
				supportsUndoRedo: true,
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this3._changeTabColor('tabSelectedLineColor', value, transactionToken);
				},
				editor: {
					sectionId: 'general.tabs.masterTabStyles',
					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] : {};

							_this3._getCanvas().setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabBackgroundColor',
				supportsUndoRedo: true,
				setPropertyValue: function setPropertyValue(value, transactionToken) {
					_this3._changeTabColor('tabBackgroundColor', value, transactionToken);
				},
				editor: {
					sectionId: 'general.tabs.masterTabStyles',
					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] : {};

							_this3._getCanvas().setPropertyValue(propertyName, propertyValueInfo.name);
						}
					}
				}
			}, {
				id: 'tabRestoreDefaults',
				editor: {
					sectionId: 'general.tabs.masterTabStyles',
					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
							}]
						}]
					}
				}
			}, {
				id: 'allowHidingMultipleTabs',
				getPropertyValue: function getPropertyValue() {
					return _this3._allowHidingMultipleTabs;
				},
				setPropertyValue: function setPropertyValue() {
					throw new Error('not supported');
				}
			}].concat(this._getIndividualTabStylesLinks());
		};

		TabProperties.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 }
			});
		};

		TabProperties.prototype._getPropertyValueFromModel = function _getPropertyValueFromModel(propName) {
			var model = this.getLayoutModel();
			// In case of livewidget previews, we have a content but it is not attached to the layout, which causes the model to be null.
			return model && model.get(propName);
		};

		TabProperties.prototype._setPropertyValueInModel = function _setPropertyValueInModel(propName, propValue) {
			var payload = {};
			var model = this.getLayoutModel();
			payload[propName] = propValue;
			model.set(payload, {
				payloadData: { skipUndoRedo: true }
			});
		};

		return TabProperties;
	}();

	return TabProperties;
});
//# sourceMappingURL=TabPropertiesProvider.js.map