Menus¶
Elgg proposer des fonctions pratiques pour créer des menus sur l’ensemble du site.
Chaque menu a besoin d’un nom, tout comme chaque élément de menu. Ceux-ci sont nécessaires afin de faciliter leur remplacement ou leur leur modification, ainsi que pour fournir des hooks pour le thème.
Utilisation simple¶
Les fonctionnalités de base peuvent être réalisées grâce à ces deux fonctions :
elgg_register_menu_item() pour ajouter un élément à un menu
elgg_unregister_menu_item() pour retirer un élément d’un menu
Vous voudrez normalement les appeler à partir de la fonction init de votre plugin.
Exemples¶
// Add a new menu item to the site main menu
elgg_register_menu_item('site', array(
'name' => 'itemname',
'text' => 'This is text of the item',
'href' => '/item/url',
));
// Remove the "Elgg" logo from the topbar menu
elgg_unregister_menu_item('topbar', 'elgg_logo');
Utilisation avancée¶
Vous pouvez obtenir plus de contrôle sur les menus en utilisant les hooks plugin et les méthodes publiques fournies par la classe ElggMenuItem__.
- Il existe deux hooks qui peuvent être utilisés pour modifier un menu :
'register', 'menu:'
pour ajouter ou modifier des éléments (en particulier dans les menus dynamiques)'prepare', 'menu:'
pour modifier la structure du menu avant qu’il ne soit affiché
Lorsque vous enregistrez un gestionnaire de hook, remplacez la partie <menu name>
par le nom interne du menu.
Le troisième paramètre passé au gestionnaire de menu contient tous les éléments de menu qui ont été enregistrés jusqu’à présent par le noyau Elgg et d’autres plugins activés. Dans le gestionnaire, nous pouvons faire une boucle à travers les éléments de menu et utiliser les méthodes de classe pour interagir avec les propriétés de l’élément de menu.
Exemples¶
Exemple 1 : Modifier l’URL de l’élément de menu appelé albums
dans le menu owner_block
:
/**
* Initialize the plugin
*/
function my_plugin_init() {
// Register a plugin hook handler for the owner_block menu
elgg_register_plugin_hook_handler('register', 'menu:owner_block', 'my_owner_block_menu_handler');
}
/**
* Change the URL of the "Albums" menu item in the owner_block menu
*/
function my_owner_block_menu_handler($hook, $type, $items, $params) {
$owner = $params['entity'];
// Owner can be either user or a group, so we
// need to take both URLs into consideration:
switch ($owner->getType()) {
case 'user':
$url = "album/owner/{$owner->guid}";
break;
case 'group':
$url = "album/group/{$owner->guid}";
break;
}
foreach ($items as $key => $item) {
if ($item->getName() == 'albums') {
// Set the new URL
$item->setURL($url);
break;
}
}
return $items;
}
- Exemple 2 : Modifier le menu
entity
pour les objetsElggBlog
Supprimer l’icône du pouce
Modifier le texte
Modifier
en une icône personnalisée
/**
* Initialize the plugin
*/
function my_plugin_init() {
// Register a plugin hook handler for the entity menu
elgg_register_plugin_hook_handler('register', 'menu:entity', 'my_entity_menu_handler');
}
/**
* Customize the entity menu for ElggBlog objects
*/
function my_entity_menu_handler($hook, $type, $items, $params) {
// The entity can be found from the $params parameter
$entity = $params['entity'];
// We want to modify only the ElggBlog objects, so we
// return immediately if the entity is something else
if (!$entity instanceof ElggBlog) {
return $menu;
}
foreach ($items as $key => $item) {
switch ($item->getName()) {
case 'likes':
// Remove the "likes" menu item
unset($items[$key]);
break;
case 'edit':
// Change the "Edit" text into a custom icon
$item->setText(elgg_view_icon('pencil'));
break;
}
}
return $items;
}
Créer un nouveau menu¶
Elgg fournit plusieurs menus différents par défaut. Vous pouvez cependant avoir besoin de certains éléments de menu qui ne figurent pas dans l’un des menus existants. Si tel est le cas, vous pouvez créer votre propre menu avec la fonction `elgg_view_menu()`__. Vous devez appeler la fonction à partir de la vue dans laquelle vous souhaitez afficher le menu.
Exemple: Affichez un menu appelé « mon_menu » qui affiche ses éléments de menu dans l’ordre alphabétique :
// in a resource view
echo elgg_view_menu('my_menu', array('sort_by' => 'title'));
Vous pouvez maintenant ajouter de nouveaux éléments au menu comme ceci :
// in plugin init
elgg_register_menu_item('my_menu', array(
'name' => 'my_page',
'href' => 'path/to/my_page',
'text' => elgg_echo('my_plugin:my_page'),
));
En outre, il est maintenant possible de modifier le menu en utilisant les hooks 'register', 'menu:mon_menu'
et 'prepare', 'menu:mon_menu'
.
Création de thèmes¶
Le nom du menu, les noms de sections et les noms des éléments sont tous intégrés dans le HTML sous forme de classes CSS (normalisées pour ne contenir que des traits d’union, plutôt que des soulignements ou des points). Cela augmente légèrement la taille du balisage, mais procure aux intégrateurs un haut degré de contrôle et de flexibilité lors de la mise en forme du site.
Exemple : Voici la sortie du menu foo
avec les sections alt
et default
contenant respectivement les éléments baz
et bar
.
<ul class="elgg-menu elgg-menu-foo elgg-menu-foo-alt">
<li class="elgg-menu-item elgg-menu-item-baz"></li>
</ul>
<ul class="elgg-menu elgg-menu-foo elgg-menu-foo-default">
<li class="elgg-menu-item elgg-menu-item-bar"></li>
</ul>
JavaScript¶
Il est courant que les éléments de menu s’appuient sur JavaScript. Vous pouvez lier les événements côté client aux éléments du menu en plaçant votre JavaScript dans le module AMD et en définissant ses exigences lors de son inscription.
elgg_register_menu_item('my_menu', array(
'name' => 'hide_on_click',
'href' => '#',
'text' => elgg_echo('hide:on:click'),
'item_class' => '.hide-on-click',
'deps' => ['navigation/menu/item/hide_on_click'],
));
// in navigation/menu/item/hide_on_click.js
define(function(require) {
var $ = require('jquery');
$(document).on('click', '.hide-on-click', function(e) {
e.preventDefault();
$(this).hide();
});
});