analytics/webcontent/bi/js/dashboard-analytics/lib/@waca/dashboard-common/dist/ui/FocusView.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.
 */

define(['../lib/@waca/core-client/js/core-client/ui/AccessibleView', '../nls/StringResources', 'jquery', 'doT', 'text!./templates/FocusView.template'], function (View, resources, $, dot, template) {

	//TODO: this logic should be moved to a dashboard-core feature where a content can have the focus
	// and may be setting the focus could be something like: dashboardAPI.getFeature('Focus').setFocus('contentId');
	var FocusView = View.extend({

		init: function init(options) {
			FocusView.inherited('init', this, arguments);
			this._content = options.content;
			this._owner = options.owner;
			this._widgetNode = options.data;
			this._dashboardState = options.dashboardState;
			this._iconsFeature = this._owner.dashboardApi.getFeature('Icons');
		},

		onKeyPress: function onKeyPress(event) {
			if (event.keyCode === 27) {
				// Cancel focus view on ESC key.
				this.cancel();
			}
		},

		onTapBackground: function onTapBackground() {
			// Tap outside card area - same as cancel on mobile devices.
			this.cancel();
		},

		_onClick: function _onClick() {
			this._owner.layoutAPI.offFocus();
		},

		render: function render() {
			var _this = this;

			var parentNode = this.containerElement || document.body;

			var focusViewContainerNode = document.createElement('div');
			focusViewContainerNode.classList.add('focusViewContainer');
			focusViewContainerNode.setAttribute('tabindex', '-1');
			var $container = $(parentNode[0].appendChild(focusViewContainerNode));

			$container.addClass('expandedView');
			this._$container = $container;

			var $card = $('<div class="card gigante widgetFocus" tabindex="-1">');
			$container.append($card);
			var pos = this._owner.getExpandStartingPosition ? this._owner.getExpandStartingPosition() : this._getCardPosition(this._widgetNode.rowDiv);

			var visExpandModeFeature = this._content.getFeature('VisExpandMode');
			if (visExpandModeFeature) {
				this._setFocusState(true);
				visExpandModeFeature.renderExpandedModeContent($card.get(0) /*contentContainer*/);
				var html = dot.template(template)({
					label: resources.get('evCollapse'),
					collapseIcon: this._iconsFeature.getIcon('minimize').id
				});
				var $collapseBtn = $(html);
				$collapseBtn.on('primaryaction', this._collapse.bind(this));

				$card.children().first().append($collapseBtn);
			}

			// setup animation
			var endpos = {
				'left': 0,
				'top': 0,
				'height': '100%',
				'width': '100%'
			};

			$card.css({
				'min-height': 'inherit', //not sure why home page set min-height
				top: pos.top,
				left: pos.left
			}).height(pos.height).width(pos.width);

			this._returnPosition = pos;
			$container.show();

			var promise = new Promise(function (resolve) {
				$card.animate(endpos, 'fast', function () {
					if (this.postRenderAnimation) {
						this.postRenderAnimation({
							height: $card.height()
						});
					}
					resolve($container);
					var $popover = $('.popover');
					// close any popover that might have opened while the focus view is being launched.
					if ($popover.length) {
						$popover.popover('hide');
					}
				}.bind(this._owner));
			}.bind(this));

			$('body').on('tap.focusView', '.focusViewContainer.expandedView', this.onTapBackground.bind(this));
			$('body').on('keydown.pageView', this.onKeyPress.bind(this));
			$('body').on('click.widgetContent', '.widgetContent', this._onClick.bind(this));

			// handlers
			$container.on('touch', 'span.expand', function (event) {
				// 'this' points to the expand icon in the card
				event.preventDefault();
				event.stopImmediatePropagation();
				_this._collapse();
			}).on('tap', 'div.card', function (event) {
				// tap inside card should not end things
				event.preventDefault();
				event.stopImmediatePropagation();
			});

			return promise;
		},

		remove: function remove() {
			this._setFocusState(false);
			if (this._$container) {
				this._$container.remove();
				this._$container = null;
			}
			$('body').off('tap.focusView');
			$('body').off('keydown.pageView');
			$('body').off('click.widgetContent');

			return FocusView.inherited('remove', this, arguments);
		},

		_getCardPosition: function _getCardPosition(sourceDiv) {
			var sourceContainer = $(sourceDiv).parents('.cardscroll')[0];
			var scrollOffset = $(sourceContainer).scrollTop();
			var divPos = this._getPosition(sourceDiv);
			divPos.y -= scrollOffset; // adjust by vertical scroll amount

			return {
				top: divPos.y,
				left: divPos.x,
				height: $(sourceDiv).height(),
				width: $(sourceDiv).width()
			};
		},

		/**
   * restore 
   *  - the widget that was expanded
   *  - set the focus to the launch point
   */
		_restoreUI: function _restoreUI() {
			if (this._owner.onRestore) {
				this._owner.onRestore();
			}
			if (this.getLaunchPoint()) {
				this.getLaunchPoint().focus();
			}
		},

		_collapse: function _collapse() {
			this._setFocusState(false);
			var $card = this._$container.find('div.card');

			$card.css({
				'overflow': 'hidden'
			});

			var fRemove = this.remove.bind(this);
			$card.animate(this._returnPosition, 'fast', function () {
				this._$container.fadeOut('fast', fRemove);
			}.bind(this));
			this._restoreUI();
		},

		cancel: function cancel() {
			this._setFocusState(false);
			if (this._$container) {
				this._$container.fadeOut('fast', this.remove.bind(this));
				this._restoreUI();
			}
		},

		_getPosition: function _getPosition(element) {
			var xPosition = 0;
			var yPosition = 0;

			while (element) {
				xPosition += element.offsetLeft - element.scrollLeft + element.clientLeft;
				yPosition += element.offsetTop - element.scrollTop + element.clientTop;
				element = element.offsetParent;
			}
			return {
				x: xPosition,
				y: yPosition
			};
		},

		_setFocusState: function _setFocusState(isFocus) {
			if (this._dashboardState.getUiState().focus != isFocus) {
				this._dashboardState.updateUiState({
					stateChange: {
						focus: isFocus
					}
				});
			}
		}
	});

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