se/SE/static/p5UI/initP5MainMenuDropdown.js

if (!global.p5UI__MenuStore) throw 'Missing global.p5UI__MenuStore'
var DBG = DBG || 0
var DBG1 = 1

// TODO: mv to React: { state: { menu items, query } }

function renderLabel(item) {
	return (item.short_label !== item.desc)
		? item.short_label + ' <em>' + item.desc + '</em>'
		: item.short_label
	;
}
function renderTitle(item) {
	return (item.label !== item.desc)
		? item.label + ' (' + item.desc + ')'
		: item.label
	;
}
function renderStar(id, idsBookmarks) {
	return (-1 !== idsBookmarks.indexOf(id))
		? '<i class=\"bookmark-item-rem glyphicon glyphicon-star\" title=\"Usuń z ulubionych\" onClick=\"return p5BookmarksRemove(event, ' + id + ')\"></i>'
		: '<i class=\"bookmark-item-add glyphicon glyphicon-star-empty\" title=\"Dodaj do ulubionych\" onClick=\"return p5BookmarksAdd(event, ' + id + ')\"></i>'
	;
}

function makeRenderDropdownListItem(grouped, data) {
	return function renderDropdownListItem(baseNs) {
		var item = (baseNs in grouped.mapNsToIdx)
			?	data.objects[ grouped.mapNsToIdx[baseNs] ]
			:	data.objects[ grouped.mapNsToIdx[ grouped.menuTreeNs[baseNs][0] ] ]
		;
		DBG && console.log('DBG:renderP5MainMenuDropdown >> render loop', { baseNs, isInMap: (baseNs in grouped.mapNsToIdx), item, idx: [ grouped.mapNsToIdx[baseNs], grouped.menuTreeNs[baseNs][0] ] });

		return (grouped.menuTreeNs[baseNs].length > 1)
			?	'<li class="dropdown-submenu">' +
					'<a href=\"index.php?_route=ViewTableAjax&namespace=' + item.namespace + '\" title="' + renderTitle(item) + '">' +
						renderStar(item.id, data.idsBookmarks) +
						' ' + renderLabel(item) +
					'</a>' + "\n" +
					'<ul class="dropdown-menu">' +
						grouped.menuTreeNs[baseNs].map(function (subItemNs) {
							var subItem = data.objects[ grouped.mapNsToIdx[subItemNs] ]
							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) +
									'</a>' +
								'</li>'
							;
						}).join("\n") +
					'</ul>' +
				'</li>' + "\n"
			:	'<li data-id="' + item.id + '">' +
					'<a href=\"index.php?_route=ViewTableAjax&namespace=' + item.namespace + '\" title="' + renderTitle(item) + '">' +
						renderStar(item.id, data.idsBookmarks) +
						' ' + renderLabel(item) +
					'</a>' +
				'</li>' + "\n"
		;
	}
}

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
		var nsParts = item.namespace.split('/')
		var baseNs = nsParts.slice(0, 2).join('/')
		DBG && console.log('DBG:renderP5MainMenuDropdown >> reduce loop ', { nsParts, baseNs });
		if (!ret.menuTreeNs[baseNs]) ret.menuTreeNs[baseNs] = []
		ret.menuTreeNs[baseNs].push(item.namespace)
		return ret;
	}, { mapNsToIdx: {}, menuTreeNs: {} })
	DBG && console.log('DBG:renderP5MainMenuDropdown grouped', grouped)
	var renderDropdownListItem = makeRenderDropdownListItem(grouped, data)

	var labels = Object.keys(grouped.menuTreeNs).map(function (baseNs) {
		var item = (baseNs in grouped.mapNsToIdx)
			?	data.objects[ grouped.mapNsToIdx[baseNs] ]
			:	data.objects[ grouped.mapNsToIdx[ grouped.menuTreeNs[baseNs][0] ] ]
		;
		return {
			ns: baseNs,
			label: (item.short_label !== item.desc) ? item.short_label : item.desc,
		}
	});
	DBG && console.log('DBG:renderP5MainMenuDropdown labels', labels)
	labels.sort(function (item1, item2) {
		var l1 = item1.label.toLowerCase()
		var l2 = item2.label.toLowerCase()
		if (l1 < l2) { return -1; }
		if (l1 > l2) { return 1; }
		return 0
	})
	var groupeByLabel = labels.reduce(function (ret, item) {
		if (!ret.length) return [ { prefix: item.label, labels: [ item ] } ];

		var last = ret.pop()
		var labelLast = last.prefix.replace('_', ' ').split(" ")
		var labelItem = item.label.replace('_', ' ').split(" ")
		DBG && console.log('DBG:renderP5MainMenuDropdown TODO: group?', { last, item, labelLast, labelItem })
		if (labelLast[0] === labelItem[0]) {
			last.labels.push(item)
			last.prefix = labelLast[0] + " <em>(" + last.labels.length + ")</em>"
			ret.push(last)
		} else {
			ret.push(last)
			ret.push({ prefix: item.label, labels: [item] })
			return ret;
		}
		return ret;
	}, [])
	var nodesGroupedByLabel = groupeByLabel.map(function (item) {
		// var baseNs = 
		if (item.labels.length === 1) {
			return renderDropdownListItem(item.labels[0].ns)
		} else {
			// return '<details><summary>' + item.prefix + '</summary><div>' +
			// 	'' + item.labels.map(function (label) {
			// 		return renderDropdownListItem(label.ns)
			// 	}).join("\n") +
			// '</div></details>';
			return '<li class="dropdown-submenu">' +
				'<a href=\"#\" onClick="return false">' +
					// '<b style="padding-left:18px">' + item.prefix + '</b>' +
					'<i class="glyphicon glyphicon-folder-open" style="opacity:0.5; font-size:90%; padding-right:3px"></i>' + " " +
					'<b>' + item.prefix + '</b>' +
				'</a>' + "\n" +
				'<ul class="dropdown-menu">' +
					item.labels.map(function (label) {
						return renderDropdownListItem(label.ns);
					}).join("\n") +
				'</ul>' +
			'</li>' + "\n"
			;
		}
	})

	DBG && console.log('DBG:renderP5MainMenuDropdown grouped', { grouped, labels, groupeByLabel })

	return nodesGroupedByLabel;

	// var jqDropdownMenu = jQuery('#' + idSubMenu)
	// jqDropdownMenu.empty()
	// jqDropdownMenu.append(searchBox);
	// jqDropdownMenu.append(nodesGroupedByLabel);

	// var liNodes = Object.keys(grouped.menuTreeNs).map(function (baseNs) {
	// 	var item = (baseNs in grouped.mapNsToIdx)
	// 		?	data.objects[ grouped.mapNsToIdx[baseNs] ]
	// 		:	data.objects[ grouped.mapNsToIdx[ grouped.menuTreeNs[baseNs][0] ] ]
	// 	;
	// 	DBG && console.log('DBG:renderP5MainMenuDropdown >> render loop', { baseNs, isInMap: (baseNs in grouped.mapNsToIdx), item, idx: [ grouped.mapNsToIdx[baseNs], grouped.menuTreeNs[baseNs][0] ] });

	// 	return (grouped.menuTreeNs[baseNs].length > 1)
	// 		?	'<li class="dropdown-submenu">' +
	// 				'<a href=\"index.php?_route=ViewTableAjax&namespace=' + item.namespace + '\" title="' + renderTitle(item) + '">' +
	// 					renderStar(item.id, data.idsBookmarks) +
	// 					' ' + renderLabel(item) +
	// 				'</a>' + "\n" +
	// 				'<ul class="dropdown-menu">' +
	// 					grouped.menuTreeNs[baseNs].map(function (subItemNs) {
	// 						var subItem = data.objects[ grouped.mapNsToIdx[subItemNs] ]
	// 						return '<li>' +
	// 								'<a href=\"index.php?_route=ViewTableAjax&namespace=' + subItem.namespace + '\" title="' + renderTitle(subItem) + '">' +
	// 									renderStar(subItem.id, data.idsBookmarks) +
	// 									' ' + renderLabel(subItem) +
	// 								'</a>' +
	// 							'</li>'
	// 						;
	// 					}).join("\n") +
	// 				'</ul>' +
	// 			'</li>' + "\n"
	// 		:	'<li>' +
	// 				'<a href=\"index.php?_route=ViewTableAjax&namespace=' + item.namespace + '\" title="' + renderTitle(item) + '">' +
	// 					renderStar(item.id, data.idsBookmarks) +
	// 					' ' + renderLabel(item) +
	// 				'</a>' +
	// 			'</li>' + "\n"
	// 	;
	// })
	// jqDropdownMenu.append(liNodes);
}

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 idSearchBoxNode = 'idSubMenu_searchBox';
		var rerenderDropdown = (function (global, idSubMenu, jqDropdownMenu, jqDropdownTrigger) {
			return function (data) {
				DBG && console.log('DBG renderP5MainMenuDropdown', {data, idSubMenu});

				var mainMenuFilterCallback = makeMainMenuFilterCallback(jqDropdownMenu, idSearchBoxNode);
				var searchBox = document.createElement('div')
				searchBox.setAttribute('style', "padding:12px 20px; min-width:200px");
				{
					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', "");
						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(mainMenuFilterCallback, event.target.value)
						})
						searchBox_group.appendChild(searchBox_group_input)
					}
					{
						searchBox_group_clear = document.createElement('span')
						searchBox_group_clear.setAttribute('class', "input-group-addon");
						searchBox_group_clear.style.display = "none";
						searchBox_group_clear.style.cursor = "pointer";
						searchBox_group_clear.innerHTML = '<i class="glyphicon glyphicon-remove" title="Kasuj filtr"></i>';
						jQuery(searchBox_group_clear).on('click', function (event) {
							event.preventDefault()
							event.stopPropagation()
							DBG && console.log("DBG:searchBox:clear", { value: jQuery('#' + idSearchBoxNode).value, node: jQuery('#' + idSearchBoxNode) })
							jQuery('#' + idSearchBoxNode).val('');
							mainMenuFilterCallback('')
						})
						searchBox_group.appendChild(searchBox_group_clear)
					}
					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, jqDropdownMenu, jqDropdownTrigger);

		global.p5UI__MenuStore.subscribe(rerenderDropdown)

		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
	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, idSearchBoxNode) {
	return function (query) {
		DBG && console.log("DBG:Main menu:makeMainMenuFilterCallback", { query: query, jqDropdownMenu, idSearchBoxNode })

		jQuery('#' + idSearchBoxNode).next('span').get(0).style.display = query ? 'table-cell' : 'none';

		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