[Summary view] [Print] [Text view]

   1  YUI.add('moodle-atto_emoticon-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_emoticon
  20   * @copyright  2014 Frédéric Massart
  21   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22   */
  23  
  24  /**
  25   * @module moodle-atto_emoticon-button
  26   */
  27  
  28  var COMPONENTNAME = 'atto_emoticon',
  29      CSS = {
  30          EMOTE: 'atto_emoticon_emote',
  31          MAP: 'atto_emoticon_map'
  32      },
  33      SELECTORS = {
  34          EMOTE: '.atto_emoticon_emote'
  35      },
  36      TEMPLATE = '' +
  37              '<div class="{{CSS.MAP}}">' +
  38                  '<ul>' +
  39                      '{{#each emoticons}}' +
  40                          '<li><div>' +
  41                              '<a href="#" class="{{../CSS.EMOTE}}" data-text="{{text}}">' +
  42                                  '<img ' +
  43                                      'src="{{image_url imagename imagecomponent}}" ' +
  44                                      'alt="{{get_string altidentifier altcomponent}}"' +
  45                                  '/>' +
  46                              '</a>' +
  47                          '</div>' +
  48                          '<div>{{text}}</div>' +
  49                          '<div>{{get_string altidentifier altcomponent}}</div>' +
  50                          '</li>' +
  51                      '{{/each}}' +
  52                  '</ul>' +
  53              '</div>';
  54  
  55  /**
  56   * Atto text editor emoticon plugin.
  57   *
  58   * @namespace M.atto_emoticon
  59   * @class button
  60   * @extends M.editor_atto.EditorPlugin
  61   */
  62  
  63  Y.namespace('M.atto_emoticon').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
  64  
  65      /**
  66       * A reference to the current selection at the time that the dialogue
  67       * was opened.
  68       *
  69       * @property _currentSelection
  70       * @type Range
  71       * @private
  72       */
  73      _currentSelection: null,
  74  
  75      initializer: function() {
  76          this.addButton({
  77              icon: 'e/emoticons',
  78              callback: this._displayDialogue
  79          });
  80      },
  81  
  82      /**
  83       * Display the Emoticon chooser.
  84       *
  85       * @method _displayDialogue
  86       * @private
  87       */
  88      _displayDialogue: function() {
  89          // Store the current selection.
  90          this._currentSelection = this.get('host').getSelection();
  91          if (this._currentSelection === false) {
  92              return;
  93          }
  94  
  95          var dialogue = this.getDialogue({
  96              headerContent: M.util.get_string('insertemoticon', COMPONENTNAME),
  97              focusAfterHide: true
  98          }, true);
  99  
 100          // Set the dialogue content, and then show the dialogue.
 101          dialogue.set('bodyContent', this._getDialogueContent())
 102                  .show();
 103      },
 104  
 105      /**
 106       * Insert the emoticon.
 107       *
 108       * @method _insertEmote
 109       * @param {EventFacade} e
 110       * @private
 111       */
 112      _insertEmote: function(e) {
 113          var target = e.target.ancestor(SELECTORS.EMOTE, true),
 114              host = this.get('host');
 115  
 116          e.preventDefault();
 117  
 118          // Hide the dialogue.
 119          this.getDialogue({
 120              focusAfterHide: null
 121          }).hide();
 122  
 123          // Build the Emoticon text.
 124          var html = ' ' + target.getData('text') + ' ';
 125  
 126          // Focus on the previous selection.
 127          host.setSelection(this._currentSelection);
 128  
 129          // And add the character.
 130          host.insertContentAtFocusPoint(html);
 131  
 132          this.markUpdated();
 133      },
 134  
 135      /**
 136       * Generates the content of the dialogue, attaching event listeners to
 137       * the content.
 138       *
 139       * @method _getDialogueContent
 140       * @return {Node} Node containing the dialogue content
 141       * @private
 142       */
 143      _getDialogueContent: function() {
 144          var template = Y.Handlebars.compile(TEMPLATE),
 145              content = Y.Node.create(template({
 146                  emoticons: this.get('emoticons'),
 147                  CSS: CSS
 148              }));
 149          content.delegate('click', this._insertEmote, SELECTORS.EMOTE, this);
 150          content.delegate('key', this._insertEmote, '32', SELECTORS.EMOTE, this);
 151  
 152          return content;
 153      }
 154  }, {
 155      ATTRS: {
 156          /**
 157           * The list of emoticons to display.
 158           *
 159           * @attribute emoticons
 160           * @type array
 161           * @default {}
 162           */
 163          emoticons: {
 164              value: {}
 165          }
 166      }
 167  });
 168  
 169  
 170  }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin"]});