group Menu by label

SE/static/p5UI/initP5MainMenuDropdown.js

@@ -21,22 +21,8 @@ function renderStar(id, idsBookmarks) {
 	;
 }
 
-function renderP5MainMenuDropdown(data, idSubMenu) {
-	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 jqDropdownMenu = jQuery('#' + idSubMenu)
-	jqDropdownMenu.empty()
-	liNodes = Object.keys(grouped.menuTreeNs).map(function (baseNs) {
+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] ] ]
@@ -69,8 +55,118 @@ function renderP5MainMenuDropdown(data, idSubMenu) {
 					'</a>' +
 				'</li>' + "\n"
 		;
+	}
+}
+
+function renderP5MainMenuDropdown(data, idSubMenu) {
+	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,
+		}
+	});
+	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"
+			;
+		}
 	})
-	jqDropdownMenu.append(liNodes);
+
+	DBG && console.log('DBG:renderP5MainMenuDropdown grouped', { grouped, labels, groupeByLabel })
+
+
+	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] ]
+	// 		:	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 ) {