analytics/webcontent/bi/js/dashboard-analytics/widgets/livewidget/expandmode/VisExpandMode.js

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| IBM Cognos Products: Dashboard
 *| (C) Copyright IBM Corp. 2014, 2020
 *|
 *| US Government Users Restricted Rights - Use, duplication or disclosure
 *| restricted by GSA ADP Schedule Contract with IBM Corp.
 *+------------------------------------------------------------------------+
 */
// this Class should be removed completely when the focus mode epic 276983 is completed
define(['../../../widgets/livewidget/nls/StringResources', '../visSwitcher/VisChangerView', '../../../DynamicFileLoader', '../../../visualizations/vipr/VIPRLibraries', '../../../widgets/livewidget/util/VisUtil', '../../../lib/@waca/dashboard-common/dist/api/Error', 'jquery', 'underscore'], function (resources, VisChangerView, DynamicFileLoader, VIPRLibraries, VisUtil, APIError, $, _) {

	/**
  * INTENT: VisExpandMode should be used as the entry point to expand mode (also known as focus mode) processing.
  * //TODO: This function is just roughed in to partition code out of the widget.
  * //TODO: In the general widget code, it is known as expandview so perhaps this should be renamed to match...but in some respects this is more of a controller
  */
	return function () {
		function VisExpandMode() {
			_classCallCheck(this, VisExpandMode);

			var options = arguments.length <= 0 ? undefined : arguments[0];
			this.dashboard = options.dashboardApi;
			this.visualization = options.visualization;
			this.widgetApi = options.widgetApi;
			this.iconsFeature = this.dashboard.getFeature('Icons');

			this.ownerWidget = options.ownerWidget;
			this.$el = options.$el;

			this.$parent = this.$el.parent();

			this.visualization.on('change:type', this._updateVizTypeTitle, this);
		}

		VisExpandMode.prototype.destroy = function destroy() {
			if (this.dataSlotsView) {
				this.dataSlotsView.remove();
				this.dataSlotsView = null;
			}

			if (this.visChangeView) {
				this.visChangeView.remove();
				this.visChangeView = null;
			}

			this.visualization.off('change:Type', this._updateVizTypeTitle, this);
		};

		VisExpandMode.prototype.onDrop = function onDrop(dragObject) {
			if (this.dataSlotsView && this.dataSlotsView.isSlotSelected()) {
				if (this.dataSlotsView.isSelectedSlotLocalFilters()) {
					this.dataSlotsView.onDropContext(dragObject);
				} else {
					this.dataSlotsView.onDrop(dragObject, this.dataSlotsView.getFocusSlot());
				}
				return true; //expand mode processed the drop
			}
			return false; //this isn't expand mode.
		};

		VisExpandMode.prototype.onRestore = function onRestore() {
			this.$parent.prepend(this.$header);
			if (this.dataSlotsView) {
				this.dataSlotsView.remove();
				this.dataSlotsView = null;
			}

			if (this.ownerWidget._currVis) {
				this.ownerWidget._currVis.onRestore();
			}
		};

		VisExpandMode.prototype.renderSlotsView = function renderSlotsView() {
			return this.dataSlotsView && this.dataSlotsView.render();
		};

		VisExpandMode.prototype.getExpandModeContent = function getExpandModeContent($container) {
			var _this = this;

			this.ownerWidget.trigger('expandedView:visible');

			$container.addClass('widgetExpanded');
			// close the conditional histogram
			if (this.ownerWidget._currVis) {
				this.ownerWidget._currVis.setInExpandedMode();
			}

			var boardFillColor = this.ownerWidget.boardModel.layout.fillColor;
			var boardBackgroundColorClass = boardFillColor ? this.ownerWidget.getThemeColorClassName(boardFillColor, 'fill') : '';

			this.$parent = this.$el.parent();
			this.$header = this.$parent.find('.widgetHeader');
			this.$previewMessage = this.$parent.find('.customVisPreviewMessage');

			var changeVisIcon = this.iconsFeature.getIcon('visualizations-changeVisualization');
			var chevronLeftIcon = this.iconsFeature.getIcon('common-chevron_left');
			var resizePanel = this.iconsFeature.getIcon('resizePanel');

			var $content = $('<div class="expandModeContainer"></div>');
			//Chart region
			var $preview = $('<div class="preview"></div>');
			var visualisationBtnDescriptionId = _.uniqueId('VisExpandModeVisualisationBtnDesc_');
			var $visualisationBtn = $('<div class="allVisualizations" tabindex="0" role="button" aria-describedby="' + visualisationBtnDescriptionId + '">' + '<svg class="svgIcon" role="img" focusable="false">' + '<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + changeVisIcon.id + '">' + '</use></svg><span class="title" id="' + visualisationBtnDescriptionId + '">' + resources.get('toolbarChangeVisualization') + '</span>' + '<svg class="svgChevron" role="img" focusable="false">' + '<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + chevronLeftIcon.id + '">' + '</use></svg></div></div>');
			var $toolbar = $('<div class="vizToolbar" role="application"></div>');
			var $columns = $('<div class="columns"></div>');
			var $sidebar = $('<div class="focusSidebar" role="application" style="visibility:hidden"></div>');
			var $dragSidebar = $('<div class="resize-handle ui-resizable-handle ui-resizable-e" role="application"><svg class="svgIcon dimensions" role="img" focusable="false"><use xlink:href="#' + resizePanel.id + '" x="-11" y="65.5" width="30" height="25"/></svg></div>');
			var $expandPageViewContent = $('<div class="expandPageViewContent"></div>');
			var $expandPage = $('<div class="expandPage ' + boardBackgroundColorClass + '"></div>');
			var $widgetContainer = $('<div class="liveWidget widget "></div>');
			$toolbar.append($visualisationBtn);

			this.$toolbar = $toolbar; // to get ref from vizSelector

			this.ownerWidget._restoreToParent = this.ownerWidget.$el.parent();
			this.ownerWidget.$placeholder = $('<div></div>');
			this.ownerWidget.$placeholder.css({
				width: this.ownerWidget.$el.outerWidth(),
				height: this.ownerWidget.$el.outerHeight()
			});

			$widgetContainer.append(this.$previewMessage).append(this.$header).append(this.$el);
			$expandPage.append($widgetContainer);
			$expandPageViewContent.append($expandPage);
			$preview.append($toolbar).append($expandPageViewContent);
			$sidebar.append($columns).append($dragSidebar);
			$content.append($sidebar).append($preview);

			this.ownerWidget._restoreToParent.append(this.$placeholder);
			this.ownerWidget.applyCommonProperties();

			$container.append($content);
			this._$focusView = $content;

			this._container = $container;

			var content = this.dashboard.getCanvas().getContent(this.ownerWidget.id);
			var stateAPI = content && content.getFeature('state.internal');

			if (stateAPI) {
				var error = stateAPI.getError();
				if (error && error.getParams) {
					var params = error.getParams() || {};
					if (params.errorInfo && params.errorInfo.errorCode === VIPRLibraries.LOAD_DEFINITION_ERROR) {
						stateAPI.clearError();
					}
				}
			}

			var readyPromise = void 0;
			return VisUtil.validateVisDefinition(content, this.dashboard, { visId: this.ownerWidget.model.visId }).then(function (isValid) {
				var visualization = content.getFeature('Visualization');
				var definition = visualization.getDefinition();
				if (isValid) {
					if (!_this.dataSlotsView) {
						var slotsView = _this.ownerWidget._isShapeEnabledWidget() ? 'DataShapeSlotsView' : 'DataSlotsView';

						readyPromise = DynamicFileLoader.load(['dashboard-analytics/widgets/livewidget/expandmode/' + slotsView]).then(function (modules) {
							var SlotsView = modules[0];
							_this.dataSlotsView = new SlotsView({
								dashboardApi: _this.dashboard,
								visualizationApi: visualization,
								dndManager: _this.dashboard.getFeature('DashboardDnd.internal'),
								widget: _this.ownerWidget,
								el: $columns,
								missingFilters: _this.ownerWidget.getUnavailableLocalFilter()
							});
							return _this.dataSlotsView.render( /* resize= */false);
						});
					} else {
						readyPromise = Promise.resolve();
					}

					var vizTitle = definition.getLabel();
					var allVisualizations = _this.$toolbar.find('.allVisualizations');

					_this._setVisTypeTitle(vizTitle);

					allVisualizations.attr('tabindex', '0').on('primaryaction', function () {
						var currVis = _this.visualization.isTypeLocked() ? _this.visualization.getDefinition().getId() : 'auto';
						if (!_this.visChangeView) {
							_this.visChangeView = new VisChangerView({
								currentVis: currVis,
								widgetId: _this.ownerWidget.getId(),
								dashboard: _this.dashboard
							});
						}

						_this.visChangeView.render({
							currentVis: currVis,
							inFocusView: true
						}).then(_this._updateVizTypeTitle.bind(_this));
					});

					$sidebar.css({
						visibility: 'visible'
					});

					$sidebar.resizable({
						handles: [$dragSidebar],
						minWidth: 250,
						width: 368,
						maxWidth: 1000,
						stop: function () {
							if (this.dataSlotsView) {
								this.dataSlotsView.render();
							}
						}.bind(_this)
					});
				} else {
					readyPromise = Promise.resolve();
					$sidebar.remove();
					$toolbar.remove();
				}
				return readyPromise;
			}).finally(function () {
				readyPromise.then(function () {
					// focus on the first with a tabindex. (should be the interactive chart)
					var el = _this.$el.find('*[tabindex="0"]');
					if (el.length) {
						el[0].focus();
					}
				});
			});
		};

		VisExpandMode.prototype.updateExpandedViewContent = function updateExpandedViewContent(isValidVisDef) {
			if (!isValidVisDef) {
				if (this._$focusView && this._$focusView.length > 0) {
					var $dataSlotsViewNode = this._$focusView.find('.focusSidebar');
					if ($dataSlotsViewNode.length > 0) {
						$dataSlotsViewNode.remove();
					}
				}

				if (this.$toolbar && this.$toolbar.length > 0) {
					this.$toolbar.remove();
				}
			}
		};

		VisExpandMode.prototype.getFocusModeContainer = function getFocusModeContainer() {
			return this._container;
		};

		VisExpandMode.prototype._getVisTypeTitle = function _getVisTypeTitle() {
			return this.visualization.getDefinition().getLabel();
		};

		VisExpandMode.prototype._setVisTypeTitle = function _setVisTypeTitle(title) {
			var $changeVisButton = this.$toolbar.find('.allVisualizations');
			var $changeVisLabel = $changeVisButton.find('span');
			$changeVisButton.prop('title', resources.get('toolbarChangeVisualization')).attr('aria-label', resources.get('toolbarChangeVisualization')).attr('aria-describedBy', $changeVisLabel[0].id);
			$changeVisLabel.text(title).prop('title', title).attr('aria-label', title);
		};

		VisExpandMode.prototype._updateVizTypeTitle = function _updateVizTypeTitle() {
			// Only update the expanded mode title if the widget is in expanded mode
			if (this.ownerWidget.isWidgetMaximized()) {
				this._setVisTypeTitle(this._getVisTypeTitle());
			}
		};

		return VisExpandMode;
	}();
});
//# sourceMappingURL=VisExpandMode.js.map