mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-14 12:40:01 +01:00
Code Issues Projects Releases Wiki Activity

MDL-46917 atto: Focus on the editor when the form label is selected

Browse Source
This commit is contained in:
Andrew Nicols 2014-08-21 16:38:05 +08:00
parent e609e6cf02
commit 1b8f073de3
8 changed files with 172 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/editor/atto/plugins/html/yui/build/moodle-atto_html-button/moodle-atto_html-button-debug.js vendored
View File

@ -64,7 +64,9 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
* @private
*/
_showHTML: function() {
var host = this.get('host');
var host = this.get('host'),
textareaLabel = host.textareaLabel;
if (!this.get('isHTML')) {
// Unhighlight icon.
this.unHighlightButtons('html');
@ -79,6 +81,11 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
host.textarea.hide();
this.editor.show();
if (textareaLabel) {
// Update the textarea label.
textareaLabel.setAttribute('for', this.editor.getAttribute('id'));
}
// Focus on the editor.
host.focus();
@ -109,6 +116,10 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
this.editor.hide();
host.textarea.show();
if (textareaLabel) {
// Update the textarea label.
textareaLabel.setAttribute('for', host.textarea.getAttribute('id'));
}
// Focus on the textarea.
host.textarea.focus();

2
lib/editor/atto/plugins/html/yui/build/moodle-atto_html-button/moodle-atto_html-button-min.js vendored
View File

@ -1 +1 @@
YUI.add("moodle-atto_html-button",function(e,t){e.namespace("M.atto_html").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.addButton({icon:"e/source_code",callback:this._toggleHTML})},_toggleHTML:function(){this.set("isHTML",!this.get("isHTML")),this._showHTML()},_showHTML:function(){var e=this.get("host");this.get("isHTML")?(this.highlightButtons("html"),e.disablePlugins(),e.enablePlugins(this.name),e.updateOriginal(),e.textarea.setStyles({width:this.editor.getComputedStyle("width"),height:this.editor.getComputedStyle("height"),margin:this.editor.getComputedStyle("margin"),padding:this.editor.getComputedStyle("padding")}),this.editor.hide(),e.textarea.show(),e.textarea.focus()):(this.unHighlightButtons("html"),e.enablePlugins(),e.updateFromTextArea(),e.textarea.hide(),this.editor.show(),e.focus(),this.markUpdated())}},{ATTRS:{isHTML:{value:!1}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","event-valuechange"]});
YUI.add("moodle-atto_html-button",function(e,t){e.namespace("M.atto_html").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.addButton({icon:"e/source_code",callback:this._toggleHTML})},_toggleHTML:function(){this.set("isHTML",!this.get("isHTML")),this._showHTML()},_showHTML:function(){var e=this.get("host"),t=e.textareaLabel;this.get("isHTML")?(this.highlightButtons("html"),e.disablePlugins(),e.enablePlugins(this.name),e.updateOriginal(),e.textarea.setStyles({width:this.editor.getComputedStyle("width"),height:this.editor.getComputedStyle("height"),margin:this.editor.getComputedStyle("margin"),padding:this.editor.getComputedStyle("padding")}),this.editor.hide(),e.textarea.show(),t&&t.setAttribute("for",e.textarea.getAttribute("id")),e.textarea.focus()):(this.unHighlightButtons("html"),e.enablePlugins(),e.updateFromTextArea(),e.textarea.hide(),this.editor.show(),t&&t.setAttribute("for",this.editor.getAttribute("id")),e.focus(),this.markUpdated())}},{ATTRS:{isHTML:{value:!1}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","event-valuechange"]});

13
lib/editor/atto/plugins/html/yui/build/moodle-atto_html-button/moodle-atto_html-button.js vendored
View File

@ -64,7 +64,9 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
* @private
*/
_showHTML: function() {
var host = this.get('host');
var host = this.get('host'),
textareaLabel = host.textareaLabel;
if (!this.get('isHTML')) {
// Unhighlight icon.
this.unHighlightButtons('html');
@ -79,6 +81,11 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
host.textarea.hide();
this.editor.show();
if (textareaLabel) {
// Update the textarea label.
textareaLabel.setAttribute('for', this.editor.getAttribute('id'));
}
// Focus on the editor.
host.focus();
@ -109,6 +116,10 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
this.editor.hide();
host.textarea.show();
if (textareaLabel) {
// Update the textarea label.
textareaLabel.setAttribute('for', host.textarea.getAttribute('id'));
}
// Focus on the textarea.
host.textarea.focus();

13
lib/editor/atto/plugins/html/yui/src/button/js/button.js vendored
View File

@ -62,7 +62,9 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
* @private
*/
_showHTML: function() {
var host = this.get('host');
var host = this.get('host'),
textareaLabel = host.textareaLabel;
if (!this.get('isHTML')) {
// Unhighlight icon.
this.unHighlightButtons('html');
@ -77,6 +79,11 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
host.textarea.hide();
this.editor.show();
if (textareaLabel) {
// Update the textarea label.
textareaLabel.setAttribute('for', this.editor.getAttribute('id'));
}
// Focus on the editor.
host.focus();
@ -107,6 +114,10 @@ Y.namespace('M.atto_html').Button = Y.Base.create('button', Y.M.editor_atto.Edit
this.editor.hide();
host.textarea.show();
if (textareaLabel) {
// Update the textarea label.
textareaLabel.setAttribute('for', host.textarea.getAttribute('id'));
}
// Focus on the textarea.
host.textarea.focus();

50
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js vendored
View File

@ -185,12 +185,8 @@ Y.extend(Editor, Y.Base, {
CSS: CSS
}));
// Add a labelled-by attribute to the contenteditable.
this.textareaLabel = Y.one('[for="' + this.get('elementid') + '"]');
if (this.textareaLabel) {
this.textareaLabel.generateID();
this.editor.setAttribute('aria-labelledby', this.textareaLabel.get("id"));
}
// Setup the labels and ARIA labelledby.
this._setupLabelling();
// Add everything to the wrapper.
this.setupToolbar();
@ -377,6 +373,48 @@ Y.extend(Editor, Y.Base, {
*/
_registerEventHandle: function(handle) {
this._eventHandles.push(handle);
},
/**
* Setup editor labelling. This includes the aria-labelledby attribute
* too.
*
* @method _setupLabelling
* @chainable
* @private
*/
_setupLabelling: function() {
// Copy the ARIA labelledby attribute from the textarea.
var labelledby = this.textarea.getAttribute('aria-labelledby'),
labels = [];
if (labelledby) {
// The original textarea has a labelledby field, convert the list of IDs into a list.
labels = labelledby.split(' ');
}
// Search for any labels for the original textarea.
this.textareaLabel = Y.one('[for="' + this.get('elementid') + '"]');
if (this.textareaLabel) {
// Ensure that the label has an ID.
this.textareaLabel.generateID();
// Add the label to the list of labels. It may be there already, but we can dedupe the list.
labels.push(this.textareaLabel.get('id'));
// Update the label to point to the Atto editor instead of the original textarea.
this.textareaLabel.setAttribute('for', this.editor.getAttribute('id'));
// Register an event handle for the label - labels don't normally focus on non-input elements so we must add
// a click handler.
// If something changes what the label is for (e.g. an HTML plugin), then this will cease to match and
// standard browser behaviour will resume.
this._registerEventHandle(Y.delegate('click', this.focus,
Y.config.doc.body, '[for="' + this.editor.getAttribute('id') + '"]', this));
}
// Add the list of labelling attributes to the atto editor.
this.editor.setAttribute('aria-labelledby', Y.Array.unique(labels).join(' '));
}
}, {

6
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js vendored
View File

File diff suppressed because one or more lines are too long

50
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js vendored
View File

@ -183,12 +183,8 @@ Y.extend(Editor, Y.Base, {
CSS: CSS
}));
// Add a labelled-by attribute to the contenteditable.
this.textareaLabel = Y.one('[for="' + this.get('elementid') + '"]');
if (this.textareaLabel) {
this.textareaLabel.generateID();
this.editor.setAttribute('aria-labelledby', this.textareaLabel.get("id"));
}
// Setup the labels and ARIA labelledby.
this._setupLabelling();
// Add everything to the wrapper.
this.setupToolbar();
@ -374,6 +370,48 @@ Y.extend(Editor, Y.Base, {
*/
_registerEventHandle: function(handle) {
this._eventHandles.push(handle);
},
/**
* Setup editor labelling. This includes the aria-labelledby attribute
* too.
*
* @method _setupLabelling
* @chainable
* @private
*/
_setupLabelling: function() {
// Copy the ARIA labelledby attribute from the textarea.
var labelledby = this.textarea.getAttribute('aria-labelledby'),
labels = [];
if (labelledby) {
// The original textarea has a labelledby field, convert the list of IDs into a list.
labels = labelledby.split(' ');
}
// Search for any labels for the original textarea.
this.textareaLabel = Y.one('[for="' + this.get('elementid') + '"]');
if (this.textareaLabel) {
// Ensure that the label has an ID.
this.textareaLabel.generateID();
// Add the label to the list of labels. It may be there already, but we can dedupe the list.
labels.push(this.textareaLabel.get('id'));
// Update the label to point to the Atto editor instead of the original textarea.
this.textareaLabel.setAttribute('for', this.editor.getAttribute('id'));
// Register an event handle for the label - labels don't normally focus on non-input elements so we must add
// a click handler.
// If something changes what the label is for (e.g. an HTML plugin), then this will cease to match and
// standard browser behaviour will resume.
this._registerEventHandle(Y.delegate('click', this.focus,
Y.config.doc.body, '[for="' + this.editor.getAttribute('id') + '"]', this));
}
// Add the list of labelling attributes to the atto editor.
this.editor.setAttribute('aria-labelledby', Y.Array.unique(labels).join(' '));
}
}, {

50
lib/editor/atto/yui/src/editor/js/editor.js vendored
View File

@ -183,12 +183,8 @@ Y.extend(Editor, Y.Base, {
CSS: CSS
}));
// Add a labelled-by attribute to the contenteditable.
this.textareaLabel = Y.one('[for="' + this.get('elementid') + '"]');
if (this.textareaLabel) {
this.textareaLabel.generateID();
this.editor.setAttribute('aria-labelledby', this.textareaLabel.get("id"));
}
// Setup the labels and ARIA labelledby.
this._setupLabelling();
// Add everything to the wrapper.
this.setupToolbar();
@ -375,6 +371,48 @@ Y.extend(Editor, Y.Base, {
*/
_registerEventHandle: function(handle) {
this._eventHandles.push(handle);
},
/**
* Setup editor labelling. This includes the aria-labelledby attribute
* too.
*
* @method _setupLabelling
* @chainable
* @private
*/
_setupLabelling: function() {
// Copy the ARIA labelledby attribute from the textarea.
var labelledby = this.textarea.getAttribute('aria-labelledby'),
labels = [];
if (labelledby) {
// The original textarea has a labelledby field, convert the list of IDs into a list.
labels = labelledby.split(' ');
}
// Search for any labels for the original textarea.
this.textareaLabel = Y.one('[for="' + this.get('elementid') + '"]');
if (this.textareaLabel) {
// Ensure that the label has an ID.
this.textareaLabel.generateID();
// Add the label to the list of labels. It may be there already, but we can dedupe the list.
labels.push(this.textareaLabel.get('id'));
// Update the label to point to the Atto editor instead of the original textarea.
this.textareaLabel.setAttribute('for', this.editor.getAttribute('id'));
// Register an event handle for the label - labels don't normally focus on non-input elements so we must add
// a click handler.
// If something changes what the label is for (e.g. an HTML plugin), then this will cease to match and
// standard browser behaviour will resume.
this._registerEventHandle(Y.delegate('click', this.focus,
Y.config.doc.body, '[for="' + this.editor.getAttribute('id') + '"]', this));
}
// Add the list of labelling attributes to the atto editor.
this.editor.setAttribute('aria-labelledby', Y.Array.unique(labels).join(' '));
}
}, {