mirror of
https://github.com/moodle/moodle.git
synced 2025-04-05 08:23:01 +02:00
MDL-44773 atto_accessibilitychecker: Set focus on clicked warnings
This commit is contained in:
Frederic Massart
parent
337075d17b
commit
61ebeec143
@ -36,14 +36,6 @@ YUI.add('moodle-atto_accessibilitychecker-button', function (Y, NAME) {
|
||||
var COMPONENT = 'atto_accessibilitychecker';
|
||||
|
||||
Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
|
||||
/**
|
||||
* The warnings which are displayed.
|
||||
*
|
||||
* @property _displayedWarnings
|
||||
* @type Object
|
||||
* @private
|
||||
*/
|
||||
_displayedWarnings: {},
|
||||
|
||||
initializer: function() {
|
||||
this.addButton({
|
||||
@ -86,18 +78,12 @@ Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.
|
||||
e.preventDefault();
|
||||
|
||||
var host = this.get('host'),
|
||||
index = e.target.getAttribute("data-index"),
|
||||
node = this._displayedWarnings[index],
|
||||
node = e.currentTarget.getData('sourceNode'),
|
||||
dialogue = this.getDialogue();
|
||||
|
||||
|
||||
if (node) {
|
||||
// Clear the dialogue's focusAfterHide to ensure we focus
|
||||
// on the selection.
|
||||
dialogue.set('focusAfterHide', null);
|
||||
|
||||
// Hide the dialogue.
|
||||
dialogue.hide();
|
||||
// Focus on the editor as we hide the dialogue.
|
||||
dialogue.set('focusAfterHide', this.editor).hide();
|
||||
|
||||
// Then set the selection.
|
||||
host.setSelection(host.getSelectionFromNode(node));
|
||||
@ -201,25 +187,24 @@ Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.
|
||||
* @param {boolean} imagewarnings true if the warnings are related to images, false if text.
|
||||
*/
|
||||
_addWarnings: function(list, description, nodes, imagewarnings) {
|
||||
var warning, fails, i, key, src, textfield;
|
||||
var warning, fails, i, src, textfield, li, link;
|
||||
|
||||
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) {
|
||||
key = 'image_'+i;
|
||||
src = nodes[i].getAttribute('src');
|
||||
|
||||
fails.append(Y.Node.create('<li><a data-index="'+key+'" href="#"><img data-index="'+key+'" src="' + src + '" /> '+src+'</a></li>'));
|
||||
link = Y.Node.create('<a href="#"><img src="' + src + '" /> ' + src + '</a>');
|
||||
} else {
|
||||
key = 'text_' + i;
|
||||
|
||||
textfield = ('innerText' in nodes[i])? 'innerText' : 'textContent';
|
||||
fails.append(Y.Node.create('<li><a href="#" data-index="'+key+'">' + nodes[i].get(textfield) + '</a></li>'));
|
||||
textfield = ('innerText' in nodes[i]) ? 'innerText' : 'textContent';
|
||||
link = Y.Node.create('<a href="#">' + nodes[i].get(textfield) + '</a>');
|
||||
}
|
||||
this._displayedWarnings[key] = nodes[i];
|
||||
link.setData('sourceNode', nodes[i]);
|
||||
li.append(link);
|
||||
fails.append(li);
|
||||
}
|
||||
|
||||
warning.append(fails);
|
||||
|
||||
@ -1 +1 @@
|
||||
YUI.add("moodle-atto_accessibilitychecker-button",function(e,t){var n="atto_accessibilitychecker";e.namespace("M.atto_accessibilitychecker").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_displayedWarnings:{},initializer:function(){this.addButton({icon:"e/accessibility_checker",callback:this._displayDialogue})},_displayDialogue:function(){var e=this.getDialogue({headerContent:M.util.get_string("pluginname",n),width:"500px",focusAfterHide:!0});e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Node.create('<div style="word-wrap: break-word;"></div>');return t.append(this._getWarnings()),t.delegate("click",function(e){e.preventDefault();var t=this.get("host"),n=e.target.getAttribute("data-index"),r=this._displayedWarnings[n],i=this.getDialogue();r?(i.set("focusAfterHide",null),i.hide(),t.setSelection(t.getSelectionFromNode(r))):i.hide()},"a",this),t},_getWarnings:function(){var t,r=e.Node.create("<div></div>");return t=[],this.editor.all("img").each(function(e){alt=e.getAttribute("alt"),(typeof alt=="undefined"||alt==="")&&e.getAttribute("role")!=="presentation"&&t.push(e)},this),this._addWarnings(r,M.util.get_string("imagesmissingalt",n),t,!0),t=[],this.editor.all("*").each(function(n){var r,i,s,o,u;if(e.Lang.trim(n.get("text"))!==""){r=n.getComputedStyle("color"),i=n.getComputedStyle("backgroundColor"),o=this._getLuminanceFromCssColor(r),u=this._getLuminanceFromCssColor(i),o>u?s=(o+.05)/(u+.05):s=(u+.05)/(o+.05);if(s<=4.5){var a=0,f=!1;for(a=0;a<t.length;a++){if(n.ancestors("*").indexOf(t[a])!==-1){f=!0;break}if(t[a].ancestors("*").indexOf(n)!==-1){t[a]=n,f=!0;break}}f||t.push(n)}}},this),this._addWarnings(r,M.util.get_string("needsmorecontrast",n),t,!1),r.hasChildNodes()||r.append("<p>"+M.util.get_string("nowarnings",n)+"</p>"),r},_addWarnings:function(t,n,r,i){var s,o,u,a,f,l;if(r.length>0){s=e.Node.create("<p>"+n+"</p>"),o=e.Node.create('<ol class="accessibilitywarnings"></ol>'),u=0;for(u=0;u<r.length;u++)i?(a="image_"+u,f=r[u].getAttribute("src"),o.append(e.Node.create('<li><a data-index="'+a+'" href="#"><img data-index="'+a+'" src="'+f+'" /> '+f+"</a></li>"))):(a="text_"+u,l="innerText"in r[u]?"innerText":"textContent",o.append(e.Node.create('<li><a href="#" data-index="'+a+'">'+r[u].get(l)+"</a></li>"))),this._displayedWarnings[a]=r[u];s.append(o),t.append(s)}},_getLuminanceFromCssColor:function(t){var n;t==="transparent"&&(t="#ffffff"),n=e.Color.toArray(e.Color.toRGB(t));var r=function(e){return e=parseInt(e,10)/255,e<=.03928?e/=12.92:e=Math.pow((e+.055)/1.055,2.4),e},i=r(n[0]),s=r(n[1]),o=r(n[2]);return.2126*i+.7152*s+.0722*o}})},"@VERSION@",{requires:["color-base","moodle-editor_atto-plugin"]});
|
||||
YUI.add("moodle-atto_accessibilitychecker-button",function(e,t){var n="atto_accessibilitychecker";e.namespace("M.atto_accessibilitychecker").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.addButton({icon:"e/accessibility_checker",callback:this._displayDialogue})},_displayDialogue:function(){var e=this.getDialogue({headerContent:M.util.get_string("pluginname",n),width:"500px",focusAfterHide:!0});e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Node.create('<div style="word-wrap: break-word;"></div>');return t.append(this._getWarnings()),t.delegate("click",function(e){e.preventDefault();var t=this.get("host"),n=e.currentTarget.getData("sourceNode"),r=this.getDialogue();n?(r.set("focusAfterHide",this.editor).hide(),t.setSelection(t.getSelectionFromNode(n))):r.hide()},"a",this),t},_getWarnings:function(){var t,r=e.Node.create("<div></div>");return t=[],this.editor.all("img").each(function(e){alt=e.getAttribute("alt"),(typeof alt=="undefined"||alt==="")&&e.getAttribute("role")!=="presentation"&&t.push(e)},this),this._addWarnings(r,M.util.get_string("imagesmissingalt",n),t,!0),t=[],this.editor.all("*").each(function(n){var r,i,s,o,u;if(e.Lang.trim(n.get("text"))!==""){r=n.getComputedStyle("color"),i=n.getComputedStyle("backgroundColor"),o=this._getLuminanceFromCssColor(r),u=this._getLuminanceFromCssColor(i),o>u?s=(o+.05)/(u+.05):s=(u+.05)/(o+.05);if(s<=4.5){var a=0,f=!1;for(a=0;a<t.length;a++){if(n.ancestors("*").indexOf(t[a])!==-1){f=!0;break}if(t[a].ancestors("*").indexOf(n)!==-1){t[a]=n,f=!0;break}}f||t.push(n)}}},this),this._addWarnings(r,M.util.get_string("needsmorecontrast",n),t,!1),r.hasChildNodes()||r.append("<p>"+M.util.get_string("nowarnings",n)+"</p>"),r},_addWarnings:function(t,n,r,i){var s,o,u,a,f,l,c;if(r.length>0){s=e.Node.create("<p>"+n+"</p>"),o=e.Node.create('<ol class="accessibilitywarnings"></ol>'),u=0;for(u=0;u<r.length;u++)l=e.Node.create("<li></li>"),i?(a=r[u].getAttribute("src"),c=e.Node.create('<a href="#"><img src="'+a+'" /> '+a+"</a>")):(f="innerText"in r[u]?"innerText":"textContent",c=e.Node.create('<a href="#">'+r[u].get(f)+"</a>")),c.setData("sourceNode",r[u]),l.append(c),o.append(l);s.append(o),t.append(s)}},_getLuminanceFromCssColor:function(t){var n;t==="transparent"&&(t="#ffffff"),n=e.Color.toArray(e.Color.toRGB(t));var r=function(e){return e=parseInt(e,10)/255,e<=.03928?e/=12.92:e=Math.pow((e+.055)/1.055,2.4),e},i=r(n[0]),s=r(n[1]),o=r(n[2]);return.2126*i+.7152*s+.0722*o}})},"@VERSION@",{requires:["color-base","moodle-editor_atto-plugin"]});
|
||||
|
||||
@ -36,14 +36,6 @@ YUI.add('moodle-atto_accessibilitychecker-button', function (Y, NAME) {
|
||||
var COMPONENT = 'atto_accessibilitychecker';
|
||||
|
||||
Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
|
||||
/**
|
||||
* The warnings which are displayed.
|
||||
*
|
||||
* @property _displayedWarnings
|
||||
* @type Object
|
||||
* @private
|
||||
*/
|
||||
_displayedWarnings: {},
|
||||
|
||||
initializer: function() {
|
||||
this.addButton({
|
||||
@ -86,18 +78,12 @@ Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.
|
||||
e.preventDefault();
|
||||
|
||||
var host = this.get('host'),
|
||||
index = e.target.getAttribute("data-index"),
|
||||
node = this._displayedWarnings[index],
|
||||
node = e.currentTarget.getData('sourceNode'),
|
||||
dialogue = this.getDialogue();
|
||||
|
||||
|
||||
if (node) {
|
||||
// Clear the dialogue's focusAfterHide to ensure we focus
|
||||
// on the selection.
|
||||
dialogue.set('focusAfterHide', null);
|
||||
|
||||
// Hide the dialogue.
|
||||
dialogue.hide();
|
||||
// Focus on the editor as we hide the dialogue.
|
||||
dialogue.set('focusAfterHide', this.editor).hide();
|
||||
|
||||
// Then set the selection.
|
||||
host.setSelection(host.getSelectionFromNode(node));
|
||||
@ -196,25 +182,24 @@ Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.
|
||||
* @param {boolean} imagewarnings true if the warnings are related to images, false if text.
|
||||
*/
|
||||
_addWarnings: function(list, description, nodes, imagewarnings) {
|
||||
var warning, fails, i, key, src, textfield;
|
||||
var warning, fails, i, src, textfield, li, link;
|
||||
|
||||
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) {
|
||||
key = 'image_'+i;
|
||||
src = nodes[i].getAttribute('src');
|
||||
|
||||
fails.append(Y.Node.create('<li><a data-index="'+key+'" href="#"><img data-index="'+key+'" src="' + src + '" /> '+src+'</a></li>'));
|
||||
link = Y.Node.create('<a href="#"><img src="' + src + '" /> ' + src + '</a>');
|
||||
} else {
|
||||
key = 'text_' + i;
|
||||
|
||||
textfield = ('innerText' in nodes[i])? 'innerText' : 'textContent';
|
||||
fails.append(Y.Node.create('<li><a href="#" data-index="'+key+'">' + nodes[i].get(textfield) + '</a></li>'));
|
||||
textfield = ('innerText' in nodes[i]) ? 'innerText' : 'textContent';
|
||||
link = Y.Node.create('<a href="#">' + nodes[i].get(textfield) + '</a>');
|
||||
}
|
||||
this._displayedWarnings[key] = nodes[i];
|
||||
link.setData('sourceNode', nodes[i]);
|
||||
li.append(link);
|
||||
fails.append(li);
|
||||
}
|
||||
|
||||
warning.append(fails);
|
||||
|
||||
@ -34,14 +34,6 @@
|
||||
var COMPONENT = 'atto_accessibilitychecker';
|
||||
|
||||
Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
|
||||
/**
|
||||
* The warnings which are displayed.
|
||||
*
|
||||
* @property _displayedWarnings
|
||||
* @type Object
|
||||
* @private
|
||||
*/
|
||||
_displayedWarnings: {},
|
||||
|
||||
initializer: function() {
|
||||
this.addButton({
|
||||
@ -84,18 +76,12 @@ Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.
|
||||
e.preventDefault();
|
||||
|
||||
var host = this.get('host'),
|
||||
index = e.target.getAttribute("data-index"),
|
||||
node = this._displayedWarnings[index],
|
||||
node = e.currentTarget.getData('sourceNode'),
|
||||
dialogue = this.getDialogue();
|
||||
|
||||
|
||||
if (node) {
|
||||
// Clear the dialogue's focusAfterHide to ensure we focus
|
||||
// on the selection.
|
||||
dialogue.set('focusAfterHide', null);
|
||||
|
||||
// Hide the dialogue.
|
||||
dialogue.hide();
|
||||
// Focus on the editor as we hide the dialogue.
|
||||
dialogue.set('focusAfterHide', this.editor).hide();
|
||||
|
||||
// Then set the selection.
|
||||
host.setSelection(host.getSelectionFromNode(node));
|
||||
@ -199,25 +185,24 @@ Y.namespace('M.atto_accessibilitychecker').Button = Y.Base.create('button', Y.M.
|
||||
* @param {boolean} imagewarnings true if the warnings are related to images, false if text.
|
||||
*/
|
||||
_addWarnings: function(list, description, nodes, imagewarnings) {
|
||||
var warning, fails, i, key, src, textfield;
|
||||
var warning, fails, i, src, textfield, li, link;
|
||||
|
||||
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) {
|
||||
key = 'image_'+i;
|
||||
src = nodes[i].getAttribute('src');
|
||||
|
||||
fails.append(Y.Node.create('<li><a data-index="'+key+'" href="#"><img data-index="'+key+'" src="' + src + '" /> '+src+'</a></li>'));
|
||||
link = Y.Node.create('<a href="#"><img src="' + src + '" /> ' + src + '</a>');
|
||||
} else {
|
||||
key = 'text_' + i;
|
||||
|
||||
textfield = ('innerText' in nodes[i])? 'innerText' : 'textContent';
|
||||
fails.append(Y.Node.create('<li><a href="#" data-index="'+key+'">' + nodes[i].get(textfield) + '</a></li>'));
|
||||
textfield = ('innerText' in nodes[i]) ? 'innerText' : 'textContent';
|
||||
link = Y.Node.create('<a href="#">' + nodes[i].get(textfield) + '</a>');
|
||||
}
|
||||
this._displayedWarnings[key] = nodes[i];
|
||||
link.setData('sourceNode', nodes[i]);
|
||||
li.append(link);
|
||||
fails.append(li);
|
||||
}
|
||||
|
||||
warning.append(fails);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user