YUI.add('moodle-atto_html-button', function (Y, NAME) {
// 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 .
/*
* @package atto_html
* @copyright 2013 Damyon Wiese
* @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, [], {
initializer: function() {
this.addButton({
icon: 'e/source_code',
callback: this._toggleHTML
});
// Attach a submit listener to the form.
var form = this.get('host').textarea.ancestor('form');
if (form) {
form.on('submit', this._submitClean, 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'));
// Now make the UI changes.
this._showHTML();
},
/**
* Set the current state of the textarea and contenteditable div
* according to the isHTML property.
*
* @method _showHTML
* @private
*/
_showHTML: function() {
var host = this.get('host');
if (!this.get('isHTML')) {
// Unhighlight icon.
this.unHighlightButtons('html');
// Enable all plugins.
host.enablePlugins();
// Copy the text to the contenteditable div.
host.updateFromTextArea();
// Hide the textarea, and show the editor.
host.textarea.hide();
this.editor.show();
// Focus on the editor.
host.focus();
// And re-mark everything as updated.
this.markUpdated();
} else {
// Highlight icon.
this.highlightButtons('html');
// Disable all plugins.
host.disablePlugins();
// And then re-enable this one.
host.enablePlugins(this.name);
// Copy the text to the contenteditable div.
host.updateOriginal();
// Get the width, padding, and margin of the editor.
host.textarea.setStyles({
'width': this.editor.getComputedStyle('width'),
'height': this.editor.getComputedStyle('height'),
'margin': this.editor.getComputedStyle('margin'),
'padding': this.editor.getComputedStyle('padding')
});
// Hide the editor, and show the textarea.
this.editor.hide();
host.textarea.show();
// Focus on the textarea.
host.textarea.focus();
}
},
/**
* Run the textarea content through the HTML scrubber if it was form submitted in HTML mode.
*
* @method _submitClean
* @private
*/
_submitClean: function() {
// If we are in HTML mode, clean the text area.
if (this.get('isHTML')) {
var host = this.get('host');
// Update the editor from text area then textarea from editor. This ensures all proper cleaning happens.
host.updateFromTextArea();
host.updateOriginal();
}
}
}, {
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
}
}
});
}, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "event-valuechange"]});