var target = false;
items.each(function(f){
- Roo.log(f.name);
if(f.validate()){
return;
}
this.indicator = this.indicatorEl();
if(this.indicator){
- this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
- this.indicator.hide();
+ this.indicator.addClass('invisible');
+
}
// reference to original value for reset
}
if(this.indicator){
- this.indicator.hide();
+ this.indicator.removeClass('visible');
+ this.indicator.addClass('invisible');
}
this.el.addClass(this.validClass);
}
if(this.indicator){
- this.indicator.show();
+ this.indicator.removeClass('invisible');
+ this.indicator.addClass('visible');
}
this.el.addClass(this.invalidClass);
var default_text = '-- SELECT --';
+ if(this.placeholder.length){
+ default_text = this.placeholder;
+ }
+
+ if(this.emptyTitle.length){
+ default_text += ' - ' + this.emptyTitle + ' -';
+ }
+
var opt = this.inputEl().createChild({
tag: 'option',
value : 0,
this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
- this.indicatorEl().setVisibilityMode(Roo.Element.DISPLAY);
- this.indicatorEl().hide();
+ this.indicatorEl().addClass('invisible');
this.originalValue = this.getValue();
markValid : function()
{
if(this.labelEl.isVisible(true)){
- this.indicatorEl().hide();
+ this.indicatorEl().removeClass('visible');
+ this.indicatorEl().addClass('invisible');
}
this.el.removeClass([this.invalidClass, this.validClass]);
}
if(this.labelEl.isVisible(true)){
- this.indicatorEl().show();
+ this.indicatorEl().removeClass('invisible');
+ this.indicatorEl().addClass('visible');
}
this.el.removeClass([this.invalidClass, this.validClass]);
{
panel = this.getPanel(panel);
if(this.activePanel && this.activePanel != panel){
- this.activePanel.setActiveState(false);
+ if(this.activePanel.setActiveState(false) === false){
+ return;
+ }
}
this.activePanel = panel;
panel.setActiveState(true);
this.active = active;
this.setActiveClass(active);
if(!active){
- this.fireEvent("deactivate", this);
- }else{
- this.fireEvent("activate", this);
+ if(this.fireEvent("deactivate", this) === false){
+ return false;
+ }
+ return true;
}
+ this.fireEvent("activate", this);
+ return true;
},
/**
* Updates this panel's element
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.el.on("mousedown", this.onTabMouseDown, this);
+// this.el.on("mousedown", this.onTabMouseDown, this);
this.el.on("click", this.onTabClick, this);
/** @private */
if(config.closable){
* Availability: https://github.com/jackocnr/intl-tel-input.git
**/
+/**
+ * @class Roo.bootstrap.PhoneInput
+ * @extends Roo.bootstrap.TriggerField
+ * An input with International dial-code selection
+
+ * @cfg {String} defaultDialCode default '+852'
+ * @cfg {Array} preferedCountries default []
+
+ * @constructor
+ * Create a new PhoneInput.
+ * @param {Object} config Configuration options
+ */
+
Roo.bootstrap.PhoneInput = function(config) {
Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config);
};
Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
- triggerList : true,
-
listWidth: undefined,
selectedClass: 'active',
- allCountries: [],
+ invalidClass : "has-warning",
- dialCodeMapping: [],
+ validClass: 'has-success',
- preferedCountries: [
- 'hk',
- 'gb',
- 'us'
- ],
+ allowed: '0123456789',
- defaultDialCode: '+852', //hk
+ /**
+ * @cfg {String} defaultDialCode The default dial code when initializing the input
+ */
+ defaultDialCode: '+852',
+
+ /**
+ * @cfg {Array} preferedCountries A list of iso2 in array (e.g. ['hk','us']). Those related countries will show at the top of the input's choices
+ */
+ preferedCountries: false,
getAutoCreate : function()
{
var align = this.labelAlign || this.parentLabelAlign();
var id = Roo.id();
+ this.allCountries = [];
+ this.dialCodeMapping = [];
+
for (var i = 0; i < data.length; i++) {
var c = data[i];
this.allCountries[i] = {
var input = {
tag: 'input',
id : id,
- type : 'number',
cls : 'form-control tel-input',
autocomplete: 'new-password'
};
+ var hiddenInput = {
+ tag: 'input',
+ type: 'hidden',
+ cls: 'hidden-tel-input'
+ };
+
if (this.name) {
- input.name = this.name;
+ hiddenInput.name = this.name;
}
if (this.disabled) {
tag: 'div',
cls: this.hasFeedback ? 'has-feedback' : '',
cn: [
+ hiddenInput,
input,
{
tag: 'input',
})
});
+ if(!this.preferedCountries) {
+ this.preferedCountries = [
+ 'hk',
+ 'gb',
+ 'us'
+ ];
+ }
+
var p = this.preferedCountries.reverse();
if(p) {
this.list.on('mouseover', this.onViewOver, this);
this.list.on('mousemove', this.onViewMove, this);
- //this.list.on('scroll', this.onViewScroll, this);
+ this.inputEl().on("keyup", this.onKeyUp, this);
this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
onTriggerClick : function(e)
{
Roo.log('trigger click');
- if(this.disabled || !this.triggerList){
+ if(this.disabled){
return;
}
setValue : function(v)
{
var d = this.getDialCode(v);
- this.value = v;
- if(!d || d.length == 0) {
+ //invalid dial code
+ if(v.length == 0 || !d || d.length == 0) {
if(this.rendered){
this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
}
return;
}
+ //valid dial code
this.setFlagClass(this.dialCodeMapping[d].iso2);
this.setDialCode(d);
this.inputEl().dom.value = v.replace('+'+d,'');
+ this.hiddenEl().dom.value = this.getValue();
+
+ this.validate();
},
getDialCode : function(v = '')
}
var dialCode = "";
- // only interested in international numbers (starting with a plus)
if (v.charAt(0) != "+") {
return false;
}
return dialCode;
},
- validate : function()
+ reset : function()
{
- //
- return false;
+ this.setValue(this.defaultDialCode);
+ this.validate();
+ },
+
+ hiddenEl : function()
+ {
+ return this.el.select('input.hidden-tel-input',true).first();
+ },
+
+ onKeyUp : function(e){
+
+ var k = e.getKey();
+ var c = e.getCharCode();
+
+ if(
+ (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
+ this.allowed.indexOf(String.fromCharCode(c)) === -1
+ ){
+ e.stopEvent();
+ }
+
+ // if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+ // return;
+ // }
+ if(this.allowed.indexOf(String.fromCharCode(c)) === -1){
+ e.stopEvent();
+ }
+
+ this.setValue(this.getValue());
+ }
+
+});
+/**
+ * @class Roo.bootstrap.MoneyField
+ * @extends Roo.bootstrap.ComboBox
+ * Bootstrap MoneyField class
+ *
+ * @constructor
+ * Create a new MoneyField.
+ * @param {Object} config Configuration options
+ */
+
+Roo.bootstrap.MoneyField = function(config) {
+
+ Roo.bootstrap.MoneyField.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
+
+ /**
+ * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
+ */
+ decimalSeparator : ".",
+
+ inputlg : 9,
+ inputmd : 9,
+ inputsm : 9,
+ inputxs : 6,
+
+ store : false,
+
+ getAutoCreate : function()
+ {
+ var align = this.labelAlign || this.parentLabelAlign();
+
+ var id = Roo.id();
+
+ var cfg = {
+ cls: 'form-group',
+ cn: []
+ };
+
+ var input = {
+ tag: 'input',
+ id : id,
+ cls : 'form-control roo-money-amount-input',
+ autocomplete: 'new-password'
+ };
+
+ if (this.name) {
+ input.name = this.name;
+ }
+
+ if (this.disabled) {
+ input.disabled = true;
+ }
+
+ var clg = 12 - this.inputlg;
+ var cmd = 12 - this.inputmd;
+ var csm = 12 - this.inputsm;
+ var cxs = 12 - this.inputxs;
+
+ var container = {
+ tag : 'div',
+ cls : 'row roo-money-field',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
+ cn : [
+ {
+ tag : 'div',
+ cls: 'roo-select2-container input-group',
+ cn: [
+ {
+ tag : 'input',
+ cls : 'form-control roo-money-currency-input',
+ autocomplete: 'new-password'
+ },
+ {
+ tag :'span',
+ cls : 'input-group-addon',
+ cn : [
+ {
+ tag: 'span',
+ cls: 'caret'
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs,
+ cn : [
+ {
+ tag: 'div',
+ cls: this.hasFeedback ? 'has-feedback' : '',
+ cn: [
+ input
+ ]
+ }
+ ]
+ }
+ ]
+
+ };
+
+ if (this.fieldLabel.length) {
+ var indicator = {
+ tag: 'i',
+ tooltip: 'This field is required'
+ };
+
+ var label = {
+ tag: 'label',
+ 'for': id,
+ cls: 'control-label',
+ cn: []
+ };
+
+ var label_text = {
+ tag: 'span',
+ html: this.fieldLabel
+ };
+
+ indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
+ label.cn = [
+ indicator,
+ label_text
+ ];
+
+ if(this.indicatorpos == 'right') {
+ indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
+ label.cn = [
+ label_text,
+ indicator
+ ];
+ }
+
+ if(align == 'left') {
+ container = {
+ tag: 'div',
+ cn: [
+ container
+ ]
+ };
+
+ if(this.labelWidth > 12){
+ label.style = "width: " + this.labelWidth + 'px';
+ }
+ if(this.labelWidth < 13 && this.labelmd == 0){
+ this.labelmd = this.labelWidth;
+ }
+ if(this.labellg > 0){
+ label.cls += ' col-lg-' + this.labellg;
+ input.cls += ' col-lg-' + (12 - this.labellg);
+ }
+ if(this.labelmd > 0){
+ label.cls += ' col-md-' + this.labelmd;
+ container.cls += ' col-md-' + (12 - this.labelmd);
+ }
+ if(this.labelsm > 0){
+ label.cls += ' col-sm-' + this.labelsm;
+ container.cls += ' col-sm-' + (12 - this.labelsm);
+ }
+ if(this.labelxs > 0){
+ label.cls += ' col-xs-' + this.labelxs;
+ container.cls += ' col-xs-' + (12 - this.labelxs);
+ }
+ }
+ }
+
+ cfg.cn = [
+ label,
+ container
+ ];
+
+ var settings = this;
+
+ ['xs','sm','md','lg'].map(function(size){
+ if (settings[size]) {
+ cfg.cls += ' col-' + size + '-' + settings[size];
+ }
+ });
+
+ return cfg;
+
+ },
+
+ initEvents : function()
+ {
+ this.initCurrencyEvent();
+
+ this.initNumberEvent();
+
+ },
+
+ initCurrencyEvent : function()
+ {
+ if (!this.store) {
+ throw "can not find store for combo";
+ }
+
+ this.store = Roo.factory(this.store, Roo.data);
+ this.store.parent = this;
+
+ this.createList();
+
+ this.indicator = this.indicatorEl();
+
+ this.triggerEl = this.el.select('.input-group-addon', true).first();
+
+ this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true });
+
+ this.currencyEl = this.el.select('.roo-money-currency-input', true).first();
+
+ this.amountEl = this.el.select('.roo-money-amount-input', true).first();
+
+ var _this = this;
+
+ (function(){
+ var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
+ _this.list.setWidth(lw);
+ }).defer(100);
+
+ this.list.on('mouseover', this.onViewOver, this);
+ this.list.on('mousemove', this.onViewMove, this);
+ this.list.on('scroll', this.onViewScroll, this);
+
+ if(!this.tpl){
+ this.tpl = '<li><a href="#">{' + this.currencyField + '}</a></li>';
+ }
+
+ this.view = new Roo.View(this.list, this.tpl, {
+ singleSelect:true, store: this.store, selectedClass: this.selectedClass
+ });
+
+ this.view.on('click', this.onViewClick, this);
+
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
+
+ this.keyNav = new Roo.KeyNav(this.currencyEl, {
+ "up" : function(e){
+ this.inKeyMode = true;
+ this.selectPrev();
+ },
+
+ "down" : function(e){
+ if(!this.isExpanded()){
+ this.onTriggerClick();
+ }else{
+ this.inKeyMode = true;
+ this.selectNext();
+ }
+ },
+
+ "enter" : function(e){
+ this.collapse();
+
+ if(this.fireEvent("specialkey", this, e)){
+ this.onViewClick(false);
+ }
+
+ return true;
+ },
+
+ "esc" : function(e){
+ this.collapse();
+ },
+
+ "tab" : function(e){
+ this.collapse();
+
+ if(this.fireEvent("specialkey", this, e)){
+ this.onViewClick(false);
+ }
+
+ return true;
+ },
+
+ scope : this,
+
+ doRelay : function(foo, bar, hname){
+ if(hname == 'down' || this.scope.isExpanded()){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ }
+ return true;
+ },
+
+ forceKeyDown: true
+ });
+
+ },
+
+ initNumberEvent : function(e)
+ {
+ var allowed = "0123456789";
+
+ if(this.allowDecimals){
+ allowed += this.decimalSeparator;
}
+
+ if(this.allowNegative){
+ allowed += "-";
+ }
+
+ this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
+
+ var keyPress = function(e){
+
+ var k = e.getKey();
+
+ var c = e.getCharCode();
+
+ if(
+ (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
+ allowed.indexOf(String.fromCharCode(c)) === -1
+ ){
+ e.stopEvent();
+ return;
+ }
+
+ if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+ return;
+ }
+
+ if(allowed.indexOf(String.fromCharCode(c)) === -1){
+ e.stopEvent();
+ }
+ };
+
+ this.amountEl.on("keypress", keyPress, this);
+
+ },
+
+ onTriggerClick : function(e)
+ {
+ if(this.disabled){
+ return;
+ }
+
+ this.page = 0;
+ this.loadNext = false;
+
+ if(this.isExpanded()){
+ this.collapse();
+ return;
+ }
+
+ this.hasFocus = true;
+
+ if(this.triggerAction == 'all') {
+ this.doQuery(this.allQuery, true);
+ return;
+ }
+
+ this.doQuery(this.getRawValue());
+ },
+
+ restrictHeight : function()
+ {
+ this.list.alignTo(this.currencyEl, this.listAlign);
+ this.list.alignTo(this.currencyEl, this.listAlign);
+ },
+
+ onViewClick : function(view, doFocus, el, e)
+ {
+ var index = this.view.getSelectedIndexes()[0];
+
+ var r = this.store.getAt(index);
+
+ if(r){
+ this.onSelect(r, index);
+ }
+ },
+
+ setFromData : function(o)
+ {
+ var currency = '';
+
+ this.lastData = o;
+
+ if (this.currencyField) {
+ currency = !o || typeof(o[this.currencyField]) == 'undefined' ? '' : o[this.currencyField];
+ } else {
+ Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
+ }
+
+ this.lastSelectionText = currency;
+ this.currencyValue = currency;
+
+ this.setCurrency(currency);
+
+
+ },
+
+ setCurrency : function(v)
+ {
+ this.currencyValue = v;
+
+ if(this.rendered){
+ this.currencyEl.dom.value = (v === null || v === undefined ? '' : v);
+ this.validate();
+ }
+ },
+
+ validate : function()
+ {
+ return;
+
+ var v = this.getRawValue();
+
+ if(this.multiple){
+ v = this.getValue();
+ }
+
+ if(this.disabled || this.allowBlank || v.length){
+ this.markValid();
+ return true;
+ }
+
+ this.markInvalid();
+ return false;
+ },
+
+ parseValue : function(value)
+ {
+ value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+ return isNaN(value) ? '' : value;
+ },
+
+ fixPrecision : function(value)
+ {
+ var nan = isNaN(value);
+
+ if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
+ return nan ? '' : value;
+ }
+
+ return parseFloat(value).toFixed(this.decimalPrecision);
+ },
+
+ decimalPrecisionFcn : function(v)
+ {
+ return Math.floor(v);
+ },
+
+ setValue : function(v)
+ {
+ v = this.fixPrecision(v);
+ Roo.bootstrap.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
+ }
});
\ No newline at end of file
projects / roojs1 / blobdiff