[Summary view] [Print] [Text view]

   1  // This file is part of Moodle - http://moodle.org/
   2  //
   3  // Moodle is free software: you can redistribute it and/or modify
   4  // it under the terms of the GNU General Public License as published by
   5  // the Free Software Foundation, either version 3 of the License, or
   6  // (at your option) any later version.
   7  //
   8  // Moodle is distributed in the hope that it will be useful,
   9  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11  // GNU General Public License for more details.
  12  //
  13  // You should have received a copy of the GNU General Public License
  14  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15  
  16  /*
  17   * @package    atto_emoticon
  18   * @copyright  2014 Frédéric Massart
  19   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  20   */
  21  
  22  /**
  23   * @module moodle-atto_emoticon-button
  24   */
  25  
  26  var COMPONENTNAME = 'atto_emoticon',
  27      CSS = {
  28          EMOTE: 'atto_emoticon_emote',
  29          MAP: 'atto_emoticon_map'
  30      },
  31      SELECTORS = {
  32          EMOTE: '.atto_emoticon_emote'
  33      },
  34      TEMPLATE = '' +
  35              '<div class="{{CSS.MAP}}">' +
  36                  '<ul>' +
  37                      '{{#each emoticons}}' +
  38                          '<li><div>' +
  39                              '<a href="#" class="{{../CSS.EMOTE}}" data-text="{{text}}">' +
  40                                  '<img ' +
  41                                      'src="{{image_url imagename imagecomponent}}" ' +
  42                                      'alt="{{get_string altidentifier altcomponent}}"' +
  43                                  '/>' +
  44                              '</a>' +
  45                          '</div>' +
  46                          '<div>{{text}}</div>' +
  47                          '<div>{{get_string altidentifier altcomponent}}</div>' +
  48                          '</li>' +
  49                      '{{/each}}' +
  50                  '</ul>' +
  51              '</div>';
  52  
  53  /**
  54   * Atto text editor emoticon plugin.
  55   *
  56   * @namespace M.atto_emoticon
  57   * @class button
  58   * @extends M.editor_atto.EditorPlugin
  59   */
  60  
  61  Y.namespace('M.atto_emoticon').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
  62  
  63      /**
  64       * A reference to the current selection at the time that the dialogue
  65       * was opened.
  66       *
  67       * @property _currentSelection
  68       * @type Range
  69       * @private
  70       */
  71      _currentSelection: null,
  72  
  73      initializer: function() {
  74          this.addButton({
  75              icon: 'e/emoticons',
  76              callback: this._displayDialogue
  77          });
  78      },
  79  
  80      /**
  81       * Display the Emoticon chooser.
  82       *
  83       * @method _displayDialogue
  84       * @private
  85       */
  86      _displayDialogue: function() {
  87          // Store the current selection.
  88          this._currentSelection = this.get('host').getSelection();
  89          if (this._currentSelection === false) {
  90              return;
  91          }
  92  
  93          var dialogue = this.getDialogue({
  94              headerContent: M.util.get_string('insertemoticon', COMPONENTNAME),
  95              focusAfterHide: true
  96          }, true);
  97  
  98          // Set the dialogue content, and then show the dialogue.
  99          dialogue.set('bodyContent', this._getDialogueContent())
 100                  .show();
 101      },
 102  
 103      /**
 104       * Insert the emoticon.
 105       *
 106       * @method _insertEmote
 107       * @param {EventFacade} e
 108       * @private
 109       */
 110      _insertEmote: function(e) {
 111          var target = e.target.ancestor(SELECTORS.EMOTE, true),
 112              host = this.get('host');
 113  
 114          e.preventDefault();
 115  
 116          // Hide the dialogue.
 117          this.getDialogue({
 118              focusAfterHide: null
 119          }).hide();
 120  
 121          // Build the Emoticon text.
 122          var html = ' ' + target.getData('text') + ' ';
 123  
 124          // Focus on the previous selection.
 125          host.setSelection(this._currentSelection);
 126  
 127          // And add the character.
 128          host.insertContentAtFocusPoint(html);
 129  
 130          this.markUpdated();
 131      },
 132  
 133      /**
 134       * Generates the content of the dialogue, attaching event listeners to
 135       * the content.
 136       *
 137       * @method _getDialogueContent
 138       * @return {Node} Node containing the dialogue content
 139       * @private
 140       */
 141      _getDialogueContent: function() {
 142          var template = Y.Handlebars.compile(TEMPLATE),
 143              content = Y.Node.create(template({
 144                  emoticons: this.get('emoticons'),
 145                  CSS: CSS
 146              }));
 147          content.delegate('click', this._insertEmote, SELECTORS.EMOTE, this);
 148          content.delegate('key', this._insertEmote, '32', SELECTORS.EMOTE, this);
 149  
 150          return content;
 151      }
 152  }, {
 153      ATTRS: {
 154          /**
 155           * The list of emoticons to display.
 156           *
 157           * @attribute emoticons
 158           * @type array
 159           * @default {}
 160           */
 161          emoticons: {
 162              value: {}
 163          }
 164      }
 165  });