analytics/webcontent/bi/js/gemini/features/dashboard/inAppSlideout/InAppSlideoutDOM.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 Business Analytics (C) Copyright IBM Corp. 2019, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

/**
 * @class SlideoutDOM
 * @hideconstructor
 * @classdesc API class that is used to manage Slideout functionality
 * (including the corrsponding view) across API calls
 */
define(['react', 'react-dom', '../../../lib/@waca/dashboard-common/dist/core/APIFactory', './InAppSlideoutDOMAPI', './InAppSlideoutContainer', 'jquery'], function (React, ReactDOM, APIFactory, InAppSlideoutDOMAPI, InAppSlideoutContainer, $) {
	var InAppSlideoutDOM = function () {
		function InAppSlideoutDOM(options) {
			_classCallCheck(this, InAppSlideoutDOM);

			this._slideout = options.features['InAppSlideoutState'];
			this._api = null;
			this._root = null;
			this._currentView = null;
			this._views = [];
			this._domListeners = [];
			this._features = options.features;
		}

		InAppSlideoutDOM.prototype.getAPI = function getAPI() {
			return this._api;
		};

		InAppSlideoutDOM.prototype.initialize = function initialize() {
			this._api = APIFactory.createAPI(this, [InAppSlideoutDOMAPI]);
			this._slideout.onStateChange(this._onSlideoutStateChange.bind(this));
		};

		InAppSlideoutDOM.prototype._onSlideoutStateChange = function _onSlideoutStateChange() {
			var _this = this;

			var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			var slideoutState = state.sidePanel;
			if (this._shouldRenderSlideout(state)) {
				this.render();
			} else if (!slideoutState.isOpen && slideoutState.current && this._root) {
				// _onSlideoutStateChange is being called twice, once for DashboardState:setSidePanelOpen with
				// state.sidePanel.isOpen and state.sidePanel.current to allow the panel to be identifiable and close down gracefully
				// The second call occur during the DashboardState.setSidePanelCurrentView(null) to clear the side panel
				// this time state.sidePanel.current is null
				// So check to make sure we have a valid sstate.sidePanel.current
				var _getView = this.getView(slideoutState.current),
				    contribution = _getView.instance;

				if (contribution.close) {
					contribution.close();
				}
				// do animation - slide out, width will become 0px
				var slideOutStyle = {
					'width': '0px'
				};
				return this._doAnimation(slideOutStyle, function () {
					_this._unmountContribution();
					_this._root && ReactDOM.unmountComponentAtNode(_this._root);
					_this._dashboardFrameRight && _this._root && _this._dashboardFrameRight.removeChild(_this._root);
					_this._root = null;
					_this._triggerResizeEvent();
				});
			}
		};

		InAppSlideoutDOM.prototype._doAnimation = function _doAnimation(animateToStyle, postAnimationCallback) {
			var $_root = $(this._root);
			return $_root.animate(animateToStyle, 'fast', postAnimationCallback);
		};

		InAppSlideoutDOM.prototype._unmountContribution = function _unmountContribution() {
			if (this._currentView && this._currentView.unmount) {
				if (this._currentView.unmount) {
					this._currentView.unmount();
				}
				if (this._currentView.close) {
					this._currentView.close();
				}
			}
			this._currentView = null;
		};

		InAppSlideoutDOM.prototype._triggerResizeEvent = function _triggerResizeEvent() {
			// Required to create the event like this for IE
			var resizeEvent = document.createEvent('HTMLEvents');
			resizeEvent.initEvent('resize', false, true);
			window.dispatchEvent(resizeEvent);
		};

		InAppSlideoutDOM.prototype.registerView = function registerView(id, instance) {
			var view = this.getView(id);
			if (view) {
				throw new Error('View with id "' + id + '" is already registered');
			}
			this._views.push({
				id: id,
				instance: instance
			});
		};

		InAppSlideoutDOM.prototype.removeView = function removeView(id) {
			var index = this._views.findIndex(function (item) {
				return item.id === id;
			});
			if (index === -1) {
				throw new Error('View with id "' + id + '" does not exist');
			}
			this._views.splice(index, 1);
		};

		InAppSlideoutDOM.prototype.getView = function getView(id) {
			return this._views.find(function (item) {
				return item.id === id;
			});
		};

		InAppSlideoutDOM.prototype.getViews = function getViews() {
			return this._views;
		};

		InAppSlideoutDOM.prototype._setupRenderNode = function _setupRenderNode() {
			var _this2 = this;

			if (!this._root || !this._dashboardFrameRight) {
				// TODO: get the canvas node from a feature. for now will do
				// RTC: 295170
				this._dashboardFrameRight = $('.dashboardFrameRight:visible')[0];
				if (this._dashboardFrameRight) {
					this._root = document.createElement('div');
					this._root.setAttribute('class', 'dashboardAuthoringToolsPane');

					// set initial width to 0px
					this._root.setAttribute('style', 'width: 0px;');

					// append the inAppSlideOut into dashboardFrameRight
					this._dashboardFrameRight.appendChild(this._root);

					// do animationm - slide in, width will become 320px
					var customPanelWidth = this._features['DashboardSettings'].get('panelWidth');
					var panelWidth = customPanelWidth ? customPanelWidth : '320px';
					var slideInStyle = {
						'width': panelWidth
					};
					this._doAnimation(slideInStyle, function () {
						_this2._triggerResizeEvent();
					});
				}
			}
		};

		InAppSlideoutDOM.prototype.render = function render(options) {
			var _this3 = this;

			this._setupRenderNode();
			return new Promise(function (resolve, reject) {
				try {
					var _slideout$getCurrent = _this3._slideout.getCurrent(),
					    id = _slideout$getCurrent.id;

					var _getView2 = _this3.getView(id),
					    contribution = _getView2.instance;

					if (contribution) {
						_this3._currentView = contribution;
						ReactDOM.render(React.createElement(InAppSlideoutContainer, {
							active: _this3._slideout.isOpen(),
							contribution: contribution,
							options: options,
							onDomStateChange: _this3._onUiDomStateChange.bind(_this3)
						}), _this3._root, function () {
							return resolve();
						});
					} else {
						resolve();
					}
				} catch (error) {
					reject(error);
				}
			});
		};

		InAppSlideoutDOM.prototype.destroy = function destroy() {
			this._root && ReactDOM.unmountComponentAtNode(this._root);
			this._dashboardFrameRight && this._root && this._dashboardFrameRight.removeChild(this._root);
			this._root = null;
			this._api = null;
			this._currentView = null;
			this._domListeners.length = 0;
		};

		InAppSlideoutDOM.prototype.onDomStateChange = function onDomStateChange(fn) {
			var _this4 = this;

			var newLength = this._domListeners.push(fn);
			var elementIndex = newLength - 1;
			var removeFn = function removeFn() {
				_this4._domListeners.splice(elementIndex, 1);
			};
			return removeFn;
		};

		/**
   * Invoke registered views when the InAppSlideoutContainer component get mount/unmounted in the DOM
   *
   * @param {boolean} state.type - ['mounted' | 'unmounted']
   * @param {string} [state.current] - the current contribution id
   */


		InAppSlideoutDOM.prototype._onUiDomStateChange = function _onUiDomStateChange(state) {
			if (!this._domListeners) {
				return;
			}
			this._domListeners.forEach(function (fn) {
				return fn(state);
			});
		};

		/**
   * Returns a boolean indicating whether should render the slide out or not
   * @param {object} state - the state provided by the DashboardState object
   * @param {boolean} state.dirty - something changed in the dashboard marking this dashboard as dirty
   * @param {boolean} state.selectionProperties - flag set by TimelineSliderView.js:openAnimationProperties
   * @param {boolean} state.sidePanel.isOpen - flag use to open or close the panel
   *
   */


		InAppSlideoutDOM.prototype._shouldRenderSlideout = function _shouldRenderSlideout() {
			var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			var shouldRender = !this._currentView || this._currentView.getProviderId() !== state.sidePanel.current;
			return state.sidePanel.isOpen && (shouldRender || state.dirty || state.selectionProperties);
		};

		return InAppSlideoutDOM;
	}();

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