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

'use strict';

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: Dashboard
 *
 * (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(['underscore', './UrlWidget', '../../../app/nls/StringResources', '../../../lib/@waca/core-client/js/core-client/utils/Utils', 'jquery', 'doT', 'text!./Webpage.html', 'react-dom', '../../../lib/@waca/dashboard-common/dist/ui/CenterLoadingSpinner', '../../../lib/@waca/core-client/js/core-client/utils/BrowserUtils'], function (_, UrlWidget, resources, Utils, $, dot, Template, ReactDOM, CenterLoadingSpinner, BrowserUtils) {

	var renderTemplate = dot.template(Template);

	var maxHiddenWebpageWidgets = BrowserUtils.isIE() ? 4 : 8;
	var hiddenWebpageWidgets = [];
	var pruneTimer = void 0;

	var removeWidgetFromHiddenList = function removeWidgetFromHiddenList(id) {
		hiddenWebpageWidgets = hiddenWebpageWidgets.filter(function (obj) {
			return obj.id !== id;
		});
	};

	/**
  * This function will unload iframes of webpage widgets that are hidden
  * if we have too many of them.
  */
	var pruneHiddenWebpageWidgets = function pruneHiddenWebpageWidgets() {
		if (!pruneTimer) {
			pruneTimer = setTimeout(function () {
				var widgetsToPrune = hiddenWebpageWidgets.length - maxHiddenWebpageWidgets;
				if (widgetsToPrune > 0) {
					console.info('Unloading ' + widgetsToPrune + ' webpage widgets');
					for (var i = 0; i < widgetsToPrune; i++) {
						var hiddenWidget = hiddenWebpageWidgets.shift();
						hiddenWidget.widget.destroyIframe();
					}
				}
				pruneTimer = undefined;
			}, 50);
		}
	};

	var WebpageWidget = UrlWidget.extend({

		init: function init(options) {
			WebpageWidget.inherited('init', this, arguments);
			this._firstRendering = true;
			this.api = {
				getId: this.getId.bind(this),
				setUrl: this.setUrl.bind(this)
			};

			this.model = this.model || {};
			var initialConfigJson = options ? options.initialConfigJSON : null;
			if (initialConfigJson) {
				this.model.url = initialConfigJson.url;
				this.model.title = initialConfigJson.title ? initialConfigJson.title.translationTable : null;
			}
			this.propertyCallbacks = this.dashboardApi.getFeature('PropertyCallbacks');
		},

		destroy: function destroy() {
			this.destroyIframe();
			this._removeLoadingIndicator();
			WebpageWidget.inherited('destroy', this, arguments);
		},

		destroyIframe: function destroyIframe() {
			removeWidgetFromHiddenList(this.model.id);
			var $iframe = this._getIFrameElement();
			if ($iframe) {
				$iframe.off();
			}
			this.$el.empty();
		},

		onShow: function onShow() {
			WebpageWidget.inherited('onShow', this, arguments);
			removeWidgetFromHiddenList(this.model.id);
			this.render();
		},

		onHide: function onHide() {
			hiddenWebpageWidgets.push({
				id: this.model.id,
				widget: this
			});
			pruneHiddenWebpageWidgets();
			WebpageWidget.inherited('onHide', this, arguments);
		},

		onContainerReady: function onContainerReady() /*o*/{
			WebpageWidget.inherited('onContainerReady', this, arguments);
			if (this.model) {
				this.model.on('change:url', this._onUrlChange, this);
				this.model.on('change:title', this._onTitleChange, this);
				this.addWhiteListAttrs('url', 'title');
			}
			this.eventRouter.trigger('webpage:ready', this.api);
		},

		render: function render() {
			var messageInfo = this.propertyCallbacks.validateWebpageLink(null, this.model.url);
			if (messageInfo.isValid === false) {
				if (this._firstRendering === true) {
					this._firstRendering = false;
					if (this.isAuthoringMode) {
						var message = messageInfo.message;
						this.$el.append(UrlWidget.getDefaultConsumeMarkup(message));
						this.onAuthoringMode();
					} else {
						var _message = !this.model.url ? resources.get('webpageMissingUrl') : resources.get('webpageUrlValidationError');
						this.$el.append(UrlWidget.getDefaultConsumeMarkup(_message));
						this.onConsumeMode();
					}
				}
			} else {
				if (this.$el.parent().is(':visible') && this._getIFrameElement().length === 0) {
					this._updateHtmlContent(this._getUpdatedHtmlContent(), true);
					this._newIframe();
					if (this.isAuthoringMode) {
						this.onAuthoringMode();
					} else {
						this.onConsumeMode();
					}
				}
			}
		},

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

			if (url) {
				url = url.trim();
			}
			var ret = this.propertyCallbacks.validateWebpageLink(null, url);
			errorData.message = ret.message;
			if (ret.isValid) {
				var transactionId = _.uniqueId('_addWebpage_');
				this.set({
					url: url
				}, {
					sender: this,
					payloadData: {
						undoRedoTransactionId: transactionId
					}
				});
				return true;
			}
			return false;
		},

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

		_getHtmlRender: function _getHtmlRender(props) {
			props = props || {};

			var title = this._getTitle();
			if (title) {
				props.title = title;
			}
			props = _.extend({}, { url: this.model.url }, props);

			if (Utils.isIpad()) {
				props.isIpad = true;
			}
			return renderTemplate(props);
		},

		updateMarkup: function updateMarkup() {
			WebpageWidget.inherited('updateMarkup', this, arguments);
			this._newIframe();
		},

		_newIframe: function _newIframe() {
			this._getIFrameElement().on('load', this._onIframeLoaded.bind(this));
		},

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

		_onUrlChange: function _onUrlChange() {
			var updatedHtml = this._getUpdatedHtmlContent();
			if (this.model.url) {
				this._updateHtmlContent(updatedHtml, false);
				this._addLoadingIndicator();
			} else {
				this.renderInlineEditUi();
			}
			this.updateMarkup();
			this.updateModelContent(updatedHtml);
			// This update is necessary to cover undo/redo cases
			this._lastSetURL = this.model.url || null;
		},

		_onTitleChange: function _onTitleChange(options) {
			var $iframe = this._getIFrameElement();
			if ($iframe) {
				$iframe.attr('aria-label', options.value);
			}
		},

		_getUpdatedHtmlContent: function _getUpdatedHtmlContent() {
			if (this.propertyCallbacks.validateWebpageLink(null, this.model.url).isValid) {
				this.model.url = this.encodeURL(this.model.url);
				return this._getHtmlRender();
			} else {
				return this._getMissingUrlMarkup();
			}
		},

		_updateHtmlContent: function _updateHtmlContent(updatedHtml, bFirstTime) {
			this._removeLoadingIndicator();
			if (bFirstTime) {
				this.$el.append(updatedHtml);
			} else {
				this._getStaticWidgetElement().replaceWith(updatedHtml);
			}
		},

		onStartMove: function onStartMove(o) {
			var _this = this;

			if (this.model.url && o.selectedNodes) {
				var applyToThisWidget = _.find(o.selectedNodes, function (n) {
					return _this.$el.is($(n));
				});
				if (applyToThisWidget) {
					this._showLoadingIndicator();
				}
			}
		},

		_onIframeLoaded: function _onIframeLoaded() {
			this._hideLoadingIndicator();
		},

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

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

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

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

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

		getHtmlRender: function getHtmlRender() {
			return this._getHtmlRender();
		},

		_getStaticWidgetElement: function _getStaticWidgetElement() {
			return this.$el.find('.staticContent');
		},

		_getIFrameElement: function _getIFrameElement() {
			return this.$el.find('iframe');
		},

		_getMissingUrlMarkup: function _getMissingUrlMarkup() {
			return UrlWidget.getDefaultConsumeMarkup(this.getMissingUrlText());
		},

		_addLoadingIndicator: function _addLoadingIndicator() {
			if (!this._$loadingIndicatorBlocker) {
				this._$loadingIndicatorBlocker = $('<div></div>');
			}
			this._getStaticWidgetElement().prepend(this._$loadingIndicatorBlocker);
			ReactDOM.render(CenterLoadingSpinner({
				size: 'normal',
				'variant': 'circle'
			}), this._$loadingIndicatorBlocker[0]);
		},

		_hideLoadingIndicator: function _hideLoadingIndicator() {
			if (this._$loadingIndicatorBlocker) {
				this._$loadingIndicatorBlocker[0].style.setProperty('display', 'none');
			}
		},

		_showLoadingIndicator: function _showLoadingIndicator() {
			if (this._$loadingIndicatorBlocker) {
				this._$loadingIndicatorBlocker[0].style.setProperty('display', 'flex');
			}
		},

		_removeLoadingIndicator: function _removeLoadingIndicator() {
			if (this._$loadingIndicatorBlocker) {
				ReactDOM.unmountComponentAtNode(this._$loadingIndicatorBlocker[0]);
				this._$loadingIndicatorBlocker.remove();
				this._$loadingIndicatorBlocker = null;
			}
		}
	});

	WebpageWidget.getDefaultSpec = function () {
		return Promise.resolve({
			model: {
				type: 'webpage',
				avatarHtml: UrlWidget.getDefaultConsumeMarkup(),
				title: ''
			},
			layoutProperties: {
				style: {
					width: '480px',
					height: '360px'
				}
			}
		});
	};

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