analytics/webcontent/bi/js/gemini/common/templates/HtmlTemplates.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2014, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *
 * @module /com/ibm/common/templates/HtmlTemplates
 * @see HtmlTemplates
 */
/*globals module*/

define(['../../lib/@waca/core-client/js/core-client/ui/core/Class', '../../lib/@waca/dashboard-common/dist/utils/HtmlXSSUtils', 'underscore'], function (BaseClass, HtmlXSSUtils, _) {

	/*
 	 * TODO:  These strings should be loaded from template files... but the 'text!'
 	 * AMD loader module is not currently supported in our NodeJS server so for the
 	 * time being, they are still hard-coded strings.
 	 */
	var sDefaultHtml = '<div id="{{id}}" tabindex="-1" class="page page{{type}}{{extraCSS}}"{{style}}>{{items}}</div>';
	var gridDefaultHtml = '<div id="{{id}}" tabindex="-1" class="page page{{type}} gridCapable{{extraCSS}}"{{style}}>{{items}}</div>';
	var sDefaultItems = '{{item}}';

	var sWidgetHtml = '<div id="{{id}}" role="application" aria-label="{{title}}" class="widget {{widgetType}}Widget{{extraCSS}}"{{style}} tabIndex="0"><div class="widgetContentWrapper" style="height:100%;width:100%"></div></div>';

	var sWidgetItems = ''; // Yes, empty!

	var sColumnHtml = '<table id="{{id}}" class="page page{{type}}{{extraCSS}}"{{style}}>' + '<tbody>' + '<tr>{{items}}</tr>' + '</tbody>' + '</table>';

	var sColumnItems = '<td>{{item}}</td>';

	var sFlowHtml = '<div id="{{id}}" class="page page{{type}}{{extraCSS}}"{{style}}>' + '<div class="pageflowcolumn">{{items}}</div>' + '</div>';

	var sFlowItems = '{{item}}';

	var sTabHtml = '<div id="{{id}}" class="page page{{type}}{{extraCSS}}"{{style}}>' + '<div class="tabCntr"></div>' + '<div class="tabPageHolder">{{items}}</div>' + '</div>';

	var sTabItems = '<div id="{{item.id}}_tab" class="pageTabContent">{{item}}</div>';

	var sHubHtml = '<div id="{{id}}" class="page page{{type}}{{extraCSS}}"{{style}}>' + '<div class="tabLabelCntr">{{labels}}</div>' + '<div class="tabCntr">{{items}}</div>' + '</div>';

	var sHubItems = '<div id="{{id}}_{{counter}}" class="pageTabContent" style="display:none">{{item}}</div>';

	var sHubLabels = '<div id="{{id}}_{{counter}}_label" class="tabLabel" tabIndex="0" role="tab">{{label}}</div>';

	var sLongScrollHtml = '<div id="{{id}}" class="page page{{type}}{{extraCSS}}"{{style}}>' + '<div class="tabLabelCntr">{{labels}}</div>' + '<div class="tabCntr">{{items}}</div>' + '</div>';

	var sLongScrollItems = '<div id="{{id}}_{{counter}}" class="pageTabContent" style="display:none">{{item}}</div>';

	var sLongScrollLabels = '<div id="{{id}}_{{counter}}_label" class="tabLabel" tabIndex="0" role="tab">{{label}}</div>';

	var _idCounter = 0;

	var Templates = BaseClass.extend({

		init: function init(options) {
			options = options || {};

			// Use arrays for templates:
			// [0] is for the page.
			// [1] is the HTML wrapping the sub items.
			// [2] is for labels (Tab layout)
			this._defaultHtml = [sDefaultHtml, sDefaultItems];

			this._htmlTemplates = {
				absolute: [gridDefaultHtml, sDefaultItems],
				scalingAbsolute: [gridDefaultHtml, sDefaultItems],
				genericPage: [gridDefaultHtml, sDefaultItems],
				widget: [sWidgetHtml, sWidgetItems],
				column: [sColumnHtml, sColumnItems],
				flow: [sFlowHtml, sFlowItems],
				tab: [sTabHtml, sTabItems],
				cardtab: [sTabHtml, sTabItems],
				hub: [sHubHtml, sHubItems, sHubLabels],
				longscroll: [sLongScrollHtml, sLongScrollItems, sLongScrollLabels]
			};
			if (options.layoutExtensionsTemplates) {
				// used to remove the copyright notice
				var matchComment = /<!--[\s\S]*?-->/m;
				Object.keys(options.layoutExtensionsTemplates).forEach(function (key) {
					var templates = options.layoutExtensionsTemplates[key]();
					this._htmlTemplates[key] = templates.map(function (template) {
						return (template || '').replace(matchComment, '');
					});
				}.bind(this));
			}
		},

		// Used by unit-tests...
		reset: function reset() {
			_idCounter = 0;
		},

		getStyleValue: function getStyleValue(s) {
			var a = [];
			if (s) {
				if (typeof s === 'string') {
					a.push(s);
				} else {
					var allStyles = [];
					for (var i in s) {
						if (s.hasOwnProperty(i)) {
							allStyles.push(i + ':' + s[i]);
						}
					}
					a.push(allStyles.join(';'));
				}
			}
			return a.join('');
		},

		getStyle: function getStyle(s) {
			var styleValue = this.getStyleValue(s);
			var a = [];
			if (styleValue) {
				a.push(' style="');
				a.push(_.escape(styleValue));
				a.push('"');
			}
			return a.join('');
		},

		getHtml: function getHtml(spec, widgetMap) {
			// page
			if (!spec.id) {
				var newId = 'page' + _idCounter++;
				if (spec.setId) {
					spec.setId(newId); //ideally getters should not mutate input
				} else {
					spec.id = newId;
				}
			}

			var type = spec.type;
			var template = this.getTemplate(type);
			var sMainTemplate = template[0];
			var aItemsHtml = [];
			var aLabelsHtml = [];
			_.each(spec.items, function (item, idx) {
				this._loadLabelHtml(aLabelsHtml, type, widgetMap, item, idx);
				this._loadItemHtml(aItemsHtml, type, widgetMap, item);
			}.bind(this));

			var sHtml = sMainTemplate.replace(/\{\{items\}\}/g, aItemsHtml.join('')).replace(/\{\{labels\}\}/g, aLabelsHtml.join(''));

			// Replace widget attributes
			sHtml = this.replaceWidgetValues(sHtml, widgetMap ? widgetMap[spec.id] : null);
			sHtml = this.replaceLayoutValues(sHtml, spec);
			return sHtml;
		},

		_loadLabelHtml: function _loadLabelHtml(aLabelsHtml, type, widgetMap, item, idx) {
			var label = this.getLabel(item, widgetMap) || 'Tab ' + (idx + 1);
			var sHtml = this.getLabelTemplate(type, label, item);
			if (sHtml) {
				aLabelsHtml.push(sHtml);
			}
		},

		_loadItemHtml: function _loadItemHtml(aItemsHtml, type, widgetMap, item) {
			var label = this.getLabel(item, widgetMap) || '';
			var sHtml = this.getItemTemplate(type, this.getHtml(item, widgetMap), item, label);
			if (sHtml) {
				aItemsHtml.push(sHtml);
			}
		},

		getTemplate: function getTemplate(type) {
			return this._htmlTemplates[type] || this._defaultHtml;
		},

		getLabelTemplate: function getLabelTemplate(type, label, item) {
			var result = null;
			var sLabelTemplate = this.getTemplate(type)[2];
			if (sLabelTemplate) {
				item.id = item.id || 'page' + _idCounter++;
				result = sLabelTemplate.replace(/\{\{item.id\}\}/g, _.escape(item.id)).replace(/\{\{label\}\}/g, _.escape(label));
			}
			return result;
		},

		getItemTemplate: function getItemTemplate(type, itemContent, item, label) {
			var data = item.data || {};
			var style = item.style || {};
			var sLabel = label || '';
			var result = null;
			var sItemTemplate = this.getTemplate(type)[1];
			if (sItemTemplate) {
				result = sItemTemplate.replace(/\{\{item.id\}\}/g, _.escape(item.id)).replace(/\{\{item\}\}/g, itemContent).replace(/\{\{label\}\}/g, _.escape(sLabel)).replace(/\{\{dx\}\}/g, _.escape('' + (data.x || 0))).replace(/\{\{dy\}\}/g, _.escape('' + (data.y || 0))).replace(/\{\{dscale\}\}/g, _.escape('' + (data.scale || 1))).replace(/\{\{style\}\}/g, this.getStyle(style));
			}
			return result;
		},

		replaceLayoutValues: function replaceLayoutValues(sHtml, spec) {
			var data = spec.data || {};

			var fill = spec.fillColor;
			if (fill) {
				var fillCss = 'fill-' + fill;
				if (spec.css && spec.css.indexOf(fillCss) === -1) {
					spec.css += ' ' + fillCss;
				} else {
					spec.css = fillCss;
				}
			}

			return sHtml.replace(/\{\{id\}\}/g, _.escape(spec.id)).replace(/\{\{type\}\}/g, _.escape(spec.type)).replace(/\{\{style\}\}/g, this.getStyle(spec.style)).replace(/\{\{extraCSS\}\}/g, spec.css ? ' ' + _.escape(spec.css) : '').replace(/\{\{extraCSSTabLabels\}\}/g, spec.cssTabLabels ? ' ' + _.escape(spec.cssTabLabels) : '').replace(/\{\{dx\}\}/g, _.escape('' + (data.x || 0))).replace(/\{\{dy\}\}/g, _.escape('' + (data.y || 0))).replace(/\{\{dscale\}\}/g, _.escape('' + (data.scale || 1)));
		},

		replaceWidgetValues: function replaceWidgetValues(html, widgetSpec) {
			// Replace widget attributes
			var widgetType = widgetSpec && widgetSpec.type ? widgetSpec.type : '';

			var title = null;
			if (widgetSpec) {
				// TODO: this is ugly.. widgets should use common property for the title/label
				title = widgetSpec.get('name') || widgetSpec.get('title') || widgetSpec.get('altText');
			}
			title = HtmlXSSUtils.sanitizeHtml(title);
			return html.replace(/\{\{widgetType\}\}/g, _.escape(widgetType)).replace(/\{\{title\}\}/g, _.escape(title));
		},

		getLabel: function getLabel(model, widgetMap) {
			var s = '';
			var title;
			if (model && model.title) {
				title = model.get ? model.get('title') : model.title;
			}
			if (typeof title === 'string') {
				s = title;
			} else if (title) {
				s = this.getHtml(title, widgetMap);
			}
			return s;
		}
	});

	return Templates;
});
//# sourceMappingURL=HtmlTemplates.js.map