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

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;
}
}

View File

@ -536,8 +536,8 @@ body.tag .managelink {padding: 5px;}
/**
* Help Content (pop-up)
*/
.helppopup {background-color: #FFE691; border: 1px solid #848484;}
.helppopup .yui3-widget-hd {float:right;margin:3px 3px 0 0;}
.helppopup .yui3-widget-bd {margin:0 1em 1em 1em;border-top:1px solid #FFE691;}
.helppopup .helpheading {font-size: 1em;}
.helppopup .spinner {margin:1em;}
#helppopupbox {background-color: #FFE691; border: 1px solid #848484;}
#helppopupbox .yui3-widget-hd {float:right;margin:3px 3px 0 0;}
#helppopupbox .yui3-widget-bd {margin:0 1em 1em 1em;border-top:1px solid #FFE691;}
#helppopupbox .helpheading {font-size: 1em;}
#helppopupbox .spinner {margin:1em;}