analytics/webcontent/bi/js/gemini/dashboard/layout/views/GenericPage.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2018, 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['./LayoutBaseView', 'jquery'], function (BaseClass, $) {

	/*
 * The generic page class is a view which can represent a relative or absolute layout	*/
	var ASPECT_RATIO_STYLE_ID = 'dashboardRelativeAspectRatio';

	var GenericPage = BaseClass.extend({

		aspectRatio: 0,

		init: function init() /*options*/{
			GenericPage.inherited('init', this, arguments);

			this.layoutController.topLayoutModel.on('change:pageSize', this._onChangePageSize, this);
			this.layoutController.topLayoutModel.on('change:fitPage', this._onFitPage, this);
			this.layoutController.topLayoutModel.on('change:layoutPositioning', this._onChangeLayoutPositioning, this);
			this._setPageLayoutStyling();
		},

		/**
   * Called when the view is destroyed
   */
		destroy: function destroy() {
			this.layoutController.topLayoutModel.off('change:pageSize', this._onChangePageSize, this);
			this.layoutController.topLayoutModel.off('change:fitPage', this._onFitPage, this);
			this.layoutController.topLayoutModel.off('change:layoutPositioning', this._onChangeLayoutPositioning, this);

			// If this is the last generic page, clean up any page size styles
			var layoutModels = this.layoutController.topLayoutModel.findDescendantsWithType('genericPage');
			if (layoutModels.length === 0) {
				this._clearPageSize();
			}

			GenericPage.inherited('destroy', this, arguments);
		},


		/**
   * Invoked when a hidden layout is shown
   */
		onShow: function onShow() {
			GenericPage.inherited('onShow', this, arguments);

			// Update page size when shown, as the 1 aspect ratio style may be different from the previous shown view
			if (this.$el.is(':visible')) {
				this._setPageFitStyling();
				this._applyPageSize();
				this._setPageLayoutStyling();
			}
		},


		/**
  * Apply the current page size configuration to the view
  */
		_applyPageSize: function _applyPageSize() {
			var layoutPositioning = this._getLayoutPositioning();
			if (layoutPositioning === 'absolute') {
				var pageSize = this.model.getValueFromSelfOrParent('pageSize');
				this._setAbsolutePageSize(pageSize);
			} else if (layoutPositioning === 'relative') {
				var _pageSize = this.model.getValueFromSelfOrParent('pageSize');
				this._setRelativeAspectRatio(_pageSize);
			}
		},


		/**
  * Clear page size settings from the view
  */
		_clearPageSize: function _clearPageSize(layoutPos) {
			var layoutPositioning = layoutPos || this._getLayoutPositioning();
			if (layoutPositioning === 'absolute') {
				this.$el.css({ width: '', height: '' });
			} else if (layoutPositioning === 'relative') {
				this._removeDynamicStyles(ASPECT_RATIO_STYLE_ID);
			}
		},
		_getLayoutPositioning: function _getLayoutPositioning() {
			return this.model.getLayoutPositioning(false);
		},
		_onChangePageSize: function _onChangePageSize() {
			var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			// Remove previous page size remnants from the consumeView
			if (this.$el.is(':visible')) {
				this._clearPageSize(payload.prevValue);
				this._applyPageSize();
			}
		},
		_onFitPage: function _onFitPage() {
			if (this.$el.is(':visible')) {
				this._setPageFitStyling();
				this._onChangePageSize();
			}

			this.onResize();
		},
		_onChangeLayoutPositioning: function _onChangeLayoutPositioning(payload) {
			this._clearPageSize(payload.prevValue);

			if (this.$el.is(':visible')) {
				this._setPageLayoutStyling();
				this._setPageFitStyling();
				// Remove previous page size remnants
				this._applyPageSize();
			}

			this.onResize();
		},
		_setPageFitStyling: function _setPageFitStyling() {
			var isRelative = this._getLayoutPositioning() === 'relative';
			var fitPage = isRelative && this.getFitPage();
			this.$el.toggleClass('fitToPage', fitPage);
		},
		_setPageLayoutStyling: function _setPageLayoutStyling() {
			var isRelative = this._getLayoutPositioning() === 'relative';
			this.$el.toggleClass('templateBox', isRelative);
		},
		_setAbsolutePageSize: function _setAbsolutePageSize(pageSize) {
			this.$el.width(pageSize.width);
			this.$el.height(pageSize.height);
		},
		_setRelativeAspectRatio: function _setRelativeAspectRatio(pageSize) {
			this.aspectRatio = pageSize.height / pageSize.width;

			var fitPage = this.getFitPage();
			if (fitPage) {
				this._addAspectRatioForFitToPage();
			} else {
				// Fit to Width
				this._createStyleNode('.aspectRatio_default:before { padding-top:' + this.aspectRatio * 100 + '%; }', ASPECT_RATIO_STYLE_ID);
			}
		},


		onResize: function onResize() {
			if (this.$el.is(':visible')) {
				var fitPage = this.getFitPage();
				if (fitPage) {
					this._addAspectRatioForFitToPage();
				}
			}
			GenericPage.inherited('onResize', this, arguments);
		},

		_addAspectRatioForFitToPage: function _addAspectRatioForFitToPage() {
			var size = { 'height': this.$el.parent().height(), 'width': this.$el.parent().width() };
			var style = '.page.pagecontainer .pagegenericPage { width: ' + size.width + 'px; height:' + this.aspectRatio * size.width + 'px; max-height: ' + size.height + 'px; max-width:' + 1 / this.aspectRatio * size.height + 'px;}';
			this._createStyleNode(style, ASPECT_RATIO_STYLE_ID);
		},

		_createStyleNode: function _createStyleNode(styles, stylesId) {
			var dynamicAspectRatioStyle = $('#' + stylesId).html();
			if (dynamicAspectRatioStyle !== styles) {
				this._removeDynamicStyles(stylesId);

				var styleNode = $('<style class=\'dashboardLayoutStyles\' type="text/css" id="' + stylesId + '"></style>');
				styleNode.html(styles);
				styleNode.appendTo('head');
			}
		},
		_removeDynamicStyles: function _removeDynamicStyles(stylesId) {
			$('#' + stylesId).remove();
		}
	});

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