From 28d5fdeffc513c6169db4bdb9c062f2f84739bf7 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Tue, 8 Jun 2021 15:53:49 +0800 Subject: [PATCH] Changed docs/json/roodata.jsondocs/src/Roo_bootstrap_Menu.js.htmldocs/symbols/Roo.bootstrap.Menu.json --- docs/json/roodata.json | 6 ++++ docs/src/Roo_bootstrap_Menu.js.html | 50 ++++++++++++++++++++-------- docs/symbols/Roo.bootstrap.Menu.json | 7 ++++ 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/docs/json/roodata.json b/docs/json/roodata.json index 181ba3825e..4b88846bc6 100644 --- a/docs/json/roodata.json +++ b/docs/json/roodata.json @@ -37934,6 +37934,12 @@ "desc" : "which property holds the element that used for hide() / show() / disable() / enable()\ndefault is 'el' for forms you probably want to set this to fieldEl", "memberOf" : "Roo.Component" }, + { + "name" : "align", + "type" : "String", + "desc" : "default tl-bl? == below - how the menu should be aligned.", + "memberOf" : "" + }, { "name" : "allowDomMove", "type" : "Boolean", diff --git a/docs/src/Roo_bootstrap_Menu.js.html b/docs/src/Roo_bootstrap_Menu.js.html index 69fbb6aa4e..4d1dfeb911 100644 --- a/docs/src/Roo_bootstrap_Menu.js.html +++ b/docs/src/Roo_bootstrap_Menu.js.html @@ -13,8 +13,9 @@ * @cfg {bool} hidden if the menu should be hidden when rendered. * @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true) * @cfg {bool} isLink (true|false) the menu has link disable auto expand and collaspe (default false) - * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger. - * + * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger. + * @cfg {String} align default tl-bl? == below - how the menu should be aligned. + * @constructor * Create a new Menu * @param {Object} config The config object @@ -91,7 +92,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { /// html : false, - //align : '', + triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()??? type: false, /** @@ -113,6 +114,8 @@ hideTrigger : false, + align : 'tl-bl?', + getChildContainer : function() { return this.el; @@ -124,7 +127,6 @@ // cfg.cn[1].cls += ' pull-right' //} - var cfg = { tag : 'ul', cls : 'dropdown-menu shadow' , @@ -275,8 +277,31 @@ if(!this.el){ this.render(); } + this.el.addClass('show'); // show otherwise we do not know how big we are.. + + var xy = this.el.getAlignToXY(el, pos); + + // bl-tl << left align below + // tl-bl << left align + + if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){ + // if it goes to far to the right.. -> align left. + xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r')) + } + if(xy[0] < 0){ + // was left align - go right? + xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l')) + } - this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false); + // goes down the bottom + if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() || + xy[1] < 0 ){ + var a = this.align.replace('?', '').split('-'); + xy = this.el.getAlignToXY(el, a[1] + '-' + a[0] + '?') + + } + + this.showAt( xy , parentMenu, false); }, /** * Displays this menu at a specific xy position @@ -299,17 +324,13 @@ this.triggerEl.addClass('open'); this.el.addClass('show'); + + // reassign x when hitting right - if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){ - xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth(); - } - // reassign y when hitting bottom - if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight()){ - xy[1] = xy[1] - this.el.getHeight() - this.triggerEl.getHeight(); - } + // reassign y when hitting bottom - // but the list may align on trigger left or trigger top... should it be a properity? + // but the list may align on trigger left or trigger top... should it be a properity? if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){ this.el.setXY(xy); @@ -395,7 +416,8 @@ this.hide(); } else { Roo.log('show'); - this.show(this.triggerEl, '?', false); + + this.show(this.triggerEl, this.align, false); } if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){ diff --git a/docs/symbols/Roo.bootstrap.Menu.json b/docs/symbols/Roo.bootstrap.Menu.json index e02819f45b..62f07a38bf 100644 --- a/docs/symbols/Roo.bootstrap.Menu.json +++ b/docs/symbols/Roo.bootstrap.Menu.json @@ -65,6 +65,13 @@ "parent)" ] }, + { + "name" : "align", + "type" : "String", + "desc" : "default tl-bl? == below - how the menu should be aligned.", + "memberOf" : "Roo.bootstrap.Menu", + "values" : [] + }, { "name" : "hidden", "type" : "bool", -- 2.39.2