[Summary view] [Print] [Text view]

   1  YUI.add('moodle-atto_indent-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_indent
  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_indent-button
  26   */
  27  
  28  /**
  29   * Atto text editor indent plugin.
  30   *
  31   * @namespace M.atto_indent
  32   * @class button
  33   * @extends M.editor_atto.EditorPlugin
  34   */
  35  
  36  Y.namespace('M.atto_indent').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
  37      initializer: function() {
  38  
  39          this.addButton({
  40              icon: 'e/decrease_indent',
  41              title: 'outdent',
  42              buttonName: 'outdent',
  43              callback: this.outdent
  44          });
  45  
  46          this.addButton({
  47              icon: 'e/increase_indent',
  48              title: 'indent',
  49              buttonName: 'indent',
  50              callback: this.indent
  51          });
  52      },
  53  
  54      /**
  55       * Indents the currently selected content.
  56       *
  57       * @method indent
  58       */
  59      indent: function() {
  60          // Save the current selection - we want to restore this.
  61          var selection = window.rangy.saveSelection(),
  62              blockquotes = this.editor.all('blockquote'),
  63              count = blockquotes.size();
  64  
  65          // Remove display:none from rangy markers so browser doesn't delete them.
  66          this.editor.all('.rangySelectionBoundary').setStyle('display', null);
  67  
  68          // Mark all existing block quotes in case the user has actually added some.
  69          blockquotes.addClass('pre-existing');
  70  
  71          // Run the indent command.
  72          document.execCommand('indent', false, null);
  73  
  74          // Get all blockquotes, both existing and new.
  75          blockquotes = this.editor.all('blockquote');
  76  
  77          if (blockquotes.size() !== count) {
  78              // There are new block quotes, the indent exec has wrapped some content in block quotes in order
  79              // to indent the selected content.
  80              // We don't want blockquotes, we're going to convert them to divs.
  81              this.replaceBlockquote(this.editor);
  82              // Finally restore the seelction. The content has changed - sometimes this works - but not always :(
  83              window.rangy.restoreSelection(selection);
  84          } else if (blockquotes.size() > 0) {
  85              // There were no new blockquotes, this happens if the user is indenting/outdenting a list.
  86              blockquotes.removeClass('pre-existing');
  87          }
  88  
  89          // Remove the selection markers - a clean up really.
  90          window.rangy.removeMarkers(selection);
  91  
  92          // Mark the text as having been updated.
  93          this.markUpdated();
  94      },
  95  
  96      /**
  97       * Outdents the currently selected content.
  98       *
  99       * @method outdent
 100       */
 101      outdent: function() {
 102          // Save the selection we will want to restore it.
 103          var selection = window.rangy.saveSelection(),
 104              blockquotes = this.editor.all('blockquote'),
 105              count = blockquotes.size();
 106  
 107          // Mark existing blockquotes so that we don't convert them later.
 108          blockquotes.addClass('pre-existing');
 109  
 110          // Replace all div indents with blockquote indents so that we can rely on the browser functionality.
 111          this.replaceEditorIndents(this.editor);
 112  
 113          // Restore the users selection - otherwise the next outdent operation won't work!
 114          window.rangy.restoreSelection(selection);
 115          // And save it once more.
 116          selection = window.rangy.saveSelection();
 117  
 118          // Outdent.
 119          document.execCommand('outdent', false, null);
 120  
 121          // Get all blockquotes so that we can work out what happened.
 122          blockquotes = this.editor.all('blockquote');
 123  
 124          if (blockquotes.size() !== count) {
 125              // The number of blockquotes hasn't changed.
 126              // This occurs when the user has outdented a list item.
 127              this.replaceBlockquote(this.editor);
 128              window.rangy.restoreSelection(selection);
 129          } else if (blockquotes.size() > 0) {
 130              // The number of blockquotes is the same and is more than 0 we just need to clean up the class
 131              // we added to mark pre-existing blockquotes.
 132              blockquotes.removeClass('pre-existing');
 133          }
 134  
 135          // Clean up any left over selection markers.
 136          window.rangy.removeMarkers(selection);
 137  
 138          // Mark the text as having been updated.
 139          this.markUpdated();
 140      },
 141  
 142      /**
 143       * Replaces all blockquotes within an editor with div indents.
 144       * @method replaceBlockquote
 145       * @param Editor editor
 146       */
 147      replaceBlockquote: function(editor) {
 148          editor.all('blockquote').setAttribute('data-iterate', true);
 149          var blockquote = editor.one('blockquote'),
 150              margindir = (Y.one('body.dir-ltr')) ? 'marginLeft' : 'marginRight';
 151          while (blockquote) {
 152              blockquote.removeAttribute('data-iterate');
 153              if (blockquote.hasClass('pre-existing')) {
 154                  blockquote.removeClass('pre-existing');
 155              } else {
 156                  var clone = Y.Node.create('<div></div>')
 157                          .setAttrs(blockquote.getAttrs())
 158                          .setStyle(margindir, '30px')
 159                          .addClass('editor-indent');
 160                  // We use childNodes here because we are interested in both type 1 and 3 child nodes.
 161                  var children = blockquote.getDOMNode().childNodes;
 162                  var child;
 163                  child = children[0];
 164                  while (typeof child !== "undefined") {
 165                      clone.append(child);
 166                      child = children[0];
 167                  }
 168                  blockquote.replace(clone);
 169              }
 170              blockquote = editor.one('blockquote[data-iterate]');
 171          }
 172      },
 173  
 174      /**
 175       * Replaces all div indents with blockquotes.
 176       * @method replaceEditorIndents
 177       * @param Editor editor
 178       */
 179      replaceEditorIndents: function(editor) {
 180          // We use the editor-indent class because it is preserved between saves.
 181          var indent = editor.one('.editor-indent');
 182          while (indent) {
 183              var clone = Y.Node.create('<blockquote></blockquote>')
 184                      .setAttrs(indent
 185                      .getAttrs())
 186                      .removeClass('editor-indent');
 187              // We use childNodes here because we are interested in both type 1 and 3 child nodes.
 188              var children = indent.getDOMNode().childNodes;
 189              var child;
 190              child = children[0];
 191              while (typeof child !== "undefined") {
 192                  clone.append(child);
 193                  child = children[0];
 194              }
 195              indent.replace(clone);
 196              indent = editor.one('.editor-indent');
 197          }
 198      }
 199  });
 200  
 201  
 202  }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin"]});