X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FMenu.js;h=e5fa5cf2d764ef05e43f7f1fa03d9a686ae69cd8;hb=242e8cb7d4eb31741bfb8d282303ac36f54dd00e;hp=ff6fa6b15d70ffbb7d6eb032786d30fc8f8d0215;hpb=ee5cdeb2257cd828f29f4651b0bfb5a601f354e2;p=roojs1 diff --git a/Roo/bootstrap/Menu.js b/Roo/bootstrap/Menu.js index ff6fa6b15d..e5fa5cf2d7 100644 --- a/Roo/bootstrap/Menu.js +++ b/Roo/bootstrap/Menu.js @@ -13,7 +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 {String} align default tl-bl? == below - how the menu should be aligned. + * @constructor * Create a new Menu * @param {Object} config The config object @@ -21,20 +23,29 @@ Roo.bootstrap.Menu = function(config){ + + if (config.type == 'treeview') { + // normally menu's are drawn attached to the document to handle layering etc.. + // however treeview (used by the docs menu is drawn into the parent element) + this.container_method = 'getChildContainer'; + } + Roo.bootstrap.Menu.superclass.constructor.call(this, config); if (this.registerMenu && this.type != 'treeview') { Roo.bootstrap.MenuMgr.register(this); } + + this.addEvents({ /** * @event beforeshow - * Fires before this menu is displayed + * Fires before this menu is displayed (return false to block) * @param {Roo.menu.Menu} this */ beforeshow : true, /** * @event beforehide - * Fires before this menu is hidden + * Fires before this menu is hidden (return false to block) * @param {Roo.menu.Menu} this */ beforehide : true, @@ -88,7 +99,7 @@ Roo.bootstrap.Menu = function(config){ 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, /** @@ -106,6 +117,13 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { isLink : false, + container_method : 'getDocumentBody', // so the menu is rendered on the body and zIndex works. + + hideTrigger : false, + + align : 'tl-bl?', + + getChildContainer : function() { return this.el; }, @@ -115,11 +133,10 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { //if (['right'].indexOf(this.align)!==-1) { // cfg.cn[1].cls += ' pull-right' //} - - + var cfg = { tag : 'ul', - cls : 'dropdown-menu' , + cls : 'dropdown-menu shadow' , style : 'z-index:1000' }; @@ -137,17 +154,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { // Roo.log("ADD event"); // Roo.log(this.triggerEl.dom); + if (this.triggerEl) { + + this.triggerEl.on('click', this.onTriggerClick, this); + + this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this); + + if (!this.hideTrigger) { + if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) { + // dropdown toggle on the 'a' in BS4? + this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle'); + } else { + this.triggerEl.addClass('dropdown-toggle'); + } + } + } - this.triggerEl.on('click', this.onTriggerClick, this); - - this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this); - - - if (this.triggerEl.hasClass('nav-item')) { - this.triggerEl.addClass('dropdown-toggle').select('.nav-link',true).first().addClass('nav-item'); - } else { - this.triggerEl.addClass('dropdown-toggle'); - } if (Roo.isTouch) { this.el.on('touchstart' , this.onTouch, this); } @@ -235,7 +257,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { isVisible : function(){ return !this.hidden; }, - onMouseOut : function(e){ + onMouseOut : function(e){ var t = this.findTargetItem(e); //if(t ){ @@ -255,13 +277,41 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { * the element (defaults to this.defaultAlign) * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined) */ - show : function(el, pos, parentMenu){ - this.parentMenu = parentMenu; + show : function(el, pos, parentMenu) + { + if (false === this.fireEvent("beforeshow", this)) { + Roo.log("show canceled"); + return; + } + this.parentMenu = parentMenu; if(!this.el){ this.render(); } - this.fireEvent("beforeshow", this); - this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false); + 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')) + } + + // 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 @@ -281,17 +331,17 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { //this.el.show(); this.hideMenuItems(); this.hidden = false; - this.triggerEl.addClass('open'); + if (this.triggerEl) { + 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(); - } // but the list may align on trigger left or trigger top... should it be a properity? @@ -322,15 +372,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { */ hide : function(deep) { - + if (false === this.fireEvent("beforehide", this)) { + Roo.log("hide canceled"); + return; + } this.hideMenuItems(); if(this.el && this.isVisible()){ - this.fireEvent("beforehide", this); + if(this.activeItem){ this.activeItem.deactivate(); this.activeItem = null; } - this.triggerEl.removeClass('open');; + if (this.triggerEl) { + this.triggerEl.removeClass('open'); + } + + this.el.removeClass('show'); this.hidden = true; this.fireEvent("hide", this); } @@ -375,7 +432,8 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.hide(); } else { Roo.log('show'); - this.show(this.triggerEl, false, false); + + this.show(this.triggerEl, this.align, false); } if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){ @@ -391,16 +449,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { if (!this.el) { return; } - //$(backdrop).remove() + this.el.select('.open',true).each(function(aa) { aa.removeClass('open'); - //var parent = getParent($(this)) - //var relatedTarget = { relatedTarget: this } - - //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) - //if (e.isDefaultPrevented()) return - //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) + }); }, addxtypeChild : function (tree, cntr) {