Permalink
Browse files

feature(menus): required AMD modules can now be defined at item regis…

…tration

Adds a "require" parameter to menu item factory, which allows plugins to specify
which AMD modules are to be loaded when the menu item is displayed.

Refs #9514
  • Loading branch information...
hypeJunction committed Mar 19, 2016
1 parent b96c736 commit 46c3ead835d728b7afec70fc6c0aa01d152e4ea1
View
@@ -197,3 +197,34 @@ with a high degree of control and flexibility when styling the site.
<ul class="elgg-menu elgg-menu-foo elgg-menu-foo-default">
<li class="elgg-menu-item elgg-menu-item-bar"></li>
</ul>
+
+
+JavaScript
+==========
+
+It is common that menu items rely on JavaScript. You can bind client-side events
+to menu items by placing your JavaScript into AMD module and defining the
+requirement during the registration.
+
+.. code-block:: php
+
+ 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'],
+ ));
+
+
+.. code-block:: js
+
+ // 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();
+ });
+ });
@@ -47,6 +47,9 @@ class ElggMenuItem {
// array Classes to apply to the anchor tag
'linkClass' => array(),
+
+ // array AMD modules required by this menu item
+ 'deps' => array()
);
/**
@@ -110,6 +113,7 @@ public function __construct($name, $text, $href) {
* title => STR Menu item tooltip
* selected => BOOL Is this menu item currently selected?
* confirm => STR If set, the link will be drawn with the output/confirmlink view instead of output/url.
+ * deps => ARR AMD modules required by this menu item
* data => ARR Custom attributes stored in the menu item.
*
* @return ElggMenuItem or null on error
@@ -395,6 +399,39 @@ public function addLinkClass($class) {
$this->addClass($this->data['linkClass'], $class);
}
+ /**
+ * Set required AMD modules
+ *
+ * @param string[]|string $modules One or more required AMD modules
+ * @return void
+ */
+ public function setDeps($modules) {
+ $this->data['deps'] = (array) $modules;
+ }
+
+ /**
+ * Get required AMD modules
+ *
+ * @return string[]
+ */
+ public function getDeps() {
+ $modules = (array) $this->data['deps'];
+ return array_filter($modules, function($m) {
+ return is_string($m) && !empty($m);
+ });
+ }
+
+ /**
+ * Add required AMD modules
+ *
+ * @param string[]|string $modules One or more required AMD modules
+ * @return void
+ */
+ public function addDeps($modules) {
+ $current = $this->getDeps();
+ $this->setDeps($current + (array) $modules);
+ }
+
/**
* Set the li classes
*
@@ -81,6 +81,7 @@
* parent_name => STR Identifier of the parent menu item
* link_class => STR A class or classes for the <a> tag
* item_class => STR A class or classes for the <li> tag
+ * deps => STR One or more AMD modules to require
*
* Additional options that the view output/url takes can be
* passed in the array. Custom options can be added by using
@@ -613,6 +614,10 @@ function _elgg_nav_init() {
)));
elgg_register_ajax_view('navigation/menu/user_hover/contents');
+
+ // Using a view extension to ensure that themes that have replaced the item view
+ // still load the required AMD modules
+ elgg_extend_view('navigation/menu/elements/item', 'navigation/menu/elements/item_deps');
}
/**
@@ -22,3 +22,5 @@
echo elgg_view_module('theme-sandbox-demo', "Owner Block Menu (.elgg-menu-owner-block)", elgg_view('theme_sandbox/navigation/owner_block'));
echo elgg_view_module('theme-sandbox-demo', "Footer Menu (.elgg-menu-footer)", elgg_view('theme_sandbox/navigation/footer'));
+
+echo elgg_view_module('theme-sandbox-demo', "Menu Item with AMD require", elgg_view('theme_sandbox/navigation/require'));
@@ -0,0 +1,9 @@
+define(function(require) {
+
+ var $ = require('jquery');
+
+ $(document).on('click', '.elgg-menu-require .elgg-menu-item-require > a', function(e) {
+ e.preventDefault();
+ alert('Thank you for trying me');
+ });
+});
@@ -0,0 +1,23 @@
+<?php
+
+$item = ElggMenuItem::factory([
+ 'name' => 'require',
+ 'href' => '#',
+ 'text' => 'Try Me!',
+ 'deps' => ['theme_sandbox/navigation/require'],
+]);
+
+$params = array();
+$params['menu'] = array();
+$params['menu']['default'] = array();
+$params['menu']['default'][] = $item;
+$params['name'] = 'require';
+$params['class'] = 'elgg-menu-hz';
+
+?>
+
+<div class="theme-sandbox-demo-sidebar">
+<?php
+ echo elgg_view('navigation/menu/default', $params);
+?>
+</div>
@@ -14,7 +14,7 @@ function reportedcontent_init() {
// Register a page handler, so we can have nice URLs
elgg_register_page_handler('reportedcontent', 'reportedcontent_page_handler');
-
+
// Extend CSS
elgg_extend_view('elgg.css', 'reportedcontent/css');
elgg_extend_view('admin.css', 'reportedcontent/admin_css');
@@ -0,0 +1,19 @@
+<?php
+
+/**
+ * Load AMD modules required by the menu item
+ *
+ * @package Elgg.Core
+ * @subpackage Navigation
+ *
+ * @uses $vars['item'] ElggMenuItem
+ */
+
+$item = elgg_extract('item', $vars);
+if (!$item instanceof ElggMenuItem) {
+ return;
+}
+
+foreach ($item->getDeps() as $module) {
+ elgg_require_js($module);
+}

0 comments on commit 46c3ead

Please sign in to comment.