analytics/webcontent/bi/js/gemini/dashboard/widgets/staticwidget/ImageWidget.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(['./UrlWidget', './ScalingUtil', '../../../app/nls/StringResources', 'jquery', 'underscore', 'doT', 'text!./ImageUri.html'], function (UrlWidget, ScalingUtil, resources, $, _, dot, Template) {

	var mediaImageRegex = /^v[1-9]\/ext\//;

	var ImageWidget = UrlWidget.extend({

		init: function init(options) {
			ImageWidget.inherited('init', this, arguments);
			this.model = this.model || {};
			this.model.imageLink = options && options.initialConfigJSON && options.initialConfigJSON.imageLink;
			this.model.altText = options && options.initialConfigJSON && options.initialConfigJSON.altText;
			this.model.fillColor = options && options.initialConfigJSON && options.initialConfigJSON.fillColor;
			this.model.borderColor = options && options.initialConfigJSON && options.initialConfigJSON.borderColor;
			this.propertyCallbacks = this.dashboardApi.getFeature('PropertyCallbacks');
		},

		onContainerReady: function onContainerReady() {
			ImageWidget.inherited('onContainerReady', this, arguments);
			if (this.model) {
				this.model.on('change:imageLink', this._onPropertyChange, this);
				this.model.on('change:altText', this._onPropertyChange, this);
				this.model.on('change:resize', this._onPropertyChange, this);
				this.addWhiteListAttrs('imageLink', 'altText', 'resize');
			}
			if (this.model.fillColor) {
				this.$el.find('div.staticContent').addClass('fill-' + this.model.fillColor);
			}
			if (this.model.borderColor) {
				this.$el.find('div.staticContent').addClass('border-' + this.model.borderColor);
			}
		},

		render: function render() {
			if (this.propertyCallbacks.validateImageInput(null, this.model.imageLink).isValid) {
				this.model.imageLink = this.encodeURL(this.model.imageLink);
				this.$el.append(this.getHtmlRender());
			} else {
				this.$el.append(UrlWidget.getDefaultConsumeMarkup(resources.get('imgMissingUrl')));
			}
		},

		setUrl: function setUrl(url) {
			var errorData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

			var validateInfo = this.propertyCallbacks.validateImageInput(null, url);
			errorData.message = validateInfo.message;
			if (validateInfo.isValid) {
				var transactionId = _.uniqueId('_addImage_');
				this.set({
					imageLink: url
				}, {
					sender: this,
					payloadData: {
						undoRedoTransactionId: transactionId
					}
				});
				this._initWidthHeight(url, transactionId);
				return true;
			}
			return false;
		},

		_initWidthHeight: function _initWidthHeight(url, transactionId) {
			var _this = this;

			return new Promise(function (resolve, reject) {
				try {
					// eslint-disable-next-line no-undef
					var img = new Image();
					img.onload = function () {
						img = ScalingUtil.scale({
							image: img,
							max: {
								width: 500,
								height: 500
							},
							format: 'css'
						});
						var $chrome = _this.getWidgetStyleNode().closest('.widget');
						$chrome.width(img.width);
						$chrome.height(img.height);
						_this.widgetChromeEventRouter.trigger('widget:updateLayout', {
							sender: _this,
							payloadData: {
								undoRedoTransactionId: transactionId
							}
						});
						resolve();
					};
					img.src = url;
				} catch (error) {
					reject(error);
				}
			});
		},

		_urlChange: function _urlChange(options) {
			return this.setUrl(options.item);
		},

		onEnterContainer: function onEnterContainer() {
			var mediaInput = this.$el.find('.inlineEditInput');
			mediaInput.focus();
		},

		isInlineEditMode: function isInlineEditMode() {
			return !this.model.imageLink;
		},

		getInlineEditCaption: function getInlineEditCaption() {
			return resources.get('imageTextLabel');
		},

		getMissingUrlText: function getMissingUrlText() {
			return resources.get('imgMissingUrl');
		},

		getAriaLabelText: function getAriaLabelText() {
			return resources.get('mediaAriaLabel');
		},

		getLabel: function getLabel() {
			return this._getAltText() || resources.get('imageWidgetTitle');
		},

		getContentClass: function getContentClass() {
			return 'imageWidgetContent';
		},

		_getAltText: function _getAltText() {
			return this.model && this.model.get ? this.model.get('altText') : null;
		},

		_onPropertyChange: function _onPropertyChange(options) {
			var updatedHtml = null;
			if (this.model.imageLink) {
				this.model.imageLink = this.encodeURL(this.model.imageLink);
				if (this.propertyCallbacks.validateImageInput(null, this.model.imageLink).isValid) {
					var $node = this.getWidgetStyleNode();
					$node.find('input').remove();
					$node.removeClass('inlineEdit');
					var $img = $node.find('img');
					if (!$img.length) {
						$img = $('<img></img>');
						$node.empty();
						$node.append($img);
					}
					$img.attr('src', this.model.imageLink);
					var altText = this._getAltText();
					if (altText) {
						$img.attr('alt', altText);
					} else {
						$img.removeAttr('alt');
					}

					var heightWidth = this.model.resize === 'false' ? 'auto' : '100%';
					$img.css('width', heightWidth).css('height', heightWidth);
				}
			} else {
				this.renderInlineEditUi();
				updatedHtml = UrlWidget.getDefaultConsumeMarkup(resources.get('imgMissingUrl'));
			}

			this.updateMarkup();
			if (options.data && options.data.undoRedoTransactionId) {
				this.updateModelContent(updatedHtml, options.data.undoRedoTransactionId);
			} else {
				this.updateModelContent(updatedHtml);
			}
		},

		getPropertyList: function getPropertyList() {
			var _this2 = this;

			var propertyList = ImageWidget.inherited('getPropertyList', this, arguments) || [];
			// Make the image link field read-only if the image came from an image library.
			_.forEach(propertyList, function (property) {
				if (property.id === 'imageLink' && mediaImageRegex.test(_this2.model.imageLink)) {
					property.editor.readOnly = true;
					return property;
				}
			});
			return propertyList;
		},

		getHtmlRender: function getHtmlRender() {
			var renderTemplate = dot.template(Template);

			var props = {
				url: this.model.imageLink
			};
			var altText = this._getAltText();
			if (altText) {
				props.altText = altText;
			}
			if (this.model.fillColor) {
				props.fillColor = 'fill-' + this.model.fillColor;
			}
			if (this.model.borderColor) {
				props.borderColor = 'border-' + this.model.borderColor;
			}
			if (this.model.imageLink) {
				props.url = this.model.imageLink;
			}

			return renderTemplate(props);
		}
	});

	ImageWidget.getDefaultSpec = function (name, options) {

		options = options || {};

		var spec = {
			model: {
				type: 'image',
				'avatarHtml': UrlWidget.getDefaultConsumeMarkup(),
				'imageLink': options.imageLink,
				'altText': options.altText
			},
			layoutProperties: {
				style: {
					width: '480px',
					height: '360px'
				}
			}
		};

		if (options.imageLink) {
			return new Promise(function (resolve, reject) {
				try {
					// eslint-disable-next-line no-undef
					var img = new Image();
					img.onload = function () {
						var dX = 480 / (img.naturalWidth || 1);
						var dY = 360 / (img.naturalHeight || 1);
						if (dX < 1 || dY < 1) {
							spec.layoutProperties.style = {
								height: Math.min(dX, dY) * img.naturalHeight + 'px',
								width: Math.min(dX, dY) * img.naturalWidth + 'px'
							};
						} else {
							spec.layoutProperties.style = {
								height: img.naturalHeight + 'px',
								width: img.naturalWidth + 'px'
							};
						}
						resolve(spec);
					};
					img.onerror = function () {
						reject();
					};
					img.src = options.imageLink;
				} catch (error) {
					reject(error);
				}
			});
		} else {
			return Promise.resolve(spec);
		}
	};

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