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_html

 * @copyright  2013 Damyon Wiese  <damyon@moodle.com>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

/**

 * @module     moodle-atto_html-button

 */

/**

 * Atto text editor HTML plugin.

 *

 * @namespace M.atto_html

 * @class button

 * @extends M.editor_atto.EditorPlugin

 */

Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {

    _codeMirror: null,

    initializer: function() {

        this.addButton({

            icon: 'e/source_code',

            callback: this._toggleHTML

        });

        // Attach a submit listener to the form.

        // This ensures that the codeMirror is converted back to the original text before form submission.

        var form = this.get('host').textarea.ancestor('form');

        if (form) {

            form.on('submit', function() {

                if (this.get('isHTML')) {

                    this._hideCodeMirror();

                }

            }, this);

        }

    },

    /**

     * Toggle the view between the content editable div, and the textarea,

     * updating the content as it goes.

     *

     * @method _toggleHTML

     * @private

     */

    _toggleHTML: function() {

        // Toggle the HTML status.

        this.set('isHTML', !this.get('isHTML'));

        if (!this.get('isHTML')) {

            this._hideCodeMirror();

        } else {

            this._showCodeMirror();

        }

    },

    /**

     * Show the code mirror.

     *

     * @method _showCodeMirror

     * @private

     */

    _showCodeMirror: function() {

        var host = this.get('host');

        // Disable all plugins.

        host.disablePlugins();

        // And then re-enable this one.

        host.enablePlugins(this.name);

        // Copy the text to the contenteditable div.

        host.updateOriginal();

        // Hide the editor, and show the textarea.

        var dimensions = {

            width: this.editor.getComputedStyle('width'),

            height: this.editor.getComputedStyle('height')

        };

        // Tidy up the content if possible.

        var beautified = Y.M.atto_html.beautify.html_beautify(host.textarea.get('value'), {

            'indent_size': 4,

            'indent_inner_html': true

        });

        host.textarea.set('value', beautified);

        // Create the codeMirror from the textarea.

        this._codeMirror = Y.M.atto_html.CodeMirror.fromTextArea(host.textarea.getDOMNode(), {

            lineNumbers: true,

            mode: 'htmlmixed',

            tabSize: 2,

            lineWrapping: true

        });

        this._codeMirror.on('change', function(cm) {

            cm.save();

        });

        // Hide the text area and ensure that the codeMirror is displayed.

        this.editor.hide();

        this._codeMirror.setSize(dimensions.width, dimensions.height);

        // Focus on the codeMirror.

        this._codeMirror.focus();

    },

    /**

     * Hide the code mirror.

     *

     * @method _hideCodeMirror

     * @private

     */

    _hideCodeMirror: function() {

        var host = this.get('host');

        // Disable placeholder for empty content.

        // This will prevent the editor to copy and submit the empty placeholder.

        host.disablePlaceholderForEmptyContent();

        // Enable all plugins.

        host.enablePlugins();

        // Copy the text to the contenteditable div.

        host.updateFromTextArea();

        // Hide the textarea, and show the editor.

        if (this._codeMirror) {

            Y.one(this._codeMirror.getWrapperElement()).hide();

            // Calling toTextArea will remove the editor and all of its handlers.

            this._codeMirror.toTextArea();

            // Detach any remaining handlers.

            Y.Object.each(this._codeMirror._handlers, function(handlers, eventName) {

                Y.Array.each(handlers, function(handler) {

                    this.off(eventName, handler);

                }, this);

            }, this._codeMirror);

            // Cleanup.

            delete this._codeMirror;

            this._codeMirror = null;

        }

        host.textarea.hide();

        this.editor.show();

        // Focus on the editor.

        host.focus();

        // And re-mark everything as updated.

        this.markUpdated();

        // Enable placeholder for empty content.

        host.enablePlaceholderForEmptyContent();

    }

}, {

    ATTRS: {

        /**

         * The current state for the HTML view. If true, the HTML source is

         * shown in a textarea, otherwise the contenteditable area is

         * displayed.

         *

         * @attribute isHTML

         * @type Boolean

         * @default false

         */

        isHTML: {

            value: false

        }

    }

});