return;
}
- this.getVisibilityEl().removeClass('hidden');
+ this.getVisibilityEl().removeClass(['hidden','d-none']);
this.fireEvent('show', this);
return;
}
- this.getVisibilityEl().addClass('hidden');
+ this.getVisibilityEl().addClass(['hidden','d-none']);
this.fireEvent('hide', this);
* @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
disabled: false,
isClose: false,
glyphicon: '',
+ fa: '',
badge: '',
theme: 'default',
inverse: false,
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) : '';
}
];
}
+ if (this.fa) {
+ cfg.html = ' ' + cfg.html;
+
+ cfg.cn = [
+ {
+ tag: 'i',
+ cls: 'fa fas fa-' + this.fa
+ }
+ ];
+ }
if (this.badge) {
cfg.html += ' ';
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;
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'){
if(this.isContainer){
return {
tag: 'li',
- cls: 'dropdown-menu-item dropdown-item'
+ cls: 'dropdown-menu-item '
};
}
var ctag = {
var anc = {
tag : 'a',
+ cls : 'dropdown-item',
href : '#',
cn : [ ]
};
var cfg= {
tag: 'li',
- cls: 'dropdown-menu-item dropdown-item',
+ cls: 'dropdown-menu-item',
cn: [ anc ]
};
if (this.parent().type == 'treeview') {
* @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
var btn = Roo.factory(b);
- btn.render(this.el.select('.modal-footer div').first());
+ btn.render(this.getButtonContainer());
},this);
}
if(this.specificTitle){
title = this.title;
- };
+ }
var header = [];
if (this.allow_close && Roo.bootstrap.version == 3) {
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 : [
cn : header
},
bdy,
- {
- cls : 'modal-footer',
- cn : [
- {
- tag: 'div',
- cls: 'btn-' + this.buttonPosition
- }
- ]
-
- }
-
-
+ footer
]
}
},
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()
},
+
resize : function()
{
);
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;
}
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');
var btn = Roo.factory(b);
- btn.render(this.el.select('.modal-footer div').first());
+ btn.render(this.getButtonContainer());
return btn;
{
//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)
{
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]){
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){
//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);
var cfg = {
tag : this.tag || 'div',
- cls : 'navbar navbar-expand-lg'
+ 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 = [
{
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
- if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
+ if (['stacked','justified'].indexOf(this.arrangement) != -1) {
cfg.cn[0].cls += ' nav-' + this.arrangement;
}
cfg.cn[0].cls += ' navbar-right';
}
- if (this.inverse) {
- cfg.cls += ' navbar-inverse';
-
- }
+
return cfg;
}
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
+ ]
});
}
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 ;
}
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',
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 = {
if (this.form === true) {
cfg = {
tag: 'form',
- cls: 'navbar-form'
+ cls: 'navbar-form form-inline'
};
if (this.align === 'right') {
*/
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);
* @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
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) {
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 = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
+ }
+
+ // menu .. should add dropdown-menu class - so no need for carat..
+
+ if (this.badge !== '') {
+
+ cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
+ }
+ 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,
cfg.cn[0].cls = 'nav-link';
}
if (this.icon) {
- cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
+ }
+ if (this.fa) {
+ cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
}
-
if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
}
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') {
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);
/**
- * @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",
}
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left row';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
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;
return;
}
-
- this.el.removeClass(this.invalidClass);
+
+ this.el.removeClass([this.invalidClass, 'is-invalid']);
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
}
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){
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();
}
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){
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){
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();
}
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(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)){
}
this.el.removeClass([this.invalidClass, this.validClass]);
+ this.inputEl().removeClass(['is-valid', 'is-invalid']);
var feedback = this.el.select('.form-control-feedback', true).first();
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();
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left row';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
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'
});
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",
var box = {
tag: 'div',
+ style : 'display: contents',
cn: [
{
tag: 'input',
}
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left row';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
*/
if(!this.tpl){
- this.tpl = '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
+ this.tpl = Roo.bootstrap.version == 4 ?
+ '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' : // 4 does not need <li> and it get's really confisued.
+ '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
}
this.view = new Roo.View(this.list, this.tpl, {
{
if(this.transition || typeof(pan) == 'undefined'){
Roo.log("waiting for the transitionend");
- return;
+ return false;
}
if (typeof(pan) == 'number') {
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;
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 || ''
};
cfg.tabId = this.tabId;
}
+
return cfg;
},
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;
}
}
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');
+ }
}
},
}
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;
}
}
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');
+ }
}
},
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']);
}
},
/**
* @cfg {String} inputType @hide
*/
- /**
- * @cfg {String} invalidClass @hide
- */
+
/**
* @cfg {String} invalidText @hide
*/
size : 'sm',
xtype: 'Button',
xns: Roo.bootstrap,
- glyphicon : id,
+ //glyphicon : id,
+ fa: id,
cmd : id || cmd,
enableToggle:toggle !== false,
html : html || '',
xtype: 'Button',
size : 'sm',
xns: Roo.bootstrap,
- glyphicon : 'font',
+ fa : 'font',
//html : 'submit'
menu : {
xtype: 'Menu',
this.progressDialog = new Roo.bootstrap.Modal({
cls : 'roo-document-manager-progress-dialog',
allow_close : false,
+ animate : false,
title : '',
buttons : [
{
* @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
*
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);
},
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);
}
}
]
};
-
- 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'
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);
},
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);
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).
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();
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 */
/** 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
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;
//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);
+
Roo.bootstrap.layout.North = function(config)
{
config.region = 'north';
}
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.
config.layout.monitorWindowResize = false; // turn off autosizing
this.layout = config.layout;
this.layout.getEl().addClass("roo-layout-nested-layout");
+ this.layout.parent = this;
return this.layout.addxtype(cfg);
}
-}); /*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
}
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
/*
*@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.
* 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();
* @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;
/**
* 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;
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;
},
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]);
var template = tpl || this.tabTpl || false;
if(!template){
-
- template = new Roo.Template(
- '<a href="#">' +
- '<span unselectable="on"' +
- (this.disableTooltips ? '' : ' title="{text}"') +
- ' >{text}</span></a>'
+ template = new Roo.Template(
+ Roo.bootstrap.version == 4 ?
+ (
+ '<a class="nav-link" href="#" unselectable="on"' +
+ (this.disableTooltips ? '' : ' title="{text}"') +
+ ' >{text}</a>'
+ ) : (
+ '<a class="nav-link" href="#">' +
+ '<span unselectable="on"' +
+ (this.disableTooltips ? '' : ' title="{text}"') +
+ ' >{text}</span></a>'
+ )
);
}
/** @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 */
* Shows this TabPanelItem -- this <b>does not</b> 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();
* 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);
},
},
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);
},
*/
/**
*/
setHidden : function(hidden){
this.hidden = hidden;
- this.pnode.setStyle("display", hidden ? "none" : "");
+ this.linode.setStyle("display", hidden ? "none" : "");
},
/**
* #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();
//},
disable : function(){
if(this.tabPanel.active != this){
this.disabled = true;
- this.pnode.addClass("disabled");
+ this.status_node.addClass("disabled");
}
},
*/
enable : function(){
this.disabled = false;
- this.pnode.removeClass("disabled");
+ this.status_node.removeClass("disabled");
},
/**
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);
+
+ // this.addEvents({
+ // // raw events
+ // /**
+ // * @event click
+ // * When a Brick is click
+ // * @param {Roo.bootstrap.Brick} this
+ // * @param {Roo.EventObject} e
+ // */
+ // "click" : true
+ // });
+};
+
+Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
+
+ /**
+ * @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,
+
+ 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: (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) {
+ var c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+ var c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+ return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+ };
+ Bezier.calculateControlPoints = function (s1, s2, s3) {
+ 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 Point(m1.x + tx, m1.y + ty),
+ c2: new 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;
+ }()),
+
+ getAutoCreate : function()
+ {
+ Roo.log('runing???');
+
+ 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);
+ // assign all object in here...
+ },
+
+ isValid: function()
+ {
+ // form cannot detect...
+ },
+
+ canvasEl: function()
+ {
+ // catching canvas
+ }
+
+});
+
+
+
+
\ No newline at end of file