analytics/webcontent/bi/js/gemini/dashboard/data/ThemeDefinition.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2013, 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *
 * @module dashboard/data/ThemeDefinition
 * @see ThemeDefinition
 */
define(['../../lib/@waca/core-client/js/core-client/ui/core/Class', '../../app/nls/StringResources', 'underscore'], function (Class, StringResources, _) {

	/*
  * The purpose of this object is to hold the theme definition for a widget and provide
  * easy access to elements of this definition. Please see public/themes/defaultTheme.json
  * for more information of the current definition structure.
  */
	var ThemeDefinition = null;
	var FOREGROUND_PALETTES = ['UserPaletteColor', 'ForegroundUserPaletteColor', 'SecondaryForegroundUserPaletteColor', 'TabTextColor', 'TabSelectedLineColor'];

	ThemeDefinition = Class.extend({
		init: function init(themeDefinition) {
			/*
    * Theme properties may be mapped into groups so that they inherit a group
    * value. For example, the Y Axis Line Color and X Axis Line color will in most
    * instances be the same, so we can map their properties (valAxisLineColor and
    * catAxisLineColor) to a group property ID such as axisLineColor. Therefore, if
    * a default fo valAxisLineColor, for example, isn't given it will be mapped to
    * axisLineColor. The following holds these mappings.
    */
			this.themeMapping = {};

			/*
    * The theme definitions may have any number of types of variables. For example,
    * there could be a group of variables represented fill colors in the 'Color'
    * group. There may also be a number of fonts in the 'Font' group, and so on. The
    * following will hold a map of each of these groups. For example, it will map 'Color'
    * to its corresponding mapping for each color in its group.
    */
			this.variableMapping = {};

			// The actual JSON representing the theme
			this.jsonDefinition = themeDefinition;

			this._palettes = {};

			// Some of our palettes use r,g,b,a.  When creating styles dynamically
			// we need the css form rgba(r,g,b,a).  Once created cache them
			this._cssColors = {};

			// We have the description, now update the mappings.
			this._mapVariables();

			this._fillColor = null;
		},

		getId: function getId() {
			return this.jsonDefinition.id;
		},


		/*
   *  Map the different group of variables ('Colors' and 'Fonts' for example)
   *  to their corresponding map of variables.
   */
		_mapVariables: function _mapVariables() {
			if (this.jsonDefinition && this.jsonDefinition.variables) {
				var variables = this.jsonDefinition.variables;

				for (var variableType in variables) {
					if (variables.hasOwnProperty(variableType)) {
						this.variableMapping[variableType] = this._getMapOfVariables(variables[variableType]);
					}
				}
			}
		},
		/*
   * Map each variable (such as 'color1' or 'color2' of a larger section (such as 'Color').
   */
		_getMapOfVariables: function _getMapOfVariables(variables) {
			var mapping = {};
			_.each(variables, function (variable) {
				mapping[variable.id] = variable;
			}.bind(this));
			return mapping;
		},

		/**
   * Given the variable type (such as 'Color' or 'Font') and the variable ID
   * (such as 'color1' or 'font1') return the value for the corresponding mapping
   * @param variableType - Variable type (such as 'Color' or 'Font')
   * @param variableId - id of a variable found within the specified variableType (such as 'color1')
   * @returns value if the specified variable exists.
   */
		getValueForVariable: function getValueForVariable(variableType, variableId) {
			if (this.variableMapping[variableType]) {
				if (variableId) {
					if (this.variableMapping[variableType][variableId]) {
						return this.variableMapping[variableType][variableId].value;
					}
				} else {
					return this.variableMapping[variableType];
				}
			}
			return undefined;
		},
		/*
   * return the value for the specified property. A value maybe defined with a leading '$' which
   * means it should be replaced using its mapping.
   */
		_getValueForProperty: function _getValueForProperty(prop) {
			if (prop && prop.value !== undefined && prop.value !== null) {
				// Some properties may have a number as a value and not point to a variable
				if (isNaN(prop.value) && prop.value.substr(0, 1) === '$') {
					return this.getValueForVariable(prop.type, prop.value.substr(1));
				}
				return prop.value;
			}
			return undefined;
		},

		/*
   * The following returns the default palette name
   * @param paletteType {string} - the type of palette, currently only options are 'ColorPalette', 'HeatPalette' and 'ConditionalPalette'
   * @returns default color palette name ('colroPalette0' for instance)
   */
		getDefaultPaletteName: function getDefaultPaletteName(paletteType) {
			var keys = _.keys(this.variableMapping[paletteType]);
			if (keys && keys.length > 0) {
				return keys[0];
			}
			return undefined;
		},

		getColorValue: function getColorValue(color) {
			if (color.pattern) {
				return color.pattern;
			} else if (color.fill) {
				return color.fill;
			} else if (color.backgroundColor) {
				return color.backgroundColor;
			}
			return color;
		},

		getCSSColors: function getCSSColors(variableName) {
			var _this = this;

			if (!this._cssColors[variableName]) {
				var foregroundColors = this.getVariable(variableName);
				if (!foregroundColors) {
					return {};
				}
				this._cssColors[variableName] = {};
				foregroundColors.forEach(function (color) {
					_this._cssColors[variableName][color.id] = _this._convertToCssColor(color.value);
				});
			}

			return this._cssColors[variableName];
		},

		_convertToCssColor: function _convertToCssColor(color) {
			var cssColor = null;

			if (this._isColorValue(color)) {
				var value = color.r + ',' + color.g + ',' + color.b;

				cssColor = color.a !== undefined ? 'rgba(' + value + ',' + color.a + ')' : 'rgb(' + value + ')';
			}
			return cssColor ? cssColor : color;
		},

		_isColorValue: function _isColorValue(color) {
			return color && color.r !== undefined && color.g !== undefined && color.b !== undefined;
		},

		getVariable: function getVariable(variableName) {
			if (this.jsonDefinition && this.jsonDefinition.variables) {
				return this.jsonDefinition.variables[variableName];
			}

			return null;
		},

		/**
   * Get a specific palette
   * @param {string} paletteId - the ID of the palette
   * @param {string} paletteVariableName - the theme variable name for the list of palettes ('ColorPalette', 'HeatPalette', 'ContinuousPalette')
   * @param {boolen} forProperties - boolean if the response is to be used for the properties.
   * @return {array} all palettes defined in the theme
   */
		getPalette: function getPalette(paletteId, paletteVariableName, forProperties) {
			if (paletteId === 'userPaletteColor') {
				var userPaletteColor = this._getUserPaletteColor();
				return this._createCMPaletteResponse(userPaletteColor, forProperties);
			}
			var palettes = this.getVariable(paletteVariableName === 'UserPaletteColor' ? 'ColorPalette' : paletteVariableName);
			if (!palettes) {
				return {};
			}

			for (var i = 0; i < palettes.length; i++) {
				var palette = palettes[i];
				if (palette.id === paletteId) {
					return this._createCMPaletteResponse(palette, forProperties, i);
				}
			}
		},

		_getUserPaletteColor: function _getUserPaletteColor() {
			var userPaletteColor = this.getVariable('UserPaletteColor');
			var result = {
				id: 'userPaletteColor',
				fillType: 'simple',
				label: StringResources.get('userPaletteColor_' + this.jsonDefinition.id),
				labelTranslated: true,
				ids: [],
				labels: [],
				fills: []
			};
			userPaletteColor.forEach(function (_ref) {
				var value = _ref.value,
				    id = _ref.id,
				    label = _ref.label;

				result.fills.push(value);
				if (id) {
					result.ids.push(id);
				}
				if (label) {
					result.labels.push(label);
				}
			});

			return result;
		},

		/**
   * Get all the palettes defined in the theme
   * @param {string} paletteVariableName - the theme variable name for the list of palettes ('ColorPalette', 'HeatPalette', 'ContinuousPalette')
   * @param {boolen} forProperties - boolean if the response is to be used for the properties
   * @param {boolean} includePatternPalettes - Should pattern palettes be included in the list of returned palettes.
   * @return {array} all palettes defined in the theme
   */
		getPalettes: function getPalettes(paletteVariableName, forProperties) {
			var _this2 = this;

			var includePatternPalettes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

			var colorPalettes = this.getVariable(paletteVariableName);
			if (!colorPalettes) {
				return [];
			}

			var palettes = colorPalettes.filter(function (palette) {
				return includePatternPalettes || _.find(palette.fills, function (paletteProp) {
					return !paletteProp.pattern;
				});
			}).map(function (palette, index) {
				return _this2._createCMPaletteResponse(palette, forProperties, index);
			});

			return palettes;
		},

		/**
   * Make our system palettes have the same structure as the CM response
   * @param {Object} palette
   */
		_createCMPaletteResponse: function _createCMPaletteResponse(palette, forProperties, index) {
			if (!palette) {
				return {};
			}
			var isPatternColor = _.find(palette.fills, function (paletteProp) {
				return paletteProp.pattern;
			});

			var label = palette.labelTranslated ? palette.label : StringResources.get(palette.label, { number: index + 1 });

			var content = _.extend(palette, {
				label: label,
				labelTranslated: true,
				fillType: isPatternColor ? 'ImgPath' : palette.fillType
			});
			if (isPatternColor) {
				content.path = 'dashboard-core/images/patterns/';
				content.fileType = '.svg';
			}

			return forProperties ? {
				system: true,
				id: palette.id,
				content: content
			} : content;
		},

		/**
   * Get the property value for the UIElement and Property ID specified
   * @param uiElement - UIElement as described in the theme
   * @param propertyId - property within the specified UIElement
   * @returns value for the property if it exists, undefined otherwise
   */
		getValueForPropertyOfUIElement: function getValueForPropertyOfUIElement(uiElement, propertyId) {
			var prop = this.getPropertyForUIElement(uiElement, propertyId);
			return this._getValueForProperty(prop);
		},
		/**
   * Get the property for the UIElement and Property ID specified
   * @param uiElement - UIElement as described in the theme
   * @param propertyId - property within the specified UIElement
   * @returns property if it exists, undefined otherwise
   */
		getPropertyForUIElement: function getPropertyForUIElement(uiElement, propertyId) {
			if (this.jsonDefinition && this.jsonDefinition.uiElements[uiElement]) {
				var uiElementArray = this.jsonDefinition.uiElements[uiElement];
				return _.find(uiElementArray, function (ele) {
					var mappedId = this.themeMapping[propertyId] ? this.themeMapping[propertyId] : propertyId;
					return ele.id === mappedId;
				}.bind(this));
			}
			return undefined;
		},

		/**
   * When a theme mapping is updated (a new vis type definition is provided) we need to update
   * the theme mapping.
   * @param themeMapping - json description of which properties map to which super property
   * For example:
   *		{
   *			"id": "axisLineColor",
   *			"mapping": [
   *				"valAxisLineColor",
   *				"catAxisLineColor"
   *			]
   *		}
   */
		updateThemeMapping: function updateThemeMapping(themeMapping) {
			if (themeMapping) {
				_.each(themeMapping, function (themeMap) {
					var mapping = themeMap.mapping;
					var id = themeMap.id;
					_.each(mapping, function (idToMap) {
						this.themeMapping[idToMap] = id;
					}.bind(this));
				}.bind(this));
			}
		},

		getThemeMapping: function getThemeMapping() {
			return this.themeMapping;
		},

		setThemeMapping: function setThemeMapping(themeMapping) {
			this.themeMapping = themeMapping;
		},

		getMappedId: function getMappedId(id) {
			return this.themeMapping[id];
		},

		getForegroundPropertiesForUIElement: function getForegroundPropertiesForUIElement(uiElement) {
			var elements = this.jsonDefinition.uiElements[uiElement];
			if (!elements) {
				return [];
			}
			return elements.filter(function (element) {
				return FOREGROUND_PALETTES.indexOf(element.type) !== -1;
			});
		},


		/*
   * return array of id and foreground color pairs that are type is one of FOREGROUND_PALETTES in given elements
   */
		getForegroundColorPropertiesForUIElement: function getForegroundColorPropertiesForUIElement(bgColor, uiElement) {
			var _this3 = this;

			var result = [];
			var properties = this.getForegroundPropertiesForUIElement(uiElement);
			properties.forEach(function (ele) {
				var fgColor = _this3._getValueForProperty({
					type: ele.type,
					value: '$' + bgColor
				});
				fgColor = ele.alpha ? _this3._convertToRGBA(fgColor, ele.alpha) : fgColor;
				result.push({
					id: ele.id,
					value: fgColor
				});
			});

			return result;
		},

		/*
   * return an object with rgba properties for given color and alpha
   */
		_convertToRGBA: function _convertToRGBA(color, alpha) {
			if (color) {
				var r = 0,
				    g = 0,
				    b = 0;
				if (typeof color === 'string') {
					if (color.charAt(0) === '#' && color.length === 7) {
						r = parseInt(color.substring(1, 3), 16);
						g = parseInt(color.substring(3, 5), 16);
						b = parseInt(color.substring(5), 16);
						return {
							'a': alpha,
							'r': r,
							'g': g,
							'b': b
						};
					}
				} else {
					return _.extend({
						'a': alpha
					}, _.omit(color, 'a'));
				}
			}
			return color;
		}
	});

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