se/SE/static/p5UI/initP5MainMenuDropdown.js

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

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>' +
									'<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"
		;
	}
}

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"
			;
		}
	})

	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 ) {
	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) {
			return function (data) {
				DBG && console.log('DBG renderP5MainMenuDropdown', {data, idSubMenu});
				renderP5MainMenuDropdown(data, idSubMenu);
			}
		})(global, idSubMenu);

		global.p5UI__MenuStore.subscribe(rerenderDropdown)

		jqDropdownTrigger.attr('data-toggle', 'dropdown') // is required by bootstrap dorpdown.js evenf if is called via js

		global.p5UI__MenuStore.forceUpdate()

		jQuery(btnNode).dropdown()
	}
	// btnNode._initialized = true // TODO: DBG TEST
	return true;
}

global.initP5MainMenuDropdown = initP5MainMenuDropdown