* @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} badge text for badge
- * @cfg {String} theme default
- * @cfg {Boolean} inverse
- * @cfg {Boolean} toggle
- * @cfg {String} ontext text for on toggle state
- * @cfg {String} offtext text for off toggle state
- * @cfg {Boolean} defaulton
- * @cfg {Boolean} preventDefault default true
+ * @cfg {String} theme (default|glow)
+ * @cfg {Boolean} inverse dark themed version
+ * @cfg {Boolean} toggle is it a slidy toggle button
+ * @cfg {Boolean} pressed　(true|false) default null - if the button ahs active state
+ * @cfg {String} ontext text for on slidy toggle state
+ * @cfg {String} offtext text for off slidy toggle state
+ * @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.)
* @cfg {Boolean} removeClass remove the standard class..
* @cfg {String} target target for a href. (_self|_blank|_parent|_top| other)
*
/**
* @event click
* When a butotn is pressed
- * @param {Roo.bootstrap.Button} this
+ * @param {Roo.bootstrap.Button} btn
* @param {Roo.EventObject} e
*/
"click" : true,
/**
* @event toggle
* After the button has been toggles
+ * @param {Roo.bootstrap.Button} btn
* @param {Roo.EventObject} e
* @param {boolean} pressed (also available as button.pressed)
*/
removeClass: false,
name: false,
target: false,
-
-
+
pressed : null,
}
- if (this.active) {
+ if (this.active || this.pressed === true) {
cfg.cls += ' active';
}
if (this.menu) {
cfg.cls += ' dropdown';
- cfg.html = typeof(cfg.html) != 'undefined' ? cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
+ cfg.html = typeof(cfg.html) != 'undefined' ?
+ cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
}
if (cfg.tag !== 'a' && this.href !== '') {
return;
}
-
Roo.log('button on click ');
if(this.preventDefault){
e.preventDefault();
}
+
if (this.pressed === true || this.pressed === false) {
- this.pressed = !this.pressed;
- this.el[this.pressed ? 'addClass' : 'removeClass']('active');
- this.fireEvent('toggle', this, e, this.pressed);
+ this.toggleActive(e);
}
setActive : function(v) {
this.el[v ? 'addClass' : 'removeClass']('active');
+ this.pressed = v;
},
/**
* toggles the current active state
*/
- toggleActive : function()
+ toggleActive : function(e)
{
- var active = this.el.hasClass('active');
- this.setActive(!active);
-
-
+ this.setActive(!this.pressed);
+ this.fireEvent('toggle', this, e, !this.pressed);
},
/**
* get the current active state
{
return this.el.hasClass('active');
},
+ /**
+ * set the text of the first selected button
+ */
setText : function(str)
{
this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
},
+ /**
+ * get the text of the first selected button
+ */
getText : function()
{
return this.el.select('.roo-button-text',true).first().dom.innerHTML;
},
setWeight : function(str)
{
- this.el.removeClass(this.weightClass);
+ this.el.removeClass(this.weightClass);
this.el.addClass('btn-' + str);
}
this.hidden = false;
this.triggerEl.addClass('open');
- if(this.el.getWidth() + xy[0] > Roo.lib.Dom.getViewWidth()){
+ // reassign x when hitting right
+ if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
}
+ // reassign y when hitting bottom
+ if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight()){
+ xy[1] = xy[1] - this.el.getHeight() - this.triggerEl.getHeight();
+ }
+
+ // but the list may align on trigger left or trigger top... should it be a properity?
+
if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
this.el.setXY(xy);
}
this.footerEl = this.el.select('.modal-footer',true).first();
this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
- this.maskEl.enableDisplayMode("block");
- this.maskEl.hide();
+
//this.el.addClass("x-dlg-modal");
if (this.buttons.length) {
var modal = {
cls: "modal",
- style : 'display: none',
- cn : [
+ cn : [
{
cls: "modal-dialog " + size,
cn : [
this.render();
}
- this.el.setStyle('display', 'block');
-
+ //this.el.setStyle('display', 'block');
+ this.el.removeClass('hideing');
+ this.el.addClass('show');
+
if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay?
var _this = this;
(function(){
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
- this.maskEl.show();
+ this.maskEl.addClass('show');
this.resize();
hide : function()
{
if(this.fireEvent("beforehide", this) !== false){
- this.maskEl.hide();
+ this.maskEl.removeClass('show');
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
- var _this = this;
- (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
+ this.el.addClass('hideing');
+ (function(){
+ if (!this.el.hasClass('hideing')) {
+ return; // it's been shown again...
+ }
+ this.el.removeClass('show');
+ this.el.removeClass('hideing');
+ }).defer(150,this);
+
}else{
- this.el.setStyle('display', 'none');
+ this.el.removeClass('show');
}
this.fireEvent('hide', this);
}
},
+ isVisible : function()
+ {
+
+ return this.el.hasClass('show') && !this.el.hasClass('hideing');
+
+ },
addButton : function(str, cb)
{
lazyLoad : false,
+ CSS : Roo.util.CSS,
+
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
}
}
- this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
+ if(this.loadMask) {
+ this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
+ }
this.store.on('load', this.onLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
this.cm.on("headerchange", this.onHeaderChange, this);
- this.cm.on("hiddenchange", this.onHiddenChange, this);
+ this.cm.on("hiddenchange", this.onHiddenChange, this, arguments);
},
var c = {
tag: 'th',
+ cls : 'x-hcol-' + i,
style : '',
html: cm.getColumnHeader(i)
};
});
- if(config.hidden){
- c.cls += ' hidden';
- }
-
header.cn.push(c)
}
e.on('mouseout', _this.onMouseout, _this);
});
this.fireEvent('rowsrendered', this);
- //if(this.loadMask){
- // this.maskEl.hide();
- //}
this.autoSize();
},
renderRow : function(cm, ds, rowIndex)
{
-
var d = ds.getAt(rowIndex);
var row = {
tag : 'tr',
+ cls : 'x-row-' + rowIndex,
cn : []
};
var td = {
tag: 'td',
- cls : rowcfg.rowClass,
+ cls : rowcfg.rowClass + ' x-col-' + i,
style: '',
html: (typeof(value) === 'object') ? '' : value
};
});
- if(config.hidden){
- td.cls += ' hidden';
- }
-
row.cn.push(td);
}
onBeforeLoad : function()
{
- //Roo.log('ds onBeforeLoad');
- //this.clear();
-
- //if(this.loadMask){
- // this.maskEl.show();
- //}
},
/**
* Remove all rows
onHeaderChange : function()
{
-
var header = this.renderHeader();
var table = this.el.select('table', true).first();
this.mainHead = table.createChild(header, this.mainBody, false);
},
- onHiddenChange : function()
+ onHiddenChange : function(colModel, colIndex, hidden)
{
+ var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
+ var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
+
+ this.CSS.updateRule(thSelector, "display", "");
+ this.CSS.updateRule(tdSelector, "display", "");
+
+ if(hidden){
+ this.CSS.updateRule(thSelector, "display", "none");
+ this.CSS.updateRule(tdSelector, "display", "none");
+ }
+
this.onHeaderChange();
this.onLoad();
+
}
});
var target = false;
items.each(function(f){
+
if(f.validate()){
return;
}
* @cfg {Boolean} readOnly Specifies that the field should be read-only
* @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
* @cfg {String} indicatorpos (left|right) default left
+ * @cfg {String} capture (user|camera) use for file input only. (default empty)
+ * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
* @cfg {String} align (left|center|right) Default left
* @cfg {Boolean} forceFeedback (true|false) Default false
labelsm : 0,
labelxs : 0,
+ capture : '',
+ accept : '',
+
parentLabelAlign : function()
{
var parent = this;
autocomplete : this.autocomplete || 'new-password'
};
+ if(this.capture.length){
+ input.capture = this.capture;
+ }
+
+ if(this.accept.length){
+ input.accept = this.accept + "/*";
+ }
+
if(this.align){
input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
}
this.indicator = this.indicatorEl();
if(this.indicator){
- this.indicator.addClass('invisible');
+ this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? -
}
// reference to original value for reset
this.after.render(this.el.select('.roo-input-after',true).first());
}
+ this.inputEl().on('change', this.onChange, this);
},
filterValidation : function(e){
this.fireEvent("blur", this);
},
+ onChange : function(e)
+ {
+ var v = this.getValue();
+ if(String(v) !== String(this.startValue)){
+ this.fireEvent('change', this, v, this.startValue);
+ }
+
+ },
+
/**
* Resets the current field value to the originally loaded value and clears any validation messages
*/
if(this.indicator){
this.indicator.removeClass('visible');
- this.indicator.addClass('invisible');
+ this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
}
if(this.disabled){
}
if(this.indicator){
- this.indicator.removeClass('invisible');
+ this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
this.indicator.addClass('visible');
}
remove : function(record){
var index = this.data.indexOf(record);
this.data.removeAt(index);
+
if(this.pruneModifiedRecords){
this.modified.remove(record);
}
this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
- while(prevMonth.valueOf() < nextMonth) {
+ while(prevMonth.valueOf() <= nextMonth) {
var clsName = '';
if (prevMonth.getUTCDay() === this.weekStart) {
weight : false,
inline: false,
tooltip : '',
+ useFontAwesomeCheckBox : false,
getAutoCreate : function()
{
html: this.boxLabel
};
+ if(this.useFontAwesomeCheckBox) {
+ boxLabelCfg.cls = 'box-label fa-checkbox'
+ }
+
if(this.tooltip){
boxLabelCfg.tooltip = this.tooltip;
}
if (v.match(/^\./) || v.match(/^\//)) {
return;
}
- if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/)) {
+ if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) {
return;
}
if (v.match(/^#/)) {
if(this.buttons){
Roo.each(_this.buttons, function(e){ // this might need to use render????
- Roo.factory(e).onRender(_this.el, null);
+ Roo.factory(e).render(_this.el);
});
}
getAutoCreate : function(){
+ var cls = "";
+ if (!this.allowBlank) {
+ cls = "visible";
+ }
+
var cfg = {
tag : this.tag,
cls : 'roo-bootstrap-field-label ' + this.cls,
cn : [
{
tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
tooltip : this.iconTooltip
},
{
},
{
tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+ cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
tooltip : this.iconTooltip
}
]
e.preventDefault();
- if (this.activcClass != '') {
+ if (this.activeClass != '') {
this.selectBrick();
}
- this.fireEvent('click', this);
+ this.fireEvent('click', this, e);
},
enter: function(e, el)
m.selectedBrick.push(this.id);
this.el.addClass(this.activeClass);
return;
- }
+ },
+ isSelected : function(){
+ return this.el.hasClass(this.activeClass);
+
+ }
});
Roo.apply(Roo.bootstrap.MasonryBrick, {
* if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
*/
nanText : "{0} is not a valid number",
- /**
- * @cfg {Boolean} castInt (true|false) cast int if true (defalut true)
- */
- castInt : true,
/**
* @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
*/
beforeBlur : function()
{
- if(!this.castInt){
- return;
- }
-
var v = this.parseValue(this.getRawValue());
- if(v || v === 0){
+ if(v || v === 0 || v === ''){
this.setValue(v);
}
},
cls: 'typeahead typeahead-long dropdown-menu tel-list',
style: 'display:none'
});
- this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
+
+ this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
},
collapseIf : function(e)
this.validate();
},
- getDialCode : function(v = '')
+ getDialCode : function(v)
{
+ v = v || '';
+
if (v.length == 0) {
return this.dialCodeHolder.dom.value;
}
* @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
*/
allowNegative : true,
+ /**
+ * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
+ */
+ allowZero: true,
/**
* @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
*/
allowed += "-";
}
+ if(this.thousandsDelimiter) {
+ allowed += ",";
+ }
+
this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
var keyPress = function(e){
setValue : function(v)
{
- v = this.fixPrecision(v);
-
- v = String(v).replace(".", this.decimalSeparator);
+ v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
this.value = v;
this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
- this.inputEl().dom.value = Roo.util.Format.number(v, this.decimalPrecision,
- this.thousandsDelimiter || ','
- );
+ this.inputEl().dom.value = (v == '') ? '' :
+ Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
- if(this.allowBlank && !v) {
+ if(!this.allowZero && v === '0') {
+ this.hiddenEl().dom.value = '';
this.inputEl().dom.value = '';
}
parseValue : function(value)
{
+ if(this.thousandsDelimiter) {
+ value += "";
+ r = new RegExp(",", "g");
+ value = value.replace(r, "");
+ }
+
value = parseFloat(String(value).replace(this.decimalSeparator, "."));
return isNaN(value) ? '' : value;
+
},
fixPrecision : function(value)
{
+ if(this.thousandsDelimiter) {
+ value += "";
+ r = new RegExp(",", "g");
+ value = value.replace(r, "");
+ }
+
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
-
return parseFloat(value).toFixed(this.decimalPrecision);
},
projects / roojs1 / blobdiff