X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=1d33a0d8ac170909eedf8245537d9206bd48251d;hb=8ae8cc8a4daeeca1e96d69ba554a8ac2e5209e56;hp=af5fe74db2648ee148781ecf7da07dd1e811cf84;hpb=2bce0537242ea47f341716595abb45b9a6c42360;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index af5fe74db2..1d33a0d8ac 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -413,7 +413,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { return; } - this.getVisibilityEl().removeClass('hidden'); + this.getVisibilityEl().removeClass(['hidden','d-none']); this.fireEvent('show', this); @@ -428,7 +428,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { return; } - this.getVisibilityEl().addClass('hidden'); + this.getVisibilityEl().addClass(['hidden','d-none']); this.fireEvent('hide', this); @@ -581,13 +581,16 @@ 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 | success | info | warning | danger | link ) default + * @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 {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} href empty or href * @cfg {Boolean} disabled default false; * @cfg {Boolean} isClose default false; - * @cfg {String} glyphicon (| adjust | align-center | align-justify | align-left | align-right | arrow-down | arrow-left | arrow-right | arrow-up | asterisk | backward | ban-circle | barcode | bell | bold | book | bookmark | briefcase | bullhorn | calendar | camera | certificate | check | chevron-down | chevron-left | chevron-right | chevron-up | circle-arrow-down | circle-arrow-left | circle-arrow-right | circle-arrow-up | cloud | cloud-download | cloud-upload | cog | collapse-down | collapse-up | comment | compressed | copyright-mark | credit-card | cutlery | dashboard | download | download-alt | earphone | edit | eject | envelope | euro | exclamation-sign | expand | export | eye-close | eye-open | facetime-video | fast-backward | fast-forward | file | film | filter | fire | flag | flash | floppy-disk | floppy-open | floppy-remove | floppy-save | floppy-saved | folder-close | folder-open | font | forward | fullscreen | gbp | gift | glass | globe | hand-down | hand-left | hand-right | hand-up | hd-video | hdd | header | headphones | heart | heart-empty | home | import | inbox | indent-left | indent-right | info-sign | italic | leaf | link | list | list-alt | lock | log-in | log-out | magnet | map-marker | minus | minus-sign | move | music | new-window | off | ok | ok-circle | ok-sign | open | paperclip | pause | pencil | phone | phone-alt | picture | plane | play | play-circle | plus | plus-sign | print | pushpin | qrcode | question-sign | random | record | refresh | registration-mark | remove | remove-circle | remove-sign | repeat | resize-full | resize-horizontal | resize-small | resize-vertical | retweet | road | save | saved | screenshot | sd-video | search | send | share | share-alt | shopping-cart | signal | sort | sort-by-alphabet | sort-by-alphabet-alt | sort-by-attributes | sort-by-attributes-alt | sort-by-order | sort-by-order-alt | sound-5-1 | sound-6-1 | sound-7-1 | sound-dolby | sound-stereo | star | star-empty | stats | step-backward | step-forward | stop | subtitles | tag | tags | tasks | text-height | text-width | th | th-large | th-list | thumbs-down | thumbs-up | time | tint | tower | transfer | trash | tree-conifer | tree-deciduous | unchecked | upload | usd | user | volume-down | volume-off | volume-up | warning-sign | wrench | zoom-in | zoom-out) + * @cfg {String} glyphicon depricated - use fa + * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc.. * @cfg {String} badge text for badge * @cfg {String} theme (default|glow) * @cfg {Boolean} inverse dark themed version @@ -607,7 +610,7 @@ 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", + this.weightClass = ["btn-default btn-outline-secondary", "btn-primary", "btn-success", "btn-info", @@ -639,12 +642,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { html: false, active: false, weight: '', + badge_weight: '', + outline : false, size: '', tag: 'button', href: '', disabled: false, isClose: false, glyphicon: '', + fa: '', badge: '', theme: 'default', inverse: false, @@ -692,7 +698,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { ] }; - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { cfg.cls += ' '+this.weight; } @@ -716,9 +722,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { //if (this.parentType != 'Navbar') { this.weight = this.weight.length ? this.weight : 'default'; //} - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { - cfg.cls += ' btn-' + this.weight; + var outline = this.outline || this.weight == 'default' ? 'outline-' : ''; + var weight = this.weight == 'default' ? 'secondary' : this.weight; + cfg.cls += ' btn-' + outline + weight; + if (this.weight == 'default') { + // BC + cfg.cls += ' btn-' + this.weight; + } } } else if (this.theme==='glow') { @@ -749,6 +761,10 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { Roo.log('changing to ul' ); cfg.tag = 'ul'; this.glyphicon = 'caret'; + if (Roo.bootstrap.version == 4) { + this.fa = 'caret-down'; + } + } cfg.cls += this.size.length ? (' btn-' + this.size) : ''; @@ -787,6 +803,16 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { } ]; } + if (this.fa) { + cfg.html = ' ' + cfg.html; + + cfg.cn = [ + { + tag: 'i', + cls: 'fa fas fa-' + this.fa + } + ]; + } if (this.badge) { cfg.html += ' '; @@ -801,18 +827,28 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { if(this.glyphicon){ value = { - tag: 'span', - cls: 'glyphicon glyphicon-' + this.glyphicon, - html: this.html - }; - + tag: 'span', + cls: 'glyphicon glyphicon-' + this.glyphicon, + html: this.html + }; + } + if(this.fa){ + value = { + tag: 'i', + cls: 'fa fas fa-' + this.fa, + html: this.html + }; } + var bw = this.badge_weight.length ? this.badge_weight : + (this.weight.length ? this.weight : 'secondary'); + bw = bw == 'default' ? 'secondary' : bw; + cfg.cn = [ value, { tag: 'span', - cls: 'badge', + cls: 'badge badge-' + bw, html: this.badge } ]; @@ -946,7 +982,13 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { setWeight : function(str) { this.el.removeClass(this.weightClass); - this.el.addClass('btn-' + str); + this.weight = str; + var outline = this.outline ? 'outline-' : ''; + if (str == 'default') { + this.el.addClass('btn-default btn-outline-secondary'); + return; + } + this.el.addClass('btn-' + outline + str); } @@ -2368,7 +2410,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.hide(); } else { Roo.log('show'); - this.show(this.triggerEl, false, false); + this.show(this.triggerEl, '?', false); } if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){ @@ -2472,7 +2514,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { if(this.isContainer){ return { tag: 'li', - cls: 'dropdown-menu-item dropdown-item' + cls: 'dropdown-menu-item ' }; } var ctag = { @@ -2482,6 +2524,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { var anc = { tag : 'a', + cls : 'dropdown-item', href : '#', cn : [ ] }; @@ -2498,7 +2541,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { var cfg= { tag: 'li', - cls: 'dropdown-menu-item dropdown-item', + cls: 'dropdown-menu-item', cn: [ anc ] }; if (this.parent().type == 'treeview') { @@ -2599,7 +2642,7 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, { * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn * @cfg {Boolean} specificTitle default false * @cfg {Array} buttons Array of buttons or standard button set.. - * @cfg {String} buttonPosition (left|right|center) default right + * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left * @cfg {Boolean} animate default true * @cfg {Boolean} allow_close default true * @cfg {Boolean} fitwindow default false @@ -2725,7 +2768,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var btn = Roo.factory(b); - btn.render(this.el.select('.modal-footer div').first()); + btn.render(this.getButtonContainer()); },this); } @@ -2767,7 +2810,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.specificTitle){ title = this.title; - }; + } var header = []; if (this.allow_close && Roo.bootstrap.version == 3) { @@ -2793,7 +2836,26 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.size.length){ size = 'modal-' + this.size; } + + var footer = Roo.bootstrap.version == 3 ? + { + cls : 'modal-footer', + cn : [ + { + tag: 'div', + cls: 'btn-' + this.buttonPosition + } + ] + + } : + { // BS4 uses mr-auto on left buttons.... + cls : 'modal-footer' + }; + + + + var modal = { cls: "modal", cn : [ @@ -2808,18 +2870,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { cn : header }, bdy, - { - cls : 'modal-footer', - cn : [ - { - tag: 'div', - cls: 'btn-' + this.buttonPosition - } - ] - - } - - + footer ] } @@ -2842,7 +2893,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, getButtonContainer : function() { - return this.el.select('.modal-footer div',true).first(); + + return Roo.bootstrap.version == 4 ? + this.el.select('.modal-footer',true).first() + : this.el.select('.modal-footer div',true).first(); }, initEvents : function() @@ -2854,6 +2908,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, + resize : function() { @@ -2863,9 +2918,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { ); if (this.fitwindow) { + + this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, - this.height || Roo.lib.Dom.getViewportHeight(true) - 60 + this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 ); return; } @@ -2920,16 +2977,19 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { } //this.el.setStyle('display', 'block'); - this.el.removeClass('hideing'); - this.el.addClass('show d-block'); + this.el.removeClass('hideing'); + this.el.dom.style.display='block'; + Roo.get(document.body).addClass('modal-open'); if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay? - var _this = this; + (function(){ + this.el.addClass('show'); this.el.addClass('in'); }).defer(50, this); }else{ + this.el.addClass('show'); this.el.addClass('in'); } @@ -2942,7 +3002,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true)); this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++); - this.maskEl.addClass('show d-block'); + this.maskEl.dom.style.display = 'block'; + this.maskEl.addClass('show'); + this.resize(); @@ -2962,25 +3024,31 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { hide : function() { if(this.fireEvent("beforehide", this) !== false){ - this.maskEl.removeClass('show d-block'); + + this.maskEl.removeClass('show'); + + this.maskEl.dom.style.display = ''; Roo.get(document.body).removeClass("x-body-masked"); this.el.removeClass('in'); this.el.select('.modal-dialog', true).first().setStyle('transform',''); if(this.animate){ // why this.el.addClass('hideing'); + this.el.removeClass('show'); (function(){ if (!this.el.hasClass('hideing')) { return; // it's been shown again... } - this.el.removeClass('show d-block'); + + this.el.dom.style.display=''; Roo.get(document.body).removeClass('modal-open'); this.el.removeClass('hideing'); }).defer(150,this); }else{ - this.el.removeClass('show d-block'); + this.el.removeClass('show'); + this.el.dom.style.display=''; Roo.get(document.body).removeClass('modal-open'); } @@ -3007,7 +3075,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var btn = Roo.factory(b); - btn.render(this.el.select('.modal-footer div').first()); + btn.render(this.getButtonContainer()); return btn; @@ -3017,22 +3085,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { { //this.el.select('.modal-footer').() }, - diff : false, resizeTo: function(w,h) { - // skip.. ?? why?? - this.dialogEl.setWidth(w); - if (this.diff === false) { - this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight(); - } - - this.bodyEl.setHeight(h - this.diff); + + var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30 + this.bodyEl.setHeight(h - diff); + this.fireEvent('resize', this); - }, + setContentSize : function(w, h) { @@ -3259,10 +3323,11 @@ Roo.bootstrap.MessageBox = function(){ buttons["cancel"].hide(); buttons["yes"].hide(); buttons["no"].hide(); - //dlg.footer.dom.style.display = 'none'; + dlg.footerEl.hide(); + return width; } - dlg.footerEl.dom.style.display = ''; + dlg.footerEl.show(); for(var k in buttons){ if(typeof buttons[k] != "function"){ if(b[k]){ @@ -3539,6 +3604,9 @@ Roo.Msg.show({ textareaEl.hide(); } progressEl.setDisplayed(opt.progress === true); + if (opt.progress) { + d.animate = false; // do not animate progress, as it may not have finished animating before we close it.. + } this.updateProgress(0); activeTextEl.dom.value = opt.value || ""; if(opt.prompt){ @@ -3809,7 +3877,41 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { //Roo.log(this.el.select('.navbar-toggle',true)); this.el.select('.navbar-toggle',true).on('click', function() { if(this.fireEvent('beforetoggle', this) !== false){ - this.el.select('.navbar-collapse',true).toggleClass('in'); + var ce = this.el.select('.navbar-collapse',true).first(); + ce.toggleClass('in'); // old... + if (ce.hasClass('collapse')) { + // show it... + ce.removeClass('collapse'); + ce.addClass('show'); + var h = ce.getHeight(); + Roo.log(h); + ce.removeClass('show'); + // at this point we should be able to see it.. + ce.addClass('collapsing'); + + ce.setHeight(0); // resize it ... + ce.on('transitionend', function() { + Roo.log('done transition'); + ce.removeClass('collapsing'); + ce.addClass('show'); + ce.removeClass('collapse'); + + ce.dom.style.height = ''; + }, this, { single: true} ); + ce.setHeight(h); + + } else { + ce.setHeight(ce.getHeight()); + ce.removeClass('show'); + ce.addClass('collapsing'); + + ce.on('transitionend', function() { + ce.dom.style.height = ''; + ce.removeClass('collapsing'); + ce.addClass('collapse'); + }, this, { single: true} ); + ce.setHeight(0); + } } }, this); @@ -3883,7 +3985,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { * * @cfg {String} tag (header|footer|nav|div) default is nav - * + * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light. * * * @constructor @@ -3904,7 +4006,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { arrangement: '', align : false, - + weight : 'light', main : false, @@ -3917,9 +4019,23 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { var cfg = { tag : this.tag || 'div', - cls : 'navbar' + cls : 'navbar navbar-expand-lg roo-navbar-simple' }; - + if (['light','white'].indexOf(this.weight) > -1) { + cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; + } + cfg.cls += ' bg-' + this.weight; + + if (this.inverse) { + cfg.cls += ' navbar-inverse'; + + } + + // i'm not actually sure these are really used - normally we add a navGroup to a navbar + + //if (Roo.bootstrap.version == 4) { + // return cfg; + //} cfg.cn = [ { @@ -3930,7 +4046,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { this.type = this.type || 'nav'; - if (['tabs','pills'].indexOf(this.type)!==-1) { + if (['tabs','pills'].indexOf(this.type) != -1) { cfg.cn[0].cls += ' nav-' + this.type @@ -3944,7 +4060,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { - if (['stacked','justified'].indexOf(this.arrangement)!==-1) { + if (['stacked','justified'].indexOf(this.arrangement) != -1) { cfg.cn[0].cls += ' nav-' + this.arrangement; } @@ -3953,10 +4069,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { cfg.cn[0].cls += ' navbar-right'; } - if (this.inverse) { - cfg.cls += ' navbar-inverse'; - - } + return cfg; @@ -4031,36 +4144,38 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { } if(this.srButton){ - cn.push({ - tag: 'div', - cls: 'navbar-header', + var btn = { + tag: 'button', + type: 'button', + cls: 'navbar-toggle navbar-toggler', + 'data-toggle': 'collapse', cn: [ { - tag: 'button', - type: 'button', - cls: 'navbar-toggle navbar-toggler', - 'data-toggle': 'collapse', - cn: [ - { - tag: 'span', - cls: 'sr-only', - html: 'Toggle navigation' - }, - { - tag: 'span', - cls: 'icon-bar navbar-toggler-icon' - }, - { - tag: 'span', - cls: 'icon-bar' - }, - { - tag: 'span', - cls: 'icon-bar' - } - ] + tag: 'span', + cls: 'sr-only', + html: 'Toggle navigation' + }, + { + tag: 'span', + cls: 'icon-bar navbar-toggler-icon' + }, + { + tag: 'span', + cls: 'icon-bar' + }, + { + tag: 'span', + cls: 'icon-bar' } ] + }; + + cn.push( Roo.bootstrap.version == 4 ? btn : { + tag: 'div', + cls: 'navbar-header', + cn: [ + btn + ] }); } @@ -4072,6 +4187,12 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default'; + if (['light','white'].indexOf(this.weight) > -1) { + cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; + } + cfg.cls += ' bg-' + this.weight; + + if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) { cfg.cls += ' navbar-' + this.position + ' ' + this.position ; @@ -4081,7 +4202,8 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { } if (this.brand !== '') { - cn[0].cn.push({ + var cp = Roo.bootstrap.version == 4 ? cn : cn[0].cn; + cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting? tag: 'a', href: this.brand_href ? this.brand_href : '#', cls: 'navbar-brand', @@ -4247,15 +4369,22 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { tag : 'ul', cls: 'nav' }; - - if (['tabs','pills'].indexOf(this.type)!==-1) { - cfg.cls += ' nav-' + this.type - } else { - if (this.type!=='nav') { - Roo.log('nav type must be nav/tabs/pills') - } - cfg.cls += ' navbar-nav' - } + if (Roo.bootstrap.version == 4) { + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type; + } else { + cfg.cls += ' navbar-nav'; + } + } else { + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type + } else { + if (this.type !== 'nav') { + Roo.log('nav type must be nav/tabs/pills') + } + cfg.cls += ' navbar-nav' + } + } if (this.parent() && this.parent().sidebar) { cfg = { @@ -4269,7 +4398,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { if (this.form === true) { cfg = { tag: 'form', - cls: 'navbar-form' + cls: 'navbar-form form-inline' }; if (this.align === 'right') { @@ -4356,7 +4485,10 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { */ addItem : function(cfg) { - var cn = new Roo.bootstrap.NavItem(cfg); + if (this.form && Roo.bootstrap.version == 4) { + cfg.tag = 'div'; + } + var cn = new Roo.bootstrap.NavItem(cfg); this.register(cn); cn.parentId = this.id; cn.onRender(this.el, null); @@ -4482,11 +4614,14 @@ Roo.apply(Roo.bootstrap.NavGroup, { * @extends Roo.bootstrap.Component * Bootstrap Navbar.NavItem class * @cfg {String} href link to + * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none + * @cfg {String} html content of button * @cfg {String} badge text inside badge * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge - * @cfg {String} glyphicon name of glyphicon - * @cfg {String} icon name of font awesome icon + * @cfg {String} glyphicon DEPRICATED - use fa + * @cfg {String} icon DEPRICATED - use fa + * @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 @@ -4536,21 +4671,26 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { html: '', badge: '', icon: false, + fa : false, glyphicon: false, active: false, preventDefault : false, tabId : false, tagtype : 'a', + tag: 'li', disabled : false, animateRef : false, was_active : false, + button_weight : '', + button_outline : false, + + navLink: false, getAutoCreate : function(){ var cfg = { - tag: 'li', + tag: this.tag, cls: 'nav-item' - }; if (this.active) { @@ -4559,8 +4699,29 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (this.disabled) { cfg.cls += ' disabled'; } + + // BS4 only? + if (this.button_weight.length) { + cfg.tag = this.href ? 'a' : 'button'; + cfg.html = this.html || ''; + cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight; + if (this.href) { + cfg.href = this.href; + } + if (this.fa) { + cfg.html = ' ' + this.html + ''; + } + + // menu .. should add dropdown-menu class - so no need for carat.. + + if (this.badge !== '') { + + cfg.html += ' ' + this.badge + ''; + } + return cfg; + } - if (this.href || this.html || this.glyphicon || this.icon) { + if (this.href || this.html || this.glyphicon || this.icon || this.fa) { cfg.cn = [ { tag: this.tagtype, @@ -4572,9 +4733,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cfg.cn[0].cls = 'nav-link'; } if (this.icon) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; + } + if (this.fa) { + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } - if(this.glyphicon) { cfg.cn[0].html = ' ' + cfg.cn[0].html; } @@ -4595,6 +4758,19 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { return cfg; }, + onRender : function(ct, position) + { + // Roo.log("Call onRender: " + this.xtype); + if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') { + this.tag = 'div'; + } + + var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + this.navLink = this.el.select('.nav-link',true).first(); + return ret; + }, + + initEvents: function() { if (typeof (this.menu) != 'undefined') { @@ -4696,8 +4872,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (!state ) { this.el.removeClass('active'); + this.navLink ? this.navLink.removeClass('active') : false; } else if (!this.el.hasClass('active')) { + this.el.addClass('active'); + if (Roo.bootstrap.version == 4 && this.navLink ) { + this.navLink.addClass('active'); + } + } if (fire) { this.fireEvent('changed', this, state); @@ -7971,7 +8153,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, { cls : '' }; if (this.parent().xtype.match(/^Nav/)) { - cfg.cls = 'navbar-form navbar-' + this.align; + cfg.cls = 'navbar-form form-inline navbar-' + this.align; } @@ -8850,12 +9032,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid") + * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid */ invalidClass : "has-warning", /** - * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid") + * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid */ validClass : "has-success", @@ -9083,7 +9265,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { inputblock.cn.push({ tag :'span', - cls : 'roo-input-before input-group-addon', + cls : 'roo-input-before input-group-addon input-group-prepend input-group-text', html : this.before }); } @@ -9092,7 +9274,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { inputblock.cn.push({ tag :'span', - cls : 'roo-input-before input-group-' + + cls : 'roo-input-before input-group-prepend input-group-text input-group-' + (this.before.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought? }); } @@ -9102,7 +9284,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { if (this.after && typeof(this.after) == 'string') { inputblock.cn.push({ tag :'span', - cls : 'roo-input-after input-group-addon', + cls : 'roo-input-after input-group-append input-group-text input-group-addon', html : this.after }); } @@ -9111,7 +9293,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { inputblock.cn.push({ tag :'span', - cls : 'roo-input-after input-group-' + + cls : 'roo-input-after input-group-append input-group-text input-group-' + (this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought? }); } @@ -9121,21 +9303,27 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { inputblock.cn.push(feedback); } }; - + var indicator = { + tag : 'i', + 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 (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', html : this.fieldLabel }, @@ -9155,17 +9343,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', cn : [ { 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' - } + indicator ] }, { @@ -9266,9 +9450,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { cfg.cls += ' navbar-form'; } - if (this.parentType === 'NavGroup') { - cfg.cls += ' navbar-form'; - cfg.tag = 'li'; + if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) { + // on BS4 we do this only if not form + cfg.cls += ' navbar-form'; + cfg.tag = 'li'; } return cfg; @@ -9289,6 +9474,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { indicatorEl : function() { + if (Roo.bootstrap.version == 4) { + return false; // not enabled in v4 yet. + } + var indicator = this.el.select('i.roo-required-indicator',true).first(); if(!indicator){ @@ -9600,8 +9789,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } - - this.el.removeClass(this.invalidClass); + + this.el.removeClass([this.invalidClass, 'is-invalid']); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ @@ -9631,7 +9820,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } this.el.removeClass([this.invalidClass, this.validClass]); - + this.inputEl().removeClass(['is-valid', 'is-invalid']); + var feedback = this.el.select('.form-control-feedback', true).first(); if(feedback){ @@ -9650,9 +9840,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { if(this.allowBlank && !this.getRawValue().length){ return; } - - this.el.addClass(this.validClass); - + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.validClass); + } else { + this.inputEl().addClass('is-valid'); + } + if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -9678,11 +9871,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); + this.el.select('.form-control-feedback', true).first().removeClass( + [this.invalidFeedbackClass, this.validFeedbackClass]); } if(this.disabled){ @@ -9697,8 +9892,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); this.indicator.addClass('visible'); } + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.invalidClass); + } else { + this.inputEl().addClass('is-invalid'); + } + - this.el.addClass(this.invalidClass); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ @@ -9774,7 +9974,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } - if(this.indicator){ + if(this.indicatorEl()){ var ar = this.el.select('label > span',true); if (ar.elements.length) { @@ -10045,9 +10245,9 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { if(label && icon){ icon.remove(); } - - this.el.removeClass(this.invalidClass); - + this.el.removeClass( this.validClass); + this.inputEl().removeClass('is-invalid'); + if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10071,6 +10271,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10088,8 +10289,12 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { if(label && icon){ icon.remove(); } + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.validClass); + } else { + this.inputEl().addClass('is-valid'); + } - this.el.addClass(this.validClass); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ @@ -10116,6 +10321,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10138,9 +10344,14 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { style : 'margin-right:5px;' }, label, true); } - - this.el.addClass(this.invalidClass); + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.invalidClass); + } else { + this.inputEl().addClass('is-invalid'); + } + + // fixme ... this may be depricated need to test.. if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10319,7 +10530,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if (this.before) { inputblock.cn.push({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-prepend input-group-text', html : this.before }); } @@ -10334,62 +10545,44 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if (this.after) { inputblock.cn.push({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-append input-group-text', html : this.after }); } }; - var box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - inputblock - ] - - }; + + + var ibwrap = inputblock; if(this.multiple){ - box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, + ibwrap = { + tag: 'ul', + cls: 'roo-select2-choices', + cn:[ { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ + tag: 'li', + cls: 'roo-select2-search-field', + cn: [ - inputblock - ] - } + inputblock ] } ] - } - }; + }; + + } var combobox = { cls: 'roo-select2-container input-group', cn: [ - box -// { -// tag: 'ul', -// cls: 'typeahead typeahead-long dropdown-menu', -// style: 'display:none' -// } + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + ibwrap ] }; @@ -10409,7 +10602,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { combobox.cn.push({ tag :'span', - cls : 'input-group-addon btn dropdown-toggle', + cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle', cn : [ caret, { @@ -10430,17 +10623,25 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if(this.multiple){ combobox.cls += ' roo-select2-container-multi'; } + var indicator = { + tag : 'i', + 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 (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', 'for' : id, @@ -10471,11 +10672,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { 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' - } + indicator ] }, { @@ -10522,11 +10719,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { } else if ( this.fieldLabel.length) { // Roo.log(" label"); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', //cls : 'input-group-addon', @@ -10548,11 +10741,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { 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' - } + indicator ] }, @@ -10666,7 +10855,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { createList : function() { this.list = Roo.get(document.body).createChild({ - tag: 'ul', + tag: Roo.bootstrap.version == 4 ? 'div' : 'ul', cls: 'typeahead typeahead-long dropdown-menu', style: 'display:none' }); @@ -13138,12 +13327,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { multiple : false, /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid") + * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now */ invalidClass : "has-warning", /** - * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid") + * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now */ validClass : "has-success", @@ -13290,6 +13479,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var box = { tag: 'div', + style : 'display: contents', cn: [ { tag: 'input', @@ -13315,6 +13505,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var combobox = { cls: 'roo-select2-container input-group roo-select2-container-multi', cn: [ + box // { // tag: 'ul', @@ -13334,21 +13525,27 @@ 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', + tooltip : 'This field is required' + }; + if (Roo.bootstrap.version == 4) { + indicator = { + tag : 'i', + style : 'display:none' + }; + } if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', html : this.fieldLabel }, @@ -13371,17 +13568,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', cn : [ { 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' - } + indicator ] }, { @@ -13432,11 +13625,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } else if ( this.fieldLabel.length) { // Roo.log(" label"); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', //cls : 'input-group-addon', @@ -13452,11 +13641,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { //cls : 'input-group-addon', html : this.fieldLabel }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, combobox ]; @@ -13617,7 +13802,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ if(!this.tpl){ - this.tpl = '
  • {' + this.displayField + '}
    • '; + this.tpl = Roo.bootstrap.version == 4 ? + '{' + this.displayField + '}' : // 4 does not need
  • and it get's really confisued. + '
  • {' + this.displayField + '}
    • '; } this.view = new Roo.View(this.list, this.tpl, { @@ -15054,7 +15241,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { inputblock.cn.unshift({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-prepend input-group-text', html : this.before }); } @@ -15086,55 +15273,42 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { inputblock.cn.push({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-append input-group-text', html : this.after }); } - var box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - inputblock - ] - - }; + + var ibwrap = inputblock; if(this.multiple){ - box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, + ibwrap = { + tag: 'ul', + cls: 'roo-select2-choices', + cn:[ { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ + tag: 'li', + cls: 'roo-select2-search-field', + cn: [ - inputblock - ] - } + inputblock ] } ] - } - }; + }; + + + } var combobox = { cls: 'roo-select2-container input-group roo-touchview-combobox ', cn: [ - box + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + ibwrap ] }; @@ -15155,7 +15329,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { combobox.cn.push({ tag :'span', - cls : 'input-group-addon btn dropdown-toggle', + cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle', cn : [ caret, { @@ -15189,7 +15363,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, { tag: 'label', - cls : 'control-label', + cls : 'control-label col-form-label', html : this.fieldLabel }, @@ -15210,7 +15384,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', cn : [ { tag : 'span', @@ -17634,11 +17808,11 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { cn : [ { tag: 'h3', - cls: 'popover-title', + cls: 'popover-title popover-header', html : this.title }, { - cls : 'popover-content', + cls : 'popover-content popover-body', html : this.html } ] @@ -17763,7 +17937,10 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { if (this.html !== false) { this.el.select('.popover-content',true).first().dom.innerHtml = this.html; } - this.el.removeClass(['fade','top','bottom', 'left', 'right','in']); + 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(); } @@ -17824,10 +18001,10 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { }); Roo.bootstrap.Popover.alignment = { - 'left' : ['r-l', [-10,0], 'right'], - 'right' : ['l-r', [10,0], 'left'], - 'bottom' : ['t-b', [0,10], 'top'], - 'top' : [ 'b-t', [0,-10], 'bottom'] + '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'] }; /* @@ -18181,7 +18358,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { { if(this.transition || typeof(pan) == 'undefined'){ Roo.log("waiting for the transitionend"); - return; + return false; } if (typeof(pan) == 'number') { @@ -18213,22 +18390,28 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') { + //class="carousel-item carousel-item-next carousel-item-left" + this.transition = true; var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev'; var lr = dir == 'next' ? 'left' : 'right'; pan.el.addClass(dir); // or prev + pan.el.addClass('carousel-item-' + dir); // or prev pan.el.dom.offsetWidth; // find the offset with - causing a reflow? cur.el.addClass(lr); // or right pan.el.addClass(lr); + cur.el.addClass('carousel-item-' +lr); // or right + pan.el.addClass('carousel-item-' +lr); + var _this = this; cur.el.on('transitionend', function() { Roo.log("trans end?"); - pan.el.removeClass([lr,dir]); + pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]); pan.setActive(true); - cur.el.removeClass([lr]); + cur.el.removeClass([lr, 'carousel-item-' + lr]); cur.setActive(false); _this.transition = false; @@ -18420,10 +18603,12 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { href : '', getAutoCreate : function(){ - var cfg = { + + + var cfg = { tag: 'div', // item is needed for carousel - not sure if it has any effect otherwise - cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''), + cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''), html: this.html || '' }; @@ -18435,6 +18620,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { cfg.tabId = this.tabId; } + return cfg; }, @@ -21080,16 +21266,28 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { if(this.inputType == 'radio'){ Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]); - e.findParent('.form-group', false, true).addClass(_this.validClass); + var fg = e.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.validClass); + } else { + fg.removeClass(['is-valid', 'is-invalid']); + fg.addClass('is-valid'); + } }); return; } if(!this.groupId){ - this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - this.el.findParent('.form-group', false, true).addClass(this.validClass); + var fg = this.el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([this.invalidClass, this.validClass]); + fg.addClass(this.validClass); + } else { + fg.removeClass(['is-valid', 'is-invalid']); + fg.addClass('is-valid'); + } return; } @@ -21100,8 +21298,14 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } for(var i in group){ - group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - group[i].el.findParent('.form-group', false, true).addClass(this.validClass); + var fg = group[i].el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([this.invalidClass, this.validClass]); + fg.addClass(this.validClass); + } else { + fg.removeClass(['is-valid', 'is-invalid']); + fg.addClass('is-valid'); + } } }, @@ -21130,17 +21334,30 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } if(this.inputType == 'radio'){ + Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]); - e.findParent('.form-group', false, true).addClass(_this.invalidClass); + var fg = e.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.invalidClass); + } else { + fg.removeClass(['is-invalid', 'is-valid']); + fg.addClass('is-invalid'); + } }); return; } if(!this.groupId){ - this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - this.el.findParent('.form-group', false, true).addClass(this.invalidClass); + var fg = this.el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.invalidClass); + } else { + fg.removeClass(['is-invalid', 'is-valid']); + fg.addClass('is-invalid'); + } return; } @@ -21151,8 +21368,14 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } for(var i in group){ - group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - group[i].el.findParent('.form-group', false, true).addClass(this.invalidClass); + var fg = group[i].el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.invalidClass); + } else { + fg.removeClass(['is-invalid', 'is-valid']); + fg.addClass('is-invalid'); + } } }, @@ -21166,8 +21389,8 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); if (label && label.iconEl) { - label.iconEl.removeClass(label.validClass); - label.iconEl.removeClass(label.invalidClass); + label.iconEl.removeClass([ label.validClass, label.invalidClass ]); + label.iconEl.removeClass(['is-invalid', 'is-valid']); } }, @@ -23796,9 +24019,7 @@ Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea, { /** * @cfg {String} inputType @hide */ - /** - * @cfg {String} invalidClass @hide - */ + /** * @cfg {String} invalidText @hide */ @@ -23898,7 +24119,8 @@ Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, size : 'sm', xtype: 'Button', xns: Roo.bootstrap, - glyphicon : id, + //glyphicon : id, + fa: id, cmd : id || cmd, enableToggle:toggle !== false, html : html || '', @@ -23918,7 +24140,7 @@ Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, xtype: 'Button', size : 'sm', xns: Roo.bootstrap, - glyphicon : 'font', + fa : 'font', //html : 'submit' menu : { xtype: 'Menu', @@ -29103,6 +29325,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { this.progressDialog = new Roo.bootstrap.Modal({ cls : 'roo-document-manager-progress-dialog', allow_close : false, + animate : false, title : '', buttons : [ { @@ -30218,8 +30441,8 @@ Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component, { * @cfg {String} cls class of the element * @cfg {String} target label target * @cfg {Boolean} allowBlank (true|false) target allowBlank default true - * @cfg {String} invalidClass default "text-warning" - * @cfg {String} validClass default "text-success" + * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid + * @cfg {String} validClass DEPRICATED - BS4 uses is-valid * @cfg {String} iconTooltip default "This field is required" * @cfg {String} indicatorpos (left|right) default left * @@ -30341,10 +30564,14 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { this.indicator.removeClass('visible'); this.indicator.addClass('invisible'); } + if (Roo.bootstrap.version == 3) { + this.el.removeClass(this.invalidClass); + this.el.addClass(this.validClass); + } else { + this.el.removeClass('is-invalid'); + this.el.addClass('is-valid'); + } - this.el.removeClass(this.invalidClass); - - this.el.addClass(this.validClass); this.fireEvent('valid', this); }, @@ -30359,10 +30586,14 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { this.indicator.removeClass('invisible'); this.indicator.addClass('visible'); } + if (Roo.bootstrap.version == 3) { + this.el.removeClass(this.validClass); + this.el.addClass(this.invalidClass); + } else { + this.el.removeClass('is-valid'); + this.el.addClass('is-invalid'); + } - this.el.removeClass(this.validClass); - - this.el.addClass(this.invalidClass); this.fireEvent('invalid', this, msg); } @@ -33934,21 +34165,23 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { } ] }; - - if(this.indicatorpos == 'left'){ - label.cn.unshift({ - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }); - } else { - label.cn.push({ - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }); + if (Roo.bootstrap.version == 3) { + + + if(this.indicatorpos == 'left'){ + label.cn.unshift({ + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }); + } else { + label.cn.push({ + tag : 'i', + cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }); + } } - var items = { tag : 'div', cls : 'roo-radio-set-items' @@ -34100,14 +34333,19 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { markValid : function() { - if(this.labelEl.isVisible(true)){ + if(this.labelEl.isVisible(true) && this.indicatorEl()){ this.indicatorEl().removeClass('visible'); this.indicatorEl().addClass('invisible'); } - this.el.removeClass([this.invalidClass, this.validClass]); - this.el.addClass(this.validClass); + if (Roo.bootstrap.version == 3) { + this.el.removeClass([this.invalidClass, this.validClass]); + this.el.addClass(this.validClass); + } else { + this.el.removeClass(['is-invalid','is-valid']); + this.el.addClass(['is-valid']); + } this.fireEvent('valid', this); }, @@ -34117,13 +34355,17 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { return; } - if(this.labelEl.isVisible(true)){ + if(this.labelEl.isVisible(true) && this.indicatorEl()){ this.indicatorEl().removeClass('invisible'); this.indicatorEl().addClass('visible'); } - - this.el.removeClass([this.invalidClass, this.validClass]); - this.el.addClass(this.invalidClass); + if (Roo.bootstrap.version == 3) { + this.el.removeClass([this.invalidClass, this.validClass]); + this.el.addClass(this.invalidClass); + } else { + this.el.removeClass(['is-invalid','is-valid']); + this.el.addClass(['is-invalid']); + } this.fireEvent('invalid', this, msg); @@ -34879,6 +35121,9 @@ Roo.bootstrap.layout.Border = function(config){ Roo.bootstrap.layout.Border.regions = ["north","south","east","west","center"]; Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, { + + parent : false, // this might point to a 'nest' or a ??? + /** * Creates and adds a new region if it doesn't already exist. * @param {String} target The target region key (north, south, east, west or center). @@ -35133,13 +35378,18 @@ layout.addxtype({ delete cfg.items; } var nb = false; + + if ( region == 'center') { + Roo.log("Center: " + cfg.title); + } + switch(cfg.xtype) { case 'Content': // ContentPanel (el, cfg) case 'Scroll': // ContentPanel (el, cfg) case 'View': - cfg.autoCreate = true; + cfg.autoCreate = cfg.autoCreate || true; ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!! //} else { // var el = this.el.createChild(); @@ -35710,6 +35960,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { position: '', // set by wrapper (eg. north/south etc..) unrendered_panels : null, // unrendered panels. + + tabPosition : false, + + mgr: false, // points to 'Border' + + createBody : function(){ /** This region's body element * @type Roo.Element */ @@ -35731,15 +35987,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { /** This region's title element * @type Roo.Element */ - this.titleEl = dh.append(this.el.dom, - { - tag: "div", - unselectable: "on", - cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, - children:[ - {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, - {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} - ]}, true); + this.titleEl = dh.append(this.el.dom, { + tag: "div", + unselectable: "on", + cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, + children:[ + {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, + {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} + ] + }, true); this.titleEl.enableDisplayMode(); /** This region's title text element @@ -35844,7 +36100,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0}; - this.bottomTabs = c.tabPosition != "top"; + this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top"; this.autoScroll = c.autoScroll || false; @@ -36083,11 +36339,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render? var ts = new Roo.bootstrap.panel.Tabs({ - el: this.bodyEl.dom, - tabPosition: this.bottomTabs ? 'bottom' : 'top', - disableTooltips: this.config.disableTabTips, - toolbar : this.config.toolbar - }); + el: this.bodyEl.dom, + region : this, + tabPosition: this.tabPosition ? this.tabPosition : 'top', + disableTooltips: this.config.disableTabTips, + toolbar : this.config.toolbar + }); if(this.config.hideTabs){ ts.stripWrap.setDisplayed(false); @@ -36778,6 +37035,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, { + Roo.bootstrap.layout.North = function(config) { config.region = 'north'; @@ -36970,8 +37228,7 @@ Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { } Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); } -}); -Roo.namespace("Roo.bootstrap.panel");/* +});Roo.namespace("Roo.bootstrap.panel");/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -37672,6 +37929,7 @@ Roo.bootstrap.panel.Nest = function(config) config.layout.monitorWindowResize = false; // turn off autosizing this.layout = config.layout; this.layout.getEl().addClass("roo-layout-nested-layout"); + this.layout.parent = this; @@ -37770,7 +38028,7 @@ panel.addxtype({ return this.layout.addxtype(cfg); } -}); /* +});/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -37834,15 +38092,48 @@ Roo.bootstrap.panel.Tabs = function(config){ } if(this.tabPosition == "bottom"){ + // if tabs are at the bottom = create the body first. this.bodyEl = Roo.get(this.createBody(this.el.dom)); this.el.addClass("roo-tabs-bottom"); } - this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); - this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); - this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + // next create the tabs holders + + if (this.tabPosition == "west"){ + + var reg = this.region; // fake it.. + while (reg) { + if (!reg.mgr.parent) { + break; + } + reg = reg.mgr.parent.region; + } + Roo.log("got nest?"); + Roo.log(reg); + if (reg.mgr.getRegion('west')) { + var ctrdom = reg.mgr.getRegion('west').bodyEl.dom; + this.stripWrap = Roo.get(this.createStrip(ctrdom ), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + + + } + + + } else { + + this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + } + + if(Roo.isIE){ Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden"); } + + // finally - if tabs are at the top, then create the body last.. if(this.tabPosition != "bottom"){ /** The body element that contains {@link Roo.TabPanelItem} bodies. + * @type Roo.Element @@ -37933,7 +38224,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /* *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. */ - toolbar : false, + toolbar : false, // set by caller.. + + region : false, /// set by caller + + disableTooltips : true, // not used yet... /** * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one. @@ -37998,9 +38293,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { * Adds an existing {@link Roo.TabPanelItem}. * @param {Roo.TabPanelItem} item The TabPanelItem to add */ - addTabItem : function(item){ + addTabItem : function(item) + { this.items[item.id] = item; this.items.push(item); + this.autoSizeTabs(); // if(this.resizeTabs){ // item.setWidth(this.currentTabWidth || this.preferredTabWidth); // this.autoSizeTabs(); @@ -38082,7 +38379,10 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { * @param {String/Number} id The id or index of the TabPanelItem to activate. * @return {Roo.TabPanelItem} The TabPanelItem. */ - activate : function(id){ + activate : function(id) + { + //Roo.log('activite:' + id); + var tab = this.items[id]; if(!tab){ return null; @@ -38148,12 +38448,22 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /** * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing) */ - autoSizeTabs : function(){ + autoSizeTabs : function() + { var count = this.items.length; var vcount = count - this.hiddenCount; + + if (vcount < 2) { + this.stripEl.hide(); + } else { + this.stripEl.show(); + } + if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) { return; } + + var w = Math.max(this.el.getWidth() - this.cpad, 10); var availWidth = Math.floor(w / vcount); var b = this.stripBody; @@ -38213,7 +38523,9 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { createStrip : function(container) { var strip = document.createElement("nav"); - strip.className = "navbar navbar-default"; //"x-tabs-wrap"; + strip.className = Roo.bootstrap.version == 4 ? + "navbar-light bg-light" : + "navbar navbar-default"; //"x-tabs-wrap"; container.appendChild(strip); return strip; }, @@ -38252,7 +38564,7 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { createStripElements : function(stripEl, text, closable, tpl) { var td = document.createElement("li"); // was td.. - + td.className = 'nav-item'; //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]); @@ -38292,12 +38604,18 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { var template = tpl || this.tabTpl || false; if(!template){ - - template = new Roo.Template( - '' + - '{text}' + template = new Roo.Template( + Roo.bootstrap.version == 4 ? + ( + '{text}' + ) : ( + '' + + '{text}' + ) ); } @@ -38364,8 +38682,13 @@ Roo.bootstrap.panel.TabItem = function(config){ /** @private */ this.el = Roo.get(els.el); this.inner = Roo.get(els.inner, true); - this.textEl = Roo.get(this.el.dom.firstChild, true); - this.pnode = Roo.get(els.el.parentNode, true); + this.textEl = Roo.bootstrap.version == 4 ? + this.el : Roo.get(this.el.dom.firstChild, true); + + this.pnode = this.linode = Roo.get(els.el.parentNode, true); + this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode; + + // this.el.on("mousedown", this.onTabMouseDown, this); this.el.on("click", this.onTabClick, this); /** @private */ @@ -38420,7 +38743,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, * Shows this TabPanelItem -- this does not deactivate the currently active TabPanelItem. */ show : function(){ - this.pnode.addClass("active"); + this.status_node.addClass("active"); this.showAction(); if(Roo.isOpera){ this.tabPanel.stripWrap.repaint(); @@ -38440,7 +38763,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd. */ hide : function(){ - this.pnode.removeClass("active"); + this.status_node.removeClass("active"); this.hideAction(); this.fireEvent("deactivate", this.tabPanel, this); }, @@ -38487,10 +38810,10 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, }, setWidth : function(width){ - var iwidth = width - this.pnode.getPadding("lr"); + var iwidth = width - this.linode.getPadding("lr"); this.inner.setWidth(iwidth); this.textEl.setWidth(iwidth-this.inner.getPadding("lr")); - this.pnode.setWidth(width); + this.linode.setWidth(width); }, */ /** @@ -38499,7 +38822,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, */ setHidden : function(hidden){ this.hidden = hidden; - this.pnode.setStyle("display", hidden ? "none" : ""); + this.linode.setStyle("display", hidden ? "none" : ""); }, /** @@ -38525,7 +38848,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, * #2804 [new] Tabs in Roojs * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome */ - //this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2); + //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2); //this.el.endMeasure(); //}, @@ -38554,7 +38877,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, disable : function(){ if(this.tabPanel.active != this){ this.disabled = true; - this.pnode.addClass("disabled"); + this.status_node.addClass("disabled"); } }, @@ -38563,7 +38886,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, */ enable : function(){ this.disabled = false; - this.pnode.removeClass("disabled"); + this.status_node.removeClass("disabled"); }, /** @@ -41176,4 +41499,506 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, { return this.el.select('input.hidden-number-input',true).first(); } -}); \ No newline at end of file +});/** +* This script refer to: +* Title: Signature Pad +* Author: szimek +* Availability: https://github.com/szimek/signature_pad +**/ + +/** + * @class Roo.bootstrap.BezierSignature + * @extends Roo.bootstrap.Component + * Bootstrap BezierSignature class + * + * @constructor + * Create a new BezierSignature + * @param {Object} config The config object + */ + +Roo.bootstrap.BezierSignature = function(config){ + Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config); +}; + +Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, { + + _data: [], + + _isEmpty: true, + + _mouseButtonDown: true, + + /** + * @cfg(float or function) Radius of a single dot. + */ + dotSize: false, + + /** + * @cfg(float) Minimum width of a line. Defaults to 0.5. + */ + minWidth: 0.5, + + /** + * @cfg(float) Maximum width of a line. Defaults to 2.5. + */ + maxWidth: 2.5, + + /** + * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16. + */ + throttle: 16, + + /** + * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5. + */ + minDistance: 5, + + /** + * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images. + */ + backgroundColor: 'rgba(0, 0, 0, 0)', + + /** + * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black". + */ + penColor: 'black', + + /** + * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7. + */ + velocityFilterWeight: 0.7, + + /** + * @cfg(function) Callback when stroke begin. + */ + onBegin: false, + + /** + * @cfg(function) Callback when stroke end. + */ + onEnd: false, + + getAutoCreate : function() + { + var cls = 'roo-signature'; + + if(this.cls){ + cls += ' ' + this.cls; + } + + var cfg = { + tag: 'div', + cls: cls, + cn: [ + { + tag: 'div', + cls: 'roo-signature-body', + cn: [ + { + tag: 'canvas', + cls: 'roo-signature-body-canvas' + } + ] + } + ] + }; + + return cfg; + }, + + initEvents: function() + { + Roo.bootstrap.BezierSignature.superclass.initEvents.call(this); + + var canvas = this.canvasEl(); + + // mouse && touch event swapping... + canvas.dom.style.touchAction = 'none'; + canvas.dom.style.msTouchAction = 'none'; + + this._mouseButtonDown = false; + canvas.on('mousedown', this._handleMouseDown, this); + canvas.on('mousemove', this._handleMouseMove, this); + Roo.select('html').first().on('mouseup', this._handleMouseUp, this); + + if (window.ontouchstart) { + canvas.on('touchstart', this._handleTouchStart, this); + canvas.on('touchmove', this._handleTouchMove, this); + canvas.on('touchend', this._handleTouchEnd, this); + } + + this.clear(); + }, + + _handleMouseDown: function(e) + { + if (e.browserEvent.which === 1) { + this._mouseButtonDown = true; + this.strokeBegin(e); + } + }, + + _handleMouseMove: function (e) + { + if (this._mouseButtonDown) { + this.strokeMoveUpdate(e); + } + }, + + _handleMouseUp: function (e) + { + if (e.browserEvent.which === 1 && this._mouseButtonDown) { + this._mouseButtonDown = false; + this.strokeEnd(e); + } + }, + + _handleTouchStart: function (e) { + e.preventDefault(); + if (e.browserEvent.targetTouches.length === 1) { + // var touch = e.browserEvent.changedTouches[0]; + // this.strokeBegin(touch); + + this.strokeBegin(e); // assume e catching the correct xy... + } + }, + + _handleTouchMove: function (e) { + e.preventDefault(); + // var touch = event.targetTouches[0]; + // _this._strokeMoveUpdate(touch); + this._strokeMoveUpdate(e); + }, + + _handleTouchEnd: function (e) { + var wasCanvasTouched = e.target === this.canvasEl().dom; + if (wasCanvasTouched) { + e.preventDefault(); + // var touch = event.changedTouches[0]; + // _this._strokeEnd(touch); + this.strokeEnd(e); + } + }, + + reset: function () { + this._lastPoints = []; + this._lastVelocity = 0; + this._lastWidth = (this.minWidth + this.maxWidth) / 2; + this.canvasElCtx().fillStyle = this.penColor; + }, + + strokeMoveUpdate: function(e) + { + this.strokeUpdate(e); + + if (this.throttle) { + this.throttle(this.strokeUpdate, this.throttle); + } + else { + this.strokeUpdate(e); + } + }, + + strokeBegin: function(e) + { + var newPointGroup = { + color: this.penColor, + points: [] + }; + + if (typeof this.onBegin === 'function') { + this.onBegin(e); + } + + this._data.push(newPointGroup); + this.reset(); + this.strokeUpdate(e); + }, + + strokeUpdate: function(e) + { + var rect = this.canvasEl().dom.getBoundingClientRect(); + var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime()); + var lastPointGroup = this._data[this._data.length - 1]; + var lastPoints = lastPointGroup.points; + var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1]; + var isLastPointTooClose = lastPoint + ? point.distanceTo(lastPoint) <= this.minDistance + : false; + var color = lastPointGroup.color; + if (!lastPoint || !(lastPoint && isLastPointTooClose)) { + var curve = this.addPoint(point); + if (!lastPoint) { + this.drawDot({color: color, point: point}); + } + else if (curve) { + this.drawCurve({color: color, curve: curve}); + } + lastPoints.push({ + time: point.time, + x: point.x, + y: point.y + }); + } + }, + + strokeEnd: function(e) + { + this.strokeUpdate(e); + if (typeof this.onEnd === 'function') { + this.onEnd(e); + } + }, + + addPoint: function (point) { + var _lastPoints = this._lastPoints; + _lastPoints.push(point); + if (_lastPoints.length > 2) { + if (_lastPoints.length === 3) { + _lastPoints.unshift(_lastPoints[0]); + } + var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]); + var curve = this.Bezier.fromPoints(_lastPoints, widths, this); + _lastPoints.shift(); + return curve; + } + return null; + }, + + calculateCurveWidths: function (startPoint, endPoint) { + var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + + (1 - this.velocityFilterWeight) * this._lastVelocity; + + var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth); + var widths = { + end: newWidth, + start: this._lastWidth + }; + + this._lastVelocity = velocity; + this._lastWidth = newWidth; + return widths; + }, + + drawDot: function (_a) { + var color = _a.color, point = _a.point; + var ctx = this.canvasElCtx(); + var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize; + ctx.beginPath(); + this.drawCurveSegment(point.x, point.y, width); + ctx.closePath(); + ctx.fillStyle = color; + ctx.fill(); + }, + + drawCurve: function (_a) { + var color = _a.color, curve = _a.curve; + var ctx = this.canvasElCtx(); + var widthDelta = curve.endWidth - curve.startWidth; + var drawSteps = Math.floor(curve.length()) * 2; + ctx.beginPath(); + ctx.fillStyle = color; + for (var i = 0; i < drawSteps; i += 1) { + var t = i / drawSteps; + var tt = t * t; + var ttt = tt * t; + var u = 1 - t; + var uu = u * u; + var uuu = uu * u; + var x = uuu * curve.startPoint.x; + x += 3 * uu * t * curve.control1.x; + x += 3 * u * tt * curve.control2.x; + x += ttt * curve.endPoint.x; + var y = uuu * curve.startPoint.y; + y += 3 * uu * t * curve.control1.y; + y += 3 * u * tt * curve.control2.y; + y += ttt * curve.endPoint.y; + var width = curve.startWidth + ttt * widthDelta; + this.drawCurveSegment(x, y, width); + } + ctx.closePath(); + ctx.fill(); + }, + + drawCurveSegment: function (x, y, width) { + var ctx = this.canvasElCtx(); + ctx.moveTo(x, y); + ctx.arc(x, y, width, 0, 2 * Math.PI, false); + this._isEmpty = false; + }, + + clear: function() + { + var ctx = this.canvasElCtx(); + var canvas = this.canvasEl().dom; + ctx.fillStyle = this.backgroundColor; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillRect(0, 0, canvas.width, canvas.height); + this._data = []; + this.reset(); + this._isEmpty = true; + }, + + canvasEl: function() + { + return this.el.select('canvas',true).first(); + }, + + canvasElCtx: function() + { + return this.el.select('canvas',true).first().dom.getContext('2d'); + }, + + getImage: function(type) + { + if(this._isEmpty) { + return false; + } + + // encryption ? + return this.canvasEl().dom.toDataURL('image/'+type, false); + }, + + drawFromImage: function(img_src) + { + var img = new Image(); + + img.src = img_src; + + this.canvasElCtx().drawImage(img, 0, 0); + }, + + // Bezier Point Constructor + Point: (function () { + function Point(x, y, time) { + this.x = x; + this.y = y; + this.time = time || Date.now(); + } + Point.prototype.distanceTo = function (start) { + return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); + }; + Point.prototype.equals = function (other) { + return this.x === other.x && this.y === other.y && this.time === other.time; + }; + Point.prototype.velocityFrom = function (start) { + return this.time !== start.time + ? this.distanceTo(start) / (this.time - start.time) + : 0; + }; + return Point; + }()), + + + // Bezier Constructor + Bezier: (function () { + function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) { + this.startPoint = startPoint; + this.control2 = control2; + this.control1 = control1; + this.endPoint = endPoint; + this.startWidth = startWidth; + this.endWidth = endWidth; + } + Bezier.fromPoints = function (points, widths, scope) { + var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2; + var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1; + return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end); + }; + Bezier.calculateControlPoints = function (s1, s2, s3, scope) { + var dx1 = s1.x - s2.x; + var dy1 = s1.y - s2.y; + var dx2 = s2.x - s3.x; + var dy2 = s2.y - s3.y; + var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 }; + var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 }; + var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); + var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); + var dxm = m1.x - m2.x; + var dym = m1.y - m2.y; + var k = l2 / (l1 + l2); + var cm = { x: m2.x + dxm * k, y: m2.y + dym * k }; + var tx = s2.x - cm.x; + var ty = s2.y - cm.y; + return { + c1: new scope.Point(m1.x + tx, m1.y + ty), + c2: new scope.Point(m2.x + tx, m2.y + ty) + }; + }; + Bezier.prototype.length = function () { + var steps = 10; + var length = 0; + var px; + var py; + for (var i = 0; i <= steps; i += 1) { + var t = i / steps; + var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x); + var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); + if (i > 0) { + var xdiff = cx - px; + var ydiff = cy - py; + length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); + } + px = cx; + py = cy; + } + return length; + }; + Bezier.prototype.point = function (t, start, c1, c2, end) { + return (start * (1.0 - t) * (1.0 - t) * (1.0 - t)) + + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t) + + (3.0 * c2 * (1.0 - t) * t * t) + + (end * t * t * t); + }; + return Bezier; + }()), + + throttle: function(fn, wait) { + if (wait === void 0) { wait = 250; } + var previous = 0; + var timeout = null; + var result; + var storedContext; + var storedArgs; + var later = function () { + previous = Date.now(); + timeout = null; + result = fn.apply(storedContext, storedArgs); + if (!timeout) { + storedContext = null; + storedArgs = []; + } + }; + return function wrapper() { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + var now = Date.now(); + var remaining = wait - (now - previous); + storedContext = this; + storedArgs = args; + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + previous = now; + result = fn.apply(storedContext, storedArgs); + if (!timeout) { + storedContext = null; + storedArgs = []; + } + } + else if (!timeout) { + timeout = window.setTimeout(later, remaining); + } + return result; + }; + } + +}); + + + + \ No newline at end of file