* @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.)
* @cfg {Boolean} removeClass remove the standard class..
* @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
+ * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
*
* @constructor
* Create a new button
// raw events
/**
* @event click
- * When a butotn is pressed
+ * When a button is pressed
* @param {Roo.bootstrap.Button} btn
* @param {Roo.EventObject} e
*/
"click" : true,
+ /**
+ * @event dblclick
+ * When a button is double clicked
+ * @param {Roo.bootstrap.Button} btn
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
/**
* @event toggle
* After the button has been toggles
removeClass: false,
name: false,
target: false,
+ group : false,
pressed : null,
}
- if (this.el.hasClass('roo-button')) {
+ if (this.el.hasClass('roo-button')) {
+ this.el.on('click', this.onClick, this);
+ this.el.on('dblclick', this.onDblClick, this);
+ } else {
+ this.el.select('.roo-button').on('click', this.onClick, this);
+ this.el.select('.roo-button').on('dblclick', this.onDblClick, this);
+
+ }
+ // why?
+ if(this.removeClass){
this.el.on('click', this.onClick, this);
- } else {
- this.el.select('.roo-button').on('click', this.onClick, this);
- }
-
- if(this.removeClass){
- this.el.on('click', this.onClick, this);
- }
-
- this.el.enableDisplayMode();
+ }
+
+ if (this.group === true) {
+ if (this.pressed === false || this.pressed === true) {
+ // nothing
+ } else {
+ this.pressed = false;
+ this.setActive(this.pressed);
+ }
+
+ }
+
+ this.el.enableDisplayMode();
},
onClick : function(e)
e.preventDefault();
}
+ if (this.group) {
+ if (this.pressed) {
+ // do nothing -
+ return;
+ }
+ this.setActive(true);
+ var pi = this.parent().items;
+ for (var i = 0;i < pi.length;i++) {
+ if (this == pi[i]) {
+ continue;
+ }
+ if (pi[i].el.hasClass('roo-button')) {
+ pi[i].setActive(false);
+ }
+ }
+ this.fireEvent('click', this, e);
+ return;
+ }
+
if (this.pressed === true || this.pressed === false) {
this.toggleActive(e);
}
this.fireEvent('click', this, e);
},
-
+ onDblClick: function(e)
+ {
+ if (this.disabled) {
+ return;
+ }
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+ this.fireEvent('dblclick', this, e);
+ },
/**
* Enables this button
*/
* @cfg {String} header_image src url of image.
* @cfg {String|Object} header
* @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
+ * @cfg {Number} header_weight (primary|secondary|success|info|warning|danger|light|dark)
*
* @cfg {String} title
* @cfg {String} subtitle
['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
- cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
+ cls += ' d' + (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
}
});
cfg.cls += ' bg-' + this.weight;
}
- cfg.cls += this.layoutCls();
+ cfg.cls += ' ' + this.layoutCls();
var hdr = false;
var hdr_ctr = false;
if (this.header.length) {
hdr = {
tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
- cls : 'card-header',
+ cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
cn : []
};
cfg.cn.push(hdr);
} else {
hdr = {
tag : 'div',
- cls : 'card-header d-none',
+ cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
cn : []
};
cfg.cn.push(hdr);
* accept card
*
* - card.acceptCard(move_card, info.position, info.card, info.items_n);
-
*/
acceptCard : function(move_card, position, next_to_card )
{
var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
+ move_card.parent().removeCard(move_card);
- var dom = move_card.el.dom;
- dom.parentNode.removeChild(dom);
+ var dom = move_card.el.dom;
+ dom.style.width = ''; // clear with - which is set by drag.
- if (next_to_card !== false && next_to_card !== true ) {
+ if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
var cardel = next_to_card.el.dom;
- if (position == 'above' && cardel.parentNode) {
+ if (position == 'above' ) {
cardel.parentNode.insertBefore(dom, cardel);
- } else if (cardel.nextSibling && cardel.parentNode) {
+ } else if (cardel.nextSibling) {
cardel.parentNode.insertBefore(dom,cardel.nextSibling);
} else {
cardel.parentNode.append(dom);
// add this to the correct place in items.
-
-
// remove Card from items.
- var old_parent = move_card.parent();
-
- old_parent.items = old_parent.items.filter(function(e) { return e != move_card });
-
+
if (this.items.length) {
var nitems = [];
//Roo.log([info.items_n, info.position, this.items.length]);
},
-
+ removeCard : function(c)
+ {
+ this.items = this.items.filter(function(e) { return e != c });
+
+ var dom = c.el.dom;
+ dom.parentNode.removeChild(dom);
+ dom.style.width = ''; // clear with - which is set by drag.
+ c.parentId = false;
+
+ },
/** Decide whether to drop above or below a View node. */
getDropPoint : function(e, n, dd)
{
// we will default to modal-body-overflow - might need to remove or make optional later.
var bdy = {
- cls : 'modal-body enable-modal-body-overflow ',
+ cls : 'modal-body ' + (this.fitwindow ? 'overflow-auto' : ''),
html : this.html || ''
};
this.headerEditEl = this.headerEl.select('.form-control',true).first();
this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
this.headerEditEl.on('keyup', function(e) {
- if(e.isNavKeyPress()){
- this.toggleHeaderInput(false)
+ if([ e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
+ this.toggleHeaderInput(false)
}
}, this);
this.headerEditEl.on('blur', function(e) {
if (!this.rendered) {
this.render();
}
-
+ this.toggleHeaderInput(false);
//this.el.setStyle('display', 'block');
this.el.removeClass('hideing');
this.el.dom.style.display='block';
},
toggleHeaderInput : function(is_edit)
{
-
+ if (!this.editableTitle) {
+ return; // not editable.
+ }
if (is_edit && this.is_header_editing) {
return; // already editing..
}
});
+ /*
+ * - LGPL
+ *
+ * Breadcrumb Nav
+ *
+ */
+Roo.namespace('Roo.bootstrap.breadcrumb');
+
+
+/**
+ * @class Roo.bootstrap.breadcrumb.Nav
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Breadcrumb Nav Class
+ *
+ * @children Roo.bootstrap.breadcrumb.Item
+ *
+ * @constructor
+ * Create a new breadcrumb.Nav
+ * @param {Object} config The config object
+ */
+
+
+Roo.bootstrap.breadcrumb.Nav = function(config){
+ Roo.bootstrap.breadcrumb.Nav.superclass.constructor.call(this, config);
+
+
+};
+
+Roo.extend(Roo.bootstrap.breadcrumb.Nav, Roo.bootstrap.Component, {
+
+ getAutoCreate : function()
+ {
+
+ var cfg = {
+ tag: 'nav',
+ cn : [
+ {
+ tag : 'ol',
+ cls : 'breadcrumb'
+ }
+ ]
+
+ };
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ this.olEl = this.el.select('ol',true).first();
+ },
+ getChildContainer : function()
+ {
+ return this.olEl;
+ }
+
+});
+
+ /*
+ * - LGPL
+ *
+ * Breadcrumb Item
+ *
+ */
+
+
+/**
+ * @class Roo.bootstrap.breadcrumb.Nav
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Breadcrumb Nav Class
+ *
+ * @children Roo.bootstrap.breadcrumb.Component
+ * @cfg {String} html the content of the link.
+ * @cfg {String} href where it links to if '#' is used the link will be handled by onClick.
+ * @cfg {Boolean} active is it active
+
+ *
+ * @constructor
+ * Create a new breadcrumb.Nav
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.breadcrumb.Item = function(config){
+ Roo.bootstrap.breadcrumb.Item.superclass.constructor.call(this, config);
+ this.addEvents({
+ // img events
+ /**
+ * @event click
+ * The img click event for the img.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+
+};
+
+Roo.extend(Roo.bootstrap.breadcrumb.Item, Roo.bootstrap.Component, {
+
+ href: false,
+ html : '',
+
+ getAutoCreate : function()
+ {
+
+ var cfg = {
+ tag: 'li',
+ cls : 'breadcrumb-item' + (this.active ? ' active' : '')
+ };
+ if (this.href !== false) {
+ cfg.cn = [{
+ tag : 'a',
+ href : this.href,
+ html : this.html
+ }];
+ } else {
+ cfg.html = this.html;
+ }
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ if (this.href) {
+ this.el.select('a', true).first().on('click',this.onClick, this)
+ }
+
+ },
+ onClick : function(e)
+ {
+ e.preventDefault();
+ this.fireEvent('click',this, e);
+ }
+
+});
+
/*
* - LGPL
*
var tfd = this.getGridEl().select('tfoot', true).first();
var cw = ctr.getWidth();
+ this.getGridEl().select('tfoot tr, tfoot td',true).setWidth(cw);
if (tbd) {
cw -= barsize;
}
cw = Math.max(cw, this.totalWidth);
- this.getGridEl().select('tr',true).setWidth(cw);
+ this.getGridEl().select('tbody tr',true).setWidth(cw);
+
// resize 'expandable coloumn?
return; // we doe not have a view in this design..
{
this.list = Roo.get(document.body).createChild({
tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
- cls: 'typeahead typeahead-long dropdown-menu',
+ cls: 'typeahead typeahead-long dropdown-menu shadow',
style: 'display:none'
});
* @cfg {Boolean} emptyResultText only for touch device
* @cfg {String} triggerText multiple combobox trigger button text default 'Select'
* @cfg {String} emptyTitle default ''
+ * @cfg {Number} width fixed with? experimental
* @constructor
* Create a new ComboBox.
* @param {Object} config Configuration options
emptyResultText: 'Empty',
triggerText : 'Select',
emptyTitle : '',
+ width : false,
// element that contains real text value.. (when hidden is used..)
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
-
+ if(this.width * 1 > 0){
+ contentCfg.style = "width: " + this.width + 'px';
+ }
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
},
// private
- onResize: function(w, h){
+ onResize: function(w, h)
+ {
+
+
// Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
//
// if(typeof w != 'number'){
}
var inputblock = {
- cls : '',
+ cls : 'roo-combobox-wrap',
cn : [
input
]
},
{
- cls : '',
+ cls : 'roo-combobox-wrap ',
cn: [
combobox
]
]
},
{
- cls : "",
+ cls : "roo-combobox-wrap ",
cn: [
combobox
]
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
-
+
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
if(this.animate){
var _this = this;
- (function(){ _this.touchViewEl.addClass('in'); }).defer(50);
+ (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
}else{
- this.touchViewEl.addClass('in');
+ this.touchViewEl.addClass(['in','show']);
}
if(this._touchViewMask){
hideTouchView : function()
{
- this.touchViewEl.removeClass('in');
+ this.touchViewEl.removeClass(['in','show']);
if(this.animate){
var _this = this;
* @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
* @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
* @cfg {String} href click to link..
+ * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
*
*
* @constructor
tabId: false,
navId : false,
href : '',
-
+ touchSlide : false,
getAutoCreate : function(){
this.el.on('click', this.onClick, this);
- if(Roo.isTouch){
+ if(Roo.isTouch && this.touchSlide){
this.el.on("touchstart", this.onTouchStart, this);
this.el.on("touchmove", this.onTouchMove, this);
this.el.on("touchend", this.onTouchEnd, this);
template : {
tag: 'div',
- cls: 'datepicker dropdown-menu roo-dynamic',
+ cls: 'datepicker dropdown-menu roo-dynamic shadow',
cn: [
{
tag: 'div',
// private
validateValue: function (value)
{
-
if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
return false;
}
return true;
}
- if ('[\x21-\x7e]*'.match(value)) {
+ if (!value.match(/[\x21-\x7e]+/)) {
this.markInvalid(this.errors.PwdBadChar);
this.errorMsg = this.errors.PwdBadChar;
return false;
st = '<style type="text/css">' +
'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
'</style>';
- } else {
- st = '<style type="text/css">' +
- this.stylesheets +
- '</style>';
+ } else {
+ for (var i in this.stylesheets) {
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+ }
+
}
st += '<style type="text/css">' +
cls : 'roo-markdown-area'
});
this.inputEl().addClass('d-none');
- this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
+ if (this.getValue() == '') {
+ this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
+
+ } else {
+ this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
+ }
this.markdownEl.on('click', this.toggleTextEdit, this);
this.on('blur', this.toggleTextEdit, this);
this.on('specialkey', this.resizeTextArea, this);
updateMarkdown : function()
{
if (this.getValue() == '') {
- this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder);
+ this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
return;
}
+
this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
},
align = this.alignment[placement];
- this.arrowEl.setLeft(this.innerEl.getWidth()/2);
+ this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
}
* @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
* @cfg {Boolean} badges render the badges
+ * @cfg {String} cls extra classes to use
+ * @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
* @constructor
* Create a new ContentPanel.
this.el = Roo.DomHelper.append(document.body,
config.autoCreate, true);
}else{
- var elcfg = { tag: "div",
- cls: "roo-layout-inactive-content",
- id: config.id||el
- };
+ var elcfg = {
+ tag: "div",
+ cls: (config.cls || '') +
+ (config.background ? ' bg-' + config.background : '') +
+ " roo-layout-inactive-content",
+ id: config.id||el
+ };
if (config.html) {
elcfg.html = config.html;
Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, {
+ cls : '',
+ background : '',
+
tabTip : '',
setRegion : function(region){
projects / roojs1 / blobdiff