Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit 61ddb953558ad3220314efbb5ab395f12c148677 1 parent c4c3b90
Rossiani Wijaya authored
Showing with 31 additions and 19 deletions.
  1. +26 −14 lib/javascript-static.js
  2. +5 −5 theme/base/style/core.css
View
40 lib/javascript-static.js
@@ -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
10 theme/base/style/core.css
@@ -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;}
Please sign in to comment.
Something went wrong with that request. Please try again.