MDL-30899 moodle-core-notification Adding focus to non modal windows
authorDavid Monllao <davidm@moodle.com>
Thu, 20 Sep 2012 04:42:25 +0000 (12:42 +0800)
committerDavid Monllao <davidm@moodle.com>
Tue, 27 Nov 2012 06:40:10 +0000 (14:40 +0800)
blocks/community/yui/comments/comments.js
blocks/community/yui/imagegallery/imagegallery.js
enrol/cohort/yui/quickenrolment/quickenrolment.js
enrol/manual/yui/quickenrolment/quickenrolment.js
filter/glossary/yui/autolinker/autolinker.js
lib/yui/notification/notification.js

index 9d57acd..0fa8601 100644 (file)
@@ -55,6 +55,9 @@ YUI.add('moodle-block_community-comments', function(Y) {
             this.event = Y.one(document.body).on('click', this.hide, this, commentid);
             // We add a new event on the panel in order to hide the panel for the next click (touch device).
             this.panelevent = Y.one("#commentoverlay-"+commentid).on('click', this.hide, this, commentid);
+
+            // Focus on the close button
+            this.panels[commentid].get('buttons').header[0].focus();
         },
 
         hide : function (e, commentid) {
index 2f0c65c..a4cb457 100644 (file)
@@ -93,7 +93,6 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
             var panel = Y.one('#imageoverlay');
             panel.setContent('');
 
-
             panel.append(Y.Node.create('<div style="text-align:center"><img id=\"imagetodisplay\" src="' + url
                 + '" style="max-height:' + maxheight + 'px;"></div>'));
             this.panel.destroy();
@@ -132,6 +131,9 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
                 this.panel.set("centered", true);
                 this.panel.show();
 
+                // Focus on the close button
+                this.panel.get('buttons').header[0].focus();
+
             }, this, url);
 
             var previousnumber = screennumber - 1;
