[Summary view] [Print] [Text view]

   1  YUI.add('moodle-editor_atto-menu', function (Y, NAME) {
   2  
   3  // This file is part of Moodle - http://moodle.org/
   4  //
   5  // Moodle is free software: you can redistribute it and/or modify
   6  // it under the terms of the GNU General Public License as published by
   7  // the Free Software Foundation, either version 3 of the License, or
   8  // (at your option) any later version.
   9  //
  10  // Moodle is distributed in the hope that it will be useful,
  11  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  // GNU General Public License for more details.
  14  //
  15  // You should have received a copy of the GNU General Public License
  16  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  17  
  18  /**
  19   * A Menu for the Atto editor.
  20   *
  21   * @module     moodle-editor_atto-menu
  22   * @submodule  menu-base
  23   * @package    editor_atto
  24   * @copyright  2013 Damyon Wiese
  25   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  26   */
  27  
  28  var LOGNAME = 'moodle-editor_atto-menu';
  29  var MENUDIALOGUE = '' +
  30          '<div class="open {{config.buttonClass}} atto_menu" ' +
  31              'style="min-width:{{config.innerOverlayWidth}};">' +
  32              '<ul class="dropdown-menu">' +
  33                  '{{#each config.items}}' +
  34                      '<li role="presentation" class="atto_menuentry">' +
  35                          '<a href="#" role="menuitem" data-index="{{@index}}" {{#each data}}data-{{@key}}="{{this}}"{{/each}}>' +
  36                              '{{{text}}}' +
  37                          '</a>' +
  38                      '</li>' +
  39                  '{{/each}}' +
  40              '</ul>' +
  41          '</div>';
  42  
  43  /**
  44   * A Menu for the Atto editor used in Moodle.
  45   *
  46   * This is a drop down list of buttons triggered (and aligned to) a
  47   * location.
  48   *
  49   * @namespace M.editor_atto
  50   * @class Menu
  51   * @main
  52   * @constructor
  53   * @extends M.core.dialogue
  54   */
  55  var Menu = function() {
  56      Menu.superclass.constructor.apply(this, arguments);
  57  };
  58  
  59  Y.extend(Menu, M.core.dialogue, {
  60  
  61      /**
  62       * A list of the menu handlers which have been attached here.
  63       *
  64       * @property _menuHandlers
  65       * @type Array
  66       * @private
  67       */
  68      _menuHandlers: null,
  69  
  70      initializer: function(config) {
  71          var headertext,
  72              bb;
  73  
  74          this._menuHandlers = [];
  75  
  76          // Create the actual button.
  77          var template = Y.Handlebars.compile(MENUDIALOGUE),
  78              menu = Y.Node.create(template({
  79                  config: config
  80              }));
  81          this.set('bodyContent', menu);
  82  
  83          bb = this.get('boundingBox');
  84          bb.addClass('editor_atto_controlmenu');
  85          bb.addClass('editor_atto_menu');
  86          bb.one('.moodle-dialogue-wrap')
  87              .removeClass('moodle-dialogue-wrap')
  88              .addClass('moodle-dialogue-content');
  89  
  90          headertext = Y.Node.create('<h3/>')
  91                  .addClass('accesshide')
  92                  .setHTML(this.get('headerText'));
  93          this.get('bodyContent').prepend(headertext);
  94  
  95          // Hide the header and footer node entirely.
  96          this.headerNode.hide();
  97          this.footerNode.hide();
  98  
  99          this._setupHandlers();
 100      },
 101  
 102      /**
 103       * Setup the Event handlers.
 104       *
 105       * @method _setupHandlers
 106       * @private
 107       */
 108      _setupHandlers: function() {
 109          var contentBox = this.get('contentBox');
 110          // Handle menu item selection.
 111          this._menuHandlers.push(
 112              // Select the menu item on space, and enter.
 113              contentBox.delegate('key', this._chooseMenuItem, '32, enter', '.atto_menuentry', this),
 114  
 115              // Move up and down the menu on up/down.
 116              contentBox.delegate('key', this._handleKeyboardEvent, 'down:38,40', '.dropdown-menu', this),
 117  
 118              // Hide the menu when clicking outside of it.
 119              contentBox.on('focusoutside', this.hide, this),
 120  
 121              // Hide the menu on left/right, and escape keys.
 122              contentBox.delegate('key', this.hide, 'down:37,39,esc', '.dropdown-menu', this)
 123          );
 124      },
 125  
 126      /**
 127       * Simulate other types of menu selection.
 128       *
 129       * @method _chooseMenuItem
 130       * @param {EventFacade} e
 131       */
 132      _chooseMenuItem: function(e) {
 133          e.target.simulate('click');
 134          e.preventDefault();
 135      },
 136  
 137      /**
 138       * Hide a menu, removing all of the event handlers which trigger the hide.
 139       *
 140       * @method hide
 141       * @param {EventFacade} e
 142       */
 143      hide: function(e) {
 144          if (this.get('preventHideMenu') === true) {
 145              return;
 146          }
 147  
 148          // We must prevent the default action (left/right/escape) because
 149          // there are other listeners on the toolbar which will focus on the
 150          // editor.
 151          if (e) {
 152              e.preventDefault();
 153          }
 154  
 155          return Menu.superclass.hide.call(this, arguments);
 156      },
 157  
 158      /**
 159       * Implement arrow-key navigation for the items in a toolbar menu.
 160       *
 161       * @method _handleKeyboardEvent
 162       * @param {EventFacade} e The keyboard event.
 163       * @static
 164       */
 165      _handleKeyboardEvent: function(e) {
 166          // Prevent the default browser behaviour.
 167          e.preventDefault();
 168  
 169          // Get a list of all buttons in the menu.
 170          var buttons = e.currentTarget.all('a[role="menuitem"]');
 171  
 172          // On cursor moves we loops through the buttons.
 173          var found = false,
 174              index = 0,
 175              direction = 1,
 176              checkCount = 0,
 177              current = e.target.ancestor('a[role="menuitem"]', true),
 178              next;
 179  
 180          // Determine which button is currently selected.
 181          while (!found && index < buttons.size()) {
 182              if (buttons.item(index) === current) {
 183                  found = true;
 184              } else {
 185                  index++;
 186              }
 187          }
 188  
 189          if (!found) {
 190              Y.log("Unable to find this menu item in the menu", 'debug', LOGNAME);
 191              return;
 192          }
 193  
 194          if (e.keyCode === 38) {
 195              // Moving up so reverse the direction.
 196              direction = -1;
 197          }
 198  
 199          // Try to find the next
 200          do {
 201              index += direction;
 202              if (index < 0) {
 203                  index = buttons.size() - 1;
 204              } else if (index >= buttons.size()) {
 205                  // Handle wrapping.
 206                  index = 0;
 207              }
 208              next = buttons.item(index);
 209  
 210              // Add a counter to ensure we don't get stuck in a loop if there's only one visible menu item.
 211              checkCount++;
 212              // Loop while:
 213              // * we are not in a loop and have not already checked every button; and
 214              // * we are on a different button; and
 215              // * the next menu item is not hidden.
 216          } while (checkCount < buttons.size() && next !== current && next.hasAttribute('hidden'));
 217  
 218          if (next) {
 219              next.focus();
 220          }
 221  
 222          e.preventDefault();
 223          e.stopImmediatePropagation();
 224      }
 225  }, {
 226      NAME: "menu",
 227      ATTRS: {
 228          /**
 229           * The header for the drop down (only accessible to screen readers).
 230           *
 231           * @attribute headerText
 232           * @type String
 233           * @default ''
 234           */
 235          headerText: {
 236              value: ''
 237          }
 238  
 239      }
 240  });
 241  
 242  Y.Base.modifyAttrs(Menu, {
 243      /**
 244       * The width for this menu.
 245       *
 246       * @attribute width
 247       * @default 'auto'
 248       */
 249      width: {
 250          value: 'auto'
 251      },
 252  
 253      /**
 254       * When to hide this menu.
 255       *
 256       * By default, this attribute consists of:
 257       * <ul>
 258       * <li>an object which will cause the menu to hide when the user clicks outside of the menu</li>
 259       * </ul>
 260       *
 261       * @attribute hideOn
 262       */
 263      hideOn: {
 264          value: [
 265              {
 266                  eventName: 'clickoutside'
 267              }
 268          ]
 269      },
 270  
 271      /**
 272       * The default list of extra classes for this menu.
 273       *
 274       * @attribute extraClasses
 275       * @type Array
 276       * @default editor_atto_menu
 277       */
 278      extraClasses: {
 279          value: [
 280              'editor_atto_menu'
 281          ]
 282      },
 283  
 284      /**
 285       * Override the responsive nature of the core dialogues.
 286       *
 287       * @attribute responsive
 288       * @type boolean
 289       * @default false
 290       */
 291      responsive: {
 292          value: false
 293      },
 294  
 295      /**
 296       * The default visibility of the menu.
 297       *
 298       * @attribute visible
 299       * @type boolean
 300       * @default false
 301       */
 302      visible: {
 303          value: false
 304      },
 305  
 306      /**
 307       * Whether to centre the menu.
 308       *
 309       * @attribute center
 310       * @type boolean
 311       * @default false
 312       */
 313      center: {
 314          value: false
 315      },
 316  
 317      /**
 318       * Hide the close button.
 319       * @attribute closeButton
 320       * @type boolean
 321       * @default false
 322       */
 323      closeButton: {
 324          value: false
 325      }
 326  });
 327  
 328  Y.namespace('M.editor_atto').Menu = Menu;
 329  
 330  
 331  }, '@VERSION@', {"requires": ["moodle-core-notification-dialogue", "node", "event", "event-custom"]});