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