Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/*
 * @package    atto_indent
 * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/**
 * @module     moodle-atto_indent-button
 */

/**
 * Atto text editor indent plugin.
 *
 * @namespace M.atto_indent
 * @class button
 * @extends M.editor_atto.EditorPlugin
 */

Y.namespace('M.atto_indent').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
    initializer: function() {

        this.addButton({
            icon: 'e/decrease_indent',
            title: 'outdent',
            buttonName: 'outdent',
            callback: this.outdent
        });

        this.addButton({
            icon: 'e/increase_indent',
            title: 'indent',
            buttonName: 'indent',
            callback: this.indent
        });
    },

    /**
     * Indents the currently selected content.
     *
     * @method indent
     */
    indent: function() {
        // Save the current selection - we want to restore this.
        var selection = window.rangy.saveSelection(),
            blockquotes = this.editor.all('blockquote'),
            count = blockquotes.size();

        // Remove display:none from rangy markers so browser doesn't delete them.
        this.editor.all('.rangySelectionBoundary').setStyle('display', null);

        // Mark all existing block quotes in case the user has actually added some.
        blockquotes.addClass('pre-existing');

        // Run the indent command.
        document.execCommand('indent', false, null);

        // Fix indent list item.
        this.fixupListItemsAfterIndent();

        // Get all blockquotes, both existing and new.
        blockquotes = this.editor.all('blockquote');

        if (blockquotes.size() !== count) {
            // There are new block quotes, the indent exec has wrapped some content in block quotes in order
            // to indent the selected content.
            // We don't want blockquotes, we're going to convert them to divs.
            this.replaceBlockquote(this.editor);
            // Finally restore the seelction. The content has changed - sometimes this works - but not always :(
            window.rangy.restoreSelection(selection);
        } else if (blockquotes.size() > 0) {
            // There were no new blockquotes, this happens if the user is indenting/outdenting a list.
            blockquotes.removeClass('pre-existing');
        }

        // Remove the selection markers - a clean up really.
        window.rangy.removeMarkers(selection);

        // Mark the text as having been updated.
        this.markUpdated();
    },

    /**
     * Outdents the currently selected content.
     *
     * @method outdent
     */
    outdent: function() {
        // Save the selection we will want to restore it.
        var selection = window.rangy.saveSelection(),
            blockquotes = this.editor.all('blockquote'),
            count = blockquotes.size();

        // Mark existing blockquotes so that we don't convert them later.
        blockquotes.addClass('pre-existing');

        // Replace all div indents with blockquote indents so that we can rely on the browser functionality.
        this.replaceEditorIndents(this.editor);

        // Restore the users selection - otherwise the next outdent operation won't work!
        window.rangy.restoreSelection(selection);
        // And save it once more.
        selection = window.rangy.saveSelection();

        // Outdent.
        document.execCommand('outdent', false, null);

        // Get all blockquotes so that we can work out what happened.
        blockquotes = this.editor.all('blockquote');

        if (blockquotes.size() !== count) {
            // The number of blockquotes hasn't changed.
            // This occurs when the user has outdented a list item.
            this.replaceBlockquote(this.editor);
            window.rangy.restoreSelection(selection);
        } else if (blockquotes.size() > 0) {
            // The number of blockquotes is the same and is more than 0 we just need to clean up the class
            // we added to mark pre-existing blockquotes.
            blockquotes.removeClass('pre-existing');
        }

        // Clean up any left over selection markers.
        window.rangy.removeMarkers(selection);

        // Mark the text as having been updated.
        this.markUpdated();
    },

    /**
     * Replaces all blockquotes within an editor with div indents.
     * @method replaceBlockquote
     * @param Editor editor
     */
    replaceBlockquote: function(editor) {
        editor.all('blockquote').setAttribute('data-iterate', true);
        var blockquote = editor.one('blockquote'),
            margindir = (Y.one('body.dir-ltr')) ? 'marginLeft' : 'marginRight';
        while (blockquote) {
            blockquote.removeAttribute('data-iterate');
            if (blockquote.hasClass('pre-existing')) {
                blockquote.removeClass('pre-existing');
            } else {
                var clone = Y.Node.create('<div></div>')
                        .setAttrs(blockquote.getAttrs())
                        .setStyle(margindir, '30px')
                        .addClass('editor-indent');
                // We use childNodes here because we are interested in both type 1 and 3 child nodes.
                var children = blockquote.getDOMNode().childNodes;
                var child;
                child = children[0];
                while (typeof child !== "undefined") {
                    clone.append(child);
                    child = children[0];
                }
                blockquote.replace(clone);
            }
            blockquote = editor.one('blockquote[data-iterate]');
        }
    },

    /**
     * Replaces all div indents with blockquotes.
     * @method replaceEditorIndents
     * @param Editor editor
     */
    replaceEditorIndents: function(editor) {
        // We use the editor-indent class because it is preserved between saves.
        var indent = editor.one('.editor-indent');
        while (indent) {
            var clone = Y.Node.create('<blockquote></blockquote>')
                    .setAttrs(indent
                    .getAttrs())
                    .removeClass('editor-indent');
            // We use childNodes here because we are interested in both type 1 and 3 child nodes.
            var children = indent.getDOMNode().childNodes;
            var child;
            child = children[0];
            while (typeof child !== "undefined") {
                clone.append(child);
                child = children[0];
            }
            indent.replace(clone);
            indent = editor.one('.editor-indent');
        }
    },
    /**
     * Fixup for list item after indent.
     *
     * @method fixupListItemsAfterIndent
     */
    fixupListItemsAfterIndent: function() {
        var selection = window.rangy.getSelection(),
            rootelement = this.editor.getDOMNode(),
            listelement = selection.anchorNode.parentElement;

        listelement = listelement.closest('ol, ul');
        if (!(listelement && rootelement.contains(listelement))) {
            return;
        }

        // We will move the child list into previous list item of the parent.
        var previous = listelement.previousElementSibling;
        if (previous && previous.tagName === 'LI') {
            previous.appendChild(listelement);
            selection.collapseToEnd();
        }
    }
});