@neovici/cosmoz-treenode-navigator 3.0.8 → 4.0.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [4.0.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.1.1...v4.0.0) (2022-07-05)
+
+
+### Code Refactoring
+
+* **migration:** index.html -  Remove formatting changes ([c12af88](https://github.com/neovici/cosmoz-treenode-navigator/commit/c12af889c5b4f5f3b191538e2280c4b29b185b3e))
+
+
+### BREAKING CHANGES
+
+* **migration:** migration to haunted.js and Lit
+
+## [3.1.1](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.1.0...v3.1.1) (2022-06-02)
+
+
+### Bug Fixes
+
+* **chips:** scrollbar for many chips ([dc68de6](https://github.com/neovici/cosmoz-treenode-navigator/commit/dc68de694ebedc8a78b4df8ecdf13d108a82f1f8))
+
+# [3.1.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.0.8...v3.1.0) (2021-12-07)
+
+
+### Features
+
+* add button and icon slots ([d7ea96d](https://github.com/neovici/cosmoz-treenode-navigator/commit/d7ea96dc06bf01e3dc33cbf76fa523524d67ba2c))
+
 ## [3.0.8](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.0.7...v3.0.8) (2021-10-17)
 
 

package/cosmoz-treenode-button-view.js

@@ -1,5 +1,6 @@
 import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-button/paper-button';
+import '@polymer/iron-icons/iron-icons';
 
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce';
 import { timeOut } from '@polymer/polymer/lib/utils/async';
@@ -12,6 +13,7 @@ import { Tree } from '@neovici/cosmoz-tree';
 import { translatable } from '@neovici/cosmoz-i18next';
 
 import './cosmoz-treenode-navigator';
+import { getNode, getTreePathParts } from './helpers';
 
 /**
 	`cosmoz-treenode-navigator`
@@ -23,92 +25,144 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	/* eslint-disable-next-line max-lines-per-function */
 	static get template() {
 		return html`
-		<style>
-			.actions { display: flex; }
-			.open { flex: auto; }
-			.pathToNode {
-				max-width: 320px;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				direction: rtl;
-				text-align: left;
-			}
-			/* Safari only css fix */
-			@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {
-				.pathToNode span { display: inline-block;}
-			}}
+			<style>
+				.actions {
+					display: flex;
+				}
+				.open {
+					flex: auto;
+				}
+				.pathToNode {
+					max-width: 320px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					direction: rtl;
+					text-align: left;
+				}
+				/* Safari only css fix */
+				@media not all and (min-resolution: 0.001dpcm) {
+					@supports (-webkit-appearance: none) {
+						.pathToNode span {
+							display: inline-block;
+						}
+					}
+				}
 
-			#chips {
-				display: flex;
-				flex-wrap: wrap;
-				max-width: 90%;
-				padding: 20px;
-			}
-			.chip {
-				border-radius: 500px;
-				background-color: #e0e0e0;
-				margin: 1px 4px 1px 0;
-				white-space: nowrap;
-				overflow: hidden;
-				display: flex;
-				align-items: center;
-			}
-			.chip > span {
-				color: #424242;
-				margin-left: 10px;
-				font-size: 13px;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-			.chip iron-icon {
-				margin: 2px 4px;
-				color: #cdcdcd;
-				background-color: #a6a6a6;
-				border-radius: 500px;
-				cursor: pointer;
-				min-width: 16px;
-				width: 16px;
-				min-height: 16px;
-				height: 16px;
-			}
+				#chips {
+					display: flex;
+					flex-wrap: wrap;
+					max-width: 90%;
+					padding: 20px;
+					overflow-y: auto;
+					max-height: 30vh;
+				}
+				.chip {
+					border-radius: 500px;
+					background-color: #e0e0e0;
+					margin: 1px 4px 1px 0;
+					white-space: nowrap;
+					overflow: hidden;
+					display: flex;
+					align-items: center;
+				}
+				.chip > span {
+					color: #424242;
+					margin-left: 10px;
+					font-size: 13px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+				.chip iron-icon {
+					margin: 2px 4px;
+					color: #cdcdcd;
+					background-color: #a6a6a6;
+					border-radius: 500px;
+					cursor: pointer;
+					min-width: 16px;
+					width: 16px;
+					min-height: 16px;
+					height: 16px;
+				}
 
-			#dialogTree {
-				min-width: 250px !important;
-				width: 450px;
-			}
-		</style>
-		<div class="actions">
-			<paper-button class="open" raised on-click="openDialogTree" title="[[ buttonText ]]">
-				<div class="pathToNode">&lrm;<span>[[ buttonText ]]</span></div>
-			</paper-button>
-			<paper-icon-button icon="clear" on-click="reset" hidden$="[[ !_enableReset(nodePath, noReset) ]]"></paper-icon-button>
-		</div>
-		<template is="dom-if" if="[[ _showSelectedNodes(multiSelection, selectedNodes.length) ]]">
-			<div id="chips" class="row">
-				<template is="dom-repeat" items="[[ selectedNodes ]]">
-					<div class="chip"><span>[[ _getChipText(item, tree) ]]</span><iron-icon icon="clear" on-click="_clearItemSelection"></iron-icon></div>
-				</template>
+				#dialogTree {
+					min-width: 250px !important;
+					width: 450px;
+				}
+			</style>
+			<div class="actions">
+				<paper-button
+					part="button"
+					class="open"
+					raised
+					on-click="openDialogTree"
+					title="[[ buttonText ]]"
+				>
+					<div class="pathToNode">&lrm;<span>[[ buttonText ]]</span></div>
+				</paper-button>
+				<paper-icon-button
+					part="clear"
+					icon="clear"
+					on-click="reset"
+					hidden$="[[ !_enableReset(nodePath, noReset) ]]"
+				></paper-icon-button>
 			</div>
-		</template>
-
-		<cosmoz-dialog id="dialogTree" class="treeDialog" on-iron-overlay-opened="focusSearch" modal prerender>
-			<template>
-				<h2>[[ dialogText ]]</h2>
-				<cosmoz-treenode-navigator id="treeNavigator" class="no-padding" tree="[[ tree ]]" selected-node="{{ selectedNode }}"
-					on-data-plane-changed="refit" highlighted-node-path="{{ highlightedNodePath }}"
-					search-placeholder="[[ searchPlaceholder ]]" search-global-placeholder="[[ searchGlobalPlaceholder ]]"
-					search-min-length="[[ searchMinLength ]]" node-path="{{ nodePath }}" nodes-on-node-path="{{ nodesOnNodePath }}"
-					on-node-dblclicked="_selectNodeAndCloseDialog">
-					<slot></slot>
-				</cosmoz-treenode-navigator>
-				<div class="buttons">
-					<paper-button disabled="[[!highlightedNodePath]]" dialog-confirm autofocus on-click="selectNode">[[ _('Select', t) ]]</paper-button>
-					<paper-button dialog-dismiss>[[ _('Cancel', t) ]]</paper-button>
+			<template
+				is="dom-if"
+				if="[[ _showSelectedNodes(multiSelection, selectedNodes.length) ]]"
+			>
+				<div id="chips" class="row">
+					<template is="dom-repeat" items="[[ selectedNodes ]]">
+						<div class="chip">
+							<span>[[ _getChipText(item, tree) ]]</span
+							><iron-icon
+								icon="clear"
+								on-click="_clearItemSelection"
+							></iron-icon>
+						</div>
+					</template>
 				</div>
 			</template>
-		</cosmoz-dialog>
-`;
+
+			<cosmoz-dialog
+				id="dialogTree"
+				class="treeDialog"
+				on-iron-overlay-opened="focusSearch"
+				modal
+				prerender
+			>
+				<template>
+					<h2>[[ dialogText ]]</h2>
+					<cosmoz-treenode-navigator
+						id="treeNavigator"
+						class="no-padding"
+						tree="[[ tree ]]"
+						selected-node="{{ selectedNode }}"
+						on-data-plane-changed="refit"
+						highlighted-node-path="{{ highlightedNodePath }}"
+						search-placeholder="[[ searchPlaceholder ]]"
+						search-global-placeholder="[[ searchGlobalPlaceholder ]]"
+						search-min-length="[[ searchMinLength ]]"
+						node-path="{{ nodePath }}"
+						nodes-on-node-path="{{ nodesOnNodePath }}"
+						on-node-dblclicked="_selectNodeAndCloseDialog"
+						on-select-node="selectNode"
+					>
+						<slot></slot>
+					</cosmoz-treenode-navigator>
+					<div class="buttons">
+						<paper-button
+							disabled="[[!highlightedNodePath]]"
+							dialog-confirm
+							autofocus
+							on-click="selectNode"
+							>[[ _('Select', t) ]]</paper-button
+						>
+						<paper-button dialog-dismiss>[[ _('Cancel', t) ]]</paper-button>
+					</div>
+				</template>
+			</cosmoz-dialog>
+		`;
 	}
 
 	static get is() {
@@ -118,20 +172,19 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	/* eslint-disable-next-line max-lines-per-function */
 	static get properties() {
 		return {
-
 			multiSelection: {
 				type: Boolean,
 				value: false
 			},
 			/*
-			* The main node structure
-			*/
+			 * The main node structure
+			 */
 			tree: {
 				type: Tree
 			},
 			/*
-			* Currently selected node object
-			*/
+			 * Currently selected node object
+			 */
 			selectedNode: {
 				type: Object,
 				value() {
@@ -155,14 +208,14 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 				value: false
 			},
 			/*
-			* Placeholder for the search field
-			*/
+			 * Placeholder for the search field
+			 */
 			searchPlaceholder: {
 				type: String
 			},
 			/*
-			* Placeholder for button text
-			*/
+			 * Placeholder for button text
+			 */
 			buttonTextPlaceholder: {
 				type: String,
 				computed: 'getButtonTextPlaceholder(multiSelection)'
@@ -174,42 +227,44 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			},
 
 			/*
-			* The path of the selected node
-			*/
+			 * The path of the selected node
+			 */
 			nodePath: {
 				type: String,
 				notify: true
 			},
 			/*
-			* The nodes on the path of the selected node
-			*/
+			 * The nodes on the path of the selected node
+			 */
 			nodesOnNodePath: {
 				type: Array
 			},
 			/*
-			* Text displayed when local search has finished
-			* to suggest a search on the entire tree
-			*/
+			 * Text displayed when local search has finished
+			 * to suggest a search on the entire tree
+			 */
 			searchGlobalPlaceholder: {
-				type: String
+				type: String,
+				value: 'Click to search again but globally.'
 			},
 			/*
-			* Settable text for dialog title.
-			*/
+			 * Settable text for dialog title.
+			 */
 			dialogText: {
 				type: String,
 				value: 'Search or navigate to chosen destination'
 			},
 			/*
-			* Minimum length before an search
-			* starts.
-			*/
+			 * Minimum length before an search
+			 * starts.
+			 */
 			searchMinLength: {
-				type: Number
+				type: Number,
+				value: 1
 			},
 			/*
-			* Path string of highlighted (focused) node
-			*/
+			 * Path string of highlighted (focused) node
+			 */
 			highlightedNodePath: {
 				type: String
 			}
@@ -228,6 +283,11 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		this.splice('selectedNodes', selectedIndex, 1);
 		// ... so we must prevent further propagation of this event, because its source is now invalid.
 		// (This has caused troubles in app-drawer-layout click event handler).
+
+		if (!this.selectedNodes.length) {
+			this.reset();
+		}
+
 		event.preventDefault();
 		event.stopPropagation();
 	}
@@ -237,7 +297,9 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 * @returns {string} Text label.
 	 */
 	getButtonTextPlaceholder(multiSelection) {
-		return multiSelection ? this._('Select a node') : this._('No selection made');
+		return multiSelection
+			? this._('Select a node')
+			: this._('No selection made');
 	}
 	/**
 	 * Whether the reset button should be enabled or not.
@@ -261,7 +323,10 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		if (!Array.isArray(pathParts) || pathParts.length === 0) {
 			return placeholder;
 		}
-		return pathParts.filter(n => n).map(part => part[this.tree.searchProperty]).join(' / ');
+		return pathParts
+			.filter(n => n)
+			.map(part => part[this.tree.searchProperty])
+			.join(' / ');
 	}
 	/**
 	 * Get text from a node to set on a node chip.
@@ -291,7 +356,10 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 */
 	reset() {
 		this.nodePath = '';
+		this.selectedNode = {};
+		this.nodesOnNodePath = [];
 		this.selectedNodes = [];
+		this.highlightedNodePath = '';
 	}
 	/**
 	 * Select the node in the treenode navigator.
@@ -299,9 +367,25 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 */
 	selectNode() {
 		// nodePath selects the node, without it no selectedNode
-		this.nodePath = this.highlightedNodePath;
+
+		this.selectedNode = getNode(
+			this.highlightedNodePath || this.nodePath,
+			this.tree
+		);
+		if (this.highlightedNodePath) {
+			this.nodePath = this.highlightedNodePath;
+		}
+		this.nodesOnNodePath = getTreePathParts(
+			this.highlightedNodePath || this.nodePath,
+			this.tree
+		);
+
 		if (this.multiSelection) {
-			if (!this.selectedNodes.some(node => node.pathLocator === this.highlightedNodePath)) {
+			if (
+				!this.selectedNodes.some(
+					node => node.pathLocator === this.highlightedNodePath
+				)
+			) {
 				this.push('selectedNodes', this.selectedNode);
 			}
 			this.nodePath = '';
@@ -323,7 +407,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 * @returns {boolean} Whether the selected nodes container should be visible or not.
 	 */
 	_showSelectedNodes(multiSelection, selectedNodesLength) {
-		return	multiSelection && selectedNodesLength > 0;
+		return multiSelection && selectedNodesLength > 0;
 	}
 	/**
 	 * Callback event handler to refit the treenode navigator dialog when
@@ -331,11 +415,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 * @returns {void}
 	 */
 	refit() {
-		this._debouncer = Debouncer.debounce(this._debouncer,
+		this._debouncer = Debouncer.debounce(
+			this._debouncer,
 			timeOut.after(50), // 5 was enough during test
 			() => {
 				this.$.dialogTree.fit();
-			});
+			}
+		);
 	}
 }
 customElements.define(CosmozTreenodeButtonView.is, CosmozTreenodeButtonView);