first commit

node_modules/@ztree/ztree_v3/demo/js/fuzzysearch.js

@@ -0,0 +1,129 @@
+/*
+ * email: bigablecat@hotmail.com
+ * Date: 2018-04-14
+ */
+
+/**
+ * @param zTreeId the ztree id used to get the ztree object
+ * @param searchField selector of your input for fuzzy search
+ * @param isHighLight whether highlight the match words, default true
+ * @param isExpand whether to expand the node, default false
+ * 
+ * @returns
+ */	
+ function fuzzySearch(zTreeId, searchField, isHighLight, isExpand){
+	var zTreeObj = $.fn.zTree.getZTreeObj(zTreeId);//get the ztree object by ztree id
+	if(!zTreeObj){
+		alert("fail to get ztree object");
+	}
+	var nameKey = zTreeObj.setting.data.key.name; //get the key of the node name
+	isHighLight = isHighLight===false?false:true;//default true, only use false to disable highlight
+	isExpand = isExpand?true:false; // not to expand in default
+	zTreeObj.setting.view.nameIsHTML = isHighLight; //allow use html in node name for highlight use
+	
+	var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]'; //js meta characters
+	var rexMeta = new RegExp(metaChar, 'gi');//regular expression to match meta characters
+	
+	// keywords filter function 
+	function ztreeFilter(zTreeObj,_keywords,callBackFunc) {
+		if(!_keywords){
+			_keywords =''; //default blank for _keywords 
+		}
+		
+		// function to find the matching node
+		function filterFunc(node) {
+			if(node && node.oldname && node.oldname.length>0){
+				node[nameKey] = node.oldname; //recover oldname of the node if exist
+			}
+			zTreeObj.updateNode(node); //update node to for modifications take effect
+			if (_keywords.length == 0) {
+				//return true to show all nodes if the keyword is blank
+				zTreeObj.showNode(node);
+				zTreeObj.expandNode(node,isExpand);
+				return true;
+			}
+			//transform node name and keywords to lowercase
+			if (node[nameKey] && node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase())!=-1) {
+				if(isHighLight){ //highlight process
+					//a new variable 'newKeywords' created to store the keywords information 
+					//keep the parameter '_keywords' as initial and it will be used in next node
+					//process the meta characters in _keywords thus the RegExp can be correctly used in str.replace
+					var newKeywords = _keywords.replace(rexMeta,function(matchStr){
+						//add escape character before meta characters
+						return '\\' + matchStr;
+					});
+					node.oldname = node[nameKey]; //store the old name  
+					var rexGlobal = new RegExp(newKeywords, 'gi');//'g' for global,'i' for ignore case
+					//use replace(RegExp,replacement) since replace(/substr/g,replacement) cannot be used here
+					node[nameKey] = node.oldname.replace(rexGlobal, function(originalText){
+						//highlight the matching words in node name
+						var highLightText =
+							'<span style="color: whitesmoke;background-color: darkred;">'
+							+ originalText
+							+'</span>';
+						return 	highLightText;					
+					});
+					zTreeObj.updateNode(node); //update node for modifications take effect
+				}
+				zTreeObj.showNode(node);//show node with matching keywords
+				return true; //return true and show this node
+			}
+			
+			zTreeObj.hideNode(node); // hide node that not matched
+			return false; //return false for node not matched
+		}
+		
+		var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //get all nodes that would be shown
+		processShowNodes(nodesShow, _keywords);//nodes should be reprocessed to show correctly
+	}
+	
+	/**
+	 * reprocess of nodes before showing
+	 */
+	function processShowNodes(nodesShow,_keywords){
+		if(nodesShow && nodesShow.length>0){
+			//process the ancient nodes if _keywords is not blank
+			if(_keywords.length>0){ 
+				$.each(nodesShow, function(n,obj){
+					var pathOfOne = obj.getPath();//get all the ancient nodes including current node
+					if(pathOfOne && pathOfOne.length>0){ 
+						//i < pathOfOne.length-1 process every node in path except self
+						for(var i=0;i<pathOfOne.length-1;i++){
+							zTreeObj.showNode(pathOfOne[i]); //show node 
+							zTreeObj.expandNode(pathOfOne[i],true); //expand node
+						}
+					}
+				});	
+			}else{ //show all nodes when _keywords is blank and expand the root nodes
+				var rootNodes = zTreeObj.getNodesByParam('level','0');//get all root nodes
+				$.each(rootNodes,function(n,obj){
+					zTreeObj.expandNode(obj,true); //expand all root nodes
+				});
+			}
+		}
+	}
+	
+	//listen to change in input element
+	$(searchField).bind('input propertychange', function() {
+		var _keywords = $(this).val();
+		searchNodeLazy(_keywords); //call lazy load
+	});
+
+	var timeoutId = null;
+  var lastKeyword = '';
+	// excute lazy load once after input change, the last pending task will be cancled  
+	function searchNodeLazy(_keywords) {
+		if (timeoutId) { 
+			//clear pending task
+			clearTimeout(timeoutId);
+		}
+		timeoutId = setTimeout(function() {
+      if (lastKeyword === _keywords) {
+        return;
+      }
+			ztreeFilter(zTreeObj,_keywords); //lazy load ztreeFilter function 
+			// $(searchField).focus();//focus input field again after filtering
+      lastKeyword = _keywords;
+		}, 500);
+	}
+}

