MDL-49263 Javascript: Add an AMD wrapper for actionmenus

lib/amd/build/menu.min.js

@@ -0,0 +1 @@
+define(["jquery","core/templates","core/notification","core/yui"],function(a,b,c,d){var e=function(b){var c=a(b);c.find("li a").each(function(b,c){a(c).addClass("menu-action"),a(c).attr("role","menuitem")}),a(this).replaceWith(c),d.use("moodle-core-actionmenu",function(){if(null===M.core.actionmenu.instance)M.core.actionmenu.init();else{var a=d.one(c.get(0));M.core.actionmenu.newDOMNode(a.ancestor())}})};return{menu:function(d,f){a(f).each(function(f,g){var h=[];a(g).find("li").each(function(b,c){h.push(a(c).html().trim())});var i={triggerMessage:d,links:h},j=a.proxy(e,g);b.render("core/menu",i).done(j).fail(c.exception)})}}});

lib/amd/src/menu.js

@@ -0,0 +1,82 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Wrapper for the YUI M.core.actionmenu class. Allows us to
+ * use the YUI version in AMD code until it is replaced.
+ *
+ * @module     core/menu
+ * @package    core
+ * @copyright  2015 Damyon Wiese <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/templates', 'core/notification', 'core/yui'], function($, templates, notification, Y) {
+
+    // Private variables and functions.
+    /**
+     * Replace the menu node in the dom by this new HTML
+     * rendered from a template and then call enhance on it.
+     *
+     * @param {string} newHTML
+     */
+    var enhanceMenu = function(newHTML) {
+        var newMenu = $(newHTML);
+        // Insert some more aria attrs into the menu entries.
+        newMenu.find('li a').each(function(index, element) {
+            $(element).addClass('menu-action');
+            $(element).attr('role', 'menuitem');
+        });
+        $(this).replaceWith(newMenu);
+
+        Y.use('moodle-core-actionmenu', function() {
+            if (M.core.actionmenu.instance === null) {
+                M.core.actionmenu.init();
+            } else {
+                var yuiNode = Y.one(newMenu.get(0));
+                M.core.actionmenu.newDOMNode(yuiNode.ancestor());
+            }
+        });
+    };
+
+    return /** @alias module:core/menu */ {
+        // Public variables and functions.
+        /**
+         * Wrap M.core.actionmenu.
+         * @param {string} triggerMessage Text for the button to open the menu.
+         * @param {string} selector CSS selector for a list of links to turn into a menu (can match mulitple menus).
+         */
+        menu: function(triggerMessage, selector) {
+            // First we need to modify the list(s) to have markup compatible with actionmenu.
+
+            $(selector).each(function (index, element) {
+                var links = [];
+                $(element).find('li').each(function (index, link) {
+                    links.push($(link).html().trim());
+                });
+                var data = {
+                    triggerMessage: triggerMessage,
+                    links: links
+                };
+
+                var enhanceCallback = $.proxy(enhanceMenu, element);
+
+                templates.render('core/menu', data)
+                    .done(enhanceCallback)
+                    .fail(notification.exception);
+            });
+
+        }
+    };
+});

lib/templates/menu.mustache

@@ -0,0 +1,52 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    Moodle actionmenu template. The purpose of this list is to take a plain
+    HTML list of links and changing into specific DOM structure expected by
+    moodle-actionmenu. It is unlikely you will want to customise this template
+    because the actionmenu code is looking for specific classes, roles and data-attributes.
+
+    Classes required for JS:
+    * moodle-actionmenu
+    * menubar
+    * toggle-display
+    * textmenu
+    * menu
+
+    Data attibutes required for JS:
+    * data-enhance = moodle-core-actionmenu
+    * data-rel = menu-content
+
+    Context variables required for this template:
+    * uniqid - A uniq string that changes every time a template is renderer.
+    * triggerMessage - A message to show in the link that opens the menu.
+    * links - An array of things to show in the menu. Standard menus put a link with a pix_icon and a short bit of text.
+}}
+<div class="moodle-actionmenu" data-enhance="moodle-core-actionmenu">
+    <ul class="menubar" role="menubar">
+        <li role="presentation">
+            <a id="{{uniqid}}-action-menu-toggle" class="toggle-display textmenu" role="menuitem" href="#" aria-haspopup="true">{{triggerMessage}}<b class="caret"></b></a>
+        </li>
+    </ul>
+    <ul class="menu" data-rel="menu-content" aria-labelledby="{{uniqid}}-action-menu-toggle" role="menu" aria-hidden="true">
+        {{#links}}
+        <li role="presentation">
+            {{{.}}}
+        </li>
+        {{/links}}
+    </ul>
+</div>