Source: site-navigation-item-selector-web/src/main/resources/META-INF/resources/js/SelectSiteNavigationMenuItem.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import 'frontend-taglib/cards_treeview/CardsTreeview.es';
  16. import 'metal';
  17. import 'metal-component';
  18. import {PortletBase} from 'frontend-js-web';
  19. import Soy from 'metal-soy';
  20. import {Config} from 'metal-state';
  22. import templates from './SelectSiteNavigationMenuItem.soy';
  24. /**
  25.  * SelectSiteNavigationMenuItem
  26.  *
  27.  * This component shows a list of available site navigation menu item to select
  28.  * and allows to filter them by searching.
  29.  */
  31. class SelectSiteNavigationMenuItem extends PortletBase {
  32. 	/**
  33. 	 * Filters deep nested nodes based on a filtering value
  34. 	 *
  35. 	 * @type {Array.<Object>} nodes
  36. 	 * @type {String} filterVAlue
  37. 	 * @protected
  38. 	 */
  40. 	filterSiblingNodes_(nodes, filterValue) {
  41. 		let filteredNodes = [];
  43. 		nodes.forEach(node => {
  44. 			if (node.name.toLowerCase().indexOf(filterValue) !== -1) {
  45. 				filteredNodes.push(node);
  46. 			}
  48. 			if (node.children) {
  49. 				filteredNodes = filteredNodes.concat(
  50. 					this.filterSiblingNodes_(node.children, filterValue)
  51. 				);
  52. 			}
  53. 		});
  55. 		return filteredNodes;
  56. 	}
  58. 	/**
  59. 	 * Searchs for nodes by name based on a filtering value
  60. 	 *
  61. 	 * @param {!Event} event
  62. 	 * @protected
  63. 	 */
  65. 	searchNodes_(event) {
  66. 		if (!this.originalNodes) {
  67. 			this.originalNodes = this.nodes;
  68. 		} else {
  69. 			this.nodes = this.originalNodes;
  70. 		}
  72. 		const filterValue = event.delegateTarget.value.toLowerCase();
  74. 		if (filterValue !== '') {
  75. 			this.viewType = 'flat';
  76. 			this.nodes = this.filterSiblingNodes_(this.nodes, filterValue);
  77. 		} else {
  78. 			this.viewType = 'tree';
  79. 		}
  80. 	}
  82. 	/**
  83. 	 * Fires item selector save event on selected node change
  84. 	 *
  85. 	 * @param {!Event} event
  86. 	 * @protected
  87. 	 */
  89. 	selectedNodeChange_(event) {
  90. 		var node = event.newVal[0];
  92. 		if (node) {
  93. 			var data = {
  94. 				selectSiteNavigationMenuItemId: node.id,
  95. 				selectSiteNavigationMenuItemName: node.name
  96. 			};
  98. 			Liferay.Util.getOpener().Liferay.fire(this.itemSelectorSaveEvent, {
  99. 				data
  100. 			});
  101. 		}
  102. 	}
  103. }
  105. SelectSiteNavigationMenuItem.STATE = {
  106. 	/**
  107. 	 * Event name to fire on node selection
  108. 	 * @type {String}
  109. 	 */
  111. 	itemSelectorSaveEvent: Config.string(),
  113. 	/**
  114. 	 * List of nodes
  115. 	 * @type {Array.<Object>}
  116. 	 */
  118. 	nodes: Config.array().required(),
  120. 	/**
  121. 	 * Theme images root path
  122. 	 * @type {String}
  123. 	 */
  125. 	pathThemeImages: Config.string().required(),
  127. 	/**
  128. 	 * Type of view to render. Accepted values are 'tree' and 'flat'
  129. 	 * @type {String}
  130. 	 */
  132. 	viewType: Config.string().value('tree')
  133. };
  135. Soy.register(SelectSiteNavigationMenuItem, templates);
  137. export default SelectSiteNavigationMenuItem;