MDL-22067 - add key event action to close the help popup window.

This commit is contained in:
Rossiani Wijaya
2010-05-07 06:40:19 +00:00
parent c4c3b90734
commit 61ddb95355
2 changed files with 31 additions and 19 deletions
+26 -14
View File
@@ -1408,42 +1408,42 @@ M.util.help_icon = {
instance : null,
add : function(Y, properties) {
this.Y = Y;
var node = Y.one('#'+properties.id);
if (node) {
node.on('click', this.display, this, properties);
properties.node = Y.one('#'+properties.id);
if (properties.node) {
properties.node.on('click', this.display, this, properties);
}
},
display : function(event, args) {
event.preventDefault();
if (M.util.help_icon.instance === null) {
var Y = M.util.help_icon.Y;
Y.use('overlay', 'io', 'event-mouseenter', 'node', function(Y) {
Y.use('overlay', 'io', 'event-mouseenter', 'node', 'event-key', function(Y) {
var help_content_overlay = {
helplink : null,
overlay : null,
init : function() {
var closebtn = Y.Node.create('<img src="'+M.util.image_url('t/delete', 'moodle')+'" />');
var closebtn = Y.Node.create('<a id="closehelpbox" href="#"><img src="'+M.util.image_url('t/delete', 'moodle')+'" /></a>');
// Create an overlay from markup
this.overlay = new Y.Overlay({
headerContent: closebtn,
bodyContent: '',
width:'400px',
id: 'helppopupbox',
width:'400px',
visible : false,
constrain : true
constrain : true
});
this.overlay.render(Y.one(document.body));
closebtn.on('click', this.overlay.hide, this.overlay);
var boundingBox = this.overlay.get("boundingBox");
boundingBox.addClass('helppopup');
// Hide the menu if the user clicks outside of its content
boundingBox.get("ownerDocument").on("mousedown", function (event) {
var oTarget = event.target;
var menuButton = Y.one("#"+args.id);
if (!oTarget.compareTo(menuButton) &&
!menuButton.contains(oTarget) &&
!oTarget.compareTo(boundingBox) &&
@@ -1451,11 +1451,21 @@ M.util.help_icon = {
this.overlay.hide();
}
}, this);
Y.on("key", this.close, closebtn , "down:13", this);
closebtn.on('click', this.close, this);
},
close : function(e) {
e.preventDefault();
this.helplink.focus();
this.overlay.hide();
},
display : function(event, args) {
this.helplink = args.node;
this.overlay.set('bodyContent', Y.Node.create('<img src="'+M.cfg.loadingicon+'" class="spinner" />'));
this.overlay.set("align", {node:"#" + args.id, points:[Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.RC]});
this.overlay.set("align", {node:args.node, points:[Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.RC]});
var fullurl = args.url;
if (!args.url.match(/https?:\/\//)) {
@@ -1483,10 +1493,12 @@ M.util.help_icon = {
Y.io(ajaxurl, cfg);
this.overlay.show();
Y.one('#closehelpbox').focus();
},
display_callback : function(content) {
this.overlay.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE);
this.overlay.set('bodyContent', content);
},
hideContent : function() {
@@ -1503,6 +1515,6 @@ M.util.help_icon = {
}
},
init : function(Y) {
this.Y = Y;
this.Y = Y;
}
}