[Summary view] [Print] [Text view]

   1  YUI.add('moodle-atto_accessibilityhelper-button', 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   * @package    atto_accessibilityhelper
  20   * @copyright  2014 Damyon Wiese  <damyon@moodle.com>
  21   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22   */
  23  
  24  /**
  25   * @module moodle-atto_accessibilityhelper-button
  26   */
  27  
  28  /**
  29   * Atto text editor accessibilityhelper plugin.
  30   *
  31   * This plugin adds some functions to do things that screen readers do not do well.
  32   * Specifically, listing the active styles for the selected text,
  33   * listing the images in the page, listing the links in the page.
  34   *
  35   *
  36   * @namespace M.atto_accessibilityhelper
  37   * @class Button
  38   * @extends M.editor_atto.EditorPlugin
  39   */
  40  
  41  var COMPONENT = 'atto_accessibilityhelper',
  42      TEMPLATE = '' +
  43          // The list of styles.
  44          '<div><p id="{{elementid}}_{{CSS.STYLESLABEL}}">' +
  45              '{{get_string "liststyles" component}}<br/>' +
  46              '<span aria-labelledby="{{elementid}}_{{CSS.STYLESLABEL}}" />' +
  47          '</p></div>' +
  48          '<span class="listStyles"></span>' +
  49  
  50          '<p id="{{elementid}}_{{CSS.LINKSLABEL}}">' +
  51              '{{get_string "listlinks" component}}<br/>' +
  52              '<span aria-labelledby="{{elementid}}_{{CSS.LINKSLABEL}}"/>' +
  53          '</p>' +
  54          '<span class="listLinks"></span>' +
  55  
  56          '<p id="{{elementid}}_{{CSS.IMAGESLABEL}}">' +
  57              '{{get_string "listimages" component}}<br/>' +
  58              '<span aria-labelledby="{{elementid}}_{{CSS.IMAGESLABEL}}"/>' +
  59          '</p>' +
  60          '<span class="listImages"></span>',
  61  
  62      CSS = {
  63          STYLESLABEL: COMPONENT + '_styleslabel',
  64          LINKSLABEL: COMPONENT + '_linkslabel',
  65          IMAGESLABEL: COMPONENT + '_imageslabel'
  66      };
  67  
  68  Y.namespace('M.atto_accessibilityhelper').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
  69  
  70      initializer: function() {
  71          this.addButton({
  72              icon: 'e/screenreader_helper',
  73              callback: this._displayDialogue
  74          });
  75      },
  76  
  77      /**
  78       * Display the Accessibility Helper tool.
  79       *
  80       * @method _displayDialogue
  81       * @private
  82       */
  83      _displayDialogue: function() {
  84          var dialogue = this.getDialogue({
  85              headerContent: M.util.get_string('pluginname', COMPONENT),
  86              width: '800px',
  87              focusAfterHide: true
  88          });
  89  
  90          // Set the dialogue content, and then show the dialogue.
  91          dialogue.set('bodyContent', this._getDialogueContent())
  92                  .show();
  93      },
  94  
  95      /**
  96       * Return the dialogue content for the tool, attaching any required
  97       * events.
  98       *
  99       * @method _getDialogueContent
 100       * @private
 101       * @return {Node} The content to place in the dialogue.
 102       */
 103      _getDialogueContent: function() {
 104          var template = Y.Handlebars.compile(TEMPLATE),
 105              content = Y.Node.create(template({
 106                  CSS: CSS,
 107                  component: COMPONENT
 108              }));
 109  
 110          // Add the data.
 111          content.one('.listStyles')
 112                  .empty()
 113                  .appendChild(this._listStyles());
 114          content.one('.listLinks')
 115                  .empty()
 116                  .appendChild(this._listLinks());
 117          content.one('.listImages')
 118                  .empty()
 119                  .appendChild(this._listImages());
 120  
 121          return content;
 122      },
 123  
 124      /**
 125       * List the styles present for the selection.
 126       *
 127       * @method _listStyles
 128       * @return {String} The list of styles in use.
 129       * @private
 130       */
 131      _listStyles: function() {
 132          // Clear the status node.
 133          var list = [],
 134              host = this.get('host'),
 135              current = host.getSelectionParentNode(),
 136              tagname;
 137  
 138          if (current) {
 139              current = Y.one(current);
 140          }
 141  
 142          while (current && (current !== this.editor)) {
 143              tagname = current.get('tagName');
 144              if (typeof tagname !== 'undefined') {
 145                  list.push(Y.Escape.html(tagname));
 146              }
 147              current = current.ancestor();
 148          }
 149          if (list.length === 0) {
 150              list.push(M.util.get_string('nostyles', COMPONENT));
 151          }
 152  
 153          list.reverse();
 154  
 155          // Append the list of current styles.
 156          return list.join(', ');
 157      },
 158  
 159      /**
 160       * List the links for the current editor
 161       *
 162       * @method _listLinks
 163       * @return {string}
 164       * @private
 165       */
 166      _listLinks: function() {
 167          var list = Y.Node.create('<ol />'),
 168              listitem,
 169              selectlink;
 170  
 171          this.editor.all('a').each(function(link) {
 172              selectlink = Y.Node.create('<a href="#" title="' +
 173                      M.util.get_string('selectlink', COMPONENT) + '">' +
 174                      Y.Escape.html(link.get('text')) +
 175                      '</a>');
 176  
 177              selectlink.setData('sourcelink', link);
 178              selectlink.on('click', this._linkSelected, this);
 179  
 180              listitem = Y.Node.create('<li></li>');
 181              listitem.appendChild(selectlink);
 182  
 183              list.appendChild(listitem);
 184          }, this);
 185  
 186          if (!list.hasChildNodes()) {
 187              list.append('<li>' + M.util.get_string('nolinks', COMPONENT) + '</li>');
 188          }
 189  
 190          // Append the list of current styles.
 191          return list;
 192      },
 193  
 194      /**
 195       * List the images used in the editor.
 196       *
 197       * @method _listImages
 198       * @return {Node} A Node containing all of the images present in the editor.
 199       * @private
 200       */
 201      _listImages: function() {
 202          var list = Y.Node.create('<ol/>'),
 203              listitem,
 204              selectimage;
 205  
 206          this.editor.all('img').each(function(image) {
 207              // Get the alt or title or img url of the image.
 208              var imgalt = image.getAttribute('alt');
 209              if (imgalt === '') {
 210                  imgalt = image.getAttribute('title');
 211                  if (imgalt === '') {
 212                      imgalt = image.getAttribute('src');
 213                  }
 214              }
 215  
 216              selectimage = Y.Node.create('<a href="#" title="' +
 217                      M.util.get_string('selectimage', COMPONENT) + '">' +
 218                      Y.Escape.html(imgalt) +
 219                      '</a>');
 220  
 221              selectimage.setData('sourceimage', image);
 222              selectimage.on('click', this._imageSelected, this);
 223  
 224              listitem = Y.Node.create('<li></li>');
 225              listitem.append(selectimage);
 226              list.append(listitem);
 227          }, this);
 228          if (!list.hasChildNodes()) {
 229              list.append('<li>' + M.util.get_string('noimages', COMPONENT) + '</li>');
 230          }
 231  
 232          // Append the list of current styles.
 233          return list;
 234      },
 235  
 236      /**
 237       * Event handler for selecting an image.
 238       *
 239       * @method _imageSelected
 240       * @param {EventFacade} e
 241       * @private
 242       */
 243      _imageSelected: function(e) {
 244          e.preventDefault();
 245  
 246          this.getDialogue({
 247              focusAfterNode: null
 248          }).hide();
 249  
 250          var host = this.get('host'),
 251              target = e.target.getData('sourceimage');
 252  
 253          this.editor.focus();
 254          host.setSelection(host.getSelectionFromNode(target));
 255      },
 256  
 257      /**
 258       * Event handler for selecting a link.
 259       *
 260       * @method _linkSelected
 261       * @param {EventFacade} e
 262       * @private
 263       */
 264      _linkSelected: function(e) {
 265          e.preventDefault();
 266  
 267          this.getDialogue({
 268              focusAfterNode: null
 269          }).hide();
 270  
 271          var host = this.get('host'),
 272              target = e.target.getData('sourcelink');
 273  
 274          this.editor.focus();
 275          host.setSelection(host.getSelectionFromNode(target));
 276      }
 277  });
 278  
 279  
 280  }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin"]});