analytics/webcontent/bi/js/gemini/features/content/topLevelProperties/TopLevelPropertiesProvider.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', '../../../dashboard/layout/LayoutHelper', '../../../lib/@waca/dashboard-common/dist/core/APIFactory', '../../../lib/@waca/baglass/js/baglass/utils/Utils', '../../../lib/@waca/core-client/js/core-client/ui/dialogs/ConfirmationDialog', '../../../lib/@waca/dashboard-common/dist/api/PropertiesProviderAPI', 'underscore', '../../../dashboard/widgets/PropertyListUtil'], function (StringResources, LayoutHelper, APIFactory, Utils, ConfirmationDialog, PropertiesProviderAPI, _, PropertyListUtil) {
	var MINIMUM_PAGESIZE = { width: 320, height: 200 };

	var PAGESIZES = {
		'16:9': {
			'width': 1280,
			'height': 720
		},
		'4:3': {
			'width': 1280,
			'height': 960
		},
		'letter': {
			'width': 612,
			'height': 792
		},
		'legal': {
			'width': 612,
			'height': 1008
		},
		'a4': {
			'width': 595,
			'height': 842
		},
		'tabloid': {
			'width': 792,
			'height': 1224
		},
		'infographic': {
			'width': 512,
			'height': 1024
		}
	};
	var PRESET_PAGE_SIZES = [{
		label: StringResources.get('propPageSizePresetCustom'),
		value: 'custom'
	}, {
		label: StringResources.get('propPageSizePreset16x9'),
		value: '16:9'
	}, {
		label: StringResources.get('propPageSizePreset4x3'),
		value: '4:3'
	}, {
		label: StringResources.get('letter'),
		value: 'letter'
	}, {
		label: StringResources.get('legal'),
		value: 'legal'
	}, {
		label: StringResources.get('a4'),
		value: 'a4'
	}, {
		label: StringResources.get('tabloid'),
		value: 'tabloid'
	}, {
		label: StringResources.get('propPageSizePresetInfographic'),
		value: 'infographic'
	}];

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

			this.dashboard = options.dashboardApi || options.dashboardAPI;
			this.content = options.content;
			this.content.getFeature('Properties').registerProvider(this.getAPI());
		}

		TopLevelProperties.prototype.getCanvas = function getCanvas() {
			if (!this.canvas) {
				this.canvas = this.dashboard.getCanvas();
			}
			return this.canvas;
		};

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

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

		TopLevelProperties.prototype._getCommonType = function _getCommonType(contentType) {
			return contentType && contentType.split('.')[0];
		};

		TopLevelProperties.prototype._getSubType = function _getSubType(contentType) {
			if (contentType && contentType.indexOf('.') !== -1) {
				return contentType.split('.')[1];
			} else {
				return null;
			}
		};

		TopLevelProperties.prototype.getPropertyList = function getPropertyList() {
			var _this2 = this;

			var propertyList = [];

			if (this._isTopLevelPage()) {
				propertyList.push.apply(propertyList, this._getTopLevelLayoutPropertiesList());
				// All layouts have the background color property
				propertyList.push(this._getBackgroundColorProperty());
			}

			// 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 _this2._setPropertyValueInModel(property.id, value);
					};
				}

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

			return propertyList;
		};

		TopLevelProperties.prototype.getPropertyLayoutList = function getPropertyLayoutList() {
			var propertiesLayoutSpec = [];

			if (this._isTopLevelPage()) {
				propertiesLayoutSpec = this._getTopLevelPropertiesLayoutSpec();
			}

			return propertiesLayoutSpec;
		};

		TopLevelProperties.prototype._getTopLevelPropertiesLayoutSpec = function _getTopLevelPropertiesLayoutSpec() {
			var topLevelPropertiesLayoutSpec = [{
				id: 'general',
				type: 'Group',
				label: StringResources.get('tabName_general')
			}, {
				id: 'canvas',
				type: 'Section',
				label: StringResources.get('sectionName_canvas'),
				position: 1
			}, {
				id: 'pageSize',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('propPageSizeLabel'),
				position: 2
			}, {
				id: 'colorsAndTheme',
				type: 'Section',
				label: StringResources.get('sectionName_colorsAndThemes'),
				position: 3
			}, {
				id: 'grid',
				type: 'Section',
				collapsible: false,
				label: StringResources.get('gridLabel'),
				position: 2
			}, {
				id: 'pageSizeSplit',
				type: 'Split',
				items: [{
					id: 'left',
					align: 'left',
					items: []
				}, {
					id: 'right',
					align: 'right',
					items: []
				}]
			}];

			return topLevelPropertiesLayoutSpec;
		};

		TopLevelProperties.prototype._getTopLevelLayoutPropertiesList = function _getTopLevelLayoutPropertiesList() {
			var _this3 = this;

			var _this = this;
			var model = this.getLayoutModel();

			return [{
				id: 'layoutPositioning',
				getPropertyValue: function getPropertyValue() {
					return model.getValueFromSelfOrParent('layoutPositioning');
				},
				setPropertyValue: this._setLayoutPositioning.bind(this),
				validatePropertyValue: function validatePropertyValue(value) {
					return {
						isValid: ['relative', 'absolute'].indexOf(value) !== -1,
						message: 'layoutPositioning must be either relative or absolute.'
					};
				},
				editor: {
					sectionId: 'general.canvas',
					position: 1,
					uiControl: {
						type: 'DropDown',
						label: StringResources.get('propLayoutPositioning'),
						getOptions: this._getLayoutPositioningSpecOptions.bind(this),
						coachMark: {
							render: function render(options) {
								Utils.addCoachmark({
									id: 'com.ibm.bi.dashboard.dashboardCoreProperties.layoutPositioning',
									title: StringResources.get('propLayoutPositioningCoachmarkTitle'),
									contents: StringResources.get('propLayoutPositioningCoachmarkContent'),
									placement: 'bottom',
									glassContext: options.glassContext,
									$el: options.$el
								});
							}
						},
						onChange: function onChange(propertyName, propertyValue) {
							_this._onChangeLayoutPosition(this, propertyValue);
						}
					}
				}
			}, {
				id: 'pageSizePreset',
				getPropertyValue: this._getPageSizePreset.bind(this),
				setPropertyValue: this._setPageSizePreset.bind(this),
				editor: {
					sectionId: 'general.canvas.pageSize',
					position: 1,
					uiControl: {
						type: 'DropDown',
						label: StringResources.get('propPageSizePreset'),
						ariaLabel: StringResources.get('propPageSizePresetAriaLabel'),
						options: PRESET_PAGE_SIZES,
						onChange: this._onChangePresetPageSize.bind(this)
					}
				}
			}, {
				id: 'fitPage',
				getPropertyValue: function getPropertyValue() {
					var fitPage = false;
					if (model.getValueFromSelfOrParent('layoutPositioning') !== 'absolute') {
						fitPage = model.getValueFromSelfOrParent('fitPage') || false;
					}
					return fitPage;
				},
				setPropertyValue: function setPropertyValue(value) {
					model.set({ 'fitPage': value });
				},
				editor: {
					sectionId: 'general.canvas.pageSize',
					position: 2,
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('fitPageText')
					}
				}
			}, {
				id: 'pageSizeWidth',
				getPropertyValue: function getPropertyValue() {
					var pageSize = _this3._getPropertyValueFromModel('pageSize');
					return pageSize && pageSize.width;
				},
				setPropertyValue: function setPropertyValue(value) {
					_this3._setPageSizeDirection(value, 'pageSizeWidth', true);
				},
				editor: {
					sectionId: 'general.canvas.pageSize.pageSizeSplit.left',
					uiControl: {
						'type': 'InputLabel',
						'label': StringResources.get('propPageSizeWidth'),
						'ariaLabel': StringResources.get('propPageSizeWidthAriaLabel'),
						'multiline': true,
						'handleReturnKey': true,
						'onChange': function onChange(propertyName, propertyValue) {
							_this._onChangePageSize(propertyName, propertyValue, this);
						}
					}
				}
			}, {
				id: 'pageSizeHeight',
				getPropertyValue: function getPropertyValue() {
					var pageSize = _this3._getPropertyValueFromModel('pageSize');
					return pageSize && pageSize.height;
				},
				setPropertyValue: function setPropertyValue(value) {
					_this3._setPageSizeDirection(value, 'pageSizeHeight', true);
				},
				editor: {
					sectionId: 'general.canvas.pageSize.pageSizeSplit.right',
					uiControl: {
						'type': 'InputLabel',
						'label': StringResources.get('propPageSizeHeight'),
						'ariaLabel': StringResources.get('propPageSizeHeightAriaLabel'),
						'multiline': true,
						'handleReturnKey': true,
						'onChange': function onChange(propertyName, propertyValue) {
							_this._onChangePageSize(propertyName, propertyValue, this);
						}

					}
				}
			}, {
				id: 'showGrid',
				editor: {
					sectionId: 'general.canvas.grid',
					position: 1,
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('gridText')
					}
				}
			}, {
				id: 'snapGrid',
				editor: {
					sectionId: 'general.canvas.grid',
					position: 2,
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('snapText')
					}
				}
			}, {
				id: 'snapObjects',
				editor: {
					sectionId: 'general.canvas.grid',
					position: 3,
					uiControl: {
						type: 'ToggleButton',
						label: StringResources.get('snapObjectsText')
					}
				}
			}];
		};

		TopLevelProperties.prototype._getBackgroundColorProperty = function _getBackgroundColorProperty() {
			var _this4 = this;

			return {
				id: 'fillColor',
				getPropertyValue: function getPropertyValue() {
					return _this4._getPropertyValueFromModel('fillColor') || 'transparent';
				},
				setPropertyValue: this._setFillColor.bind(this),
				editor: {
					sectionId: 'general.colorsAndTheme',
					position: 2,
					uiControl: {
						type: 'ColorPicker',
						label: StringResources.get('propDashboardBackgroundColor'),
						ariaLabel: StringResources.get('propDashboardBackgroundColor'),
						paletteType: 'DashboardColorSet',
						open: false,
						showHexValue: true,
						addButton: true
					}
				}
			};
		};

		TopLevelProperties.prototype._setFillColor = function _setFillColor(propertyValue) {
			var colorsFeature = this.dashboard.getFeature('Colors');
			var data = {
				undoRedoTransactionId: _.uniqueId('layout_fillColorChange_')
			};

			var payload = {
				fillColor: this.dashboard.getFeature('Colors').getColorClassName(propertyValue)
			};

			var model = this.getLayoutModel();

			colorsFeature.prepareForColorModelChange(payload, 'fillColor');

			model.set(payload, {
				sender: model.id,
				payloadData: data
			});
		};

		TopLevelProperties.prototype._getPageSizePreset = function _getPageSizePreset() {
			var model = this.getLayoutModel();

			var _model$get = model.get('pageSize'),
			    width = _model$get.width,
			    height = _model$get.height;

			var preset = 'custom';
			var checkWidth = parseInt(width, 10),
			    checkHeight = parseInt(height, 10);

			for (var value in PAGESIZES) {
				if (PAGESIZES.hasOwnProperty(value)) {
					var currentPreset = PAGESIZES[value];
					if (currentPreset.width === checkWidth && currentPreset.height === checkHeight) {
						preset = value;
						break;
					}
				}
			}

			return preset;
		};

		TopLevelProperties.prototype._setPageSizePreset = function _setPageSizePreset(propertyValue) {
			var presetValues = PAGESIZES[propertyValue];
			if (presetValues) {
				if (this.getCanvas().getPropertyValue('layoutPositioning') !== 'absolute') {
					this.getCanvas().setPropertyValue('fitPage', propertyValue === '16:9' || propertyValue === '4:3' ? true : false);
				}
				var currentPageSizeWidth = this.getCanvas().getPropertyValue('pageSizeWidth');
				var currentPageSizeHeight = this.getCanvas().getPropertyValue('pageSizeHeight');
				if (!currentPageSizeWidth || currentPageSizeWidth !== presetValues.width || !currentPageSizeHeight || currentPageSizeHeight !== presetValues.height) {
					this._setPageSize({
						width: presetValues.width,
						height: presetValues.height
					}, true);
				}
			}
		};

		TopLevelProperties.prototype._onChangePresetPageSize = function _onChangePresetPageSize(propertyName, propertyValue) {
			var presetValues = PAGESIZES[propertyValue];
			if (presetValues) {
				var model = this.getLayoutModel();
				if (model.get('layoutPositioning') !== 'absolute') {
					// @todo: can we explicity set the property without triggering an event?
					this.dashboard.triggerDashboardEvent('properties:setValue', {
						propertyName: 'fitPage',
						value: propertyValue === '16:9' || propertyValue === '4:3' ? true : false
					});
				}

				this.getCanvas().setPropertyValue(propertyName, propertyValue);
			}
		};

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

		TopLevelProperties.prototype._setPropertyValueInModel = function _setPropertyValueInModel(propName, propValue, options) {
			var payload = {};
			var model = this.getLayoutModel();
			payload[propName] = propValue;
			model.set(payload, options);
		};

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

		TopLevelProperties.prototype._onChangeLayoutPosition = function _onChangeLayoutPosition(propertyControl, propertyValue) {
			var _this5 = this;

			var transaction = this.dashboard.getFeature('Transaction');
			var transactionToken = transaction.startTransaction();
			if (!transactionToken.undoRedoTransactionId) {
				transactionToken.undoRedoTransactionId = transactionToken.transactionId;
			}
			var oldLayoutPositioning = this.getCanvas().getPropertyValue('layoutPositioning');
			if (oldLayoutPositioning) {
				if (propertyValue === 'absolute') {
					this.dashboard.triggerDashboardEvent('properties:updateEnabled', { propertyName: 'fitPage', enabled: false });
					this.dashboard.triggerDashboardEvent('properties:setValue', { propertyName: 'fitPage', value: false });
				} else {
					this.dashboard.triggerDashboardEvent('properties:updateEnabled', { propertyName: 'fitPage', enabled: true });
					var preset = this._getPageSizePreset();
					if (preset === '16:9' || preset === '4:3') {
						this.dashboard.triggerDashboardEvent('properties:setValue', { propertyName: 'fitPage', value: true });
					} else {
						this.dashboard.triggerDashboardEvent('properties:setValue', { propertyName: 'fitPage', value: false });
					}
				}
				this.getCanvas().setPropertyValue('layoutPositioning', propertyValue, transactionToken);
				transaction.endTransaction(transactionToken);
			} else {
				// Confirm layout upgrade with user
				var onOK = function onOK() {
					_this5.getCanvas().setPropertyValue('layoutPositioning', propertyValue, transactionToken);
					transaction.endTransaction(transactionToken);
					// Update property control - which should remove "undefined" as an option
					// Ideally we should only be updating the one control of interest.
					// But, this doesn't currently work right for items in a section block.
					// let event = {
					// 	'propertySpec': this._getLayoutPositioningSpec(),
					// 	'removeProperty': false
					// };
					// this.dashboard.triggerDashboardEvent('properties:refreshProperty', event);
					_this5.dashboard.triggerDashboardEvent('properties:refreshPane');
				};
				var onCancel = function onCancel() {
					// Reset back to undefined state
					propertyControl._lastChangedValue = 'undefined'; // Bug in glass, setValue doesn't reset _lastChangedValue.
					propertyControl.setValue('undefined');
				};
				var oConfirmationDialog = new ConfirmationDialog('warning', StringResources.get('confirmLayoutStyleUpgradeTitle'), StringResources.get('confirmLayoutStyleUpgrade'));
				oConfirmationDialog.confirm(onOK, onCancel);
			}
		};

		TopLevelProperties.prototype._setLayoutPositioning = function _setLayoutPositioning(propertyValue, transactionToken) {
			var transaction = this.dashboard.getFeature('Transaction');
			var data = transaction.startTransaction(transactionToken);
			if (!data.undoRedoTransactionId) {
				data.undoRedoTransactionId = data.transactionId;
			}
			var model = this.getLayoutModel();
			model.set({ layoutPositioning: propertyValue }, {
				payloadData: data,
				sender: this.senderId
			});
			if (propertyValue === 'absolute') {
				model.set({ 'fitPage': false }, {
					payloadData: data,
					sender: this.senderId
				});
			} else {
				var preset = this._getPageSizePreset();
				if (preset === '16:9' || preset === '4:3') {
					model.set({ 'fitPage': true }, {
						payloadData: data,
						sender: this.senderId
					});
				} else {
					model.set({ 'fitPage': false }, {
						payloadData: data,
						sender: this.senderId
					});
				}
			}

			transaction.endTransaction(data);
			this.dashboard.triggerDashboardEvent('layout:resize');
		};

		TopLevelProperties.prototype._getLayoutPositioningSpecOptions = function _getLayoutPositioningSpecOptions() {
			var currentValue = this.getCanvas().getPropertyValue('layoutPositioning');
			var layoutPositioningOptions = [];
			if (!currentValue) {
				layoutPositioningOptions.push({
					label: '',
					value: 'undefined'
				});
			}
			layoutPositioningOptions.push({
				label: StringResources.get('propLayoutRelative'),
				value: 'relative'
			}, {
				label: StringResources.get('propLayoutAbsolute'),
				value: 'absolute'
			});
			return layoutPositioningOptions;
		};

		TopLevelProperties.prototype._onChangePageSize = function _onChangePageSize(propertyName, propertyValue, propertyControl) {
			if (propertyControl.propertiesManagerChange) {
				propertyControl.onChangeValueHold = propertyValue;
			} else {
				this.getCanvas().setPropertyValue(propertyName, propertyValue);

				// It's possible the value got tweaked because of the bounding rect size.
				var currentValue = parseInt(this.getCanvas().getPropertyValue(propertyName), 10);
				var propertyNameList = ['pageSizeSplit', propertyName];
				if (isNaN(currentValue)) {
					this.dashboard.triggerDashboardEvent('properties:setValue', { propertyName: propertyNameList, value: propertyControl.onChangeValueHold });
				} else if (propertyValue !== propertyControl.onChangeValueHold) {
					propertyControl.onChangeValueHold = PropertyListUtil.getPropertyDisplayString(currentValue, StringResources.get('pixelUnit'), true);
					this.dashboard.triggerDashboardEvent('properties:setValue', { propertyName: propertyNameList, value: propertyControl.onChangeValueHold });
				}
			}
		};

		TopLevelProperties.prototype._showPageSizeChangeToast = function _showPageSizeChangeToast() {
			this.dashboard.showToast(StringResources.get('propPageSizeAdjustedMessage'), {
				type: 'info'
			});
		};

		TopLevelProperties.prototype._setPageSizeDirection = function _setPageSizeDirection(propValue, propName) {
			var showToast = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

			var numericValue = parseInt(propValue, 10);
			if (!isNaN(numericValue)) {
				var model = this.getLayoutModel();
				var direction = propName === 'pageSizeWidth' ? 'width' : 'height';
				var otherDirection = propName === 'pageSizeWidth' ? 'height' : 'width';
				var currentPageSize = model.get('pageSize') || {};

				if (currentPageSize[direction] === numericValue) {
					return;
				}
				var newPageSize = {};
				newPageSize[direction] = numericValue;
				newPageSize[otherDirection] = currentPageSize[otherDirection];

				this._setPageSize(newPageSize, showToast);

				// Not modelled as a seperate property, but our API exposes it.  Throw an event in case anybody is listening to it
				var eventName = direction === 'width' ? 'change:pageSizeWidth' : 'change:pageSizeHeight';
				model.trigger(eventName, {
					value: newPageSize[direction],
					model: model,
					eventName: eventName
				});
			}
		};

		TopLevelProperties.prototype._setPageSize = function _setPageSize(newSize) {
			var showToast = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

			var model = this.getLayoutModel();
			var sizeChanged = false;
			var minimumSize = LayoutHelper.getBoundingPageSize(model, MINIMUM_PAGESIZE);
			if (minimumSize) {
				if (isNaN(newSize.width) || minimumSize.width > newSize.width) {
					newSize.width = minimumSize.width;
					sizeChanged = true;
				}
				if (isNaN(newSize.height) || minimumSize.height > newSize.height) {
					newSize.height = minimumSize.height;
					sizeChanged = true;
				}

				if (sizeChanged && showToast) {
					this._showPageSizeChangeToast();
				}
			}

			model.set({
				'pageSize': newSize
			});

			this.dashboard.triggerDashboardEvent('layout:resize');

			return newSize;
		};

		return TopLevelProperties;
	}();

	return TopLevelProperties;
});
//# sourceMappingURL=TopLevelPropertiesProvider.js.map