X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=7d035af4ca4b75ddf4212eae97c9ad1118b3f24c;hb=e48ce1c5e71b3d18391128ea45810effc0d036b0;hp=c30b5b554cfcbd6ee1b57f12640bd0c61b40f1e8;hpb=267f6bc0ecf0897515863c3c91a8eea23388e273;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index c30b5b554c..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,11 +963,11 @@ 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) + * @cfg {String} size (lg|sm|xs) + * @cfg {String} tag (a|input|submit) * @cfg {String} href empty or href * @cfg {Boolean} disabled default false; * @cfg {Boolean} isClose default false; @@ -975,12 +977,13 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { * @cfg {String} theme (default|glow) * @cfg {Boolean} inverse dark themed version * @cfg {Boolean} toggle is it a slidy toggle button - * @cfg {Boolean} pressed　(true|false) default null - if the button ahs active state + * @cfg {Boolean} pressed　 default null - if the button ahs active state * @cfg {String} ontext text for on slidy toggle state * @cfg {String} offtext text for off slidy toggle state * @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 target for a href. (_self|_blank|_parent|_top| other) + * @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,10 +1949,11 @@ 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 - * @cfg {String} html -- html contents - or just use children.. + * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it.. * @cfg {String} footer * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark) @@ -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) @@ -1927,6 +1987,9 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, { * * @config {Boolean} collapsable can the body be collapsed. * @config {Boolean} collapsed is the body collapsed when rendered... + * @config {Boolean} rotateable can the body be rotated by clicking on it.. + * @config {Boolean} rotated is the body rotated when rendered... + * * @constructor * Create a new Container * @param {Object} config The config object @@ -1940,13 +2003,23 @@ Roo.bootstrap.Card = function(config){ /** * @event drop * When a element a card is dropped + * @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.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 {Boolean} rotate status */ - 'drop' : true + 'rotate' : true }); }; @@ -1989,6 +2062,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { collapsable : false, collapsed : false, + rotateable : false, + rotated : false, dragable : false, drag_group : false, @@ -1996,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() { @@ -2015,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] } }); @@ -2068,47 +2147,49 @@ 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 = false; + var hdr_ctr = false; if (this.header.length) { hdr = { tag : this.header_size > 0 ? 'h' + this.header_size : 'div', - cls : 'card-header', - cn : [] + cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''), + cn : [] }; - cfg.cn.push(hdr); - hdr_ctr = hdr; + cfg.cn.push(hdr); + hdr_ctr = hdr; } else { - hdr = { + hdr = { tag : 'div', - cls : 'card-header d-none', - cn : [] + cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''), + cn : [] }; - cfg.cn.push(hdr); - } - if (this.collapsable) { - hdr_ctr = { - tag : 'a', - cls : 'd-block user-select-none', - cn: [ - { - tag: 'i', - cls : 'roo-collapse-toggle fa fa-chevron-down float-right' - } - - ] - }; - hdr.cn.push(hdr_ctr); - } - if (this.header.length) { + cfg.cn.push(hdr); + hdr_ctr = hdr; + } + if (this.collapsable) { + hdr_ctr = { + tag : 'a', + cls : 'd-block user-select-none', + cn: [ + { + tag: 'i', + cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '') + } + + ] + }; + hdr.cn.push(hdr_ctr); + } + hdr_ctr.cn.push( { - tag: 'span', - cls: 'roo-card-header-ctr', - html : this.header - }) - } - + tag: 'span', + cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'), + html : this.header + }); + + if (this.header_image.length) { cfg.cn.push({ tag : 'img', @@ -2116,26 +2197,26 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { src: this.header_image // escape? }); } else { - cfg.cn.push({ - tag : 'div', - cls : 'card-img-top d-none' - }); - } - + cfg.cn.push({ + tag : 'div', + cls : 'card-img-top d-none' + }); + } + var body = { tag : 'div', - cls : 'card-body', + cls : 'card-body' + (this.html === false ? ' d-none' : ''), cn : [] }; - var obody = body; - if (this.collapsable) { - obody = { - tag: 'div', - cls : 'roo-collapsable collapse ' + (this.collapsed ? '' : 'show'), - cn : [ body ] - }; - } - + var obody = body; + if (this.collapsable || this.rotateable) { + obody = { + tag: 'div', + cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'), + cn : [ body ] + }; + } + cfg.cn.push(obody); if (this.title.length) { @@ -2144,7 +2225,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { cls : 'card-title', src: this.title // escape? }); - } + } if (this.subtitle.length) { body.cn.push({ @@ -2166,13 +2247,18 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { }); } // fixme ? handle objects? + if (this.footer.length) { + cfg.cn.push({ - tag : 'div', - cls : 'card-footer', - html: this.footer // escape? + cls : 'card-footer ' + (this.rotated ? 'd-none' : ''), + html : this.footer }); + + } else { + cfg.cn.push({cls : 'card-footer d-none'}); } + // footer... return cfg; @@ -2182,20 +2268,28 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { getCardHeader : function() { var ret = this.el.select('.card-header',true).first(); - if (ret.hasClass('d-none')) { - ret.removeClass('d-none'); - } + if (ret.hasClass('d-none')) { + ret.removeClass('d-none'); + } + + return ret; + }, + getCardFooter : function() + { + var ret = this.el.select('.card-footer',true).first(); + if (ret.hasClass('d-none')) { + ret.removeClass('d-none'); + } return ret; }, - getCardImageTop : function() { var ret = this.el.select('.card-img-top',true).first(); - if (ret.hasClass('d-none')) { - ret.removeClass('d-none'); - } - + if (ret.hasClass('d-none')) { + ret.removeClass('d-none'); + } + return ret; }, @@ -2210,9 +2304,9 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { initEvents: function() { - - this.bodyEl = this.getChildContainer(); - if(this.dragable){ + 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, ddGroup: this.drag_group || 'default_card_drag_group' @@ -2220,20 +2314,35 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { this.dragZone.getDragData = this.getDragData.createDelegate(this); } if (this.dropable) { - this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , { - containerScroll: true, - ddGroup: this.drop_group || 'default_card_drag_group' - }); - this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this); - this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this); - this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this); - this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this); - this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this); - } + this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , { + containerScroll: true, + ddGroup: this.drop_group || 'default_card_drag_group' + }); + this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this); + this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this); + this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this); + this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this); + this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this); + } if (this.collapsable) { - this.el.select('.card-header',true).on('click', this.onToggleCollapse, this); - } + this.el.select('.card-header',true).on('click', this.onToggleCollapse, this); + } + if (this.rotateable) { + this.el.select('.card-header',true).on('click', this.onToggleRotate, this); + } + this.collapsableEl = this.el.select('.roo-collapsable').first(); + + this.footerEl = this.el.select('.card-footer').first(); + this.collapsableToggleEl = this.el.select('.roo-collapse-toggle'); + 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'); + this.fireEvent('rotate', this, true); + } + }, getDragData : function(e) { @@ -2258,21 +2367,33 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { return false; }, /** - * 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. - */ + * 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. + */ 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; } + + var ret = { + position: '', + cards : [], + card_n : -1, + items_n : -1, + card : false + }; + //Roo.log([ 'target' , target ? target.id : '--nothing--']); // see if target is one of the 'cards'... - var ctarget = -1; - var cards = []; + + //Roo.log(this.items.length); - var lpos = pos = cpos = false; + var pos = false; + + var last_card_n = 0; + var cards_len = 0; for (var i = 0;i< this.items.length;i++) { if (!this.items[i].el.hasClass('card')) { @@ -2280,48 +2401,52 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { } pos = this.getDropPoint(e, this.items[i].el.dom); + cards_len = ret.cards.length; //Roo.log(this.items[i].el.dom.id); - var ii = cards.length; - cards.push(this.items[i]); - - if (ctarget < 0 && pos == 'above') { - ctarget = ii > 0 ? ii - 1 : 0; - cpos = ii > 0 ? 'below' : pos; - } + ret.cards.push(this.items[i]); + last_card_n = i; + if (ret.card_n < 0 && pos == 'above') { + ret.position = cards_len > 0 ? 'below' : pos; + ret.items_n = i > 0 ? i - 1 : 0; + ret.card_n = cards_len > 0 ? cards_len - 1 : 0; + ret.card = ret.cards[ret.card_n]; + } + } + if (!ret.cards.length) { + ret.card = true; + ret.position = 'below'; + ret.items_n; + return ret; } - if (!cards.length) { - return [ true, 'below' ]; + // could not find a card.. stick it at the end.. + if (ret.card_n < 0) { + ret.card_n = last_card_n; + ret.card = ret.cards[last_card_n]; + ret.items_n = this.items.indexOf(ret.cards[last_card_n]); + ret.position = 'below'; } - if (ctarget < 0) { - ctarget = cards.length -1; - cpos = 'below'; - } - if (cards[ctarget].el == dragged_card_el) { + if (this.items[ret.items_n].el == dragged_card_el) { return false; } - if (cpos == 'below') { - var card_after = ctarget+1 == cards.length ? false : cards[ctarget+1]; - - // then above should not be dragged_card_el. - // and ctarget sho + if (ret.position == 'below') { + var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1]; if (card_after && card_after.el == dragged_card_el) { return false; } - return [ cards[ctarget], cpos ]; + return ret; } // its's after .. - var card_before = ctarget > 0 ? cards[ctarget-1] : false; + var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false; - if (card_before && card_before.el == dragged_card_el) { return false; } - return [ cards[ctarget], cpos, cards, ctarget ]; + return ret; }, onNodeEnter : function(n, dd, e, data){ @@ -2335,7 +2460,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { this.dropPlaceHolder('hide'); return false; } - Roo.log(['getTargetFromEvent', target_info[0].el.dom.id,target_info[1]]); + Roo.log(['getTargetFromEvent', target_info ]); this.dropPlaceHolder('show', target_info,data); @@ -2349,39 +2474,112 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { onNodeDrop : function(n, dd, e, data) { - // call drop - return false if - if (this.fireEvent("drop", this, n, dd, e, data) === false) { + // call drop - return false if + + // this could actually fail - if the Network drops.. + // we will ignore this at present..- client should probably reload + // the whole set of cards if stuff like that fails. + + + var info = this.getTargetFromEvent(e,data.source.el); + if (info === false) { return false; } - - var target_info = this.getTargetFromEvent(e,data.source.el); - if (target_info === 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; } - var pt = this.getDropPoint(e, n, dd); - var insertAt = (n == this.bodyEl.dom) ? this.items.length : n.nodeIndex; - if (pt == "below") { - insertAt++; - } - for (var i = 0; i < this.items.length; i++) { - var r = this.items[i]; - //var dup = this.store.getById(r.id); - if (dup && (dd != this.dragZone)) { - Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1); - } else { - if (data.copy) { - this.store.insert(insertAt++, r.copy()); + var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0; + + move_card.parent().removeCard(move_card); + + + 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 (position == 'above' ) { + cardel.parentNode.insertBefore(dom, cardel); + } else if (cardel.nextSibling) { + cardel.parentNode.insertBefore(dom,cardel.nextSibling); } else { - data.source.isDirtyFlag = true; - r.store.remove(r); - this.store.insert(insertAt++, r); + cardel.parentNode.append(dom); } - this.isDirtyFlag = true; + } else { + // card container??? + this.containerEl.dom.append(dom); + } + + //FIXME HANDLE card = true + + // add this to the correct place in items. + + // remove Card from items. + + + 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 == to_items_n && position == 'above') { + nitems.push(move_card); + } + nitems.push(this.items[i]); + if (i == to_items_n && position == 'below') { + nitems.push(move_card); + } } + this.items = nitems; + Roo.log(this.items); + } else { + this.items.push(move_card); } - this.dragZone.cachedTarget = null; + + 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. */ @@ -2390,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; @@ -2406,20 +2604,43 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { { if (this.collapsed) { this.el.select('.roo-collapse-toggle').removeClass('collapsed'); - this.el.select('.roo-collapsable').addClass('show'); + this.collapsableEl.addClass('show'); this.collapsed = false; return; } this.el.select('.roo-collapse-toggle').addClass('collapsed'); - this.el.select('.roo-collapsable').removeClass('show'); + this.collapsableEl.removeClass('show'); this.collapsed = true; }, - dropPlaceHolder: function (action, where_ar, data) + + onToggleRotate : function(e) + { + this.collapsableEl.removeClass('show'); + this.footerEl.removeClass('d-none'); + this.el.removeClass('roo-card-rotated'); + this.el.removeClass('d-none'); + if (this.rotated) { + + this.collapsableEl.addClass('show'); + this.rotated = false; + this.fireEvent('rotate', this, this.rotated); + return; + } + this.el.addClass('roo-card-rotated'); + this.footerEl.addClass('d-none'); + this.el.select('.roo-collapsable').removeClass('show'); + + this.rotated = true; + this.fireEvent('rotate', this, this.rotated); + + }, + + 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); } @@ -2429,16 +2650,24 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { this.dropEl.addClass('d-none'); return; } - var cardel = where_ar[0].el.dom; - + // FIXME - info.card == true!!! this.dropEl.dom.parentNode.removeChild(this.dropEl.dom); - if (where_ar[1] == 'above') { - cardel.parentNode.insertBefore(this.dropEl.dom, cardel); - } else if (cardel.nextSibling) { - cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling); + + if (info.card !== true) { + var cardel = info.card.el.dom; + + if (info.position == 'above') { + cardel.parentNode.insertBefore(this.dropEl.dom, cardel); + } else if (cardel.nextSibling) { + cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling); + } else { + cardel.parentNode.append(this.dropEl.dom); + } } else { - cardel.parentNode.append(this.dropEl.dom); + // card container??? + this.containerEl.dom.append(this.dropEl.dom); } + this.dropEl.addClass('d-block roo-card-dropzone'); this.dropEl.setHeight( Roo.get(data.ddel).getHeight() ); @@ -2447,6 +2676,13 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { + }, + setHeaderText: function(html) + { + this.header = html; + if (this.headerContainerEl) { + this.headerContainerEl.dom.innerHTML = html; + } } @@ -2481,6 +2717,39 @@ Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element, { +}); + + + + /* + * - LGPL + * + * Card footer - holder for the card footer elements. + * + */ + +/** + * @class Roo.bootstrap.CardFooter + * @extends Roo.bootstrap.Element + * Bootstrap CardFooter class + * @constructor + * Create a new Card Footer - that you can embed children into + * @param {Object} config The config object + */ + +Roo.bootstrap.CardFooter = function(config){ + Roo.bootstrap.CardFooter.superclass.constructor.call(this, config); +}; + +Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element, { + + + container_method : 'getCardFooter' + + + + + }); @@ -3681,10 +3950,13 @@ 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 + * * * @constructor @@ -3708,7 +3980,15 @@ Roo.bootstrap.Modal = function(config){ * @param {Roo.bootstrap.Modal} this * @param {Roo.EventObject} e */ - "resize" : true + "resize" : true, + /** + * @event titlechanged + * Fire when the editable title has been changed + * @param {Roo.bootstrap.Modal} this + * @param {Roo.EventObject} value + */ + "titlechanged" : true + }); this.buttons = this.buttons || []; @@ -3754,6 +4034,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { max_height: 0, fit_content: false, + editableTitle : false, onRender : function(ct, position) { @@ -3835,19 +4116,18 @@ 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 }; - if(this.specificTitle){ + if(this.specificTitle){ // WTF is this? title = this.title; - } var header = []; @@ -3861,6 +4141,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { header.push(title); + if (this.editableTitle) { + header.push({ + cls: 'form-control roo-editable-title d-none', + tag: 'input', + type: 'text' + }); + } + if (this.allow_close && Roo.bootstrap.version == 4) { header.push({ tag: 'button', @@ -3943,7 +4231,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { this.closeEl.on('click', this.hide, this); } Roo.EventManager.onWindowResize(this.resize, this, true); - + if (this.editableTitle) { + 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.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) { + this.toggleHeaderInput(false) + } + }, this); + this.headerEditEl.on('blur', function(e) { + this.toggleHeaderInput(false) + },this); + } }, @@ -3957,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 @@ -4013,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'; @@ -4150,6 +4449,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { */ setTitle: function(str) { this.titleEl.dom.innerHTML = str; + this.title = str; }, /** * Set the body of the Dialog @@ -4177,7 +4477,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { !child_nodes || child_nodes.length == 0 ) { - return; + return 0; } var child_height = 0; @@ -4230,6 +4530,35 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { } return child_height; + }, + toggleHeaderInput : function(is_edit) + { + if (!this.editableTitle) { + return; // not editable. + } + if (is_edit && this.is_header_editing) { + return; // already editing.. + } + if (is_edit) { + + this.headerEditEl.dom.value = this.title; + this.headerEditEl.removeClass('d-none'); + this.headerEditEl.dom.focus(); + this.titleEl.addClass('d-none'); + + this.is_header_editing = true; + return + } + // flip back to not editing. + this.title = this.headerEditEl.dom.value; + this.headerEditEl.addClass('d-none'); + this.titleEl.removeClass('d-none'); + this.titleEl.dom.innerHTML = String.format('{0}', this.title); + this.is_header_editing = false; + this.fireEvent('titlechanged', this, this.title); + + + } }); @@ -4298,6 +4627,7 @@ Roo.apply(Roo.bootstrap.Modal, { zIndex : 10001 }); + /* * - LGPL * @@ -5406,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 @@ -5439,6 +5769,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { type: 'nav', navId : '', // private + pilltype : true, navItems : false, @@ -5700,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 @@ -5710,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? @@ -5769,7 +6100,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { was_active : false, button_weight : '', button_outline : false, - + linkcls : '', navLink: false, getAutoCreate : function(){ @@ -5779,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'; @@ -5816,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 + ''; @@ -5865,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); @@ -5928,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); } @@ -6018,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) @@ -6280,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 * @@ -8012,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(); @@ -8265,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) { @@ -8278,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.. @@ -9936,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. @@ -9959,6 +10434,7 @@ Roo.form.VTypes = function(){ * @cfg {String} indicatorpos (left|right) default left * @cfg {String} capture (user|camera) use for file input only. (default empty) * @cfg {String} accept (image|video|audio) use for file input only. (default empty) + * @cfg {Boolean} preventMark Do not show tick or cross if error/success * @cfg {String} align (left|center|right) Default left * @cfg {Boolean} forceFeedback (true|false) Default false @@ -10020,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 }); }; @@ -10209,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; @@ -10287,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? }); } @@ -10306,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? }); } @@ -10321,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) { @@ -10410,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', @@ -10428,7 +10914,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { ]; if(this.indicatorpos == 'right'){ - + cfg.cn = [ { tag: 'label', @@ -10439,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 @@ -10519,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(); @@ -10850,6 +11338,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } + if(this.allowBlank && !this.getRawValue().length){ return; } @@ -11495,7 +11984,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { cls: 'glyphicon form-control-feedback' }; - if(this.removable && !this.editable && !this.tickable){ + if(this.removable && !this.editable ){ inputblock = { cls : 'has-feedback', cn : [ @@ -11519,7 +12008,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { } } else { - if(this.removable && !this.editable && !this.tickable){ + if(this.removable && !this.editable ){ inputblock = { cls : 'roo-removable', cn : [ @@ -11869,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' }); @@ -11990,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. @@ -14105,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 @@ -14231,7 +15106,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ /** - * @cfg {String/Roo.Template} tpl The template to use to render the output + * @cfg {String/Roo.Template} tpl The template to use to render the output default is '{' + this.displayField + '}' */ /** @@ -14431,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..) @@ -14581,6 +15457,8 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { combobox.cn.push(feedback); } + + var indicator = { tag : 'i', cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star', @@ -14652,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; } @@ -15167,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'){ @@ -16286,7 +17169,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } var inputblock = { - cls : '', + cls : 'roo-combobox-wrap', cn : [ input ] @@ -16423,7 +17306,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, { - cls : '', + cls : 'roo-combobox-wrap ', cn: [ combobox ] @@ -16453,7 +17336,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { ] }, { - cls : "", + cls : "roo-combobox-wrap ", cn: [ combobox ] @@ -16470,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; } @@ -16671,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){ @@ -16689,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; @@ -18798,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 @@ -18832,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 || '' } ] @@ -18878,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(); @@ -18906,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) { @@ -18934,7 +19887,6 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { on_el.on(eventOut, this.leave, this); } }, this); - }, @@ -18980,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 * @@ -19617,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 @@ -19656,7 +20769,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { tabId: false, navId : false, href : '', - + touchSlide : false, getAutoCreate : function(){ @@ -19701,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); @@ -20541,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 ){ @@ -20873,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', @@ -20981,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'; @@ -21002,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); @@ -21049,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() @@ -21070,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' } ] } @@ -21090,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' } ] } @@ -21164,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' } ] } @@ -21184,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' } ] } @@ -21257,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; @@ -21280,6 +22406,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft()); return; } + */ }); }, @@ -21367,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, { @@ -21424,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' + } + ] + } + + ] + } + ] + } ] } ] @@ -22827,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; } @@ -22846,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; @@ -23151,10 +24271,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { st = ''; - } else { - st = ''; + } else { + for (var i in this.stylesheets) { + st += ''; + } + } st += '