[Summary view] [Print] [Text view]

   1  YUI.add('moodle-atto_html-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_html
  20   * @copyright  2013 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_html-button
  26   */
  27  
  28  /**
  29   * Atto text editor HTML plugin.
  30   *
  31   * @namespace M.atto_html
  32   * @class button
  33   * @extends M.editor_atto.EditorPlugin
  34   */
  35  
  36  Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
  37      initializer: function() {
  38          this.addButton({
  39              icon: 'e/source_code',
  40              callback: this._toggleHTML
  41          });
  42  
  43          // Attach a submit listener to the form.
  44          var form = this.get('host').textarea.ancestor('form');
  45          if (form) {
  46              form.on('submit', this._submitClean, this);
  47          }
  48      },
  49  
  50      /**
  51       * Toggle the view between the content editable div, and the textarea,
  52       * updating the content as it goes.
  53       *
  54       * @method _toggleHTML
  55       * @private
  56       */
  57      _toggleHTML: function() {
  58          // Toggle the HTML status.
  59          this.set('isHTML', !this.get('isHTML'));
  60  
  61          // Now make the UI changes.
  62          this._showHTML();
  63      },
  64  
  65      /**
  66       * Set the current state of the textarea and contenteditable div
  67       * according to the isHTML property.
  68       *
  69       * @method _showHTML
  70       * @private
  71       */
  72      _showHTML: function() {
  73          var host = this.get('host');
  74          if (!this.get('isHTML')) {
  75              // Unhighlight icon.
  76              this.unHighlightButtons('html');
  77  
  78              // Enable all plugins.
  79              host.enablePlugins();
  80  
  81              // Copy the text to the contenteditable div.
  82              host.updateFromTextArea();
  83  
  84              // Hide the textarea, and show the editor.
  85              host.textarea.hide();
  86              this.editor.show();
  87  
  88              // Focus on the editor.
  89              host.focus();
  90  
  91              // And re-mark everything as updated.
  92              this.markUpdated();
  93          } else {
  94              // Highlight icon.
  95              this.highlightButtons('html');
  96  
  97              // Disable all plugins.
  98              host.disablePlugins();
  99  
 100              // And then re-enable this one.
 101              host.enablePlugins(this.name);
 102  
 103              // Copy the text to the contenteditable div.
 104              host.updateOriginal();
 105  
 106              // Get the width, padding, and margin of the editor.
 107              host.textarea.setStyles({
 108                  'width': this.editor.getComputedStyle('width'),
 109                  'height': this.editor.getComputedStyle('height'),
 110                  'margin': this.editor.getComputedStyle('margin'),
 111                  'padding': this.editor.getComputedStyle('padding')
 112              });
 113  
 114              // Hide the editor, and show the textarea.
 115              this.editor.hide();
 116              host.textarea.show();
 117  
 118              // Focus on the textarea.
 119              host.textarea.focus();
 120          }
 121      },
 122  
 123      /**
 124       * Run the textarea content through the HTML scrubber if it was form submitted in HTML mode.
 125       *
 126       * @method _submitClean
 127       * @private
 128       */
 129      _submitClean: function() {
 130          // If we are in HTML mode, clean the text area.
 131          if (this.get('isHTML')) {
 132              var host = this.get('host');
 133              // Update the editor from text area then textarea from editor. This ensures all proper cleaning happens.
 134              host.updateFromTextArea();
 135              host.updateOriginal();
 136          }
 137      }
 138  }, {
 139      ATTRS: {
 140          /**
 141           * The current state for the HTML view. If true, the HTML source is
 142           * shown in a textarea, otherwise the contenteditable area is
 143           * displayed.
 144           *
 145           * @attribute isHTML
 146           * @type Boolean
 147           * @default false
 148           */
 149          isHTML: {
 150              value: false
 151          }
 152      }
 153  });
 154  
 155  
 156  }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "event-valuechange"]});