MDL-22067 - modify help popup functionality to use overlay.

This commit is contained in:
Rossiani Wijaya
2010-05-03 08:44:34 +00:00
parent d59a3f285b
commit 36282d8545
6 changed files with 189 additions and 32 deletions

View File

@@ -1220,21 +1220,26 @@ function getElementsByClassName(oElm, strTagName, name) {
function openpopup(event, args) {
YAHOO.util.Event.preventDefault(event);
var fullurl = args.url;
if (!args.url.match(/https?:\/\//)) {
fullurl = M.cfg.wwwroot + args.url;
if (M.help_content.instance !== null) {
var id = '#' + args.id;
M.help_content.instance.load_from_openpopup(event, args);
} else {
var fullurl = args.url;
if (!args.url.match(/https?:\/\//)) {
fullurl = M.cfg.wwwroot + args.url;
}
var windowobj = window.open(fullurl,args.name,args.options);
if (!windowobj) {
return true;
}
if (args.fullscreen) {
windowobj.moveTo(0,0);
windowobj.resizeTo(screen.availWidth,screen.availHeight);
}
windowobj.focus();
return false;
}
var windowobj = window.open(fullurl,args.name,args.options);
if (!windowobj) {
return true;
}
if (args.fullscreen) {
windowobj.moveTo(0,0);
windowobj.resizeTo(screen.availWidth,screen.availHeight);
}
windowobj.focus();
return false;
}
/* This is only used on a few help pages. */
@@ -1460,3 +1465,133 @@ function hide_item(itemid) {
item.style.display = "none";
}
}
M.help_content = {
instance : null,
init : function(Y) {
Y.use('overlay', 'io', 'event-mouseenter', 'node', "*", function(Y) {
var help_content_overlay = {
overlay : null,
init : function() {
var xy = Y.one('#helpcontent').getXY();
// Create an overlay from markup
this.overlay = new Y.Overlay({
srcNode : "#helpcontent",
contentBox: '#helpcontent',
width:'400px',
xy:[xy[0] + 200, xy[1] + 300]
});
this.overlay.render();
this.overlay.hide();
Y.on("click", Y.bind(this.overlay.show, this.overlay), "#show");
Y.on("click", Y.bind(this.overlay.hide, this.overlay), "#hide");
var menuButton = Y.one(".helplink"),
overlaycontent = this;
var boundingBox = this.overlay.get("boundingBox");
// Hide the menu if the user clicks outside of its content
boundingBox.get("ownerDocument").on("mousedown", function (event) {
var oTarget = event.target;
if (!oTarget.compareTo(menuButton) &&
!menuButton.contains(oTarget) &&
!oTarget.compareTo(boundingBox) &&
!boundingBox.contains(oTarget)) {
overlaycontent.overlay.hide();
}
});
},
load_from_openpopup : function(event, node) {
var spinner = document.createElement('img');
spinner.src = M.cfg.loadingicon;
this.overlay.set('bodyContent', spinner);
var positionX = 0;
var positionY = 0;
if (event.pageX && !Y.UA.chrome) {
positionX = event.pageX;
positionY = event.pageY;
} else if (event.pageX && !Y.UA.chrome) {
positionX = document.getElementById(node['id']).offsetLeft + 200;
positionY = document.getElementById(node['id']).offsetTop + 500;
} else { //chrome browser
positionX = event.clientX + document.body.scrollLeft ;
positionY = document.body.scrollTop;
if (event.clientX > document.body.scrollTop) {
positionY += event.clientY;
}
}
if (Y.UA.chrome) {
positionX = event.clientX + document.body.scrollLeft ;
positionY = document.body.scrollTop;
if (event.clientX > document.body.scrollTop) {
positionY += event.clientY;
}
}
var contentwidth = parseInt(this.overlay.get('width'));
var overlayalign = 'right';
if (document.getElementById('page').offsetWidth <= (positionX + contentwidth )) {
overlayalign = 'left';
}
var WidgetPositionAlign = Y.WidgetPositionAlign;
if (overlayalign == 'right') {
this.overlay.set("align", {node:"#" + node['id'],
points:[WidgetPositionAlign.TL, WidgetPositionAlign.RC]});
} else {
this.overlay.set("align", {node:"#" + node['id'],
points:[WidgetPositionAlign.TR, WidgetPositionAlign.LC]});
}
var fullurl = node.url;
if (!node.url.match(/https?:\/\//)) {
fullurl = M.cfg.wwwroot + node.url;
}
var ajaxurl = fullurl + '&ajax=1';
thishelpcontent = this;
var cfg = {
method: 'get',
on: {
success: function(id, o, node) {
thishelpcontent.load_from_openpopup_callback(o.responseText);
},
failure: function(id, o, node) {
var debuginfo = o.statusText;
if (M.cfg.developerdebug) {
o.statusText += ' (' + ajaxurl + ')';
}
thishelpcontent.load_from_openpopup_callback('bodyContent',debuginfo);
}
}
};
var conn = Y.io(ajaxurl, cfg);
this.overlay.show();
},
load_from_openpopup_callback : function(content) {
this.overlay.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE);
},
hideContent : function() {
help = this;
help.overlay.hide();
}
}
help_content_overlay.init();
M.help_content.instance = help_content_overlay;
});
}
}