node_modules/@ztree/ztree_v3/demo/js/keyboard_navigation.js

@@ -0,0 +1,284 @@
+/*
+ * JQuery zTree keyboard navigation extension
+ * zTree v3.5.42 or later
+ * http://www.xbrlquery.com/
+ *
+ * Copyright (c) 2019 Bill Seddon
+ *
+ * Licensed same as jquery - MIT License
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: 2020-02-18
+ */
+
+( function ($) 
+{
+	/**
+	 * Dummy function to provide a placeholder for the destroy function
+	 */
+	$.fn.zTreeKeyboardNavigationDestroy = function()
+	{
+	}
+
+	/**
+	 * Creates a function that adds keyboard navigation:
+	 * Home: home key (keycode 36)				Goes to the first root element is visible
+	 * End: end key (keycode 35)				Goes to the last leaf node and will expand nodes and scroll the element into view
+	 * Down: right cursor key (keycode 39)		Goes to the next visible node in the tree following the hierarchy
+	 * Next: down cursor key (keycode 40)		Goes to the next visible node at the same level
+	 * Up: up cursor key (keycode 37)			Goes to the prior visible node at the same level
+	 * Previous: left cursor key (keycode 38)	Goes to the prior visible node following the hierarchy
+	 * Toggle: space key (keycode 32)			Toggles the expand/collapse state of a parent node
+	 * @param {IxTreeObj} zTree
+	 * @param {string|JQuery<HTMLElement} element
+	 * @param {IJSON[]} selectedNodes
+	 */
+	$.fn.zTreeKeyboardNavigation = function(zTree, element, selectedNodes = null )
+		{
+			if (typeof element === 'string' || element instanceof String)
+			{
+				element = $(element);
+			}
+
+			var rootNodes = zTree.getNodes();
+			if ( ! rootNodes ) return;
+
+			var focusSelectedNode = function()
+			{
+				if( ( selectedNodes = zTree.getSelectedNodes() ) && selectedNodes.length )
+				{
+					$("#" + selectedNodes[0].tId ).focus();
+				}
+			}
+
+			// Clear the previous event handler (there may be none)
+			$.fn.zTreeKeyboardNavigationDestroy();
+
+			/**
+			 * Make it possible to destroy (remove the event handlers)
+			 */
+			$.fn.zTreeKeyboardNavigationDestroy = function()
+			{
+				$(element).off( 'keydown' );
+			}
+
+			$(element).on( 'keydown', function( e )
+				{
+					var selectedNodes = zTree.getSelectedNodes();
+					var selectedNode = selectedNodes.length ? selectedNodes[0] : null;
+
+					var processSpace = function()
+					{
+						// If there are no nodes or the selected node is not a parent, get out
+						if ( selectedNode && selectedNode.isParent )
+						{
+							// Toggle the node
+							zTree.expandNode( selectedNode, null, null, null, false );
+						}
+					}
+					
+					var processHome = function()
+					{
+						zTree.selectNode( rootNodes[0], false, true );
+					}
+
+					var processEnd = function()
+					{
+						var nodes = zTree.transformToArray(rootNodes);
+						// Select the last node
+						zTree.selectNode( nodes[ nodes.length - 1 ] );
+					}
+					
+					var processUp = function()
+					{
+						var priorNode;
+						if ( selectedNode )
+						{
+							priorNode = selectedNode.getPreNode();
+							if ( ! priorNode ) return;
+						}
+						else
+						{
+							processEnd();
+						}
+
+						if ( ! priorNode ) return;
+
+						zTree.selectNode( priorNode );
+					}
+
+					var processDown = function()
+					{
+						var nextNode;
+						if ( selectedNode )
+						{
+							nextNode = selectedNode.getNextNode();
+							if ( ! nextNode ) return;
+						}
+						else
+						{
+							processHome();
+						}
+
+						if ( ! nextNode ) return;
+
+						zTree.selectNode( nextNode );
+					}
+
+					var processOut = function()
+					{
+						if ( ! selectedNode ) return;
+
+						var parentNode = selectedNode.getParentNode();
+						var priorNode = selectedNode.getPreNode();
+						if ( ! parentNode && ! priorNode ) return; // Must have been the root node
+
+						if ( priorNode )
+						{
+							if ( priorNode.isParent )
+							{
+								// There is a prior node, now the the question is where is the last open node?
+								while ( priorNode )
+								{
+									if ( ! priorNode.isParent || ! priorNode.open || ! priorNode.children ) break;
+
+									priorNode = priorNode.children[ priorNode.children.length -1 ];
+								}
+
+								zTree.selectNode( priorNode );
+								return;
+							}
+							else
+							{
+								zTree.selectNode( priorNode );
+								return;
+							}
+						}
+
+						// Find the parent node with a valid prior sibling
+						if ( parentNode )
+						{
+							// This call should be silent otherwise (in my view a bug in) 
+							// selectNode causes the root node to blur
+							zTree.selectNode( parentNode, false, true );
+						}						
+					}
+
+					var processIn = function()
+					{
+						if ( ! selectedNode ) return;
+
+						if ( selectedNode.isParent && selectedNode.open && selectedNode.children )
+						{
+							zTree.selectNode( selectedNode.children[0] );
+							return;
+						}
+
+						var nextNode = selectedNode.getNextNode();
+						if ( nextNode )
+						{
+							zTree.selectNode( nextNode );
+						}
+						else
+						{
+							// Cannot be root if there is a selected node that is not a parent
+							var node = selectedNode;
+							// Find the parent node with a valid next sibling
+							while( node = node.getParentNode() )
+							{
+								var nextNode = node.getNextNode();
+								if ( nextNode )
+								{
+									zTree.selectNode( nextNode );
+									break;
+								}
+							}
+						}
+					}
+
+					var processLetter = function( keyCode )
+					{
+						if ( ! Array.from( {length: 26}, (v, i) => i + 65 ).includes( keyCode & 95 ) ) return false;
+
+						var nodes = zTree.transformToArray(rootNodes);
+						nodes = nodes.filter( node => 
+						{
+							return 'accesskey' in node &&  node.accesskey.length && ( node.accesskey.charCodeAt(0) & 95 ) == keyCode;
+						} );
+						
+						if ( ! nodes.length ) return false;
+						
+						var selectedNodes = zTree.getSelectedNodes();
+						if ( ! selectedNodes.length ) return false;
+
+						if ( selectedNodes[0] == nodes[0] ) return false;
+
+						zTree.selectNode( nodes[0] );
+
+						return true;
+					}
+
+					// console.log('before');
+					// console.log(document.activeElement);
+
+					switch ( e.keyCode )
+					{
+						case 32: /* Toggle parent nodes */
+							processSpace();
+							return;
+
+						case 36: /* Home - go to the root node */
+							processHome();
+							break;
+
+						case 35: /* End - go to the last node */ 
+							processEnd();
+							break;
+
+						case 33: /* PageUp */
+							// Do nothing
+							break;
+
+						case 34: /* PageDown */ 
+							// Do nothing
+							break;
+
+						case 37: /* Left */
+							processOut();
+							break;
+
+						case 38: /* Up */
+							processUp();
+							break;
+
+						case 39: /* Right */
+							processIn();
+							break;
+
+						case 40: /* Down */ 
+							processDown();
+							break;
+
+						default:
+							if ( ! processLetter( e.keyCode & 95 ) ) return;
+							break;
+					}
+
+					// console.log('after');
+					// console.log(document.activeElement);
+					focusSelectedNode();
+				} );
+
+			if ( selectedNodes && selectedNodes.length )
+			{
+				zTree.selectNode( selectedNodes[0] );
+				focusSelectedNode();
+			}
+			else
+			{
+			$(element).trigger({ type : 'keydown', which : 36, keyCode: 36 });
+			}
+
+		}
+
+} )(jQuery);