X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=e9febac739b5bf2d4c6d43d6eea916cb4845a36b;hb=8946284bad10596673ce59afe8ef1ea49ba0b790;hp=20515d5da28638ccb5c02c4c550aa6a5c4c9e258;hpb=9ed7672039bb7fcd7422a540f65091b3d69a99b7;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 20515d5da2..e9febac739 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -3579,8 +3579,9 @@ Roo.bootstrap.MenuMgr = function(){ * @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 @@ -3588,6 +3589,13 @@ Roo.bootstrap.MenuMgr = function(){ 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); @@ -3657,7 +3665,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, /** @@ -3679,6 +3687,8 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { hideTrigger : false, + align : 'tl-bl?', + getChildContainer : function() { return this.el; @@ -3689,8 +3699,7 @@ 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 shadow' , @@ -3841,8 +3850,31 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { 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')) + } + + // 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(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false); + this.showAt( xy , parentMenu, false); }, /** * Displays this menu at a specific xy position @@ -3865,15 +3897,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { 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? @@ -3961,7 +3989,8 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { 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'){ @@ -20200,7 +20229,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { if (this.parent() && (this.over == 'parent' || (this.over === false))) { on_el = this.parent().el; } else if (this.over) { - Roo.get(this.over); + on_el = Roo.get(this.over); } } @@ -29058,10 +29087,19 @@ Roo.apply(Roo.bootstrap.Tooltip, { return; } - var bindEl = el; + var bindEl = el; + var pel = false; + if (!el.attr('tooltip')) { + pel = el.findParent("[tooltip]"); + if (pel) { + bindEl = Roo.get(pel); + } + } + + // you can not look for children, as if el is the body.. then everythign is the child.. - if (!el.attr('tooltip')) { // + if (!pel && !el.attr('tooltip')) { // if (!el.select("[tooltip]").elements.length) { return; } @@ -29075,7 +29113,7 @@ Roo.apply(Roo.bootstrap.Tooltip, { //Roo.log("child element over.."); } - this.currentEl = bindEl; + this.currentEl = el; this.currentTip.bind(bindEl); this.currentRegion = Roo.lib.Region.getRegion(dom); this.currentTip.enter(); @@ -29267,6 +29305,22 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { } + var elems = document.getElementsByTagName('div'); + var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1); + for (var i = 0; i < elems.length; i++) { + var zindex = Number.parseInt( + document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"), + 10 + ); + if (zindex > highest) { + highest = zindex; + } + } + + + + this.el.dom.style.zIndex = highest; + this.el.alignTo(this.bindEl, align[0],align[1]); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], @@ -29795,7 +29849,10 @@ Roo.apply(Roo.bootstrap.LocationPicker, { * @cfg {String} title The title of alert * @cfg {String} html The content of alert * @cfg {String} weight ( success | info | warning | danger ) - * @cfg {String} faicon font-awesomeicon + * @cfg {String} fa font-awesomeicon + * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.) + * @cfg {Boolean} close true to show a x closer + * * * @constructor * Create a new alert @@ -29813,7 +29870,10 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, { title: '', html: '', weight: false, - faicon: false, + fa: false, + faicon: false, // BC + close : false, + getAutoCreate : function() { @@ -29822,6 +29882,13 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, { tag : 'div', cls : 'alert', cn : [ + { + tag: 'button', + type : "button", + cls: "close", + html : '×', + style : this.close ? '' : 'display:none' + }, { tag : 'i', cls : 'roo-alert-icon' @@ -29843,6 +29910,9 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, { if(this.faicon){ cfg.cn[0].cls += ' fa ' + this.faicon; } + if(this.fa){ + cfg.cn[0].cls += ' fa ' + this.fa; + } if(this.weight){ cfg.cls += ' alert-' + this.weight; @@ -29854,38 +29924,43 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, { initEvents: function() { this.el.setVisibilityMode(Roo.Element.DISPLAY); + this.titleEl = this.el.select('.roo-alert-title',true).first(); + this.iconEl = this.el.select('.roo-alert-icon',true).first(); + if (this.seconds > 0) { + this.hide.defer(this.seconds, this); + } }, setTitle : function(str) { - this.el.select('.roo-alert-title',true).first().dom.innerHTML = str; + this.titleEl.dom.innerHTML = str; }, setText : function(str) { - this.el.select('.roo-alert-text',true).first().dom.innerHTML = str; + this.titleEl.dom.innerHTML = str; }, setWeight : function(weight) { if(this.weight){ - this.el.select('.alert',true).first().removeClass('alert-' + this.weight); + this.el.removeClass('alert-' + this.weight); } this.weight = weight; - this.el.select('.alert',true).first().addClass('alert-' + this.weight); + this.el.addClass('alert-' + this.weight); }, setIcon : function(icon) { if(this.faicon){ - this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]); + this.alertEl.removeClass(['fa', 'fa-' + this.faicon]); } this.faicon = icon; - this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]); + this.alertEl.addClass(['fa', 'fa-' + this.faicon]); }, hide: function()