X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=0fae497ca4962016b4145cb2aa0336f870ab26b9;hb=d59b277dae414c8ed4dbc3522847f5f1b495081a;hp=4ddc97deaa097a03788502424d1cc900205a3b54;hpb=e7810d2d65eef79fc4ac202b002bcd97dcb8aa53;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 4ddc97deaa..0fae497ca4 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2810,7 +2810,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.specificTitle){ title = this.title; - }; + } var header = []; if (this.allow_close && Roo.bootstrap.version == 3) { @@ -2908,6 +2908,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, + resize : function() { @@ -2917,9 +2918,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { ); if (this.fitwindow) { + + this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, - this.height || Roo.lib.Dom.getViewportHeight(true) - 60 + this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 ); return; } @@ -2980,7 +2983,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { Roo.get(document.body).addClass('modal-open'); if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay? - var _this = this; + (function(){ this.el.addClass('show'); this.el.addClass('in'); @@ -3082,22 +3085,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { { //this.el.select('.modal-footer').() }, - diff : false, resizeTo: function(w,h) { - // skip.. ?? why?? - this.dialogEl.setWidth(w); - if (this.diff === false) { - this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight(); - } - - this.bodyEl.setHeight(h - this.diff); + + var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30 + this.bodyEl.setHeight(h - diff); + this.fireEvent('resize', this); - }, + setContentSize : function(w, h) { @@ -4020,7 +4019,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { var cfg = { tag : this.tag || 'div', - cls : 'navbar navbar-expand-lg' + cls : 'navbar navbar-expand-lg roo-navbar-simple' }; if (['light','white'].indexOf(this.weight) > -1) { cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; @@ -4188,6 +4187,12 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default'; + if (['light','white'].indexOf(this.weight) > -1) { + cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; + } + cfg.cls += ' bg-' + this.weight; + + if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) { cfg.cls += ' navbar-' + this.position + ' ' + this.position ; @@ -4365,11 +4370,13 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { cls: 'nav' }; if (Roo.bootstrap.version == 4) { - if (this.type == 'pills') { - cfg.cls = ' nav-pills'; + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type; + } else { + cfg.cls += ' navbar-nav'; } } else { - if (['tabs','pills'].indexOf(this.type)!==-1) { + if (['tabs','pills'].indexOf(this.type) != -1) { cfg.cls += ' nav-' + this.type } else { if (this.type !== 'nav') { @@ -4607,6 +4614,8 @@ Roo.apply(Roo.bootstrap.NavGroup, { * @extends Roo.bootstrap.Component * Bootstrap Navbar.NavItem class * @cfg {String} href link to + * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none + * @cfg {String} html content of button * @cfg {String} badge text inside badge * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge @@ -4672,13 +4681,16 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { disabled : false, animateRef : false, was_active : false, + button_weight : '', + button_outline : false, + + navLink: false, getAutoCreate : function(){ var cfg = { tag: this.tag, cls: 'nav-item' - }; if (this.active) { @@ -4687,6 +4699,27 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (this.disabled) { cfg.cls += ' disabled'; } + + // BS4 only? + if (this.button_weight.length) { + cfg.tag = this.href ? 'a' : 'button'; + cfg.html = this.html || ''; + cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight; + if (this.href) { + cfg.href = this.href; + } + if (this.fa) { + cfg.html = ' ' + this.html + ''; + } + + // menu .. should add dropdown-menu class - so no need for carat.. + + if (this.badge !== '') { + + cfg.html += ' ' + this.badge + ''; + } + return cfg; + } if (this.href || this.html || this.glyphicon || this.icon || this.fa) { cfg.cn = [ @@ -4700,10 +4733,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cfg.cn[0].cls = 'nav-link'; } if (this.icon) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } if (this.fa) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } if(this.glyphicon) { cfg.cn[0].html = ' ' + cfg.cn[0].html; @@ -4732,7 +4765,9 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { this.tag = 'div'; } - return Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + this.navLink = this.el.select('.nav-link',true).first(); + return ret; }, @@ -4837,8 +4872,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (!state ) { this.el.removeClass('active'); + this.navLink ? this.navLink.removeClass('active') : false; } else if (!this.el.hasClass('active')) { + this.el.addClass('active'); + if (Roo.bootstrap.version == 4 && this.navLink ) { + this.navLink.addClass('active'); + } + } if (fire) { this.fireEvent('changed', this, state); @@ -18317,7 +18358,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { { if(this.transition || typeof(pan) == 'undefined'){ Roo.log("waiting for the transitionend"); - return; + return false; } if (typeof(pan) == 'number') { @@ -18349,22 +18390,28 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') { + //class="carousel-item carousel-item-next carousel-item-left" + this.transition = true; var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev'; var lr = dir == 'next' ? 'left' : 'right'; pan.el.addClass(dir); // or prev + pan.el.addClass('carousel-item-' + dir); // or prev pan.el.dom.offsetWidth; // find the offset with - causing a reflow? cur.el.addClass(lr); // or right pan.el.addClass(lr); + cur.el.addClass('carousel-item-' +lr); // or right + pan.el.addClass('carousel-item-' +lr); + var _this = this; cur.el.on('transitionend', function() { Roo.log("trans end?"); - pan.el.removeClass([lr,dir]); + pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]); pan.setActive(true); - cur.el.removeClass([lr]); + cur.el.removeClass([lr, 'carousel-item-' + lr]); cur.setActive(false); _this.transition = false; @@ -18556,10 +18603,12 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { href : '', getAutoCreate : function(){ - var cfg = { + + + var cfg = { tag: 'div', // item is needed for carousel - not sure if it has any effect otherwise - cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''), + cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''), html: this.html || '' }; @@ -18571,6 +18620,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { cfg.tabId = this.tabId; } + return cfg; }, @@ -35071,6 +35121,9 @@ Roo.bootstrap.layout.Border = function(config){ Roo.bootstrap.layout.Border.regions = ["north","south","east","west","center"]; Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, { + + parent : false, // this might point to a 'nest' or a ??? + /** * Creates and adds a new region if it doesn't already exist. * @param {String} target The target region key (north, south, east, west or center). @@ -35325,13 +35378,18 @@ layout.addxtype({ delete cfg.items; } var nb = false; + + if ( region == 'center') { + Roo.log("Center: " + cfg.title); + } + switch(cfg.xtype) { case 'Content': // ContentPanel (el, cfg) case 'Scroll': // ContentPanel (el, cfg) case 'View': - cfg.autoCreate = true; + cfg.autoCreate = cfg.autoCreate || true; ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!! //} else { // var el = this.el.createChild(); @@ -35902,6 +35960,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { position: '', // set by wrapper (eg. north/south etc..) unrendered_panels : null, // unrendered panels. + + tabPosition : false, + + mgr: false, // points to 'Border' + + createBody : function(){ /** This region's body element * @type Roo.Element */ @@ -35923,15 +35987,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { /** This region's title element * @type Roo.Element */ - this.titleEl = dh.append(this.el.dom, - { - tag: "div", - unselectable: "on", - cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, - children:[ - {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, - {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} - ]}, true); + this.titleEl = dh.append(this.el.dom, { + tag: "div", + unselectable: "on", + cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, + children:[ + {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, + {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} + ] + }, true); this.titleEl.enableDisplayMode(); /** This region's title text element @@ -36036,7 +36100,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0}; - this.bottomTabs = c.tabPosition != "top"; + this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top"; this.autoScroll = c.autoScroll || false; @@ -36275,11 +36339,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render? var ts = new Roo.bootstrap.panel.Tabs({ - el: this.bodyEl.dom, - tabPosition: this.bottomTabs ? 'bottom' : 'top', - disableTooltips: this.config.disableTabTips, - toolbar : this.config.toolbar - }); + el: this.bodyEl.dom, + region : this, + tabPosition: this.tabPosition ? this.tabPosition : 'top', + disableTooltips: this.config.disableTabTips, + toolbar : this.config.toolbar + }); if(this.config.hideTabs){ ts.stripWrap.setDisplayed(false); @@ -36970,6 +37035,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, { + Roo.bootstrap.layout.North = function(config) { config.region = 'north'; @@ -37162,8 +37228,7 @@ Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { } Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); } -}); -Roo.namespace("Roo.bootstrap.panel");/* +});Roo.namespace("Roo.bootstrap.panel");/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -37864,6 +37929,7 @@ Roo.bootstrap.panel.Nest = function(config) config.layout.monitorWindowResize = false; // turn off autosizing this.layout = config.layout; this.layout.getEl().addClass("roo-layout-nested-layout"); + this.layout.parent = this; @@ -37962,7 +38028,7 @@ panel.addxtype({ return this.layout.addxtype(cfg); } -}); /* +});/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -38026,16 +38092,48 @@ Roo.bootstrap.panel.Tabs = function(config){ } if(this.tabPosition == "bottom"){ + // if tabs are at the bottom = create the body first. this.bodyEl = Roo.get(this.createBody(this.el.dom)); this.el.addClass("roo-tabs-bottom"); } - this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); - this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); - this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); - this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + // next create the tabs holders + + if (this.tabPosition == "west"){ + + var reg = this.region; // fake it.. + while (reg) { + if (!reg.mgr.parent) { + break; + } + reg = reg.mgr.parent.region; + } + Roo.log("got nest?"); + Roo.log(reg); + if (reg.mgr.getRegion('west')) { + var ctrdom = reg.mgr.getRegion('west').bodyEl.dom; + this.stripWrap = Roo.get(this.createStrip(ctrdom ), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + + + } + + + } else { + + this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + } + + if(Roo.isIE){ Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden"); } + + // finally - if tabs are at the top, then create the body last.. if(this.tabPosition != "bottom"){ /** The body element that contains {@link Roo.TabPanelItem} bodies. + * @type Roo.Element @@ -38126,7 +38224,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /* *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. */ - toolbar : false, + toolbar : false, // set by caller.. + + region : false, /// set by caller + + disableTooltips : true, // not used yet... /** * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one. @@ -38279,6 +38381,8 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { */ activate : function(id) { + //Roo.log('activite:' + id); + var tab = this.items[id]; if(!tab){ return null;