Current File : /home/vacivi36/ava/lib/editor/atto/plugins/accessibilitychecker/yui/src/button/js/button.js
// 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_accessibilitychecker
* @copyright 2014 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
/**
* @module moodle-atto_accessibilitychecker-button
*/
/**
* Accessibility Checking tool for the Atto editor.
*
* @namespace M.atto_accessibilitychecker
* @class Button
* @extends M.editor_atto.EditorPlugin
*/
var COMPONENT = 'atto_accessibilitychecker';
Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
initializer: function() {
this.addButton({
icon: 'e/accessibility_checker',
callback: this._displayDialogue
});
},
/**
* Display the Accessibility Checker tool.
*
* @method _displayDialogue
* @private
*/
_displayDialogue: function() {
var dialogue = this.getDialogue({
headerContent: M.util.get_string('pluginname', COMPONENT),
width: '500px',
focusAfterHide: true
});
// Set the dialogue content, and then show the dialogue.
dialogue.set('bodyContent', this._getDialogueContent())
.show();
},
/**
* Return the dialogue content for the tool.
*
* @method _getDialogueContent
* @private
* @return {Node} The content to place in the dialogue.
*/
_getDialogueContent: function() {
var content = Y.Node.create('<div style="word-wrap: break-word;"></div>');
content.append(this._getWarnings());
// Add ability to select problem areas in the editor.
content.delegate('click', function(e) {
e.preventDefault();
var host = this.get('host'),
node = e.currentTarget.getData('sourceNode'),
dialogue = this.getDialogue();
if (node) {
// Focus on the editor as we hide the dialogue.
dialogue.set('focusAfterHide', this.editor).hide();
// Then set the selection.
host.setSelection(host.getSelectionFromNode(node));
} else {
// Hide the dialogue.
dialogue.hide();
}
}, 'a', this);
return content;
},
/**
* Find all problems with the content editable region.
*
* @method _getWarnings
* @return {Node} A complete list of all warnings and problems.
* @private
*/
_getWarnings: function() {
var problemNodes,
list = Y.Node.create('<div></div>');
// Images with no alt text or dodgy alt text.
problemNodes = [];
this.editor.all('img').each(function(img) {
var alt = img.getAttribute('alt');
if (typeof alt === 'undefined' || alt === '') {
if (img.getAttribute('role') !== 'presentation') {
problemNodes.push(img);
}
}
}, this);
this._addWarnings(list, M.util.get_string('imagesmissingalt', COMPONENT), problemNodes, true);
problemNodes = [];
this.editor.all('*').each(function(node) {
var foreground,
background,
ratio,
lum1,
lum2;
// Check for non-empty text.
if (Y.Lang.trim(node.get('text')) !== '') {
foreground = Y.Color.fromArray(
this._getComputedBackgroundColor(node, node.getComputedStyle('color')),
Y.Color.TYPES.RGBA
);
background = Y.Color.fromArray(this._getComputedBackgroundColor(node), Y.Color.TYPES.RGBA);
lum1 = this._getLuminanceFromCssColor(foreground);
lum2 = this._getLuminanceFromCssColor(background);
// Algorithm from "http://www.w3.org/TR/WCAG20-GENERAL/G18.html".
if (lum1 > lum2) {
ratio = (lum1 + 0.05) / (lum2 + 0.05);
} else {
ratio = (lum2 + 0.05) / (lum1 + 0.05);
}
if (ratio <= 4.5) {
Y.log('Contrast ratio is too low: ' + ratio +
' Colour 1: ' + foreground +
' Colour 2: ' + background +
' Luminance 1: ' + lum1 +
' Luminance 2: ' + lum2);
// We only want the highest node with dodgy contrast reported.
var i = 0;
var found = false;
for (i = 0; i < problemNodes.length; i++) {
if (node.ancestors('*').indexOf(problemNodes[i]) !== -1) {
// Do not add node - it already has a parent in the list.
found = true;
break;
} else if (problemNodes[i].ancestors('*').indexOf(node) !== -1) {
// Replace the existing node with this one because it is higher up the DOM.
problemNodes[i] = node;
found = true;
break;
}
}
if (!found) {
problemNodes.push(node);
}
}
}
}, this);
this._addWarnings(list, M.util.get_string('needsmorecontrast', COMPONENT), problemNodes, false);
// Check for lots of text with no headings.
if (this.editor.get('text').length > 1000 && !this.editor.one('h3, h4, h5')) {
this._addWarnings(list, M.util.get_string('needsmoreheadings', COMPONENT), [this.editor], false);
}
// Check for tables with no captions.
problemNodes = [];
this.editor.all('table').each(function(table) {
var caption = table.one('caption');
if (caption === null || caption.get('text').trim() === '') {
problemNodes.push(table);
}
}, this);
this._addWarnings(list, M.util.get_string('tablesmissingcaption', COMPONENT), problemNodes, false);
// Check for tables with merged cells.
problemNodes = [];
this.editor.all('table').each(function(table) {
var caption = table.one('[colspan],[rowspan]');
if (caption !== null) {
problemNodes.push(table);
}
}, this);
this._addWarnings(list, M.util.get_string('tableswithmergedcells', COMPONENT), problemNodes, false);
// Check for tables with no row/col headers
problemNodes = [];
this.editor.all('table').each(function(table) {
if (table.one('tr').one('td')) {
// First row has a non-header cell, so all rows must have at least one header.
table.all('tr').some(function(row) {
var header = row.one('th');
if (!header || (header.get('text').trim() === '')) {
problemNodes.push(table);
return true;
}
return false;
}, this);
} else {
// First row must have at least one header then.
var hasHeader = false;
table.one('tr').all('th').some(function(header) {
hasHeader = true;
if (header.get('text').trim() === '') {
problemNodes.push(table);
return true;
}
return false;
});
if (!hasHeader) {
problemNodes.push(table);
}
}
}, this);
this._addWarnings(list, M.util.get_string('tablesmissingheaders', COMPONENT), problemNodes, false);
if (!list.hasChildNodes()) {
list.append('<p>' + M.util.get_string('nowarnings', COMPONENT) + '</p>');
}
// Return the list of current warnings.
return list;
},
/**
* Generate the HTML that lists the found warnings.
*
* @method _addWarnings
* @param {Node} list Node to append the html to.
* @param {String} description Description of this failure.
* @param {array} nodes An array of failing nodes.
* @param {boolean} imagewarnings true if the warnings are related to images, false if text.
*/
_addWarnings: function(list, description, nodes, imagewarnings) {
var warning, fails, i, src, textfield, li, link, text;
if (nodes.length > 0) {
warning = Y.Node.create('<p>' + description + '</p>');
fails = Y.Node.create('<ol class="accessibilitywarnings"></ol>');
i = 0;
for (i = 0; i < nodes.length; i++) {
li = Y.Node.create('<li></li>');
if (imagewarnings) {
src = nodes[i].getAttribute('src');
link = Y.Node.create('<a href="#"><img src="' + src + '" /> ' + src + '</a>');
} else {
textfield = ('innerText' in nodes[i]) ? 'innerText' : 'textContent';
text = nodes[i].get(textfield).trim();
if (text === '') {
text = M.util.get_string('emptytext', COMPONENT);
}
if (nodes[i] === this.editor) {
text = M.util.get_string('entiredocument', COMPONENT);
}
link = Y.Node.create('<a href="#">' + text + '</a>');
}
link.setData('sourceNode', nodes[i]);
li.append(link);
fails.append(li);
}
warning.append(fails);
list.append(warning);
}
},
/**
* Convert a CSS color to a luminance value.
*
* @method _getLuminanceFromCssColor
* @param {String} colortext The Hex value for the colour
* @return {Number} The luminance value.
* @private
*/
_getLuminanceFromCssColor: function(colortext) {
var color;
if (colortext === 'transparent') {
colortext = '#ffffff';
}
color = Y.Color.toArray(Y.Color.toRGB(colortext));
// Algorithm from "http://www.w3.org/TR/WCAG20-GENERAL/G18.html".
var part1 = function(a) {
a = parseInt(a, 10) / 255.0;
if (a <= 0.03928) {
a = a / 12.92;
} else {
a = Math.pow(((a + 0.055) / 1.055), 2.4);
}
return a;
};
var r1 = part1(color[0]),
g1 = part1(color[1]),
b1 = part1(color[2]);
return 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1;
},
/**
* Get the computed RGB converted to full alpha value, considering the node hierarchy.
*
* @method _getComputedBackgroundColor
* @param {Node} node
* @param {String} color The initial colour. If not specified, fetches the backgroundColor from the node.
* @return {Array} Colour in Array form (RGBA)
* @private
*/
_getComputedBackgroundColor: function(node, color) {
color = color || node.getComputedStyle('backgroundColor');
if (color.toLowerCase() === 'transparent') {
// Y.Color doesn't handle 'transparent' properly.
color = 'rgba(1, 1, 1, 0)';
}
// Convert the colour to its constituent parts in RGBA format, then fetch the alpha.
var colorParts = Y.Color.toArray(color);
var alpha = colorParts[3];
if (alpha === 1) {
// If the alpha of the background is already 1, then the parent background colour does not change anything.
return colorParts;
}
// Fetch the computed background colour of the parent and use it to calculate the RGB of this item.
var parentColor = this._getComputedBackgroundColor(node.get('parentNode'));
return [
// RGB = (alpha * R|G|B) + (1 - alpha * solid parent colour).
(1 - alpha) * parentColor[0] + alpha * colorParts[0],
(1 - alpha) * parentColor[1] + alpha * colorParts[1],
(1 - alpha) * parentColor[2] + alpha * colorParts[2],
// We always return a colour with full alpha.
1
];
}
});
Mini Shell