MDL-42452 actionmenu: improved constraint code
This commit is contained in:
@@ -190,10 +190,12 @@ ACTIONMENU.prototype = {
|
||||
cy = 0,
|
||||
cwidth,
|
||||
cheight,
|
||||
coverflow = 'auto',
|
||||
newwidth = null,
|
||||
newheight = null,
|
||||
newleft = null,
|
||||
newtop = null;
|
||||
newtop = null,
|
||||
boxshadow = null;
|
||||
|
||||
if (selector) {
|
||||
selector = node.ancestor(selector);
|
||||
@@ -203,6 +205,7 @@ ACTIONMENU.prototype = {
|
||||
cheight = selector.get('offsetHeight');
|
||||
cx = selector.getX();
|
||||
cy = selector.getY();
|
||||
coverflow = selector.getStyle('overflow') || 'auto';
|
||||
} else {
|
||||
cwidth = node.get('docWidth');
|
||||
cheight = node.get('docHeight');
|
||||
@@ -226,11 +229,24 @@ ACTIONMENU.prototype = {
|
||||
}
|
||||
|
||||
// Constrain Y.
|
||||
// First up if the width is more than the constrain its easily full width + full height.
|
||||
if (nheight <= cheight) {
|
||||
if (ny >= cy && ny + nheight > cy + cheight) {
|
||||
// The top right of the node is outside of the constraint, move it in.
|
||||
newtop = cy + cheight - nheight;
|
||||
if (nheight > cheight && coverflow.toLowerCase() === 'hidden') {
|
||||
// The node extends over the constrained area and would be clipped.
|
||||
// Reduce the height of the node and force its overflow to scroll.
|
||||
newheight = nheight = cheight;
|
||||
node.setStyle('overflow', 'auto');
|
||||
}
|
||||
// If the node is below the top of the constraint AND
|
||||
// the node is longer than the constraint allows.
|
||||
if (ny >= cy && ny + nheight > cy + cheight) {
|
||||
// Move it up.
|
||||
newtop = cy + cheight - nheight;
|
||||
try {
|
||||
boxshadow = node.getStyle('boxShadow').replace(/.*? (\d+)px \d+px$/, '$1');
|
||||
if (new RegExp(/^\d+$/).test(boxshadow) && newtop - cy > boxshadow) {
|
||||
newtop -= boxshadow;
|
||||
}
|
||||
} catch (ex) {
|
||||
Y.log('Failed to determine box-shadow margin.', 'warn', ACTIONMENU.NAME);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
YUI.add("moodle-core-actionmenu",function(e,t){var n=e.one(e.config.doc.body),r={MENUSHOWN:"action-menu-shown"},i={MENU:".moodle-actionmenu[data-enhance=moodle-core-actionmenu]",MENUCONTENT:".menu[data-rel=menu-content]",TOGGLE:".toggle-display"},s,o={TL:"tl",TR:"tr",BL:"bl",BR:"br"};s=function(){s.superclass.constructor.apply(this,arguments)},s.prototype={dialogue:null,events:[],owner:null,initializer:function(){e.all(i.MENU).each(this.enhance,this),n.delegate("click",this.toggleMenu,i.MENU+" "+i.TOGGLE,this),n.delegate("key",this.toggleMenu,"enter,space",i.MENU+" "+i.TOGGLE,this)},enhance:function(e){var t=e.one(i.MENUCONTENT),n;if(!t)return!1;n=t.getData("align")||this.get("align").join("-"),e.one(i.TOGGLE).set("aria-haspopup",!0),t.set("aria-hidden",!0),t.hasClass("align-"+n)||t.addClass("align-"+n),t.hasChildNodes()&&e.setAttribute("data-enhanced","1")},hideMenu:function(){this.dialogue&&(this.dialogue.removeClass("show"),this.dialogue.one(i.MENUCONTENT).set("aria-hidden",!0),this.dialogue=null),this.owner&&(this.owner.removeClass(r.MENUSHOWN),this.owner=null);for(var e in this.events)this.events[e].detach&&this.events[e].detach();this.events=[]},toggleMenu:function(e){var t=e.target.ancestor(i.MENU),r=t.hasClass("show");e.halt(!0),this.hideMenu();if(r)return;this.showMenu(t),this.events.push(n.on("key",this.hideMenu,"esc",this)),this.events.push(n.on("click",this.hideIfOutside,this)),this.events.push(n.delegate("focus",this.hideIfOutside,"*",this))},hideIfOutside:function(e){!e.target.test(i.MENU)&&!e.target.ancestor(i.MENU)&&this.hideMenu()},showMenu:function(e){var t=e.getData("owner"),n=e.one(i.MENUCONTENT);return this.owner=t?e.ancestor(t):null,this.dialogue=e,e.addClass("show"),this.owner&&this.owner.addClass(r.MENUSHOWN),this.constrain(n.set("aria-hidden",!1)),!0},constrain:function(e){var t=e.getData("constraint"),n=e.getX(),r=e.getY(),i=e.get("offsetWidth"),s=e.get("offsetHeight"),o=0,u=0,a,f,l=null,c=null,h=null,p=null;t&&(t=e.ancestor(t)),t?(a=t.get("offsetWidth"),f=t.get("offsetHeight"),o=t.getX(),u=t.getY()):(a=e.get("docWidth"),f=e.get("docHeight")),i>a?(l=i=a,h=n=o):n<o?h=n=o:n+i>=o+a&&(h=o+a-i),s<=f&&r>=u&&r+s>u+f&&(p=u+f-s),h!==null&&e.setX(h),p!==null&&e.setY(p),l!==null&&e.setStyle("width",l.toString()+"px"),c!==null&&e.setStyle("height",c.toString()+"px")}},e.extend(s,e.Base,s.prototype,{NAME:"moodle-core-actionmenu",ATTRS:{align:{value:[o.TR,o.BR]}}}),M.core=M.core||{},M.core.actionmenu=M.core.actionmenu||{},M.core.actionmenu.instance=null,M.core.actionmenu.init=M.core.actionmenu.init||function(e){M.core.actionmenu.instance=M.core.actionmenu.instance||new s(e)},M.core.actionmenu.newDOMNode=function(e){if(M.core.actionmenu.instance===null)return!0;e.all(i.MENU).each(M.core.actionmenu.instance.enhance,M.core.actionmenu.instance)}},"@VERSION@",{requires:["base","event"]});
|
||||
YUI.add("moodle-core-actionmenu",function(e,t){var n=e.one(e.config.doc.body),r={MENUSHOWN:"action-menu-shown"},i={MENU:".moodle-actionmenu[data-enhance=moodle-core-actionmenu]",MENUCONTENT:".menu[data-rel=menu-content]",TOGGLE:".toggle-display"},s,o={TL:"tl",TR:"tr",BL:"bl",BR:"br"};s=function(){s.superclass.constructor.apply(this,arguments)},s.prototype={dialogue:null,events:[],owner:null,initializer:function(){e.all(i.MENU).each(this.enhance,this),n.delegate("click",this.toggleMenu,i.MENU+" "+i.TOGGLE,this),n.delegate("key",this.toggleMenu,"enter,space",i.MENU+" "+i.TOGGLE,this)},enhance:function(e){var t=e.one(i.MENUCONTENT),n;if(!t)return!1;n=t.getData("align")||this.get("align").join("-"),e.one(i.TOGGLE).set("aria-haspopup",!0),t.set("aria-hidden",!0),t.hasClass("align-"+n)||t.addClass("align-"+n),t.hasChildNodes()&&e.setAttribute("data-enhanced","1")},hideMenu:function(){this.dialogue&&(this.dialogue.removeClass("show"),this.dialogue.one(i.MENUCONTENT).set("aria-hidden",!0),this.dialogue=null),this.owner&&(this.owner.removeClass(r.MENUSHOWN),this.owner=null);for(var e in this.events)this.events[e].detach&&this.events[e].detach();this.events=[]},toggleMenu:function(e){var t=e.target.ancestor(i.MENU),r=t.hasClass("show");e.halt(!0),this.hideMenu();if(r)return;this.showMenu(t),this.events.push(n.on("key",this.hideMenu,"esc",this)),this.events.push(n.on("click",this.hideIfOutside,this)),this.events.push(n.delegate("focus",this.hideIfOutside,"*",this))},hideIfOutside:function(e){!e.target.test(i.MENU)&&!e.target.ancestor(i.MENU)&&this.hideMenu()},showMenu:function(e){var t=e.getData("owner"),n=e.one(i.MENUCONTENT);return this.owner=t?e.ancestor(t):null,this.dialogue=e,e.addClass("show"),this.owner&&this.owner.addClass(r.MENUSHOWN),this.constrain(n.set("aria-hidden",!1)),!0},constrain:function(e){var t=e.getData("constraint"),n=e.getX(),r=e.getY(),i=e.get("offsetWidth"),s=e.get("offsetHeight"),o=0,u=0,a,f,l="auto",c=null,h=null,p=null,d=null,v=null;t&&(t=e.ancestor(t)),t?(a=t.get("offsetWidth"),f=t.get("offsetHeight"),o=t.getX(),u=t.getY(),l=t.getStyle("overflow")||"auto"):(a=e.get("docWidth"),f=e.get("docHeight")),i>a?(c=i=a,p=n=o):n<o?p=n=o:n+i>=o+a&&(p=o+a-i),s>f&&l.toLowerCase()==="hidden"&&(h=s=f,e.setStyle("overflow","auto"));if(r>=u&&r+s>u+f){d=u+f-s;try{v=e.getStyle("boxShadow").replace(/.*? (\d+)px \d+px$/,"$1"),(new RegExp(/^\d+$/)).test(v)&&d-u>v&&(d-=v)}catch(m){}}p!==null&&e.setX(p),d!==null&&e.setY(d),c!==null&&e.setStyle("width",c.toString()+"px"),h!==null&&e.setStyle("height",h.toString()+"px")}},e.extend(s,e.Base,s.prototype,{NAME:"moodle-core-actionmenu",ATTRS:{align:{value:[o.TR,o.BR]}}}),M.core=M.core||{},M.core.actionmenu=M.core.actionmenu||{},M.core.actionmenu.instance=null,M.core.actionmenu.init=M.core.actionmenu.init||function(e){M.core.actionmenu.instance=M.core.actionmenu.instance||new s(e)},M.core.actionmenu.newDOMNode=function(e){if(M.core.actionmenu.instance===null)return!0;e.all(i.MENU).each(M.core.actionmenu.instance.enhance,M.core.actionmenu.instance)}},"@VERSION@",{requires:["base","event"]});
|
||||
|
||||
@@ -187,10 +187,12 @@ ACTIONMENU.prototype = {
|
||||
cy = 0,
|
||||
cwidth,
|
||||
cheight,
|
||||
coverflow = 'auto',
|
||||
newwidth = null,
|
||||
newheight = null,
|
||||
newleft = null,
|
||||
newtop = null;
|
||||
newtop = null,
|
||||
boxshadow = null;
|
||||
|
||||
if (selector) {
|
||||
selector = node.ancestor(selector);
|
||||
@@ -200,6 +202,7 @@ ACTIONMENU.prototype = {
|
||||
cheight = selector.get('offsetHeight');
|
||||
cx = selector.getX();
|
||||
cy = selector.getY();
|
||||
coverflow = selector.getStyle('overflow') || 'auto';
|
||||
} else {
|
||||
cwidth = node.get('docWidth');
|
||||
cheight = node.get('docHeight');
|
||||
@@ -223,11 +226,23 @@ ACTIONMENU.prototype = {
|
||||
}
|
||||
|
||||
// Constrain Y.
|
||||
// First up if the width is more than the constrain its easily full width + full height.
|
||||
if (nheight <= cheight) {
|
||||
if (ny >= cy && ny + nheight > cy + cheight) {
|
||||
// The top right of the node is outside of the constraint, move it in.
|
||||
newtop = cy + cheight - nheight;
|
||||
if (nheight > cheight && coverflow.toLowerCase() === 'hidden') {
|
||||
// The node extends over the constrained area and would be clipped.
|
||||
// Reduce the height of the node and force its overflow to scroll.
|
||||
newheight = nheight = cheight;
|
||||
node.setStyle('overflow', 'auto');
|
||||
}
|
||||
// If the node is below the top of the constraint AND
|
||||
// the node is longer than the constraint allows.
|
||||
if (ny >= cy && ny + nheight > cy + cheight) {
|
||||
// Move it up.
|
||||
newtop = cy + cheight - nheight;
|
||||
try {
|
||||
boxshadow = node.getStyle('boxShadow').replace(/.*? (\d+)px \d+px$/, '$1');
|
||||
if (new RegExp(/^\d+$/).test(boxshadow) && newtop - cy > boxshadow) {
|
||||
newtop -= boxshadow;
|
||||
}
|
||||
} catch (ex) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+22
-6
@@ -188,10 +188,12 @@ ACTIONMENU.prototype = {
|
||||
cy = 0,
|
||||
cwidth,
|
||||
cheight,
|
||||
coverflow = 'auto',
|
||||
newwidth = null,
|
||||
newheight = null,
|
||||
newleft = null,
|
||||
newtop = null;
|
||||
newtop = null,
|
||||
boxshadow = null;
|
||||
|
||||
if (selector) {
|
||||
selector = node.ancestor(selector);
|
||||
@@ -201,6 +203,7 @@ ACTIONMENU.prototype = {
|
||||
cheight = selector.get('offsetHeight');
|
||||
cx = selector.getX();
|
||||
cy = selector.getY();
|
||||
coverflow = selector.getStyle('overflow') || 'auto';
|
||||
} else {
|
||||
cwidth = node.get('docWidth');
|
||||
cheight = node.get('docHeight');
|
||||
@@ -224,11 +227,24 @@ ACTIONMENU.prototype = {
|
||||
}
|
||||
|
||||
// Constrain Y.
|
||||
// First up if the width is more than the constrain its easily full width + full height.
|
||||
if (nheight <= cheight) {
|
||||
if (ny >= cy && ny + nheight > cy + cheight) {
|
||||
// The top right of the node is outside of the constraint, move it in.
|
||||
newtop = cy + cheight - nheight;
|
||||
if (nheight > cheight && coverflow.toLowerCase() === 'hidden') {
|
||||
// The node extends over the constrained area and would be clipped.
|
||||
// Reduce the height of the node and force its overflow to scroll.
|
||||
newheight = nheight = cheight;
|
||||
node.setStyle('overflow', 'auto');
|
||||
}
|
||||
// If the node is below the top of the constraint AND
|
||||
// the node is longer than the constraint allows.
|
||||
if (ny >= cy && ny + nheight > cy + cheight) {
|
||||
// Move it up.
|
||||
newtop = cy + cheight - nheight;
|
||||
try {
|
||||
boxshadow = node.getStyle('boxShadow').replace(/.*? (\d+)px \d+px$/, '$1');
|
||||
if (new RegExp(/^\d+$/).test(boxshadow) && newtop - cy > boxshadow) {
|
||||
newtop -= boxshadow;
|
||||
}
|
||||
} catch (ex) {
|
||||
Y.log('Failed to determine box-shadow margin.', 'warn', ACTIONMENU.NAME);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user