analytics/webcontent/bi/js/gemini/dashboard/views/NavigationPickerView.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: Dashbaord
 *
 * (C) Copyright IBM Corp. 2017, 2019
 *
 * 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/core/View', '../../app/nls/StringResources', 'jquery', 'underscore', '../../lib/@waca/core-client/js/core-client/utils/Utils', './LayoutPickerView', '../../lib/@waca/core-client/js/core-client/ui/KeyCodes', 'text!./templates/NavigationPickerView.html'], function (View, stringResources, $, _, Utils, LayoutPickerView, KeyCodes, template) {

	var NavigationPickerView = View.extend({

		CUSTOM_TEMPLATE_PAGE_SIZE: 15,

		templateString: template,
		events: {
			'primaryaction div.templateItem': 'onNavModelTemplateSelect',
			'keydown div.navigationPicker': 'onKeyDown',
			'primaryaction .loadMoreButton': 'onLoadMoreTemplates'
		},

		$navPicker: null,

		init: function init(options) {
			NavigationPickerView.inherited('init', this, arguments);

			this._navTemplates = options.navTemplates;
			this._selectedNavModel = options.defaultTemplate;
			this._layoutPickerOptions = options.layoutPickerOptions;
			this._dashboardTemplatesApi = options.dashboardTemplatesApi;
			this._showContextMenu = options.showContextMenu;
			this._customTemplates = options.customTemplates;

			if (this._customTemplates && this._customTemplates.length) {
				var numInitialCustomTemplates = this._customTemplates.length - this.CUSTOM_TEMPLATE_PAGE_SIZE <= 0 ? this._customTemplates.length : this.CUSTOM_TEMPLATE_PAGE_SIZE;
				this._initialCustomTemplates = this._customTemplates.slice(0, numInitialCustomTemplates);
				this._hiddenCustomTemplates = this._customTemplates.slice(numInitialCustomTemplates, this._customTemplates.length);
			}

			this._action = options.action;
		},

		render: function render() {
			this.$el.empty();

			var html = this.dotTemplate({
				selectTemplateLabel: stringResources.get('selectTemplateLabel'),
				loadMoreLabel: stringResources.get('loadMoreLabel'),
				templates: this._navTemplates
			});
			this.$el.html(html);

			this.$navPicker = this.$el.find('.navigationPicker');
			if (this.layoutPickerView) {
				this.layoutPickerView.remove();
			}

			this.layoutPickerView = new LayoutPickerView({
				action: this.onSelectNavModel.bind(this),
				templateListing: this._layoutPickerOptions.templateListing,
				disableHeaderSection: this._layoutPickerOptions.disableHeaderSection,
				disableFooterSection: this._layoutPickerOptions.disableFooterSection,
				dashboardTemplatesApi: this._dashboardTemplatesApi,
				excludeTemplates: this._layoutPickerOptions.excludeTemplates,
				customTemplates: this._initialCustomTemplates,
				showContextMenu: this.onShowContextMenu.bind(this)
			});
			this.layoutPickerView.render();
			this.$('.layoutPicker').append(this.layoutPickerView.el);

			this._selectTemplate();

			// set icon - webfont or svg
			this.$el.find('.navIcon').each(function (index, item) {
				Utils.setIcon($(item), this._navTemplates[0].navModels[index].icon);
			}.bind(this));
		},

		remove: function remove() {
			if (this.layoutPickerView) {
				this.layoutPickerView.remove();
				this.layoutPickerView = null;
			}
			NavigationPickerView.inherited('remove', this, arguments);
		},

		setFocusOnFirstItem: function setFocusOnFirstItem() {
			var layoutTemplateItems = this.$el.find('.layoutTemplateItem');
			layoutTemplateItems[0].focus();
		},

		onShowContextMenu: function onShowContextMenu(template, pageX, pageY) {
			this._showContextMenu(template, pageX, pageY);
		},

		getSelectedNavModel: function getSelectedNavModel() {
			return this._selectedNavModel;
		},

		getSelectedLayoutSpec: function getSelectedLayoutSpec() {
			return this.layoutPickerView.getSelectedLayoutSpec();
		},

		onNavModelTemplateSelect: function onNavModelTemplateSelect(event) {
			this._selectedNavModel = event.currentTarget.dataset.id;
			this._selectTemplate();
		},

		onDeleteActionDone: function onDeleteActionDone(id) {
			this.layoutPickerView.onDeleteActionDone(id);
			if (!this._customTemplates || !this._customTemplates.length) {
				return;
			}
			this._customTemplates = this._customTemplates.filter(function (customTemplate) {
				return customTemplate.id !== id;
			});
			this._customTemplates.length === 0 && this._removeCustomTemplatesTab();
		},

		_removeCustomTemplatesTab: function _removeCustomTemplatesTab() {
			var navModels = this._navTemplates && this._navTemplates.length && this._navTemplates[0].navModels;
			if (!navModels || !navModels.length) {
				return;
			}
			this._navTemplates[0].navModels = this._navTemplates[0].navModels.filter(function (navModel) {
				return navModel.dataId !== 'custom';
			});
			this._selectedNavModel = this._navTemplates[0].navModels[0].dataId;
			this._selectTemplate();
			this.render();
		},

		onKeyDown: function onKeyDown(event) {
			var items = this.$navPicker.find('.templateItem');
			var focusedItem = this.$navPicker.find('.templateItem[tabindex=0]');
			var focusIndex = items.index(focusedItem);
			switch (event.keyCode) {
				case KeyCodes.DOWN_ARROW:
				case KeyCodes.RIGHT_ARROW:
					focusIndex++;
					if (focusIndex >= items.length) {
						focusIndex = items.length - 1;
					}
					break;
				case KeyCodes.UP_ARROW:
				case KeyCodes.LEFT_ARROW:
					focusIndex--;
					if (focusIndex < 0) {
						focusIndex = 0;
					}
					break;
				case KeyCodes.HOME:
					focusIndex = 0;
					break;
				case KeyCodes.END:
					focusIndex = items.length - 1;
					break;
				default:
					return; //For non-matched keys, stop processing immediately.
			}
			//Update tabindex and focus
			event.preventDefault();
			focusedItem.attr('tabindex', -1);
			items.eq(focusIndex).attr('tabindex', 0).focus();
		},

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

			return this.getSelectedLayoutSpec().then(function (_ref) {
				var layout = _ref.layout,
				    shim = _ref.shim;

				_this._action(layout, shim, _this._selectedNavModel);
			});
		},

		_selectTemplate: function _selectTemplate() {
			this.$navPicker.find('.templateItem').attr('aria-checked', false).attr('tabindex', -1).removeClass('selected');

			this.$navPicker.find('[data-id=' + this._selectedNavModel + ']').addClass('selected').attr('aria-checked', true).attr('tabindex', 0);

			var description = '';
			for (var i = 0; i < this._navTemplates[0].navModels.length; i++) {
				var template = this._navTemplates[0].navModels[i];
				if (template.dataId === this._selectedNavModel && template.description) {
					description = template.description;
					break;
				}
			}

			this.layoutPickerView.setNavigationTemplate(this._selectedNavModel, description);
			this._toggleLoadButton();
		},

		_toggleLoadButton: function _toggleLoadButton() {
			if (this._selectedNavModel === 'custom' && this._hiddenCustomTemplates.length != 0) {
				this.$('.loadMoreButton').show();
			} else {
				this.$('.loadMoreButton').hide();
			}
		},

		onLoadMoreTemplates: function onLoadMoreTemplates() {
			var numCustomTemplatesToShow = this._hiddenCustomTemplates.length - this.CUSTOM_TEMPLATE_PAGE_SIZE <= 0 ? this._hiddenCustomTemplates.length : this.CUSTOM_TEMPLATE_PAGE_SIZE;
			var customTemplatesToShow = this._hiddenCustomTemplates.slice(0, numCustomTemplatesToShow);
			this._hiddenCustomTemplates = this._hiddenCustomTemplates.slice(numCustomTemplatesToShow, this._hiddenCustomTemplates.length);
			this._toggleLoadButton();
			this.layoutPickerView.addMoreCustomTemplates(customTemplatesToShow);
		},

		getSelectedTemplate: function getSelectedTemplate() {
			return this.$navPicker.find('.templateItem.selected').first();
		}
	});

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