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/>.

/**
 * @component  atto_undo
 * @copyright  2014 Jerome Mouneyrac
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/**
 * @module moodle-atto_undo-button
 */

/**
 * Atto text editor undo plugin.
 *
 * @namespace M.atto_undo
 * @class button
 * @extends M.editor_atto.EditorPlugin
 */

Y.namespace('M.atto_undo').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
    /**
     * The maximum saved number of undo steps.
     *
     * @property _maxUndos
     * @type {Number} The maximum number of saved undos.
     * @default 40
     * @private
     */
    _maxUndos: 40,

    /**
     * History of edits.
     *
     * @property _undoStack
     * @type {Array} The elements of the array are the html strings that make a snapshot
     * @private
     */
    _undoStack: null,

    /**
     * History of edits.
     *
     * @property _redoStack
     * @type {Array} The elements of the array are the html strings that make a snapshot
     * @private
     */
    _redoStack: null,

    /**
     * Add the buttons to the toolbar
     *
     * @method initializer
     */
    initializer: function() {
        // Initialise the undo and redo stacks.
        this._undoStack = [];
        this._redoStack = [];

        this.addButton({
            title: 'undo',
            icon: 'e/undo',
            callback: this._undoHandler,
            buttonName: 'undo',
            keys: 90
        });

        this.addButton({
            title: 'redo',
            icon: 'e/redo',
            callback: this._redoHandler,
            buttonName: 'redo',
            keys: 89
        });

        // Enable the undo once everything has loaded.
        this.get('host').on('pluginsloaded', function() {
            // Adds the current value to the stack.
            this._addToUndo(this._getHTML());
            this.get('host').on('atto:selectionchanged', this._changeListener, this);
        }, this);

        this._updateButtonsStates();
    },

    /**
     * Adds an element to the redo stack.
     *
     * @method _addToRedo
     * @private
     * @param {String} html The HTML content to save.
     */
    _addToRedo: function(html) {
        this._redoStack.push(html);
    },

    /**
     * Adds an element to the undo stack.
     *
     * @method _addToUndo
     * @private
     * @param {String} html The HTML content to save.
     * @param {Boolean} [clearRedo=false] Whether or not we should clear the redo stack.
     */
    _addToUndo: function(html, clearRedo) {
        var last = this._undoStack[this._undoStack.length - 1];

        if (typeof clearRedo === 'undefined') {
            clearRedo = false;
        }

        if (last !== html) {
            this._undoStack.push(html);
            if (clearRedo) {
                this._redoStack = [];
            }
        }

        while (this._undoStack.length > this._maxUndos) {
            this._undoStack.shift();
        }
    },

    /**
     * Get the editor HTML.
     *
     * @method _getHTML
     * @private
     * @return {String} The HTML.
     */
    _getHTML: function() {
        return this.get('host').getCleanHTML();
    },

    /**
     * Get an element on the redo stack.
     *
     * @method _getRedo
     * @private
     * @return {String} The HTML to restore, or undefined.
     */
    _getRedo: function() {
        return this._redoStack.pop();
    },

    /**
     * Get an element on the undo stack.
     *
     * @method _getUndo
     * @private
     * @param {String} current The current HTML.
     * @return {String} The HTML to restore.
     */
    _getUndo: function(current) {
        if (this._undoStack.length === 1) {
            return this._undoStack[0];
        }

        var last = this._undoStack.pop();
        if (last === current) {
            // Oops, the latest undo step is the current content, we should unstack once more.
            // There is no need to do that in a loop as the same stack should never contain duplicates.
            last = this._undoStack.pop();
        }

        // We always need to keep the first element of the stack.
        if (this._undoStack.length === 0) {
            this._addToUndo(last);
        }

        return last;
    },

    /**
     * Restore a value from a stack.
     *
     * @method _restoreValue
     * @private
     * @param {String} html The HTML to restore in the editor.
     */
    _restoreValue: function(html) {
        this.editor.setHTML(html);
        // We always add the restored value to the stack, otherwise an event could think that
        // the content has changed and clear the redo stack.
        this._addToUndo(html);
    },

    /**
     * Update the states of the buttons.
     *
     * @method _updateButtonsStates
     * @private
     */
    _updateButtonsStates: function() {
        if (this._undoStack.length > 1) {
            this.enableButtons('undo');
        } else {
            this.disableButtons('undo');
        }

        if (this._redoStack.length > 0) {
            this.enableButtons('redo');
        } else {
            this.disableButtons('redo');
        }
    },

    /**
     * Handle a click on undo
     *
     * @method _undoHandler
     * @param {Event} The click event
     * @private
     */
    _undoHandler: function(e) {
        e.preventDefault();
        var html = this._getHTML(),
            undo = this._getUndo(html);

        // Edge case, but that could happen. We do nothing when the content equals the undo step.
        if (html === undo) {
            this._updateButtonsStates();
            return;
        }

        // Restore the value.
        this._restoreValue(undo);

        // Add to the redo stack.
        this._addToRedo(html);

        // Update the button states.
        this._updateButtonsStates();
    },

    /**
     * Handle a click on redo
     *
     * @method _redoHandler
     * @param {Event} The click event
     * @private
     */
    _redoHandler: function(e) {
        e.preventDefault();

        // Don't do anything if redo stack is empty.
        if (this._redoStack.length === 0) {
            return;
        }

        var html = this._getHTML(),
            redo = this._getRedo();

        // Edge case, but that could happen. We do nothing when the content equals the redo step.
        if (html === redo) {
            this._updateButtonsStates();
            return;
        }
        // Restore the value.
        this._restoreValue(redo);

        // Update the button states.
        this._updateButtonsStates();
    },

    /**
     * If we are significantly different from the last saved version, save a new version.
     *
     * @method _changeListener
     * @param {EventFacade} The click event
     * @private
     */
    _changeListener: function(e) {
        if (e.event && e.event.type.indexOf('key') !== -1) {
            // These are the 4 arrow keys.
            if ((e.event.keyCode !== 39) &&
                    (e.event.keyCode !== 37) &&
                    (e.event.keyCode !== 40) &&
                    (e.event.keyCode !== 38)) {
                // Skip this event type. We only want focus/mouse/arrow events.
                return;
            }
        }

        this._addToUndo(this._getHTML(), true);
        this._updateButtonsStates();
    }
});