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_accessibilityhelper

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

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

 */

/**

 * @module moodle-atto_accessibilityhelper-button

 */

/**

 * Atto text editor accessibilityhelper plugin.

 *

 * This plugin adds some functions to do things that screen readers do not do well.

 * Specifically, listing the active styles for the selected text,

 * listing the images in the page, listing the links in the page.

 *

 *

 * @namespace M.atto_accessibilityhelper

 * @class Button

 * @extends M.editor_atto.EditorPlugin

 */

var COMPONENT = 'atto_accessibilityhelper',

    TEMPLATE = '' +

        // The list of styles.

        '<div><p id="{{elementid}}_{{CSS.STYLESLABEL}}">' +

            '{{get_string "liststyles" component}}<br/>' +

            '<span aria-labelledby="{{elementid}}_{{CSS.STYLESLABEL}}" />' +

        '</p></div>' +

        '<span class="listStyles"></span>' +

        '<p id="{{elementid}}_{{CSS.LINKSLABEL}}">' +

            '{{get_string "listlinks" component}}<br/>' +

            '<span aria-labelledby="{{elementid}}_{{CSS.LINKSLABEL}}"/>' +

        '</p>' +

        '<span class="listLinks"></span>' +

        '<p id="{{elementid}}_{{CSS.IMAGESLABEL}}">' +

            '{{get_string "listimages" component}}<br/>' +

            '<span aria-labelledby="{{elementid}}_{{CSS.IMAGESLABEL}}"/>' +

        '</p>' +

        '<span class="listImages"></span>',

    CSS = {

        STYLESLABEL: COMPONENT + '_styleslabel',

        LINKSLABEL: COMPONENT + '_linkslabel',

        IMAGESLABEL: COMPONENT + '_imageslabel'

    };

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

    initializer: function() {

        this.addButton({

            icon: 'e/screenreader_helper',

            callback: this._displayDialogue

        });

    },

    /**

     * Display the Accessibility Helper tool.

     *

     * @method _displayDialogue

     * @private

     */

    _displayDialogue: function() {

        var dialogue = this.getDialogue({

            headerContent: M.util.get_string('pluginname', COMPONENT),

            width: '800px',

            focusAfterHide: true

        });

        // Set the dialogue content, and then show the dialogue.

        dialogue.set('bodyContent', this._getDialogueContent())

                .show();

    },

    /**

     * Return the dialogue content for the tool, attaching any required

     * events.

     *

     * @method _getDialogueContent

     * @private

     * @return {Node} The content to place in the dialogue.

     */

    _getDialogueContent: function() {

        var template = Y.Handlebars.compile(TEMPLATE),

            content = Y.Node.create(template({

                CSS: CSS,

                component: COMPONENT

            }));

        // Add the data.

        content.one('.listStyles')

                .empty()

                .appendChild(this._listStyles());

        content.one('.listLinks')

                .empty()

                .appendChild(this._listLinks());

        content.one('.listImages')

                .empty()

                .appendChild(this._listImages());

        return content;

    },

    /**

     * List the styles present for the selection.

     *

     * @method _listStyles

     * @return {String} The list of styles in use.

     * @private

     */

    _listStyles: function() {

        // Clear the status node.

        var list = [],

            host = this.get('host'),

            current = host.getSelectionParentNode(),

            tagname;

        if (current) {

            current = Y.one(current);

        }

        while (current && (current !== this.editor)) {

            tagname = current.get('tagName');

            if (typeof tagname !== 'undefined') {

                list.push(Y.Escape.html(tagname));

            }

            current = current.ancestor();

        }

        if (list.length === 0) {

            list.push(M.util.get_string('nostyles', COMPONENT));

        }

        list.reverse();

        // Append the list of current styles.

        return list.join(', ');

    },

    /**

     * List the links for the current editor

     *

     * @method _listLinks

     * @return {string}

     * @private

     */

    _listLinks: function() {

        var list = Y.Node.create('<ol />'),

            listitem,

            selectlink;

        this.editor.all('a').each(function(link) {

            selectlink = Y.Node.create('<a href="#" title="' +

                    M.util.get_string('selectlink', COMPONENT) + '">' +

                    Y.Escape.html(link.get('text')) +

                    '</a>');

            selectlink.setData('sourcelink', link);

            selectlink.on('click', this._linkSelected, this);

            listitem = Y.Node.create('<li></li>');

            listitem.appendChild(selectlink);

            list.appendChild(listitem);

        }, this);

        if (!list.hasChildNodes()) {

            list.append('<li>' + M.util.get_string('nolinks', COMPONENT) + '</li>');

        }

        // Append the list of current styles.

        return list;

    },

    /**

     * List the images used in the editor.

     *

     * @method _listImages

     * @return {Node} A Node containing all of the images present in the editor.

     * @private

     */

    _listImages: function() {

        var list = Y.Node.create('<ol/>'),

            listitem,

            selectimage;

        this.editor.all('img').each(function(image) {

            // Get the alt or title or img url of the image.

            var imgalt = image.getAttribute('alt');

            if (imgalt === '') {

                imgalt = image.getAttribute('title');

                if (imgalt === '') {

                    imgalt = image.getAttribute('src');

                }

            }

            selectimage = Y.Node.create('<a href="#" title="' +

                    M.util.get_string('selectimage', COMPONENT) + '">' +

                    Y.Escape.html(imgalt) +

                    '</a>');

            selectimage.setData('sourceimage', image);

            selectimage.on('click', this._imageSelected, this);

            listitem = Y.Node.create('<li></li>');

            listitem.append(selectimage);

            list.append(listitem);

        }, this);

        if (!list.hasChildNodes()) {

            list.append('<li>' + M.util.get_string('noimages', COMPONENT) + '</li>');

        }

        // Append the list of current styles.

        return list;

    },

    /**

     * Event handler for selecting an image.

     *

     * @method _imageSelected

     * @param {EventFacade} e

     * @private

     */

    _imageSelected: function(e) {

        e.preventDefault();

        this.getDialogue({

            focusAfterNode: null

        }).hide();

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

            target = e.target.getData('sourceimage');

        this.editor.focus();

        host.setSelection(host.getSelectionFromNode(target));

    },

    /**

     * Event handler for selecting a link.

     *

     * @method _linkSelected

     * @param {EventFacade} e

     * @private

     */

    _linkSelected: function(e) {

        e.preventDefault();

        this.getDialogue({

            focusAfterNode: null

        }).hide();

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

            target = e.target.getData('sourcelink');

        this.editor.focus();

        host.setSelection(host.getSelectionFromNode(target));

    }

});