+ search box in Main menu

SE/se-lib/TableAjax.php.p5UI__selected.js

@@ -187,7 +187,7 @@ var P5UI__TableAjaxSelectedInfo = createReactClass({
 	renderToolsBtn: function () {
 		if (!this.state.totalSelected) return null;
 		if (!this.props.tools || !Object.keys(this.props.tools).length) return null;
-		DBG1 && console.log('DBG::P5UI__TableAjaxSelectedInfo::renderTools (ns:' + this.props.namespace + ')', { props: this.props, state: this.state });
+		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::renderTools (ns:' + this.props.namespace + ')', { props: this.props, state: this.state });
 		return h('a', {
 			className: "btn btn-xs btn-default dropdown-toggle",
 			onClick: this.handleToggle,
@@ -211,7 +211,7 @@ var P5UI__TableAjaxSelectedInfo = createReactClass({
 
 		return h('ul', { ref: this.makeDropdownRef, className: "dropdown-menu" }, Object.keys(tools).map(function (idTool) {
 			var func = tools[idTool];
-			console.log('DBG: render tool', { func });
+			DBG && console.log('DBG: render tool', { func });
 			// baseLink: "index.php?_route=UrlAction_BiallProduktyPlikiSyncSelected"
 			// cell_id_params: []
 			// ico: "glyphicon glyphicon-share"

SE/static/p5UI/initP5MainMenuDropdown.js

@@ -38,7 +38,7 @@ function makeRenderDropdownListItem(grouped, data) {
 					'<ul class="dropdown-menu">' +
 						grouped.menuTreeNs[baseNs].map(function (subItemNs) {
 							var subItem = data.objects[ grouped.mapNsToIdx[subItemNs] ]
-							return '<li>' +
+							return '<li data-id="' + subItem.id + '">' +
 									'<a href=\"index.php?_route=ViewTableAjax&namespace=' + subItem.namespace + '\" title="' + renderTitle(subItem) + '">' +
 										renderStar(subItem.id, data.idsBookmarks) +
 										' ' + renderLabel(subItem) +
@@ -48,7 +48,7 @@ function makeRenderDropdownListItem(grouped, data) {
 						}).join("\n") +
 					'</ul>' +
 				'</li>' + "\n"
-			:	'<li>' +
+			:	'<li data-id="' + item.id + '">' +
 					'<a href=\"index.php?_route=ViewTableAjax&namespace=' + item.namespace + '\" title="' + renderTitle(item) + '">' +
 						renderStar(item.id, data.idsBookmarks) +
 						' ' + renderLabel(item) +
@@ -58,7 +58,7 @@ function makeRenderDropdownListItem(grouped, data) {
 	}
 }
 
-function renderP5MainMenuDropdown(data, idSubMenu) {
+function renderP5MainMenuDropdown(data) {
 	DBG && console.log('DBG:renderP5MainMenuDropdown data.objects', data.objects)
 	var grouped = data.objects.reduce(function (ret, item, idx) {
 		ret.mapNsToIdx[ item.namespace ] = idx
@@ -136,10 +136,13 @@ function renderP5MainMenuDropdown(data, idSubMenu) {
 
 	DBG && console.log('DBG:renderP5MainMenuDropdown grouped', { grouped, labels, groupeByLabel })
 
+	return nodesGroupedByLabel;
+
+	// var jqDropdownMenu = jQuery('#' + idSubMenu)
+	// jqDropdownMenu.empty()
+	// jqDropdownMenu.append(searchBox);
+	// jqDropdownMenu.append(nodesGroupedByLabel);
 
-	var jqDropdownMenu = jQuery('#' + idSubMenu)
-	jqDropdownMenu.empty()
-	jqDropdownMenu.append(nodesGroupedByLabel);
 	// var liNodes = Object.keys(grouped.menuTreeNs).map(function (baseNs) {
 	// 	var item = (baseNs in grouped.mapNsToIdx)
 	// 		?	data.objects[ grouped.mapNsToIdx[baseNs] ]
@@ -177,29 +180,167 @@ function renderP5MainMenuDropdown(data, idSubMenu) {
 	// jqDropdownMenu.append(liNodes);
 }
 
-function initP5MainMenuDropdown( btnNode, idSubMenu ) {
+function initP5MainMenuDropdown( btnNode, idSubMenu ) { // @usage: onClick="return initP5MainMenuDropdown(this, 'SE-menu-tables')"
 	DBG && console.log('DBG:initP5MainMenuDropdown({idSubMenu: '+idSubMenu+'})');
 	if (!btnNode._initialized) {
 		var jqDropdownTrigger = jQuery(btnNode)
 		var jqDropdownMenu = jQuery('#' + idSubMenu)
 		var jqDropdownParent = jqDropdownMenu.parent()
-		var rerenderDropdown = (function (global, idSubMenu) {
+		var idSearchBoxNode = 'idSubMenu_searchBox';
+		var rerenderDropdown = (function (global, idSubMenu, jqDropdownMenu, jqDropdownTrigger) {
 			return function (data) {
 				DBG && console.log('DBG renderP5MainMenuDropdown', {data, idSubMenu});
-				renderP5MainMenuDropdown(data, idSubMenu);
+
+				var query = '';
+				var searchBox = document.createElement('div')
+				searchBox.setAttribute('style', "padding:12px 20px");
+				{
+					var searchBox_group = document.createElement('div')
+					searchBox_group.setAttribute('class', "input-group");
+					{
+						searchBox_group_icon = document.createElement('span')
+						searchBox_group_icon.setAttribute('class', "input-group-addon");
+						searchBox_group_icon.innerHTML = '<i class="glyphicon glyphicon-search" title="Szukaj"></i>';
+						searchBox_group.appendChild(searchBox_group_icon)
+					}
+					{
+						searchBox_group_input = document.createElement('input')
+						searchBox_group_input.setAttribute('type', "text");
+						searchBox_group_input.setAttribute('class', "form-control");
+						searchBox_group_input.setAttribute('value', query);
+						searchBox_group_input.setAttribute('id', idSearchBoxNode);
+						searchBox_group_input.setAttribute('autofocus', "autofocus");
+						// onChange: function (fieldName, value) {
+						// 	priv.options.filterStore.dispatch(priv.options.filterActions.searchBox_delayFilter(fieldName, value));
+						// }
+						jQuery(searchBox_group_input).on('keyup', function (event) {
+							event.preventDefault()
+							event.stopPropagation()
+							searchBox_delayFilter(makeMainMenuFilterCallback(jqDropdownMenu, jqDropdownTrigger), event.target.value)
+						})
+						searchBox_group.appendChild(searchBox_group_input)
+					}
+					searchBox.appendChild(searchBox_group)
+
+					jQuery(searchBox).on('click', function (event) {
+						DBG && console.log("DBG:searchBox.on(click) ...")
+						event.preventDefault()
+						event.stopPropagation()
+					})
+				}
+
+				jqDropdownMenu.empty()
+				jqDropdownMenu.append(searchBox);
+				jqDropdownMenu.append(renderP5MainMenuDropdown(data));
 			}
-		})(global, idSubMenu);
+		})(global, idSubMenu, jqDropdownMenu, jqDropdownTrigger);
 
 		global.p5UI__MenuStore.subscribe(rerenderDropdown)
 
-		jqDropdownTrigger.attr('data-toggle', 'dropdown') // is required by bootstrap dorpdown.js evenf if is called via js
+		jqDropdownTrigger.attr('data-toggle', 'dropdown') // is required by bootstrap dorpdown.js even if is called via js
+		jqDropdownParent.on('shown.bs.dropdown', function () {
+			// DBG && console.log("DBG:Main menu:shown.bs.dropdown")
+			jQuery('#' + idSearchBoxNode).focus()
+		})
+		jqDropdownParent.on('hidden.bs.dropdown', function () {
+			// DBG && console.log("DBG:Main menu:hidden.bs.dropdown")
+		})
 
 		global.p5UI__MenuStore.forceUpdate()
 
 		jQuery(btnNode).dropdown()
 	}
-	// btnNode._initialized = true // TODO: DBG TEST
+	btnNode._initialized = true // TODO: DBG TEST
 	return true;
 }
 
+function menuStore__getObjectById(id) {
+	var allData = global.p5UI__MenuStore.getData()
+	if (!allData || !allData.objects) return null;
+	for (var i = 0, l = allData.objects.length; i < l; i++) {
+		var itemObj = allData.objects[i]
+		if (itemObj.id === id) return itemObj;
+	}
+	return null;
+}
+function searchBox__isStringMatch(str, query) {
+	// TODO: split query for words
+	return (-1 !== str.toLowerCase().search(query.toLowerCase()));
+}
+function searchBox__isMenuObjectMatch(itemObj, query) {
+	if (!itemObj) return false;
+	if (itemObj.label && searchBox__isStringMatch(itemObj.label, query)) return true;
+	if (itemObj.name && searchBox__isStringMatch(itemObj.name, query)) return true;
+	if (itemObj.opis && searchBox__isStringMatch(itemObj.opis, query)) return true;
+	if (itemObj.namespace && searchBox__isStringMatch(itemObj.namespace, query)) return true;
+	// if (itemObj.desc && searchBox__isStringMatch(itemObj.desc, query)) return true;
+	// if (itemObj.short_label && searchBox__isStringMatch(itemObj.short_label, query)) return true;
+	// if (itemObj.id && searchBox__isStringMatch(itemObj.id, query)) return true;
+	return false;
+}
+function searchBox__isMenuItemMatch(node, query) {
+	DBG && console.log("DBG:Main menu:searchBox__isMenuItemMatch", { query: query, label: jQuery(node).children('a').text(), node: node })
+	if (node.hasAttribute('data-id')) {
+		var id = parseInt(node.getAttribute('data-id'));
+		var itemObj = menuStore__getObjectById(id);
+		return searchBox__isMenuObjectMatch(itemObj, query);
+	}
+	if (node.hasChildNodes()) {
+		{
+			var groupItemLabel = jQuery(node).children('a').text()
+			if (searchBox__isStringMatch(groupItemLabel, query)) return true;
+		}
+
+		// DBG && console.log("DBG:Main menu:searchBox__isMenuItemMatch: loop start...", { query: query, label: jQuery(node).children('a').text(), node: node })
+		for (var i = 0, l = node.childNodes.length; i < l; i++) {
+			if ("UL" === node.childNodes[i].tagName) {
+				// DBG && console.log("DBG:Main menu:searchBox__isMenuItemMatch: loop UL ", { query: query, label: jQuery(node).children('a').text(), node: node })
+				for (var j = 0, l = node.childNodes[i].childNodes.length; j < l; j++) {
+					if ("LI" === node.childNodes[i].childNodes[j].tagName) {
+						// DBG && console.log("DBG:Main menu:searchBox__isMenuItemMatch: loop UL > LI ", { query: query, label: jQuery(node).children('a').text(), node: node })
+						if (searchBox__isMenuItemMatch(node.childNodes[i].childNodes[j], query)) {
+							return true;
+						}
+					}
+				}
+				break;
+			}
+		}
+	}
+	return false;
+}
+
+function makeMainMenuFilterCallback(jqDropdownMenu, jqDropdownTrigger) {
+	return function (query) {
+		DBG && console.log("DBG:Main menu:makeMainMenuFilterCallback", { query: query, jqDropdownMenu, jqDropdownTrigger })
+
+		jqDropdownMenu.children('li').each(function (idx, node) {
+			node.style.display = "list-item";
+		})
+		if (!query || query.length < 3) return;
+
+		jqDropdownMenu.children('li').each(function (idx, node) {
+			// if (node.style.display === "none") node.style.display = "";
+			var id = (node.hasAttribute('data-id')) ? parseInt(node.getAttribute('data-id')) : null;
+			var itemObj = (id) ? menuStore__getObjectById(id) : null;
+			var isMatch = searchBox__isMenuItemMatch(node, query)
+			DBG && console.log("DBG:Main menu:makeMainMenuFilterCallback:loop", { isMatch: isMatch, id: id, itemObj: itemObj, display: node.style.display, node: node })
+
+			node.style.display = isMatch ? "list-item" : "none";
+		})
+	}
+}
+
+var _config_delay_value = 450;
+var _config_delay_timeout = null;
+function searchBox_delayFilter(callback, value) {
+	// DBG && console.log('DBG:searchBox:delayFilter', { value });
+	if (_config_delay_timeout) clearTimeout(_config_delay_timeout)
+
+	_config_delay_timeout = setTimeout(function () {
+		DBG && console.log("DBG:Main menu:delayFilter", { value: value })
+		callback(value)
+	}, _config_delay_value)
+}
+
 global.initP5MainMenuDropdown = initP5MainMenuDropdown