Right now it's just rendered with HTML from the server. One request to server per comment on a page is a wee painful, and not very dynamic.
Instead, I think we need to render the menus on the client side, which basically requires a re-implementation of the server-side menus to work on the client.
Use cases:
- Report spam
- Edit
- Delete
- Like/Unlike
- Off topic
- Remove Ad
- Navigate to related URL
Service: elggMenus
(elgg/menus/Registry
API Reference)
This class is registered as the elggMenus
service.
get(menuName)
Get (or create) a menu definition.
/** @ngInject */
require('ng/modules/elgg').run(function(elggMenus) {
var entityMenu = elggMenus.get('entity');
// Configure the menu...
});
Examples
elgg/menus/Menu
API Reference
Menus are collections of links and/or buttons typically rendered together on a page.
TODO:
items
The read-only items
property allows you to control the list of items included in this menu. Items is a map so you can use the standard get/set/remove methods to manage what items are part of this menu.
Get an item. This will create a new one if it doesn't exist yet.
var item = menu.items.get('delete');
Set an item to a particular instance:
menu.items.set('delete', item);
Remove an item:
menu.items.remove('delete');
menu.items.remove(item);
Combine remove
and set
to move an item from one menu to another:
var otherMenuItem = otherMenu.items.remove('delete');
menu.items.set('delete', otherMenuItem);
sections
Each renders its items into "sections". See the elgg/menus/MenuSection
docs for more details.
This is a read-only map just like the items
map discussed above.
Getting a section will create a new one if it doesn't exist yet:
var section = menu.sections.get('default');
Setting a section puts all of them items in that section into the menu and loses all the other menu items that were a part of the old section by the same name.
menus.sections.set('default', section);
Removing a section also removes all the items currently associated with that section:
var section = menu.sections.remove('default');
elgg/menus/MenuSection
API Reference
Each menu is divided into "sections". Each section has a label and can be ordered relative to the other sections.
elgg/menus/MenuItem
API reference
action
Defines the default on-click/tap behavior of the menu item:
/** @ngInject */
item.action = function() {
alert('You triggered the action');
};
Setting this will reset the href
setting to null
.
controller
If you need custom logic to complement your template, you can provide a controller:
item.controller = require('elgg/menus/entity/likes/Ctrl');
href
If you set the href
, clicking the menu item will navigate to the specified page.
item.href = 'https://elgg.example.org/foo/bar';
item.href = '/foo/bar'
/** @ngInject */
item.href = function() {
return '/foo/bar';
};
Setting this will set the action
setting to null
.
icon
Set this to a string id of the icon to show for this item.
label
The label is just the text that is shown for the menu item.
There is actually no api for setting the label. Instead, override the language string:
return array(
'menus:entity:items:delete:label' => 'Delete',
);
parent
This option allows setting up a hierarchy out of the menu items.
item.parent = 'more';
item.parent = menu.items.get('more');
priority
This determines the order in which the menu items are rendered. Items with lower absolute value numbers are listed first.
item.priority = 500; // default
item2.priority = 2;
section
The section param allows you to set how the menu item should be grouped:
item.section = 'default'; // This is the default behavior
item.section = menu.sections.get('default'); // equivalent
template
The template option allows you to completely take over the rendering of the menu item. You can use this to insert a custom directive.
item.template = '<elgg-likes-button entity="{{entity.data.guid}}"></elgg-likes-button>';
item.template = require('text!elgg/menus/entity/likes/template.html');