index 6c22963..52727e6 100644 (file)
@@ -20,6 +20,7 @@ YUI.add('moodle-enrol_cohort-quickenrolment', function(Y) {
         AJAXURL = 'ajaxurl',
         MANUALENROLMENT = 'manualEnrolment',
         CSS = {
+            CLOSEBTN : 'close-button',
             COHORT : 'qce-cohort',
             COHORTS : 'qce-cohorts',
             COHORTBUTTON : 'qce-cohort-button',
@@ -52,13 +53,16 @@ YUI.add('moodle-enrol_cohort-quickenrolment', function(Y) {
             this.publish('cohortsloaded');
             this.publish('defaultcohortroleloaded', {fireOnce:true});
 
+            var finishbutton = Y.Node.create('<div class="'+CSS.CLOSEBTN+'"></div>')
+                                   .append(Y.Node.create('<input type="button" value="'+M.str.enrol.finishenrollingusers+'" />'));
             var base = Y.Node.create('<div class="'+CSS.PANELCONTENT+'"></div>')
                 .append(Y.Node.create('<div class="'+CSS.PANELROLES+'"></div>'))
                 .append(Y.Node.create('<div class="'+CSS.PANELCOHORTS+'"></div>'))
                 .append(Y.Node.create('<div class="'+CSS.FOOTER+'"></div>')
-                    .append(Y.Node.create('<div class="'+CSS.SEARCH+'"><label>'+M.str.enrol_cohort.cohortsearch+':</label></div>')
+                    .append(Y.Node.create('<div class="'+CSS.SEARCH+'"><label for="enrolcohortsearch">'+M.str.enrol_cohort.cohortsearch+':</label></div>')
                         .append(Y.Node.create('<input type="text" id="enrolcohortsearch" value="" />'))
                     )
+                    .append(finishbutton)
                 )
                 .append(Y.Node.create('<div class="'+CSS.LIGHTBOX+' '+CSS.HIDDEN+'"></div>')
                     .append(Y.Node.create('<img alt="loading" class="'+CSS.LOADINGICON+'" />')
@@ -99,6 +103,7 @@ YUI.add('moodle-enrol_cohort-quickenrolment', function(Y) {
             this.on('defaultcohortroleloaded', this.updateContent, this, panel);
             Y.on('key', this.hide, document.body, 'down:27', this);
             close.on('click', this.hide, this);
+            finishbutton.on('click', this.hide, this);
 
             Y.all('.enrol_cohort_plugin input').each(function(node){
                 if (node.getAttribute('type', 'submit')) {
@@ -117,6 +122,11 @@ YUI.add('moodle-enrol_cohort-quickenrolment', function(Y) {
             this.getCohorts(e, false);
             this.getAssignableRoles();
             this.fire('show');
+
+            var rolesselect = Y.one('#id_enrol_cohort_assignable_roles');
+            if (rolesselect) {
+                rolesselect.focus();
+            }
         },
         updateContent : function(e, panel) {
             var content, i, roles, cohorts, count=0, supportmanual = this.get(MANUALENROLMENT), defaultrole;
@@ -154,13 +164,14 @@ YUI.add('moodle-enrol_cohort-quickenrolment', function(Y) {
                     break;
                 case 'assignablerolesloaded':
                     roles = this.get(ASSIGNABLEROLES);
-                    content = Y.Node.create('<select></select>');
+                    content = Y.Node.create('<select id="id_enrol_cohort_assignable_roles"></select>');
                     for (i in roles) {
                         content.append(Y.Node.create('<option value="'+i+'">'+roles[i]+'</option>'));
                     }
-                    panel.get('contentBox').one('.'+CSS.PANELROLES).setContent(Y.Node.create('<div><label>'+M.str.role.assignroles+':</label></div>').append(content));
+                    panel.get('contentBox').one('.'+CSS.PANELROLES).setContent(Y.Node.create('<div><label for="id_enrol_cohort_assignable_roles">'+M.str.role.assignroles+':</label></div>').append(content));
 
                     this.getDefaultCohortRole();
+                    Y.one('#id_enrol_cohort_assignable_roles').focus();
                     break;
                 case 'defaultcohortroleloaded':
                     defaultrole = this.get(DEFAULTCOHORTROLE);
@@ -280,7 +291,8 @@ YUI.add('moodle-enrol_cohort-quickenrolment', function(Y) {
                                 new M.core.ajaxException(result);
                             } else {
                                 if (result.response && result.response.message) {
-                                    new M.core.alert(result.response);
+                                    var alertpanel = new M.core.alert(result.response);
+                                    Y.Node.one('#id_yuialertconfirm-' + alertpanel.COUNT).focus();
                                 }
                                 var enrolled = Y.Node.create('<div class="'+CSS.COHORTBUTTON+' alreadyenrolled">'+M.str.enrol.synced+'</div>');
                                 node.one('.'+CSS.COHORT+' #cohortid_'+cohort.get(COHORTID)).replace(enrolled);
index c047999..1b51b99 100644 (file)
@@ -89,8 +89,8 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
                         .append(create('<h2>'+M.str.enrol.enrolusers+'</h2>')))
                     .append(create('<div class="'+CSS.CONTENT+'"></div>')
                         .append(create('<div class="'+CSS.SEARCHCONTROLS+'"></div>')
-                            .append(create('<div class="'+CSS.ENROLMENTOPTION+' '+CSS.ROLE+'">'+M.str.role.assignroles+'</div>')
-                                    .append(create('<select><option value="">'+M.str.enrol.none+'</option></select>'))
+                            .append(create('<div class="'+CSS.ENROLMENTOPTION+' '+CSS.ROLE+'"><label for="id_enrol_manual_assignable_roles">'+M.str.role.assignroles+'</label></div>')
+                                    .append(create('<select id="id_enrol_manual_assignable_roles"><option value="">'+M.str.enrol.none+'</option></select>'))
                             )
                             .append(create('<div class="'+CSS.SEARCHOPTIONS+'"></div>')
                                 .append(create('<div class="'+CSS.COLLAPSIBLEHEADING+'"><img alt="" />'+M.str.enrol.enrolmentoptions+'</div>'))
@@ -178,6 +178,7 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
                     s.append(option);
                 }
                 s.set('selectedIndex', index);
+                Y.one('#id_enrol_manual_assignable_roles').focus();
             }, this);
             this.getAssignableRoles();
         },
@@ -268,6 +269,10 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
             }
 
             this._escCloseEvent = Y.on('key', this.hide, document.body, 'down:27', this);
+            var rolesselect = Y.one('#id_enrol_manual_assignable_roles');
+            if (rolesselect) {
+                rolesselect.focus();
+            }
         },
         hide : function(e) {
             if (this._escCloseEvent) {
index 1a1586d..cb4129c 100644 (file)
@@ -70,7 +70,8 @@ YUI.add('moodle-filter_glossary-autolinker', function(Y) {
 
                     for (key in data.entries) {
                         definition = data.entries[key].definition + data.entries[key].attachments
-                        new M.core.alert({title:data.entries[key].concept, message:definition, lightbox:false});
+                        var alertpanel = new M.core.alert({title:data.entries[key].concept, message:definition, lightbox:false});
+                        Y.Node.one('#id_yuialertconfirm-' + alertpanel.COUNT).focus();
                     }
 
                     return true;
index 2881b90..8cc168f 100644 (file)
@@ -130,7 +130,7 @@ Y.extend(ALERT, DIALOGUE, {
     _enterKeypress : null,
     initializer : function(config) {
         this.publish('complete');
-        var yes = C('<input type="button" value="'+this.get(CONFIRMYES)+'" />'),
+        var yes = C('<input type="button" id="id_yuialertconfirm-' + this.COUNT + '" value="'+this.get(CONFIRMYES)+'" />'),
             content = C('<div class="confirmation-dialogue"></div>')
                     .append(C('<div class="confirmation-message">'+this.get('message')+'</div>'))
                     .append(C('<div class="confirmation-buttons"></div>')
@@ -183,8 +183,8 @@ Y.extend(CONFIRM, DIALOGUE, {
         this.publish('complete');
         this.publish('complete-yes');
         this.publish('complete-no');
-        var yes = C('<input type="button" value="'+this.get(CONFIRMYES)+'" />'),
-            no = C('<input type="button" value="'+this.get(CONFIRMNO)+'" />'),
+        var yes = C('<input type="button" id="id_yuiconfirmyes-' + this.COUNT + '" value="'+this.get(CONFIRMYES)+'" />'),
+            no = C('<input type="button" id="id_yuiconfirmno-' + this.COUNT + '" value="'+this.get(CONFIRMNO)+'" />'),
             content = C('<div class="confirmation-dialogue"></div>')
                         .append(C('<div class="confirmation-message">'+this.get(QUESTION)+'</div>'))
                         .append(C('<div class="confirmation-buttons"></div>')