X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=7d035af4ca4b75ddf4212eae97c9ad1118b3f24c;hb=e48ce1c5e71b3d18391128ea45810effc0d036b0;hp=7433d5cefc4b7584dfbd6921861ca074640b90a3;hpb=5c4bd9e5eeb24b7cbf8a5c1bbdbb662847ad8009;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 7433d5cefc..7d035af4ca 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -3,15 +3,17 @@ * */ -Roo.bootstrap.version = ( - function() { - var ret=3; - Roo.each(document.styleSheets, function(s) { - if ( s.href && s.href.match(/css-bootstrap4/)) { - ret=4; - } - }); - return ret; +Roo.bootstrap.version = ( function() { + var ret=3; + Roo.each(document.styleSheets, function(s) { + if ( s.href && s.href.match(/css-bootstrap4/)) { + ret=4; + } + }); + if (ret > 3) { + Roo.Element.prototype.visibilityMode = Roo.Element.DISPLAY; + } + return ret; })(); /* * Based on: * Ext JS Library 1.1.1 @@ -961,8 +963,8 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { * @extends Roo.bootstrap.Component * Bootstrap Button class * @cfg {String} html The button content - * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link ) default - * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link ) default (same as button) + * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default + * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default (same as button) * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline) * @cfg {String} size (lg|sm|xs) * @cfg {String} tag (a|input|submit) @@ -981,6 +983,7 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { * @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.) * @cfg {Boolean} removeClass remove the standard class.. * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href. + * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup. * * @constructor * Create a new button @@ -990,23 +993,23 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { Roo.bootstrap.Button = function(config){ Roo.bootstrap.Button.superclass.constructor.call(this, config); - this.weightClass = ["btn-default btn-outline-secondary", - "btn-primary", - "btn-success", - "btn-info", - "btn-warning", - "btn-danger", - "btn-link" - ], + this.addEvents({ // raw events /** * @event click - * When a butotn is pressed + * When a button is pressed * @param {Roo.bootstrap.Button} btn * @param {Roo.EventObject} e */ "click" : true, + /** + * @event dblclick + * When a button is double clicked + * @param {Roo.bootstrap.Button} btn + * @param {Roo.EventObject} e + */ + "dblclick" : true, /** * @event toggle * After the button has been toggles @@ -1043,6 +1046,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { removeClass: false, name: false, target: false, + group : false, pressed : null, @@ -1077,9 +1081,9 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { } ] }; - - if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { - cfg.cls += ' '+this.weight; + // why are we validating the weights? + if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) { + cfg.cls += ' ' + this.weight; } return cfg; @@ -1094,15 +1098,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { return cfg; } + - if (this.theme==='default') { cfg.cls = 'btn roo-button'; //if (this.parentType != 'Navbar') { this.weight = this.weight.length ? this.weight : 'default'; //} - if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) { var outline = this.outline || this.weight == 'default' ? 'outline-' : ''; var weight = this.weight == 'default' ? 'secondary' : this.weight; @@ -1117,7 +1121,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { cfg.tag = 'a'; cfg.cls = 'btn-glow roo-button'; - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) { cfg.cls += ' ' + this.weight; } @@ -1270,17 +1274,30 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { } - if (this.el.hasClass('roo-button')) { + if (this.el.hasClass('roo-button')) { + this.el.on('click', this.onClick, this); + this.el.on('dblclick', this.onDblClick, this); + } else { + this.el.select('.roo-button').on('click', this.onClick, this); + this.el.select('.roo-button').on('dblclick', this.onDblClick, this); + + } + // why? + if(this.removeClass){ this.el.on('click', this.onClick, this); - } else { - this.el.select('.roo-button').on('click', this.onClick, this); - } - - if(this.removeClass){ - this.el.on('click', this.onClick, this); - } - - this.el.enableDisplayMode(); + } + + if (this.group === true) { + if (this.pressed === false || this.pressed === true) { + // nothing + } else { + this.pressed = false; + this.setActive(this.pressed); + } + + } + + this.el.enableDisplayMode(); }, onClick : function(e) @@ -1294,6 +1311,25 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { e.preventDefault(); } + if (this.group) { + if (this.pressed) { + // do nothing - + return; + } + this.setActive(true); + var pi = this.parent().items; + for (var i = 0;i < pi.length;i++) { + if (this == pi[i]) { + continue; + } + if (pi[i].el.hasClass('roo-button')) { + pi[i].setActive(false); + } + } + this.fireEvent('click', this, e); + return; + } + if (this.pressed === true || this.pressed === false) { this.toggleActive(e); } @@ -1301,7 +1337,16 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { this.fireEvent('click', this, e); }, - + onDblClick: function(e) + { + if (this.disabled) { + return; + } + if(this.preventDefault){ + e.preventDefault(); + } + this.fireEvent('dblclick', this, e); + }, /** * Enables this button */ @@ -1333,8 +1378,8 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { */ toggleActive : function(e) { - this.setActive(!this.pressed); - this.fireEvent('toggle', this, e, !this.pressed); + this.setActive(!this.pressed); // this modifies pressed... + this.fireEvent('toggle', this, e, this.pressed); }, /** * get the current active state @@ -1361,7 +1406,8 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { setWeight : function(str) { - this.el.removeClass(this.weightClass); + this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) ); + this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) ); this.weight = str; var outline = this.outline ? 'outline-' : ''; if (str == 'default') { @@ -1373,8 +1419,21 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { }); - - /* +// fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes. + +Roo.bootstrap.Button.weights = [ + 'default', + 'secondary' , + 'primary', + 'success', + 'info', + 'warning', + 'danger', + 'link', + 'light', + 'dark' + +];/* * - LGPL * * column @@ -1890,6 +1949,7 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, { * @cfg {String} header_image src url of image. * @cfg {String|Object} header * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default + * @cfg {Number} header_weight (primary|secondary|success|info|warning|danger|light|dark) * * @cfg {String} title * @cfg {String} subtitle @@ -1907,7 +1967,7 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, { * @cfg {String} margin_y (0|1|2|3|4|5|auto) * * @cfg {String} padding (0|1|2|3|4|5) - * @cfg {String} padding_top (0|1|2|3|4|5) + * @cfg {String} padding_top (0|1|2|3|4|5)next_to_card * @cfg {String} padding_bottom (0|1|2|3|4|5) * @cfg {String} padding_left (0|1|2|3|4|5) * @cfg {String} padding_right (0|1|2|3|4|5) @@ -1943,11 +2003,13 @@ Roo.bootstrap.Card = function(config){ /** * @event drop * When a element a card is dropped - * @param {Roo.bootstrap.Element} this - * @param {Roo.Element} n the node being dropped? - * @param {Object} dd Drag and drop data - * @param {Roo.EventObject} e - * @param {Roo.EventObject} data the data passed via getDragData + * @param {Roo.bootstrap.Card} this + * + * + * @param {Roo.bootstrap.Card} move_card the card being dropped? + * @param {String} position 'above' or 'below' + * @param {Roo.bootstrap.Card} next_to_card What card position is relative to of 'false' for empty list. + */ 'drop' : true, /** @@ -2009,6 +2071,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { drop_group : false, childContainer : false, dropEl : false, /// the dom placeholde element that indicates drop location. + containerEl: false, // body container + bodyEl: false, // card-body + headerContainerEl : false, // + headerEl : false, layoutCls : function() { @@ -2028,7 +2094,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) { if (('' + t['display' + (v.length ? '_' : '') + v]).length) { - cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v] + cls += ' d' + (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v] } }); @@ -2081,13 +2147,14 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { cfg.cls += ' bg-' + this.weight; } - cfg.cls += this.layoutCls(); + cfg.cls += ' ' + this.layoutCls(); var hdr = false; + var hdr_ctr = false; if (this.header.length) { hdr = { tag : this.header_size > 0 ? 'h' + this.header_size : 'div', - cls : 'card-header', + cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''), cn : [] }; cfg.cn.push(hdr); @@ -2095,10 +2162,11 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { } else { hdr = { tag : 'div', - cls : 'card-header d-none', + cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''), cn : [] }; cfg.cn.push(hdr); + hdr_ctr = hdr; } if (this.collapsable) { hdr_ctr = { @@ -2236,8 +2304,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { initEvents: function() { - - this.bodyEl = this.getChildContainer(); + this.bodyEl = this.el.select('.card-body',true).first(); + this.containerEl = this.getChildContainer(); if(this.dragable){ this.dragZone = new Roo.dd.DragZone(this.getEl(), { containerScroll: true, @@ -2267,7 +2335,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { this.footerEl = this.el.select('.card-footer').first(); this.collapsableToggleEl = this.el.select('.roo-collapse-toggle'); - this.headerEl = this.el.select('.roo-card-header-ctr').first(); + this.headerContainerEl = this.el.select('.roo-card-header-ctr').first(); + this.headerEl = this.el.select('.card-header',true).first(); if (this.rotated) { this.el.addClass('roo-card-rotated'); @@ -2304,7 +2373,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { getTargetFromEvent : function(e, dragged_card_el) { var target = e.getTarget(); - while ((target !== null) && (target.parentNode != this.bodyEl.dom)) { + while ((target !== null) && (target.parentNode != this.containerEl.dom)) { target = target.parentNode; } @@ -2416,22 +2485,50 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { if (info === false) { return false; } - - if (this.fireEvent("drop", this, n, dd, e, data) === false) { + this.dropPlaceHolder('hide'); + + + + + + this.acceptCard(data.source, info.position, info.card, info.items_n); + return true; + + }, + firstChildCard : function() + { + for (var i = 0;i< this.items.length;i++) { + + if (!this.items[i].el.hasClass('card')) { + continue; + } + return this.items[i]; + } + return this.items.length ? this.items[this.items.length-1] : false; // don't try and put stuff after the cards... + }, + /** + * accept card + * + * - card.acceptCard(move_card, info.position, info.card, info.items_n); + */ + acceptCard : function(move_card, position, next_to_card ) + { + if (this.fireEvent("drop", this, move_card, position, next_to_card) === false) { return false; } - - this.dropPlaceHolder('hide'); - // do the dom manipulation first.. - var dom = data.source.el.dom; - dom.parentNode.removeChild(dom); + var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0; + move_card.parent().removeCard(move_card); - if (info.card !== true) { - var cardel = info.card.el.dom; + + var dom = move_card.el.dom; + dom.style.width = ''; // clear with - which is set by drag. + + if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) { + var cardel = next_to_card.el.dom; - if (info.position == 'above') { + if (position == 'above' ) { cardel.parentNode.insertBefore(dom, cardel); } else if (cardel.nextSibling) { cardel.parentNode.insertBefore(dom,cardel.nextSibling); @@ -2440,42 +2537,49 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { } } else { // card container??? - this.bodyEl.dom.append(dom); + this.containerEl.dom.append(dom); } //FIXME HANDLE card = true // add this to the correct place in items. - - // remove Card from items. - var old_parent = data.source.parent(); - - old_parent.items = old_parent.items.filter(function(e) { return e != data.source }); - + if (this.items.length) { var nitems = []; //Roo.log([info.items_n, info.position, this.items.length]); for (var i =0; i < this.items.length; i++) { - if (i == info.items_n && info.position == 'above') { - nitems.push(data.source); + if (i == to_items_n && position == 'above') { + nitems.push(move_card); } nitems.push(this.items[i]); - if (i == info.items_n && info.position == 'below') { - nitems.push(data.source); + if (i == to_items_n && position == 'below') { + nitems.push(move_card); } } this.items = nitems; Roo.log(this.items); } else { - this.items.push(data.source); + this.items.push(move_card); } - data.source.parentId = this.id; + move_card.parentId = this.id; return true; + + + }, + removeCard : function(c) + { + this.items = this.items.filter(function(e) { return e != c }); + + var dom = c.el.dom; + dom.parentNode.removeChild(dom); + dom.style.width = ''; // clear with - which is set by drag. + c.parentId = false; + }, /** Decide whether to drop above or below a View node. */ @@ -2484,7 +2588,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { if (dd) { return false; } - if (n == this.bodyEl.dom) { + if (n == this.containerEl.dom) { return "above"; } var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight; @@ -2536,7 +2640,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { dropPlaceHolder: function (action, info, data) { if (this.dropEl === false) { - this.dropEl = Roo.DomHelper.append(this.bodyEl, { + this.dropEl = Roo.DomHelper.append(this.containerEl, { cls : 'd-none' },true); } @@ -2561,7 +2665,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { } } else { // card container??? - this.bodyEl.dom.append(this.dropEl.dom); + this.containerEl.dom.append(this.dropEl.dom); } this.dropEl.addClass('d-block roo-card-dropzone'); @@ -2575,7 +2679,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { }, setHeaderText: function(html) { - this.headerEl.dom.innerHTML = html; + this.header = html; + if (this.headerContainerEl) { + this.headerContainerEl.dom.innerHTML = html; + } } @@ -2679,329 +2786,7 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, { - -/* -* Licence: LGPL -*/ - -/** - * @class Roo.bootstrap.CardUploader - * @extends Roo.bootstrap.Button - * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name... - * @cfg {Number} errorTimeout default 3000 - * @cfg {Array} images an array of ?? Img objects ??? when loading existing files.. - * @cfg {Array} html The button text. - - * - * @constructor - * Create a new CardUploader - * @param {Object} config The config object - */ - -Roo.bootstrap.CardUploader = function(config){ - - - - Roo.bootstrap.CardUploader.superclass.constructor.call(this, config); - - - this.fileCollection = new Roo.util.MixedCollection(false,function(r) { - return r.data.id - }); - - -}; - -Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { - - - errorTimeout : 3000, - - images : false, - - fileCollection : false, - allowBlank : true, - - getAutoCreate : function() - { - - var cfg = { - cls :'form-group' , - cn : [ - - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, - - { - tag: 'input', - type : 'hidden', - value : this.value, - cls : 'd-none form-control' - }, - - { - tag: 'input', - multiple : 'multiple', - type : 'file', - cls : 'd-none roo-card-upload-selector' - }, - - { - cls : 'roo-card-uploader-button-container w-100 mb-2' - }, - { - cls : 'card-columns roo-card-uploader-container' - } - - ] - }; - - - return cfg; - }, - - getChildContainer : function() /// what children are added to. - { - return this.containerEl; - }, - - getButtonContainer : function() /// what children are added to. - { - return this.el.select(".roo-card-uploader-button-container").first(); - }, - - initEvents : function() - { - - Roo.bootstrap.Input.prototype.initEvents.call(this); - - var t = this; - this.addxtype({ - xns: Roo.bootstrap, - - xtype : 'Button', - container_method : 'getButtonContainer' , - html : this.html, // fix changable? - cls : 'w-100 ', - listeners : { - 'click' : function(btn, e) { - t.onClick(e); - } - } - }); - - - - - this.urlAPI = (window.createObjectURL && window) || - (window.URL && URL.revokeObjectURL && URL) || - (window.webkitURL && webkitURL); - - - - - this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); - - this.selectorEl.on('change', this.onFileSelected, this); - if (this.images) { - var t = this; - this.images.forEach(function(img) { - t.addCard(img) - }); - this.images = false; - } - this.containerEl = this.el.select('.roo-card-uploader-container', true).first(); - - - }, - - - onClick : function(e) - { - e.preventDefault(); - - this.selectorEl.dom.click(); - - }, - - onFileSelected : function(e) - { - e.preventDefault(); - - if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){ - return; - } - - Roo.each(this.selectorEl.dom.files, function(file){ - this.addFile(file); - }, this); - - }, - - - - - - addFile : function(file) - { - - if(typeof(file) === 'string'){ - throw "Add file by name?"; // should not happen - return; - } - - if(!file || !this.urlAPI){ - return; - } - - // file; - // file.type; - - var _this = this; - - - var url = _this.urlAPI.createObjectURL( file); - - this.addCard({ - id : Roo.bootstrap.CardUploader.ID--, - is_uploaded : false, - src : url, - title : file.name, - mimetype : file.type, - preview : false, - is_deleted : 0 - }) - - }, - - addCard : function (data) - { - // hidden input element? - // if the file is not an image... - //then we need to use something other that and header_image - var t = this; - // remove..... - var footer = [ - { - xns : Roo.bootstrap, - xtype : 'CardFooter', - items: [ - { - xns : Roo.bootstrap, - xtype : 'Element', - cls : 'd-flex', - items : [ - - { - xns : Roo.bootstrap, - xtype : 'Button', - html : String.format("{0}", data.title), - cls : 'col-11 text-left', - size: 'sm', - weight: 'link', - fa : 'download', - listeners : { - click : function() { - this.downloadCard(data.id) - } - } - }, - - { - xns : Roo.bootstrap, - xtype : 'Button', - - size : 'sm', - weight: 'danger', - cls : 'col-1', - fa : 'times', - listeners : { - click : function() { - t.removeCard(data.id) - } - } - } - ] - } - - ] - } - - ]; - - var cn = this.addxtype( - { - - xns : Roo.bootstrap, - xtype : 'Card', - closeable : true, - header : !data.mimetype.match(/image/) && !data.preview ? "Document": false, - header_image : data.mimetype.match(/image/) ? data.src : data.preview, - header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this. - data : data, - html : false, - - items : footer, - initEvents : function() { - Roo.bootstrap.Card.prototype.initEvents.call(this); - this.imgEl = this.el.select('.card-img-top').first(); - if (this.imgEl) { - this.imgEl.on('click', function() { t.previewCard( data.id); }, this); - this.imgEl.set({ 'pointer' : 'cursor' }); - - } - - - } - - } - ); - // dont' really need ot update items. - // this.items.push(cn); - this.fileCollection.add(cn); - this.updateInput(); - - }, - removeCard : function(id) - { - - var card = this.fileCollection.get(id); - card.data.is_deleted = 1; - card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc. - this.fileCollection.remove(card); - //this.items = this.items.filter(function(e) { return e != card }); - // dont' really need ot update items. - card.el.dom.parentNode.removeChild(card.el.dom); - - }, - reset: function() - { - this.fileCollection.each(function(card) { - card.el.dom.parentNode.removeChild(card.el.dom); - }); - this.fileCollection.clear(); - this.updateInput(); - }, - - updateInput : function() - { - var data = []; - this.fileCollection.each(function(e) { - data.push(e.data); - }); - - this.inputEl().dom.value = JSON.stringify(data); - } - - -}); - - -Roo.bootstrap.CardUploader.ID = -1;/* + /* * - LGPL * * image @@ -4165,9 +3950,10 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, { * @cfg {Boolean} animate default true * @cfg {Boolean} allow_close default true * @cfg {Boolean} fitwindow default false + * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false * @cfg {Number} width fixed width - usefull for chrome extension only really. * @cfg {Number} height fixed height - usefull for chrome extension only really. - * @cfg {String} size (sm|lg) default empty + * @cfg {String} size (sm|lg|xl) default empty * @cfg {Number} max_width set the max width of modal * @cfg {Boolean} editableTitle can the title be edited @@ -4330,12 +4116,12 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { { // we will default to modal-body-overflow - might need to remove or make optional later. var bdy = { - cls : 'modal-body enable-modal-body-overflow ', + cls : 'modal-body ' + (this.bodyOverflow ? 'overflow-auto' : ''), html : this.html || '' }; var title = { - tag: 'h4', + tag: 'h5', cls : 'modal-title', html : this.title }; @@ -4449,8 +4235,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { this.headerEditEl = this.headerEl.select('.form-control',true).first(); this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this); this.headerEditEl.on('keyup', function(e) { - if(e.isNavKeyPress()){ - this.toggleHeaderInput(false) + if([ e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) { + this.toggleHeaderInput(false) } }, this); this.headerEditEl.on('blur', function(e) { @@ -4470,7 +4256,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if (this.fitwindow) { - + this.dialogEl.setStyle( { 'max-width' : '100%' }); this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 @@ -4526,7 +4312,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if (!this.rendered) { this.render(); } - + this.toggleHeaderInput(false); //this.el.setStyle('display', 'block'); this.el.removeClass('hideing'); this.el.dom.style.display='block'; @@ -4747,7 +4533,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, toggleHeaderInput : function(is_edit) { - + if (!this.editableTitle) { + return; // not editable. + } if (is_edit && this.is_header_editing) { return; // already editing.. } @@ -5948,7 +5736,7 @@ Roo.extend(Roo.bootstrap.NavSidebar, Roo.bootstrap.Navbar, { * @cfg {Boolean} inverse * @cfg {String} type (nav|pills|tab) default nav * @cfg {String} navId - reference Id for navbar. - + * @cfg {Boolean} pilltype default true (turn to off to disable active toggle) * * @constructor * Create a new nav group @@ -5981,6 +5769,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { type: 'nav', navId : '', // private + pilltype : true, navItems : false, @@ -6242,8 +6031,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} button_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default none + * @cfg {Boolean} button_outline show and outlined button * @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 @@ -6252,7 +6041,7 @@ Roo.apply(Roo.bootstrap.NavGroup, { * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x) * @cfg {Boolean} active Is item active * @cfg {Boolean} disabled Is item disabled - + * @cfg {String} linkcls Link Class * @cfg {Boolean} preventDefault (true | false) default false * @cfg {String} tabId the tab that this item activates. * @cfg {String} tagtype (a|span) render as a href or span? @@ -6311,7 +6100,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { was_active : false, button_weight : '', button_outline : false, - + linkcls : '', navLink: false, getAutoCreate : function(){ @@ -6321,8 +6110,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cls: 'nav-item' }; + cfg.cls = typeof(cfg.cls) == 'undefined' ? '' : cfg.cls; + if (this.active) { - cfg.cls = typeof(cfg.cls) == 'undefined' ? 'active' : cfg.cls + ' active'; + cfg.cls += ' active' ; } if (this.disabled) { cfg.cls += ' disabled'; @@ -6358,7 +6149,8 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { } ]; if (this.tagtype == 'a') { - cfg.cn[0].cls = 'nav-link'; + cfg.cn[0].cls = 'nav-link' + (this.active ? ' active' : '') + ' ' + this.linkcls; + } if (this.icon) { cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; @@ -6407,11 +6199,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { this.menu = this.addxtype(Roo.apply({}, this.menu)); } - this.el.select('a',true).on('click', this.onClick, this); + this.el.on('click', this.onClick, this); - if(this.tagtype == 'span'){ - this.el.select('span',true).on('click', this.onClick, this); - } + //if(this.tagtype == 'span'){ + // this.el.select('span',true).on('click', this.onClick, this); + //} // at this point parent should be available.. this.parent().register(this); @@ -6470,7 +6262,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { var p = this.parent(); - if (['tabs','pills'].indexOf(p.type)!==-1) { + if (['tabs','pills'].indexOf(p.type)!==-1 && p.pilltype) { if (typeof(p.setActiveItem) !== 'undefined') { p.setActiveItem(this); } @@ -6560,7 +6352,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { */ tooltipEl : function() { - return this.el.select('' + this.tagtype + '', true).first(); + return this.el; //this.tagtype == 'a' ? this.el : this.el.select('' + this.tagtype + '', true).first(); }, scrollToElement : function(e) @@ -6822,6 +6614,142 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, { }); + /* + * - LGPL + * + * Breadcrumb Nav + * + */ +Roo.namespace('Roo.bootstrap.breadcrumb'); + + +/** + * @class Roo.bootstrap.breadcrumb.Nav + * @extends Roo.bootstrap.Component + * Bootstrap Breadcrumb Nav Class + * + * @children Roo.bootstrap.breadcrumb.Item + * + * @constructor + * Create a new breadcrumb.Nav + * @param {Object} config The config object + */ + + +Roo.bootstrap.breadcrumb.Nav = function(config){ + Roo.bootstrap.breadcrumb.Nav.superclass.constructor.call(this, config); + + +}; + +Roo.extend(Roo.bootstrap.breadcrumb.Nav, Roo.bootstrap.Component, { + + getAutoCreate : function() + { + + var cfg = { + tag: 'nav', + cn : [ + { + tag : 'ol', + cls : 'breadcrumb' + } + ] + + }; + + return cfg; + }, + + initEvents: function() + { + this.olEl = this.el.select('ol',true).first(); + }, + getChildContainer : function() + { + return this.olEl; + } + +}); + + /* + * - LGPL + * + * Breadcrumb Item + * + */ + + +/** + * @class Roo.bootstrap.breadcrumb.Nav + * @extends Roo.bootstrap.Component + * Bootstrap Breadcrumb Nav Class + * + * @children Roo.bootstrap.breadcrumb.Component + * @cfg {String} html the content of the link. + * @cfg {String} href where it links to if '#' is used the link will be handled by onClick. + * @cfg {Boolean} active is it active + + * + * @constructor + * Create a new breadcrumb.Nav + * @param {Object} config The config object + */ + +Roo.bootstrap.breadcrumb.Item = function(config){ + Roo.bootstrap.breadcrumb.Item.superclass.constructor.call(this, config); + this.addEvents({ + // img events + /** + * @event click + * The img click event for the img. + * @param {Roo.EventObject} e + */ + "click" : true + }); + +}; + +Roo.extend(Roo.bootstrap.breadcrumb.Item, Roo.bootstrap.Component, { + + href: false, + html : '', + + getAutoCreate : function() + { + + var cfg = { + tag: 'li', + cls : 'breadcrumb-item' + (this.active ? ' active' : '') + }; + if (this.href !== false) { + cfg.cn = [{ + tag : 'a', + href : this.href, + html : this.html + }]; + } else { + cfg.html = this.html; + } + + return cfg; + }, + + initEvents: function() + { + if (this.href) { + this.el.select('a', true).first().on('click',this.onClick, this) + } + + }, + onClick : function(e) + { + e.preventDefault(); + this.fireEvent('click',this, e); + } + +}); + /* * - LGPL * @@ -8554,6 +8482,9 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { record = ds.getAt(index); }else{ index = ds.indexOf(record); + if (index < 0) { + return; // should not happen - but seems to + } } this.insertRow(ds, index, true); this.autoSize(); @@ -8807,6 +8738,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { var tfd = this.getGridEl().select('tfoot', true).first(); var cw = ctr.getWidth(); + this.getGridEl().select('tfoot tr, tfoot td',true).setWidth(cw); if (tbd) { @@ -8820,7 +8752,8 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { cw -= barsize; } cw = Math.max(cw, this.totalWidth); - this.getGridEl().select('tr',true).setWidth(cw); + this.getGridEl().select('tbody tr',true).setWidth(cw); + // resize 'expandable coloumn? return; // we doe not have a view in this design.. @@ -10478,7 +10411,7 @@ Roo.form.VTypes = function(){ * @extends Roo.bootstrap.Component * Bootstrap Input class * @cfg {Boolean} disabled is it disabled - * @cfg {String} inputType button | checkbox | email | file | hidden | image | number | password | radio | range | reset | search | submit | text + * @cfg {String} (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text) inputType * @cfg {String} name name of the input * @cfg {string} fieldLabel - the label associated * @cfg {string} placeholder - placeholder to put in text. @@ -10563,7 +10496,14 @@ Roo.bootstrap.Input = function(config){ * @param {Roo.form.Field} this * @param {Roo.EventObject} e The event Object */ - keyup : true + keyup : true, + /** + * @event paste + * Fires after the user pastes into input + * @param {Roo.form.Field} this + * @param {Roo.EventObject} e The event Object + */ + paste : true }); }; @@ -10752,6 +10692,9 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { placeholder : this.placeholder || '', autocomplete : this.autocomplete || 'new-password' }; + if (this.inputType == 'file') { + input.style = 'overflow:hidden'; // why not in CSS? + } if(this.capture.length){ input.capture = this.capture; @@ -10830,7 +10773,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { inputblock.cn.push({ tag :'span', - cls : 'roo-input-before input-group-prepend input-group-text input-group-' + + cls : 'roo-input-before input-group-prepend input-group-' + (this.before.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought? }); } @@ -10849,7 +10792,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { inputblock.cn.push({ tag :'span', - cls : 'roo-input-after input-group-append input-group-text input-group-' + + cls : 'roo-input-after input-group-append input-group-' + (this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought? }); } @@ -10864,11 +10807,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star', tooltip : 'This field is required' }; - if (Roo.bootstrap.version == 4) { - indicator = { - tag : 'i', - style : 'display-none' - }; + if (this.allowBlank ) { + indicator.style = this.allowBlank ? ' display:none' : ''; } if (align ==='left' && this.fieldLabel.length) { @@ -10953,11 +10893,14 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } 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' + tooltip : 'This field is required', + style : this.allowBlank ? ' display:none' : '' }, { tag: 'label', @@ -10971,7 +10914,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { ]; if(this.indicatorpos == 'right'){ - + cfg.cn = [ { tag: 'label', @@ -10982,7 +10925,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { { tag : 'i', cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' + tooltip : 'This field is required', + style : this.allowBlank ? ' display:none' : '' }, inputblock @@ -11062,6 +11006,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { this.inputEl().on("blur", this.onBlur, this); this.inputEl().relayEvent('keyup', this); + this.inputEl().relayEvent('paste', this); this.indicator = this.indicatorEl(); @@ -12413,7 +12358,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { { this.list = Roo.get(document.body).createChild({ tag: Roo.bootstrap.version == 4 ? 'div' : 'ul', - cls: 'typeahead typeahead-long dropdown-menu', + cls: 'typeahead typeahead-long dropdown-menu shadow', style: 'display:none' }); @@ -12534,7 +12479,392 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { */ onTriggerClick : Roo.emptyFn }); - /* + +/* +* Licence: LGPL +*/ + +/** + * @class Roo.bootstrap.CardUploader + * @extends Roo.bootstrap.Button + * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name... + * @cfg {Number} errorTimeout default 3000 + * @cfg {Array} images an array of ?? Img objects ??? when loading existing files.. + * @cfg {Array} html The button text. + + * + * @constructor + * Create a new CardUploader + * @param {Object} config The config object + */ + +Roo.bootstrap.CardUploader = function(config){ + + + + Roo.bootstrap.CardUploader.superclass.constructor.call(this, config); + + + this.fileCollection = new Roo.util.MixedCollection(false,function(r) { + return r.data.id + }); + + this.addEvents({ + // raw events + /** + * @event preview + * When a image is clicked on - and needs to display a slideshow or similar.. + * @param {Roo.bootstrap.Card} this + * @param {Object} The image information data + * + */ + 'preview' : true, + /** + * @event download + * When a the download link is clicked + * @param {Roo.bootstrap.Card} this + * @param {Object} The image information data contains + */ + 'download' : true + + }); +}; + +Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { + + + errorTimeout : 3000, + + images : false, + + fileCollection : false, + allowBlank : true, + + getAutoCreate : function() + { + + var cfg = { + cls :'form-group' , + cn : [ + + { + tag: 'label', + //cls : 'input-group-addon', + html : this.fieldLabel + + }, + + { + tag: 'input', + type : 'hidden', + name : this.name, + value : this.value, + cls : 'd-none form-control' + }, + + { + tag: 'input', + multiple : 'multiple', + type : 'file', + cls : 'd-none roo-card-upload-selector' + }, + + { + cls : 'roo-card-uploader-button-container w-100 mb-2' + }, + { + cls : 'card-columns roo-card-uploader-container' + } + + ] + }; + + + return cfg; + }, + + getChildContainer : function() /// what children are added to. + { + return this.containerEl; + }, + + getButtonContainer : function() /// what children are added to. + { + return this.el.select(".roo-card-uploader-button-container").first(); + }, + + initEvents : function() + { + + Roo.bootstrap.Input.prototype.initEvents.call(this); + + var t = this; + this.addxtype({ + xns: Roo.bootstrap, + + xtype : 'Button', + container_method : 'getButtonContainer' , + html : this.html, // fix changable? + cls : 'w-100 ', + listeners : { + 'click' : function(btn, e) { + t.onClick(e); + } + } + }); + + + + + this.urlAPI = (window.createObjectURL && window) || + (window.URL && URL.revokeObjectURL && URL) || + (window.webkitURL && webkitURL); + + + + + this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); + + this.selectorEl.on('change', this.onFileSelected, this); + if (this.images) { + var t = this; + this.images.forEach(function(img) { + t.addCard(img) + }); + this.images = false; + } + this.containerEl = this.el.select('.roo-card-uploader-container', true).first(); + + + }, + + + onClick : function(e) + { + e.preventDefault(); + + this.selectorEl.dom.click(); + + }, + + onFileSelected : function(e) + { + e.preventDefault(); + + if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){ + return; + } + + Roo.each(this.selectorEl.dom.files, function(file){ + this.addFile(file); + }, this); + + }, + + + + + + addFile : function(file) + { + + if(typeof(file) === 'string'){ + throw "Add file by name?"; // should not happen + return; + } + + if(!file || !this.urlAPI){ + return; + } + + // file; + // file.type; + + var _this = this; + + + var url = _this.urlAPI.createObjectURL( file); + + this.addCard({ + id : Roo.bootstrap.CardUploader.ID--, + is_uploaded : false, + src : url, + srcfile : file, + title : file.name, + mimetype : file.type, + preview : false, + is_deleted : 0 + }); + + }, + + /** + * addCard - add an Attachment to the uploader + * @param data - the data about the image to upload + * + * { + id : 123 + title : "Title of file", + is_uploaded : false, + src : "http://.....", + srcfile : { the File upload object }, + mimetype : file.type, + preview : false, + is_deleted : 0 + .. any other data... + } + * + * + */ + + addCard : function (data) + { + // hidden input element? + // if the file is not an image... + //then we need to use something other that and header_image + var t = this; + // remove..... + var footer = [ + { + xns : Roo.bootstrap, + xtype : 'CardFooter', + items: [ + { + xns : Roo.bootstrap, + xtype : 'Element', + cls : 'd-flex', + items : [ + + { + xns : Roo.bootstrap, + xtype : 'Button', + html : String.format("{0}", data.title), + cls : 'col-10 text-left', + size: 'sm', + weight: 'link', + fa : 'download', + listeners : { + click : function() { + + t.fireEvent( "download", t, data ); + } + } + }, + + { + xns : Roo.bootstrap, + xtype : 'Button', + style: 'max-height: 28px; ', + size : 'sm', + weight: 'danger', + cls : 'col-2', + fa : 'times', + listeners : { + click : function() { + t.removeCard(data.id) + } + } + } + ] + } + + ] + } + + ]; + + var cn = this.addxtype( + { + + xns : Roo.bootstrap, + xtype : 'Card', + closeable : true, + header : !data.mimetype.match(/image/) && !data.preview ? "Document": false, + header_image : data.mimetype.match(/image/) ? data.src : data.preview, + header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this. + data : data, + html : false, + + items : footer, + initEvents : function() { + Roo.bootstrap.Card.prototype.initEvents.call(this); + var card = this; + this.imgEl = this.el.select('.card-img-top').first(); + if (this.imgEl) { + this.imgEl.on('click', function() { t.fireEvent( "preview", t, data ); }, this); + this.imgEl.set({ 'pointer' : 'cursor' }); + + } + this.getCardFooter().addClass('p-1'); + + + } + + } + ); + // dont' really need ot update items. + // this.items.push(cn); + this.fileCollection.add(cn); + + if (!data.srcfile) { + this.updateInput(); + return; + } + + var _t = this; + var reader = new FileReader(); + reader.addEventListener("load", function() { + data.srcdata = reader.result; + _t.updateInput(); + }); + reader.readAsDataURL(data.srcfile); + + + + }, + removeCard : function(id) + { + + var card = this.fileCollection.get(id); + card.data.is_deleted = 1; + card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc. + //this.fileCollection.remove(card); + //this.items = this.items.filter(function(e) { return e != card }); + // dont' really need ot update items. + card.el.dom.parentNode.removeChild(card.el.dom); + this.updateInput(); + + + }, + reset: function() + { + this.fileCollection.each(function(card) { + if (card.el.dom && card.el.dom.parentNode) { + card.el.dom.parentNode.removeChild(card.el.dom); + } + }); + this.fileCollection.clear(); + this.updateInput(); + }, + + updateInput : function() + { + var data = []; + this.fileCollection.each(function(e) { + data.push(e.data); + + }); + this.inputEl().dom.value = JSON.stringify(data); + + + + } + + +}); + + +Roo.bootstrap.CardUploader.ID = -1;/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -14649,6 +14979,7 @@ Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, { * @cfg {Boolean} emptyResultText only for touch device * @cfg {String} triggerText multiple combobox trigger button text default 'Select' * @cfg {String} emptyTitle default '' + * @cfg {Number} width fixed with? experimental * @constructor * Create a new ComboBox. * @param {Object} config Configuration options @@ -14975,6 +15306,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { emptyResultText: 'Empty', triggerText : 'Select', emptyTitle : '', + width : false, // element that contains real text value.. (when hidden is used..) @@ -15198,7 +15530,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.labelWidth > 12){ labelCfg.style = "width: " + this.labelWidth + 'px'; } - + if(this.width * 1 > 0){ + contentCfg.style = "width: " + this.width + 'px'; + } if(this.labelWidth < 13 && this.labelmd == 0){ this.labelmd = this.labelWidth; } @@ -15713,7 +16047,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, // private - onResize: function(w, h){ + onResize: function(w, h) + { + + // Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments); // // if(typeof w != 'number'){ @@ -16832,7 +17169,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } var inputblock = { - cls : '', + cls : 'roo-combobox-wrap', cn : [ input ] @@ -16969,7 +17306,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, { - cls : '', + cls : 'roo-combobox-wrap ', cn: [ combobox ] @@ -16999,7 +17336,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { ] }, { - cls : "", + cls : "roo-combobox-wrap ", cn: [ combobox ] @@ -17016,7 +17353,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.labelWidth > 12){ labelCfg.style = "width: " + this.labelWidth + 'px'; } - + if(this.labelWidth < 13 && this.labelmd == 0){ this.labelmd = this.labelWidth; } @@ -17217,9 +17554,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.animate){ var _this = this; - (function(){ _this.touchViewEl.addClass('in'); }).defer(50); + (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50); }else{ - this.touchViewEl.addClass('in'); + this.touchViewEl.addClass(['in','show']); } if(this._touchViewMask){ @@ -17235,7 +17572,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { hideTouchView : function() { - this.touchViewEl.removeClass('in'); + this.touchViewEl.removeClass(['in','show']); if(this.animate){ var _this = this; @@ -19344,9 +19681,12 @@ Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component, { * Bootstrap Popover class * @cfg {String} html contents of the popover (or false to use children..) * @cfg {String} title of popover (or false to hide) - * @cfg {String} placement how it is placed + * @cfg {String|function} (right|top|bottom|left|auto) placement how it is placed * @cfg {String} trigger click || hover (or false to trigger manually) - * @cfg {String} over what (parent or false to trigger manually.) + * @cfg {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event. + * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element + * - if false and it has a 'parent' then it will be automatically added to that element + * - if string - Roo.get will be called * @cfg {Number} delay - delay before showing * @constructor @@ -19378,43 +19718,56 @@ Roo.bootstrap.Popover = function(config){ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { - title: 'Fill in a title', + title: false, html: false, placement : 'right', trigger : 'hover', // hover - + modal : false, delay : 0, - over: 'parent', + over: false, can_build_overlaid : false, + maskEl : false, // the mask element + headerEl : false, + contentEl : false, + alignEl : false, // when show is called with an element - this get's stored. + getChildContainer : function() { - return this.el.select('.popover-content',true).first(); + return this.contentEl; + }, + getPopoverHeader : function() + { + this.title = true; // flag not to hide it.. + this.headerEl.addClass('p-0'); + return this.headerEl + }, + getAutoCreate : function(){ var cfg = { - cls : 'popover roo-dynamic', + cls : 'popover roo-dynamic shadow roo-popover' + (this.modal ? '-modal' : ''), style: 'display:block', cn : [ { cls : 'arrow' }, { - cls : 'popover-inner', + cls : 'popover-inner ', cn : [ { tag: 'h3', cls: 'popover-title popover-header', - html : this.title + html : this.title === false ? '' : this.title }, { - cls : 'popover-content popover-body', - html : this.html + cls : 'popover-content popover-body ' + (this.cls || ''), + html : this.html || '' } ] @@ -19424,20 +19777,35 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { return cfg; }, + /** + * @param {string} the title + */ setTitle: function(str) { this.title = str; - this.el.select('.popover-title',true).first().dom.innerHTML = str; + if (this.el) { + this.headerEl.dom.innerHTML = str; + } + }, + /** + * @param {string} the body content + */ setContent: function(str) { this.html = str; - this.el.select('.popover-content',true).first().dom.innerHTML = str; + if (this.contentEl) { + this.contentEl.dom.innerHTML = str; + } + }, // as it get's added to the bottom of the page. onRender : function(ct, position) { Roo.bootstrap.Component.superclass.onRender.call(this, ct, position); + + + if(!this.el){ var cfg = Roo.apply({}, this.getAutoCreate()); cfg.id = Roo.id(); @@ -19452,21 +19820,60 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { this.el = Roo.get(document.body).createChild(cfg, position); // Roo.log(this.el); } + + this.contentEl = this.el.select('.popover-content',true).first(); + this.headerEl = this.el.select('.popover-title',true).first(); + + var nitems = []; + if(typeof(this.items) != 'undefined'){ + var items = this.items; + delete this.items; + + for(var i =0;i < items.length;i++) { + nitems.push(this.addxtype(Roo.apply({}, items[i]))); + } + } + + this.items = nitems; + + this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true); + Roo.EventManager.onWindowResize(this.resizeMask, this, true); + + + this.initEvents(); }, + resizeMask : function() + { + this.maskEl.setSize( + Roo.lib.Dom.getViewWidth(true), + Roo.lib.Dom.getViewHeight(true) + ); + }, + initEvents : function() { - this.el.select('.popover-title',true).setVisibilityMode(Roo.Element.DISPLAY); + + if (!this.modal) { + Roo.bootstrap.Popover.register(this); + } + + this.arrowEl = this.el.select('.arrow',true).first(); + this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4 this.el.enableDisplayMode('block'); this.el.hide(); - if (this.over === false) { + + + if (this.over === false && !this.parent()) { return; } if (this.triggers === false) { return; } - var on_el = (this.over == 'parent') ? this.parent().el : Roo.get(this.over); + + // support parent + var on_el = (this.over == 'parent' || this.over === false) ? this.parent().el : Roo.get(this.over); var triggers = this.trigger ? this.trigger.split(' ') : []; Roo.each(triggers, function(trigger) { @@ -19480,7 +19887,6 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { on_el.on(eventOut, this.leave, this); } }, this); - }, @@ -19526,88 +19932,248 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { } }, this.delay.hide) }, - - show : function (on_el) + /** + * Show the popover + * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ]) + * @param {string} (left|right|top|bottom) position + */ + show : function (on_el, placement) { + this.placement = typeof(placement) == 'undefined' ? this.placement : placement; + on_el = on_el || false; // default to false + if (!on_el) { - on_el= (this.over == 'parent') ? this.parent().el : Roo.get(this.over); - } - - // set content. - this.el.select('.popover-title',true).first().dom.innerHtml = this.title; - if (this.html !== false) { - this.el.select('.popover-content',true).first().dom.innerHtml = this.html; - } - this.el.removeClass([ - 'fade','top','bottom', 'left', 'right','in', - 'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right' - ]); - if (!this.title.length) { - this.el.select('.popover-title',true).hide(); + if (this.parent() && (this.over == 'parent' || (this.over === false))) { + on_el = this.parent().el; + } else if (this.over) { + Roo.get(this.over); + } + } - var placement = typeof this.placement == 'function' ? - this.placement.call(this, this.el, on_el) : - this.placement; - - var autoToken = /\s?auto?\s?/i; - var autoPlace = autoToken.test(placement); - if (autoPlace) { - placement = placement.replace(autoToken, '') || 'top'; + this.alignEl = Roo.get( on_el ); + + if (!this.el) { + this.render(document.body); } - //this.el.detach() - //this.el.setXY([0,0]); - this.el.show(); - this.el.dom.style.display='block'; - this.el.addClass(placement); - //this.el.appendTo(on_el); + - var p = this.getPosition(); - var box = this.el.getBox(); + if (this.title === false) { + this.headerEl.hide(); + } - if (autoPlace) { - // fixme.. + + this.el.show(); + this.el.dom.style.display = 'block'; + + + if (this.alignEl) { + this.updatePosition(this.placement, true); + + } else { + // this is usually just done by the builder = to show the popoup in the middle of the scren. + var es = this.el.getSize(); + var x = Roo.lib.Dom.getViewWidth()/2; + var y = Roo.lib.Dom.getViewHeight()/2; + this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); + } - var align = Roo.bootstrap.Popover.alignment[placement]; + -// Roo.log(align); - this.el.alignTo(on_el, align[0],align[1]); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], this.el.addClass('in'); - - if (this.el.hasClass('fade')) { - // fade it? - } + this.hoverState = 'in'; + if (this.modal) { + this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true)); + this.maskEl.setStyle('z-index', Roo.bootstrap.Popover.zIndex++); + this.maskEl.dom.style.display = 'block'; + this.maskEl.addClass('show'); + } + this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++); + this.fireEvent('show', this); }, + /** + * fire this manually after loading a grid in the table for example + * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one) + * @param {Boolean} try and move it if we cant get right position. + */ + updatePosition : function(placement, try_move) + { + // allow for calling with no parameters + placement = placement ? placement : this.placement; + try_move = typeof(try_move) == 'undefined' ? true : try_move; + + this.el.removeClass([ + 'fade','top','bottom', 'left', 'right','in', + 'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right' + ]); + this.el.addClass(placement + ' bs-popover-' + placement); + + if (!this.alignEl ) { + return false; + } + + switch (placement) { + case 'right': + var exact = this.el.getAlignToXY(this.alignEl, 'tl-tr', [10,0]); + var offset = this.el.getAlignToXY(this.alignEl, 'tl-tr?',[10,0]); + if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) { + //normal display... or moved up/down. + this.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('tr', false); + xy[0]+=2;xy[1]+=5; + this.arrowEl.setXY(xy); + return true; + } + // continue through... + return this.updatePosition('left', false); + + + case 'left': + var exact = this.el.getAlignToXY(this.alignEl, 'tr-tl', [-10,0]); + var offset = this.el.getAlignToXY(this.alignEl, 'tr-tl?',[-10,0]); + if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) { + //normal display... or moved up/down. + this.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('tl', false); + xy[0]-=10;xy[1]+=5; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // call self... + return this.updatePosition('right', false); + + case 'top': + var exact = this.el.getAlignToXY(this.alignEl, 'b-t', [0,-10]); + var offset = this.el.getAlignToXY(this.alignEl, 'b-t?',[0,-10]); + if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) { + //normal display... or moved up/down. + this.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('t', false); + xy[1]-=10; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // fall through + return this.updatePosition('bottom', false); + + case 'bottom': + var exact = this.el.getAlignToXY(this.alignEl, 't-b', [0,10]); + var offset = this.el.getAlignToXY(this.alignEl, 't-b?',[0,10]); + if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) { + //normal display... or moved up/down. + this.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('b', false); + xy[1]+=2; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // fall through + return this.updatePosition('top', false); + + + } + + + return false; + }, + hide : function() { this.el.setXY([0,0]); this.el.removeClass('in'); this.el.hide(); this.hoverState = null; - + this.maskEl.hide(); // always.. this.fireEvent('hide', this); } }); -Roo.bootstrap.Popover.alignment = { - 'left' : ['r-l', [-10,0], 'right bs-popover-right'], - 'right' : ['l-r', [10,0], 'left bs-popover-left'], - 'bottom' : ['t-b', [0,10], 'top bs-popover-top'], - 'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom'] + +Roo.apply(Roo.bootstrap.Popover, { + + alignment : { + 'left' : ['r-l', [-10,0], 'left bs-popover-left'], + 'right' : ['l-br', [10,0], 'right bs-popover-right'], + 'bottom' : ['t-b', [0,10], 'top bs-popover-top'], + 'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom'] + }, + + zIndex : 20001, + + clickHander : false, + + + onMouseDown : function(e) + { + if (!e.getTarget(".roo-popover")) { + this.hideAll(); + } + + }, + + popups : [], + + register : function(popup) + { + if (!Roo.bootstrap.Popover.clickHandler) { + 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); + }, + hideAll : function() + { + this.popups.forEach(function(p) { + p.hide(); + }); + } + +});/* + * - LGPL + * + * Card header - holder for the card header elements. + * + */ + +/** + * @class Roo.bootstrap.PopoverNav + * @extends Roo.bootstrap.NavGroup + * Bootstrap Popover header navigation class + * @constructor + * Create a new Popover Header Navigation + * @param {Object} config The config object + */ + +Roo.bootstrap.PopoverNav = function(config){ + Roo.bootstrap.PopoverNav.superclass.constructor.call(this, config); }; +Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.NavSimplebar, { + + + container_method : 'getPopoverHeader' + + + + + +}); + + + /* * - LGPL * @@ -20163,6 +20729,7 @@ Roo.apply(Roo.bootstrap.TabGroup, { * @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel) * @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide () * @cfg {String} href click to link.. + * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off) * * * @constructor @@ -20202,7 +20769,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { tabId: false, navId : false, href : '', - + touchSlide : false, getAutoCreate : function(){ @@ -20247,7 +20814,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { this.el.on('click', this.onClick, this); - if(Roo.isTouch){ + if(Roo.isTouch && this.touchSlide){ this.el.on("touchstart", this.onTouchStart, this); this.el.on("touchmove", this.onTouchMove, this); this.el.on("touchend", this.onTouchEnd, this); @@ -21087,8 +21654,8 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { //Roo.log(className); if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){ var day = parseInt(html, 10) || 1; - var year = this.viewDate.getUTCFullYear(), - month = this.viewDate.getUTCMonth(); + var year = (this.viewDate || new Date()).getUTCFullYear(), + month = (this.viewDate || new Date()).getUTCMonth(); if (className.indexOf('old') > -1) { if(month === 0 ){ @@ -21419,7 +21986,7 @@ Roo.apply(Roo.bootstrap.DateField, { template : { tag: 'div', - cls: 'datepicker dropdown-menu roo-dynamic', + cls: 'datepicker dropdown-menu roo-dynamic shadow', cn: [ { tag: 'div', @@ -21527,13 +22094,20 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { * valid according to {@link Date#parseDate} (defaults to 'H:i'). */ format : "H:i", - + + getAutoCreate : function() + { + this.after = ''; + return Roo.bootstrap.TimeField.superclass.getAutoCreate.call(this); + + + }, onRender: function(ct, position) { Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position); - this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.TimeField.template); + this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.TimeField.template); this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; @@ -21548,10 +22122,10 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { this.fillTime(); this.update(); - this.pop.select('span.hours-up', true).first().on('click', this.onIncrementHours, this); - this.pop.select('span.hours-down', true).first().on('click', this.onDecrementHours, this); - this.pop.select('span.minutes-up', true).first().on('click', this.onIncrementMinutes, this); - this.pop.select('span.minutes-down', true).first().on('click', this.onDecrementMinutes, this); + this.pop.select('.hours-up', true).first().on('click', this.onIncrementHours, this); + this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this); + this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this); + this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this); this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this); this.pop.select('button.ok', true).first().on('click', this.setTime, this); @@ -21595,7 +22169,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { picker : function() { - return this.el.select('.datepicker', true).first(); + return this.pickerEl; }, fillTime: function() @@ -21616,8 +22190,8 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { cls: 'btn', cn: [ { - tag: 'span', - cls: 'hours-up glyphicon glyphicon-chevron-up' + tag: 'i', + cls: 'hours-up fa fas fa-chevron-up' } ] } @@ -21636,8 +22210,8 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { cls: 'btn', cn: [ { - tag: 'span', - cls: 'minutes-up glyphicon glyphicon-chevron-up' + tag: 'i', + cls: 'minutes-up fa fas fa-chevron-up' } ] } @@ -21710,7 +22284,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { cn: [ { tag: 'span', - cls: 'hours-down glyphicon glyphicon-chevron-down' + cls: 'hours-down fa fas fa-chevron-down' } ] } @@ -21730,7 +22304,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { cn: [ { tag: 'span', - cls: 'minutes-down glyphicon glyphicon-chevron-down' + cls: 'minutes-down fa fas fa-chevron-down' } ] } @@ -21803,21 +22377,27 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { cls.pop(); cls.push('left'); } - + //this.picker().setXY(20000,20000); this.picker().addClass(cls.join('-')); var _this = this; Roo.each(cls, function(c){ if(c == 'bottom'){ - _this.picker().setTop(_this.inputEl().getHeight()); + (function() { + // + }).defer(200); + _this.picker().alignTo(_this.inputEl(), "tr-br", [0, 10], false); + //_this.picker().setTop(_this.inputEl().getHeight()); return; } if(c == 'top'){ - _this.picker().setTop(0 - _this.picker().getHeight()); + _this.picker().alignTo(_this.inputEl(), "br-tr", [0, 10], false); + + //_this.picker().setTop(0 - _this.picker().getHeight()); return; } - + /* if(c == 'left'){ _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth()); return; @@ -21826,6 +22406,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft()); return; } + */ }); }, @@ -21913,48 +22494,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { }); - -Roo.apply(Roo.bootstrap.TimeField, { - - content : { - tag: 'tbody', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'td', - colspan: '7' - } - ] - } - ] - }, - - footer : { - tag: 'tfoot', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'th', - colspan: '7', - cls: '', - cn: [ - { - tag: 'button', - cls: 'btn btn-info ok', - html: 'OK' - } - ] - } - - ] - } - ] - } -}); + Roo.apply(Roo.bootstrap.TimeField, { @@ -21970,8 +22510,43 @@ Roo.apply(Roo.bootstrap.TimeField, { tag: 'table', cls: 'table-condensed', cn:[ - Roo.bootstrap.TimeField.content, - Roo.bootstrap.TimeField.footer + { + tag: 'tbody', + cn: [ + { + tag: 'tr', + cn: [ + { + tag: 'td', + colspan: '7' + } + ] + } + ] + }, + { + tag: 'tfoot', + cn: [ + { + tag: 'tr', + cn: [ + { + tag: 'th', + colspan: '7', + cls: '', + cn: [ + { + tag: 'button', + cls: 'btn btn-info ok', + html: 'OK' + } + ] + } + + ] + } + ] + } ] } ] @@ -23373,7 +23948,6 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { // private validateValue: function (value) { - if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) { return false; } @@ -23392,7 +23966,7 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { return true; } - if ('[\x21-\x7e]*'.match(value)) { + if (!value.match(/[\x21-\x7e]+/)) { this.markInvalid(this.errors.PwdBadChar); this.errorMsg = this.errors.PwdBadChar; return false; @@ -23697,10 +24271,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { st = ''; - } else { - st = ''; + } else { + for (var i in this.stylesheets) { + st += ''; + } + } st += '