analytics/webcontent/bi/js/gemini/dashboard/widgets/staticwidget/ShapeWidget.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2014, 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['./StaticWidget', '../../../lib/@waca/dashboard-common/dist/utils/HtmlXSSUtils', 'jquery', 'underscore', '../../../app/nls/StringResources'], function (StaticWidget, HtmlCleanser, $, _, resources) {

	var defaultViewBox = '0 0 100 100';
	var SVGWRAPPER_START = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  class="staticContent" height="100%" width="100%" preserveAspectRatio="none"  viewBox="$viewBox$">';
	var SVGWRAPPER_START_LINE = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  class="staticContent shapesLine" height="100%" width="100%" preserveAspectRatio="none"  viewBox="$viewBox$">';
	var SVGWRAPPER_END = '</svg>';
	var DEFAULT_ATTRIBUTES = ' vector-effect="non-scaling-stroke" $1';

	var WHITELISTED_SVG_ELEMENTS = ['<altGlyph>', '<altGlyphDef>', '<altGlyphItem>', '<animate>', '<animateMotion>', '<animateTransform>', '<circle>', '<clipPath>', '<color-profile>', '<cursor>', '<defs>', '<desc>', '<ellipse>', '<feBlend>', '<feColorMatrix>', '<feComponentTransfer>', '<feComposite>', '<feConvolveMatrix>', '<feDiffuseLighting>', '<feDisplacementMap>', '<feDistantLight>', '<feFlood>', '<feFuncA>', '<feFuncB>', '<feFuncG>', '<feFuncR>', '<feGaussianBlur>', '<feImage>', '<feMerge>', '<feMergeNode>', '<feMorphology>', '<feOffset>', '<fePointLight>', '<feSpecularLighting>', '<feSpotLight>', '<feTile>', '<feTurbulence>', '<filter>', '<font>', '<font-face>', '<font-face-format>', '<font-face-name>', '<font-face-src>', '<font-face-uri>', '<foreignObject>', '<g>', '<glyph>', '<glyphRef>', '<hkern>', '<image>', '<line>', '<linearGradient>', '<marker>', '<mask>', '<missing-glyph>', '<mpath>', '<path>', '<pattern>', '<polygon>', '<polyline>', '<radialGradient>', '<rect>', '<set>', '<stop>', '<svg>', '<switch>', '<symbol>', '<text>', '<textPath>', '<title>', '<tref>', '<tspan>', '<use>', '<view>', '<vkern>'];

	var _getDefaultSvgHtml = function _getDefaultSvgHtml(sName) {
		var svgWrapper = sName === 'Line' ? SVGWRAPPER_START_LINE : SVGWRAPPER_START;
		var viewBox = document.getElementById(sName).getAttribute('viewBox');
		svgWrapper = svgWrapper.replace('$viewBox$', viewBox);
		var svgHtml = $('body #' + sName).children()[1];
		// IE does not support outer/innerHTML on SVG elements
		// eslint-disable-next-line no-undef
		svgHtml = new XMLSerializer().serializeToString(svgHtml);
		return svgWrapper + svgHtml + SVGWRAPPER_END;
	};

	/**
  * Update the specified avatar node with the fill and border color defined in
  * the specified spec.
  * @param avatar - JQuery node of the avatar of interest
  * @param spec - spec representing the shape shown in the avatar
  * @param spec.model - model holding the possible fillColor and borderColor
  */
	var addFillAndBorderToAvatarIfNeeded = function addFillAndBorderToAvatarIfNeeded(avatar, spec) {
		/* (Older) JQuery has issues with add classes to SVG objects so we have to be a
   * little more basic when sgetting the SVG border and fill colors
   */
		// Get the element to manipulate and retrieve its current classes
		var element = avatar.find('svg.staticContent')[0];
		var elClass = element.getAttribute('class').split(/\s+/g);
		// Add the fill color and border color if one is needed to the class array
		if (spec.model['fillColor']) {
			elClass.push('fill-' + spec.model['fillColor']);
		}
		if (spec.model['borderColor']) {
			elClass.push('border-' + spec.model['borderColor']);
		}
		// set the list of classes.
		element.setAttribute('class', elClass.join(' '));
	};

	var getDefaultSpec = function getDefaultSpec(sName, options) {

		var coloredProperty = sName === 'shapesLine' ? 'borderColor' : 'fillColor';
		var transparentProperty = sName === 'shapesLine' ? 'fillColor' : 'borderColor';

		var title = options.ext ? sName : resources.get(sName);

		var content;
		// Custom widget definition
		if (options.template) {
			var sTemplate = options.template;
			var attributes = DEFAULT_ATTRIBUTES;

			var viewBox = options && options.viewBox || defaultViewBox;
			var svgWrapper = sName === 'shapesLine' ? SVGWRAPPER_START_LINE : SVGWRAPPER_START;
			svgWrapper = svgWrapper.replace('$viewBox$', viewBox);

			content = HtmlCleanser.cleanseContentElements(svgWrapper + sTemplate.replace(/(\/?>)/g, attributes) + SVGWRAPPER_END, WHITELISTED_SVG_ELEMENTS, true);
		} else {
			// Bootstrapped widget definition using svg spritesheet
			content = HtmlCleanser.cleanseContentElements(_getDefaultSvgHtml(options.icon), WHITELISTED_SVG_ELEMENTS, true);
		}

		var spec = {
			model: {
				type: 'shape',
				name: title,
				content: content
			},
			layoutProperties: {
				style: {
					width: '120px',
					height: '120px'
				}
			}
		};

		// Get the default color for shape widget being dropped onto the canvas
		if (options.dashboardApi) {
			var colorsService = options.dashboardApi.getFeature('Colors');
			var dashboardColors = colorsService.getDashboardColorSet();

			if (options.fillColor && colorsService.isColorIdValidForDashboadColorSet(options.fillColor)) {
				spec.model[coloredProperty] = options.fillColor;
			} else {
				spec.model[coloredProperty] = dashboardColors[dashboardColors.length - 1].id;
			}
		} else {
			spec.model[coloredProperty] = options.fillColor;
		}

		spec.model[transparentProperty] = options.borderColor;

		return Promise.resolve(spec);
	};

	var ShapeWidget = null;
	ShapeWidget = StaticWidget.extend({

		init: function init(options) {
			ShapeWidget.inherited('init', this, arguments);
			this.model = this.model || {};
			this.model.content = options && options.initialConfigJSON && options.initialConfigJSON.content;

			if (this.model.content && this.isValidHtmlContent(this.model.content)) {
				this.model.borderColor = options && options.initialConfigJSON && options.initialConfigJSON.borderColor;
				this.model.fillColor = options && options.initialConfigJSON && options.initialConfigJSON.fillColor;
				this.model.name = options && options.initialConfigJSON && options.initialConfigJSON.name;

				this.$el.append(HtmlCleanser.cleanseContentElements(this.model.content, WHITELISTED_SVG_ELEMENTS, true));
				this.applyCommonProperties();
			}
		},

		getHtmlRender: function getHtmlRender() {
			var shapeEl = this.$el;
			// svg.outerHTML does not work on safari ipad. We use the XMLSerializer when available
			var newContent;
			if (window.XMLSerializer) {
				// eslint-disable-next-line no-undef
				var s = new XMLSerializer();
				newContent = s.serializeToString(shapeEl[0]);
			} else {
				newContent = shapeEl.outerHTML;
			}
			return newContent;
		},

		getWidgetStyleNode: function getWidgetStyleNode() {
			return this.$el.children('.staticContent');
		},

		registerEventGroup: function registerEventGroup() {
			// Shape widgets are not added to event groups
		},

		/**
   * Updates the model version of the markup of this widget
   * @param updatedHtml An optional parameter of the markup.
   *		This is to avoid regenerating the markup if it is already known.
   */
		updateModelContent: function updateModelContent(updatedHtml, transactionId) {

			// regenerate the HTML if not passed
			if (!updatedHtml) {
				updatedHtml = HtmlCleanser.cleanseContentElements(this.getHtmlRender(), WHITELISTED_SVG_ELEMENTS, true);
			} else {
				updatedHtml = HtmlCleanser.cleanseContentElements(updatedHtml, WHITELISTED_SVG_ELEMENTS, true);
			}

			// update the model to persist the changes. Use transactionId to combine undos
			var data = {};
			if (transactionId) {
				_.extend(data, {
					payloadData: {
						undoRedoTransactionId: transactionId
					}
				});
			} else {
				_.extend(data, {
					silent: true
				});
			}
			this.set({
				content: updatedHtml
			}, data);
		}

	});

	ShapeWidget.getDefaultSpec = getDefaultSpec;
	ShapeWidget.addFillAndBorderToAvatarIfNeeded = addFillAndBorderToAvatarIfNeeded;

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