X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=9e4fb24682fada7a10f00101e750c6a9d8aaebf2;hp=157945ee554d594f488109582e73dd6e4b86d0aa;hb=7700b2c5de4e083e5c3b3d46cc4e2ff2ab68aab1;hpb=04bed75578064485e974a7b086815d8012e2c348 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 157945ee55..9e4fb24682 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 @@ -360,6 +362,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { { return this.el; }, + getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work + { + return Roo.get(document.body); + }, + /** * Fetch the element to display the tooltip on. * @return {Roo.Element} defaults to this.el @@ -648,6 +655,8 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { * @cfg {String} cls class of the element * @cfg {Boolean} preventDefault (true|false) default false * @cfg {Boolean} clickable (true|false) default false + * @cfg {String} role default blank - set to button to force cursor pointer + * * @constructor * Create a new Element @@ -665,7 +674,9 @@ Roo.bootstrap.Element = function(config){ * @param {Roo.bootstrap.Element} this * @param {Roo.EventObject} e */ - "click" : true + "click" : true + + }); }; @@ -676,6 +687,8 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, { html: '', preventDefault: false, clickable: false, + tapedTwice : false, + role : false, getAutoCreate : function(){ @@ -684,6 +697,9 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, { // cls: this.cls, double assign in parent class Component.js :: onRender html: this.html }; + if (this.role !== false) { + cfg.role = this.role; + } return cfg; }, @@ -696,6 +712,7 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, { this.el.on('click', this.onClick, this); } + }, onClick : function(e) @@ -704,9 +721,14 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, { e.preventDefault(); } - this.fireEvent('click', this, e); + this.fireEvent('click', this, e); // why was this double click before? }, + + + + + getValue : function() { return this.el.dom.innerHTML; @@ -981,6 +1003,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 @@ -995,11 +1018,18 @@ Roo.bootstrap.Button = function(config){ // 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 @@ -1036,6 +1066,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { removeClass: false, name: false, target: false, + group : false, pressed : null, @@ -1263,17 +1294,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) @@ -1287,6 +1331,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); } @@ -1294,7 +1357,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 */ @@ -1302,6 +1374,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { { this.disabled = false; this.el.removeClass('disabled'); + this.el.dom.removeAttribute("disabled"); }, /** @@ -1311,6 +1384,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { { this.disabled = true; this.el.addClass('disabled'); + this.el.attr("disabled", "disabled") }, /** * sets the active state on/off, @@ -1326,8 +1400,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 @@ -1897,6 +1971,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 @@ -1914,7 +1989,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) @@ -1950,22 +2025,31 @@ 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, /** * @event rotate * When a element a card is rotate - * @param {Roo.bootstrap.Element} this + * @param {Roo.bootstrap.Card} this * @param {Roo.Element} n the node being dropped? * @param {Boolean} rotate status */ - 'rotate' : true - + 'rotate' : true, + /** + * @event cardover + * When a card element is dragged over ready to drop (return false to block dropable) + * @param {Roo.bootstrap.Card} this + * @param {Object} data from dragdrop + */ + 'cardover' : true + }); }; @@ -2016,6 +2100,12 @@ 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, + header_imageEl : false, + layoutCls : function() { @@ -2035,7 +2125,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] } }); @@ -2088,14 +2178,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); @@ -2103,7 +2193,7 @@ 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); @@ -2226,7 +2316,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { }, getCardImageTop : function() { - var ret = this.el.select('.card-img-top',true).first(); + var ret = this.header_imageEl; if (ret.hasClass('d-none')) { ret.removeClass('d-none'); } @@ -2245,8 +2335,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, @@ -2272,16 +2362,19 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { if (this.rotateable) { this.el.select('.card-header',true).on('click', this.onToggleRotate, this); } - this.collapsableEl = this.el.select('.roo-collapsable').first(); + this.collapsableEl = this.el.select('.roo-collapsable',true).first(); - 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.footerEl = this.el.select('.card-footer',true).first(); + this.collapsableToggleEl = this.el.select('.roo-collapse-toggle',true).first(); + this.headerContainerEl = this.el.select('.roo-card-header-ctr',true).first(); + this.headerEl = this.el.select('.card-header',true).first(); if (this.rotated) { this.el.addClass('roo-card-rotated'); this.fireEvent('rotate', this, true); } + this.header_imageEl = this.el.select('.card-img-top',true).first(); + this.header_imageEl.on('load', this.onHeaderImageLoad, this ); }, getDragData : function(e) @@ -2309,11 +2402,22 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { /** * Part of the Roo.dd.DropZone interface. If no target node is found, the * whole Element becomes the target, and this causes the drop gesture to append. + * + * Returns an object: + * { + + position : 'below' or 'above' + card : relateive to card OBJECT (or true for no cards listed) + items_n : relative to nth item in list + card_n : relative to nth card in list + } + * + * */ 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; } @@ -2402,7 +2506,11 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { } Roo.log(['getTargetFromEvent', target_info ]); - + + if (this.fireEvent('cardover', this, [ data ]) === false) { + return false; + } + this.dropPlaceHolder('show', target_info,data); return false; @@ -2425,22 +2533,48 @@ 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); @@ -2449,42 +2583,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. */ @@ -2493,7 +2634,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; @@ -2545,7 +2686,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); } @@ -2570,7 +2711,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'); @@ -2584,7 +2725,31 @@ 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; + } + }, + onHeaderImageLoad : function(ev, he) + { + if (!this.header_image_fit_square) { + return; + } + + var hw = he.naturalHeight / he.naturalWidth; + // wide image = < 0 + // tall image = > 1 + //var w = he.dom.naturalWidth; + var ww = he.width; + he.style.left = 0; + he.style.position = 'relative'; + if (hw > 1) { + var nw = (ww * (1/hw)); + Roo.get(he).setSize( ww * (1/hw), ww); + he.style.left = ((ww - nw)/ 2) + 'px'; + he.style.position = 'relative'; + } + } @@ -2688,6 +2853,174 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, { + +/* +* Licence: LGPL +*/ + +/** + * @class Roo.bootstrap.ButtonUploader + * @extends Roo.bootstrap.Button + * Bootstrap Button Uploader class - it's a button which when you add files to it + * + * + * @cfg {Number} errorTimeout default 3000 + * @cfg {Array} images an array of ?? Img objects ??? when loading existing files.. + * @cfg {Array} html The button text. + * @cfg {Boolean} multiple (default true) Should the upload allow multiple files to be uploaded. + * + * @constructor + * Create a new CardUploader + * @param {Object} config The config object + */ + +Roo.bootstrap.ButtonUploader = function(config){ + + + + Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config); + + + this.addEvents({ + // raw events + /** + * @event beforeselect + * When button is pressed, before show upload files dialog is shown + * @param {Roo.bootstrap.UploaderButton} this + * + */ + 'beforeselect' : true, + /** + * @event fired when files have been selected, + * When a the download link is clicked + * @param {Roo.bootstrap.UploaderButton} this + * @param {Array} Array of files that have been uploaded + */ + 'uploaded' : true + + }); +}; + +Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, { + + + errorTimeout : 3000, + + images : false, + + fileCollection : false, + allowBlank : true, + + multiple : true, + + getAutoCreate : function() + { + var im = { + tag: 'input', + type : 'file', + cls : 'd-none roo-card-upload-selector' + + }; + if (this.multiple) { + im.multiple = 'multiple'; + } + + return { + cls :'div' , + cn : [ + Roo.bootstrap.Button.prototype.getAutoCreate.call(this), + im + + ] + }; + + + }, + + + initEvents : function() + { + + Roo.bootstrap.Button.prototype.initEvents.call(this); + + + + + + 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); + + + + }, + + + onClick : function(e) + { + e.preventDefault(); + + if ( this.fireEvent('beforeselect', this) === false) { + return; + } + + this.selectorEl.dom.click(); + + }, + + onFileSelected : function(e) + { + e.preventDefault(); + + if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){ + return; + } + var files = Array.prototype.slice.call(this.selectorEl.dom.files); + this.selectorEl.dom.value = '';// hopefully reset.. + + this.fireEvent('uploaded', this, files ); + + }, + + + + + /** + * 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... + } + * + * + */ + + reset: function() + { + + this.selectorEl + } + + + + +}); /* * - LGPL * @@ -3246,7 +3579,9 @@ Roo.bootstrap.MenuMgr = function(){ * @cfg {bool} hidden if the menu should be hidden when rendered. * @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true) * @cfg {bool} isLink (true|false) the menu has link disable auto expand and collaspe (default false) - * + * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger. + * @cfg {String} align default tl-bl? == below - how the menu should be aligned. + * @constructor * Create a new Menu * @param {Object} config The config object @@ -3254,6 +3589,13 @@ Roo.bootstrap.MenuMgr = function(){ Roo.bootstrap.Menu = function(config){ + + if (config.type == 'treeview') { + // normally menu's are drawn attached to the document to handle layering etc.. + // however treeview (used by the docs menu is drawn into the parent element) + this.container_method = 'getChildContainer'; + } + Roo.bootstrap.Menu.superclass.constructor.call(this, config); if (this.registerMenu && this.type != 'treeview') { Roo.bootstrap.MenuMgr.register(this); @@ -3323,7 +3665,7 @@ Roo.bootstrap.Menu = function(config){ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { /// html : false, - //align : '', + triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()??? type: false, /** @@ -3341,6 +3683,13 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { isLink : false, + container_method : 'getDocumentBody', // so the menu is rendered on the body and zIndex works. + + hideTrigger : false, + + align : 'tl-bl?', + + getChildContainer : function() { return this.el; }, @@ -3350,11 +3699,10 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { //if (['right'].indexOf(this.align)!==-1) { // cfg.cn[1].cls += ' pull-right' //} - - + var cfg = { tag : 'ul', - cls : 'dropdown-menu' , + cls : 'dropdown-menu shadow' , style : 'z-index:1000' }; @@ -3372,18 +3720,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { // Roo.log("ADD event"); // Roo.log(this.triggerEl.dom); + if (this.triggerEl) { + + this.triggerEl.on('click', this.onTriggerClick, this); + + this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this); + + if (!this.hideTrigger) { + if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) { + // dropdown toggle on the 'a' in BS4? + this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle'); + } else { + this.triggerEl.addClass('dropdown-toggle'); + } + } + } - this.triggerEl.on('click', this.onTriggerClick, this); - - this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this); - - - if (this.triggerEl.hasClass('nav-item')) { - // 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); } @@ -3501,8 +3853,31 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { if(!this.el){ this.render(); } + this.el.addClass('show'); // show otherwise we do not know how big we are.. + + var xy = this.el.getAlignToXY(el, pos); + + // bl-tl << left align below + // tl-bl << left align + + if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){ + // if it goes to far to the right.. -> align left. + xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r')) + } + if(xy[0] < 0){ + // was left align - go right? + xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l')) + } + + // goes down the bottom + if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() || + xy[1] < 0 ){ + var a = this.align.replace('?', '').split('-'); + xy = this.el.getAlignToXY(el, a[1] + '-' + a[0] + '?') + + } - this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false); + this.showAt( xy , parentMenu, false); }, /** * Displays this menu at a specific xy position @@ -3522,18 +3897,17 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { //this.el.show(); this.hideMenuItems(); this.hidden = false; - this.triggerEl.addClass('open'); + if (this.triggerEl) { + this.triggerEl.addClass('open'); + } + this.el.addClass('show'); + + // reassign x when hitting right - if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){ - xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth(); - } // reassign y when hitting bottom - if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight()){ - xy[1] = xy[1] - this.el.getHeight() - this.triggerEl.getHeight(); - } // but the list may align on trigger left or trigger top... should it be a properity? @@ -3565,9 +3939,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()){ @@ -3575,8 +3949,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); } @@ -3621,7 +3998,8 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.hide(); } else { Roo.log('show'); - this.show(this.triggerEl, '?', false); + + this.show(this.triggerEl, this.align, false); } if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){ @@ -3852,6 +4230,7 @@ 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|xl) default empty @@ -4017,12 +4396,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 }; @@ -4136,8 +4515,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) { @@ -4157,7 +4536,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 @@ -4213,7 +4592,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'; @@ -4434,7 +4813,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.. } @@ -5635,7 +6016,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 @@ -5668,6 +6049,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { type: 'nav', navId : '', // private + pilltype : true, navItems : false, @@ -5929,8 +6311,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 @@ -5939,7 +6321,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? @@ -5998,7 +6380,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { was_active : false, button_weight : '', button_outline : false, - + linkcls : '', navLink: false, getAutoCreate : function(){ @@ -6008,8 +6390,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'; @@ -6024,8 +6408,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cfg.href = this.href; } if (this.fa) { - cfg.html = ' ' + this.html + ''; - } + cfg.html = ' ' + this.html + ''; + } else { + cfg.cls += " nav-html"; + } // menu .. should add dropdown-menu class - so no need for carat.. @@ -6041,30 +6427,30 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { { tag: this.tagtype, href : this.href || "#", - html: this.html || '' + html: this.html || '', + cls : '' } ]; 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 + ''; - } - if (this.fa) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; - } - if(this.glyphicon) { + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; + } else if (this.fa) { + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; + } else if(this.glyphicon) { cfg.cn[0].html = ' ' + cfg.cn[0].html; - } + } else { + cfg.cn[0].cls += " nav-html"; + } if (this.menu) { - cfg.cn[0].html += " "; } if (this.badge !== '') { - cfg.cn[0].html += ' ' + this.badge + ''; } } @@ -6082,6 +6468,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); this.navLink = this.el.select('.nav-link',true).first(); + this.htmlEl = this.el.hasClass('nav-html') ? this.el : this.el.select('.nav-html',true).first(); return ret; }, @@ -6094,11 +6481,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); @@ -6157,7 +6544,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); } @@ -6247,7 +6634,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) @@ -6279,7 +6666,17 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { Roo.get(c).scrollTo('top', options.value, true); return; - } + }, + /** + * Set the HTML (text content) of the item + * @param {string} html content for the nav item + */ + setHtml : function(html) + { + this.html = html; + this.htmlEl.dom.innerHTML = html; + + } }); @@ -6509,6 +6906,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 * @@ -8241,6 +8774,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(); @@ -8494,6 +9030,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) { @@ -8507,7 +9044,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.. @@ -10165,7 +10703,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. @@ -10250,7 +10788,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 }); }; @@ -10439,6 +10984,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; @@ -10517,7 +11065,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? }); } @@ -10536,7 +11084,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? }); } @@ -10551,11 +11099,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) { @@ -10614,7 +11159,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; + this.labellg = this.labellg > 0 ? this.labellg : this.labelWidth; } if(this.labellg > 0){ @@ -10640,11 +11185,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', @@ -10658,7 +11206,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { ]; if(this.indicatorpos == 'right'){ - + cfg.cn = [ { tag: 'label', @@ -10669,7 +11217,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 @@ -10749,6 +11298,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(); @@ -12100,7 +12650,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' }); @@ -12249,11 +12799,29 @@ Roo.bootstrap.CardUploader = function(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, { @@ -12281,6 +12849,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { { tag: 'input', type : 'hidden', + name : this.name, value : this.value, cls : 'd-none form-control' }, @@ -12412,14 +12981,34 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { 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? @@ -12431,7 +13020,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { { xns : Roo.bootstrap, xtype : 'CardFooter', - items: [ + items: [ { xns : Roo.bootstrap, xtype : 'Element', @@ -12442,13 +13031,14 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { xns : Roo.bootstrap, xtype : 'Button', html : String.format("{0}", data.title), - cls : 'col-11 text-left', + cls : 'col-10 text-left', size: 'sm', weight: 'link', fa : 'download', listeners : { click : function() { - this.downloadCard(data.id) + + t.fireEvent( "download", t, data ); } } }, @@ -12456,10 +13046,10 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { { xns : Roo.bootstrap, xtype : 'Button', - + style: 'max-height: 28px; ', size : 'sm', weight: 'danger', - cls : 'col-1', + cls : 'col-2', fa : 'times', listeners : { click : function() { @@ -12474,7 +13064,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { } ]; - + var cn = this.addxtype( { @@ -12490,12 +13080,14 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { 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.previewCard( data.id); }, this); + this.imgEl.on('click', function() { t.fireEvent( "preview", t, data ); }, this); this.imgEl.set({ 'pointer' : 'cursor' }); } + this.getCardFooter().addClass('p-1'); } @@ -12505,7 +13097,21 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { // dont' really need ot update items. // this.items.push(cn); this.fileCollection.add(cn); - this.updateInput(); + + 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) @@ -12514,16 +13120,20 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { 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.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) { - card.el.dom.parentNode.removeChild(card.el.dom); + if (card.el.dom && card.el.dom.parentNode) { + card.el.dom.parentNode.removeChild(card.el.dom); + } }); this.fileCollection.clear(); this.updateInput(); @@ -12531,12 +13141,15 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { updateInput : function() { - var data = []; + var data = []; this.fileCollection.each(function(e) { data.push(e.data); + }); - this.inputEl().dom.value = JSON.stringify(data); + + + } @@ -14607,35 +15220,35 @@ Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, { readRecords : function(o) { var sid = this.meta ? this.meta.id : null; - var recordType = this.recordType, fields = recordType.prototype.fields; - var records = []; - var root = o; - for(var i = 0; i < root.length; i++){ - var n = root[i]; - var values = {}; - var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null); - for(var j = 0, jlen = fields.length; j < jlen; j++){ - var f = fields.items[j]; - var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j; - var v = n[k] !== undefined ? n[k] : f.defaultValue; - v = f.convert(v); - values[f.name] = v; - } - var record = new recordType(values, id); - record.json = n; - records[records.length] = record; - } - return { - records : records, - totalRecords : records.length - }; + var recordType = this.recordType, fields = recordType.prototype.fields; + var records = []; + var root = o; + for(var i = 0; i < root.length; i++){ + var n = root[i]; + var values = {}; + var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null); + for(var j = 0, jlen = fields.length; j < jlen; j++){ + var f = fields.items[j]; + var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j; + var v = n[k] !== undefined ? n[k] : f.defaultValue; + v = f.convert(v); + values[f.name] = v; + } + var record = new recordType(values, id); + record.json = n; + records[records.length] = record; + } + return { + records : records, + totalRecords : records.length + }; }, // used when loading children.. @see loadDataFromChildren toLoadData: function(rec) { - // expect rec just to be an array.. eg [a,b,c, [...] << cn ] - return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn; - + // expect rec just to be an array.. eg [a,b,c, [...] << cn ] + return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn; + } @@ -14658,6 +15271,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 @@ -14984,6 +15598,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..) @@ -15207,7 +15822,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; } @@ -15722,7 +16339,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'){ @@ -15763,7 +16383,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'); } @@ -16841,7 +17461,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } var inputblock = { - cls : '', + cls : 'roo-combobox-wrap', cn : [ input ] @@ -16961,16 +17581,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', @@ -16978,7 +17603,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, { - cls : '', + cls : 'roo-combobox-wrap ', cn: [ combobox ] @@ -17000,15 +17625,11 @@ 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 ] }, { - cls : "", + cls : "roo-combobox-wrap ", cn: [ combobox ] @@ -17025,7 +17646,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; } @@ -17053,11 +17674,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', @@ -17079,11 +17696,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 ] }, { @@ -17226,9 +17839,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){ @@ -17244,7 +17857,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; @@ -19353,9 +19966,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 @@ -19387,43 +20003,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 || '' } ] @@ -19433,20 +20062,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(); @@ -19461,21 +20105,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) { @@ -19489,7 +20172,6 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { on_el.on(eventOut, this.leave, this); } }, this); - }, @@ -19535,88 +20217,259 @@ 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) { + on_el = 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 (this.popups.length && !e.getTarget(".roo-popover")) { + /// what is nothing is showing.. + 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. + 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 + * + * 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 * @@ -20172,6 +21025,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 @@ -20211,7 +21065,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { tabId: false, navId : false, href : '', - + touchSlide : false, getAutoCreate : function(){ @@ -20256,7 +21110,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); @@ -21096,8 +21950,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 ){ @@ -21428,7 +22282,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', @@ -21536,13 +22390,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'; @@ -21557,10 +22418,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); @@ -21604,7 +22465,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { picker : function() { - return this.el.select('.datepicker', true).first(); + return this.pickerEl; }, fillTime: function() @@ -21625,8 +22486,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' } ] } @@ -21645,8 +22506,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' } ] } @@ -21719,7 +22580,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' } ] } @@ -21739,7 +22600,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' } ] } @@ -21812,21 +22673,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; @@ -21835,6 +22702,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft()); return; } + */ }); }, @@ -21922,48 +22790,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, { @@ -21979,8 +22806,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' + } + ] + } + + ] + } + ] + } ] } ] @@ -23382,7 +24244,6 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { // private validateValue: function (value) { - if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) { return false; } @@ -23401,7 +24262,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; @@ -23706,10 +24567,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { st = ''; - } else { - st = ''; + } else { + for (var i in this.stylesheets) { + st += ''; + } + } st += '