X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=9e39fb86ca80ef3682e6b2aaa6f9e8c2b526ddf2;hb=5ba88dd4a3a3098a79287438e6aebe26b076010d;hp=6dff3ac4d007d487f980d936493e6c6b6553f8ef;hpb=fe420d2446bbf077df23ab1ce3159fe2cd786415;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 6dff3ac4d0..9e39fb86ca 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -330,11 +330,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { } if (this.cls) { - cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls; + cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls; } if (this.style) { // fixme needs to support more complex style data. - cfg.style = this.style; + cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style; } if(this.name){ @@ -3043,6 +3043,7 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, { * @cfg {String} smUrl sm image source * @cfg {String} mdUrl md image source * @cfg {String} lgUrl lg image source + * @cfg {Boolean} backgroundContain (use style background and contain image in content) * * @constructor * Create a new Input @@ -3059,7 +3060,13 @@ Roo.bootstrap.Img = function(config){ * The img click event for the img. * @param {Roo.EventObject} e */ - "click" : true + "click" : true, + /** + * @event load + * The when any image loads + * @param {Roo.EventObject} e + */ + "load" : true }); }; @@ -3074,6 +3081,7 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { smUrl: '', mdUrl: '', lgUrl: '', + backgroundContain : false, getAutoCreate : function() { @@ -3146,12 +3154,20 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { tag: 'img', cls: (this.imgResponsive) ? 'img-responsive' : '', html : null, - src : 'about:blank' // just incase src get's set to undefined?!? + src : Roo.BLANK_IMAGE_URL // just incase src get's set to undefined?!? }; + if (this.backgroundContain) { + cfg.cls += ' background-contain'; + } + cfg.html = this.html || cfg.html; - cfg.src = this.src || cfg.src; + if (this.backgroundContain) { + cfg.style="background-image: url(" + this.src + ')'; + } else { + cfg.src = this.src || cfg.src; + } if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) { cfg.cls += ' img-' + this.border; @@ -3184,6 +3200,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { if(!this.href){ this.el.on('click', this.onClick, this); } + if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){ + this.el.on('load', this.onImageLoad, this); + } else { + // not sure if this works.. not tested + this.el.select('img', true).on('load', this.onImageLoad, this); + } }, @@ -3192,6 +3214,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { Roo.log('img onclick'); this.fireEvent('click', this, e); }, + onImageLoad: function(e) + { + Roo.log('img load'); + this.fireEvent('load', this, e); + }, + /** * Sets the url of the image - used to update it * @param {String} url the url of the image @@ -3202,7 +3230,11 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { this.src = url; if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){ - this.el.dom.src = url; + if (this.backgroundContain) { + this.el.dom.style.backgroundImage = 'url(' + url + ')'; + } else { + this.el.dom.src = url; + } return; } @@ -3589,6 +3621,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); @@ -3713,19 +3752,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.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'); - } - } if (Roo.isTouch) { this.el.on('touchstart' , this.onTouch, this); } @@ -3887,7 +3929,10 @@ 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'); @@ -3926,9 +3971,9 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { hide : function(deep) { if (false === this.fireEvent("beforehide", this)) { - Roo.log("hide canceled"); - return; - } + Roo.log("hide canceled"); + return; + } this.hideMenuItems(); if(this.el && this.isVisible()){ @@ -3936,8 +3981,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.activeItem.deactivate(); this.activeItem = null; } - this.triggerEl.removeClass('open');; - this.el.removeClass('show'); + if (this.triggerEl) { + this.triggerEl.removeClass('open'); + } + + this.el.removeClass('show'); this.hidden = true; this.fireEvent("hide", this); } @@ -3982,7 +4030,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.hide(); } else { Roo.log('show'); - + this.show(this.triggerEl, this.align, false); } @@ -7289,30 +7337,15 @@ Roo.grid.ColumnModel = function(config){ /** * The config passed into the constructor */ - this.config = config; + this.config = []; //config; this.lookup = {}; // if no id, create one // if the column does not have a dataIndex mapping, // map it to the order it is in the config for(var i = 0, len = config.length; i < len; i++){ - var c = config[i]; - if(typeof c.dataIndex == "undefined"){ - c.dataIndex = i; - } - if(typeof c.renderer == "string"){ - c.renderer = Roo.util.Format[c.renderer]; - } - if(typeof c.id == "undefined"){ - c.id = Roo.id(); - } - if(c.editor && c.editor.xtype){ - c.editor = Roo.factory(c.editor, Roo.grid); - } - if(c.editor && c.editor.isFormField){ - c.editor = new Roo.grid.GridEditor(c.editor); - } - this.lookup[c.id] = c; + this.addColumn(config[i]); + } /** @@ -7454,7 +7487,7 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, { /** - * Returns the column for a specified dataIndex. + * Returns the column Object for a specified dataIndex. * @param {String} dataIndex The column dataIndex * @return {Object|Boolean} the column or false if not found */ @@ -7780,7 +7813,35 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, { */ setEditor : function(col, editor){ this.config[col].editor = editor; + }, + /** + * Add a column (experimental...) - defaults to adding to the end.. + * @param {Object} config + */ + addColumn : function(c) + { + + var i = this.config.length; + this.config[i] = c; + + if(typeof c.dataIndex == "undefined"){ + c.dataIndex = i; + } + if(typeof c.renderer == "string"){ + c.renderer = Roo.util.Format[c.renderer]; + } + if(typeof c.id == "undefined"){ + c.id = Roo.id(); + } + if(c.editor && c.editor.xtype){ + c.editor = Roo.factory(c.editor, Roo.grid); + } + if(c.editor && c.editor.isFormField){ + c.editor = new Roo.grid.GridEditor(c.editor); + } + this.lookup[c.id] = c; } + }); Roo.grid.ColumnModel.defaultRenderer = function(value) @@ -8241,11 +8302,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { - var _this = this; Roo.each(this.el.select('thead th.sortable', true).elements, function(e){ - e.on('click', _this.sort, _this); - }); + e.on('click', this.sort, this); + }, this); this.mainBody.on("click", this.onClick, this); this.mainBody.on("dblclick", this.onDblClick, this); @@ -8416,15 +8476,14 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { var rowIndex = this.getRowIndex(row); // why??? - should these not be based on SelectionModel? - if(this.cellSelection){ + //if(this.cellSelection){ this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e); - } + //} - if(this.rowSelection){ + //if(this.rowSelection){ this.fireEvent('rowclick', this, row, rowIndex, e); - } - - + //} + }, onDblClick : function(e,el) @@ -8472,7 +8531,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { var sort = col.attr('sort'); var dir = 'ASC'; - if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){ + if(col.select('i', true).first().hasClass('fa-arrow-up')){ dir = 'DESC'; } @@ -8505,14 +8564,21 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { tag: 'th', cls : 'x-hcol-' + i, style : '', + html: cm.getColumnHeader(i) }; + var tooltip = cm.getColumnTooltip(i); + if (tooltip) { + c.tooltip = tooltip; + } + + var hh = ''; if(typeof(config.sortable) != 'undefined' && config.sortable){ c.cls = 'sortable'; - c.html = '' + c.html; + c.html = '' + c.html; } // could use BS4 hidden-..-down @@ -8647,15 +8713,15 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { var ds = this.store; Roo.each(this.el.select('thead th.sortable', true).elements, function(e){ - e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']); + e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']); if (_this.store.sortInfo) { if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){ - e.select('i', true).addClass(['glyphicon-arrow-up']); + e.select('i', true).addClass(['fa-arrow-up']); } if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){ - e.select('i', true).addClass(['glyphicon-arrow-down']); + e.select('i', true).addClass(['fa-arrow-down']); } } }); @@ -8853,6 +8919,9 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { var td = { tag: 'td', + // this might end up displaying HTML? + // this is too messy... - better to only do it on columsn you know are going to be too long + //tooltip : (typeof(value) === 'object') ? '' : value, cls : rowcfg.rowClass + ' x-col-' + i, style: '', html: (typeof(value) === 'object') ? '' : value @@ -9079,6 +9148,12 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { this.mainHead.remove(); this.mainHead = table.createChild(header, this.mainBody, false); + + Roo.each(this.el.select('thead th.sortable', true).elements, function(e){ + e.on('click', this.sort, this); + }, this); + + }, onHiddenChange : function(colModel, colIndex, hidden) @@ -16367,7 +16442,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.inputEl().on('mousedown', this.onTriggerClick, this); this.inputEl().addClass('x-combo-noedit'); }else{ - this.inputEl().dom.setAttribute('readOnly', false); + this.inputEl().dom.removeAttribute('readOnly'); this.inputEl().un('mousedown', this.onTriggerClick, this); this.inputEl().removeClass('x-combo-noedit'); } @@ -17565,16 +17640,21 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { combobox.cls += ' roo-select2-container-multi'; } + var required = this.allowBlank ? { + tag : 'i', + style: 'display: none' + } : { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }; + var align = this.labelAlign || this.parentLabelAlign(); if (align ==='left' && this.fieldLabel.length) { cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + required, { tag: 'label', cls : 'control-label col-form-label', @@ -17604,11 +17684,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { tag : 'span', html : this.fieldLabel }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - } + required ] }, { @@ -17657,11 +17733,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } else if ( this.fieldLabel.length) { cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + required, { tag: 'label', cls : 'control-label', @@ -17683,11 +17755,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { cls : 'control-label', html : this.fieldLabel, cn : [ - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - } + required ] }, { @@ -20222,7 +20290,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); } } @@ -20390,15 +20458,18 @@ Roo.apply(Roo.bootstrap.Popover, { clickHander : false, + onMouseDown : function(e) { - if (!e.getTarget(".roo-popover")) { + if (this.popups.length && !e.getTarget(".roo-popover")) { + /// what is nothing is showing.. this.hideAll(); } }, + popups : [], register : function(popup) @@ -20407,15 +20478,23 @@ Roo.apply(Roo.bootstrap.Popover, { Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover); } // hide other popups. - this.hideAll(); - this.popups.push(popup); + popup.on('show', Roo.bootstrap.Popover.onShow, popup); + popup.on('hide', Roo.bootstrap.Popover.onHide, popup); + this.hideAll(); //<< why? + //this.popups.push(popup); }, hideAll : function() { this.popups.forEach(function(p) { p.hide(); }); - } + }, + onShow : function() { + Roo.bootstrap.Popover.popups.push(this); + }, + onHide : function() { + Roo.bootstrap.Popover.popups.remove(this); + } });/* * - LGPL @@ -21906,7 +21985,10 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { break; case 'span': if (className.indexOf('disabled') < 0) { - this.viewDate.setUTCDate(1); + if (!this.viewDate) { + this.viewDate = new Date(); + } + this.viewDate.setUTCDate(1); if (className.indexOf('month') > -1) { this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html)); } else { @@ -29080,10 +29162,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; } @@ -29097,7 +29188,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(); @@ -29289,6 +29380,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], @@ -29816,8 +29923,11 @@ Roo.apply(Roo.bootstrap.LocationPicker, { * @licence LGPL * @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} weight (success|info|warning|danger) Weight of the message + * @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 @@ -29835,7 +29945,10 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, { title: '', html: '', weight: false, - faicon: false, + fa: false, + faicon: false, // BC + close : false, + getAutoCreate : function() { @@ -29844,6 +29957,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' @@ -29865,6 +29985,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; @@ -29876,45 +29999,69 @@ 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(); + this.htmlEl = this.el.select('.roo-alert-text',true).first(); + if (this.seconds > 0) { + this.hide.defer(this.seconds, this); + } }, - + /** + * Set the Title Message HTML + * @param {String} html + */ setTitle : function(str) { - this.el.select('.roo-alert-title',true).first().dom.innerHTML = str; + this.titleEl.dom.innerHTML = str; }, - - setText : function(str) + + /** + * Set the Body Message HTML + * @param {String} html + */ + setHtml : function(str) { - this.el.select('.roo-alert-text',true).first().dom.innerHTML = str; + this.htmlEl.dom.innerHTML = str; }, + /** + * Set the Weight of the alert + * @param {String} (success|info|warning|danger) weight + */ 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); }, - + /** + * Set the Icon of the alert + * @param {String} see fontawsome names (name without the 'fa-' bit) + */ 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 the Alert + */ hide: function() { this.el.hide(); }, - + /** + * Show the Alert + */ show: function() { this.el.show(); @@ -40066,7 +40213,15 @@ Roo.bootstrap.panel.Content = function( config){ * Fires when this tab is created * @param {Roo.ContentPanel} this */ - "render" : true + "render" : true, + + /** + * @event scroll + * Fires when this content is scrolled + * @param {Roo.ContentPanel} this + * @param {Event} scrollEvent + */ + "scroll" : true @@ -40077,6 +40232,7 @@ Roo.bootstrap.panel.Content = function( config){ if(this.autoScroll && !this.iframe){ this.resizeEl.setStyle("overflow", "auto"); + this.resizeEl.on('scroll', this.onScroll, this); } else { // fix randome scrolling //this.el.on('scroll', function() { @@ -40116,6 +40272,9 @@ Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, { iframe : false, iframeEl : false, + /* Resize Element - use this to work out scroll etc. */ + resizeEl : false, + setRegion : function(region){ this.region = region; this.setActiveClass(region && !this.background); @@ -40425,6 +40584,12 @@ layout.addxtype({ getChildContainer: function () { return this.getEl(); + }, + + + onScroll : function(e) + { + this.fireEvent('scroll', this, e); }