+++ /dev/null
-/**
-* This script refer to:
-* Title: International Telephone Input
-* Author: Jack O'Connor
-* Code version: v12.1.12
-* 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, {
- /**
- * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
- */
- listWidth: undefined,
-
- selectedClass: 'active',
-
- invalidClass : "has-warning",
-
- validClass: 'has-success',
-
- allowed: '0123456789',
-
- max_length: 15,
-
- /**
- * @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 data = Roo.bootstrap.PhoneInputData();
- 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] = {
- name: c[0],
- iso2: c[1],
- dialCode: c[2],
- priority: c[3] || 0,
- areaCodes: c[4] || null
- };
- this.dialCodeMapping[c[2]] = {
- name: c[0],
- iso2: c[1],
- priority: c[3] || 0,
- areaCodes: c[4] || null
- };
- }
-
- var cfg = {
- cls: 'form-group',
- cn: []
- };
-
- var input = {
- tag: 'input',
- id : id,
- // type: 'number', -- do not use number - we get the flaky up/down arrows.
- maxlength: this.max_length,
- cls : 'form-control tel-input',
- autocomplete: 'new-password'
- };
-
- var hiddenInput = {
- tag: 'input',
- type: 'hidden',
- cls: 'hidden-tel-input'
- };
-
- if (this.name) {
- hiddenInput.name = this.name;
- }
-
- if (this.disabled) {
- input.disabled = true;
- }
-
- var flag_container = {
- tag: 'div',
- cls: 'flag-box',
- cn: [
- {
- tag: 'div',
- cls: 'flag'
- },
- {
- tag: 'div',
- cls: 'caret'
- }
- ]
- };
-
- var box = {
- tag: 'div',
- cls: this.hasFeedback ? 'has-feedback' : '',
- cn: [
- hiddenInput,
- input,
- {
- tag: 'input',
- cls: 'dial-code-holder',
- disabled: true
- }
- ]
- };
-
- var container = {
- cls: 'roo-select2-container input-group',
- cn: [
- flag_container,
- box
- ]
- };
-
- 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];
- }
- });
-
- this.store = new Roo.data.Store({
- proxy : new Roo.data.MemoryProxy({}),
- reader : new Roo.data.JsonReader({
- fields : [
- {
- 'name' : 'name',
- 'type' : 'string'
- },
- {
- 'name' : 'iso2',
- 'type' : 'string'
- },
- {
- 'name' : 'dialCode',
- 'type' : 'string'
- },
- {
- 'name' : 'priority',
- 'type' : 'string'
- },
- {
- 'name' : 'areaCodes',
- 'type' : 'string'
- }
- ]
- })
- });
-
- if(!this.preferedCountries) {
- this.preferedCountries = [
- 'hk',
- 'gb',
- 'us'
- ];
- }
-
- var p = this.preferedCountries.reverse();
-
- if(p) {
- for (var i = 0; i < p.length; i++) {
- for (var j = 0; j < this.allCountries.length; j++) {
- if(this.allCountries[j].iso2 == p[i]) {
- var t = this.allCountries[j];
- this.allCountries.splice(j,1);
- this.allCountries.unshift(t);
- }
- }
- }
- }
-
- this.store.proxy.data = {
- success: true,
- data: this.allCountries
- };
-
- return cfg;
- },
-
- initEvents : function()
- {
- this.createList();
- Roo.bootstrap.PhoneInput.superclass.initEvents.call(this);
-
- this.indicator = this.indicatorEl();
- this.flag = this.flagEl();
- this.dialCodeHolder = this.dialCodeHolderEl();
-
- this.trigger = this.el.select('div.flag-box',true).first();
- this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
-
- 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.inputEl().on("keyup", this.onKeyUp, this);
- this.inputEl().on("keypress", this.onKeyPress, this);
-
- this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></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.setValue(this.defaultDialCode);
- },
-
- onTriggerClick : function(e)
- {
- Roo.log('trigger click');
- if(this.disabled){
- return;
- }
-
- if(this.isExpanded()){
- this.collapse();
- this.hasFocus = false;
- }else {
- this.store.load({});
- this.hasFocus = true;
- this.expand();
- }
- },
-
- isExpanded : function()
- {
- return this.list.isVisible();
- },
-
- collapse : function()
- {
- if(!this.isExpanded()){
- return;
- }
- this.list.hide();
- Roo.get(document).un('mousedown', this.collapseIf, this);
- Roo.get(document).un('mousewheel', this.collapseIf, this);
- this.fireEvent('collapse', this);
- this.validate();
- },
-
- expand : function()
- {
- Roo.log('expand');
-
- if(this.isExpanded() || !this.hasFocus){
- return;
- }
-
- var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
- this.list.setWidth(lw);
-
- this.list.show();
- this.restrictHeight();
-
- Roo.get(document).on('mousedown', this.collapseIf, this);
- Roo.get(document).on('mousewheel', this.collapseIf, this);
-
- this.fireEvent('expand', this);
- },
-
- restrictHeight : function()
- {
- this.list.alignTo(this.inputEl(), this.listAlign);
- this.list.alignTo(this.inputEl(), this.listAlign);
- },
-
- onViewOver : function(e, t)
- {
- if(this.inKeyMode){
- return;
- }
- var item = this.view.findItemFromChild(t);
-
- if(item){
- var index = this.view.indexOf(item);
- this.select(index, false);
- }
- },
-
- // private
- onViewClick : function(view, doFocus, el, e)
- {
- var index = this.view.getSelectedIndexes()[0];
-
- var r = this.store.getAt(index);
-
- if(r){
- this.onSelect(r, index);
- }
- if(doFocus !== false && !this.blockFocus){
- this.inputEl().focus();
- }
- },
-
- onViewMove : function(e, t)
- {
- this.inKeyMode = false;
- },
-
- select : function(index, scrollIntoView)
- {
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.list.scrollChildIntoView(el, false);
- }
- }
- },
-
- createList : function()
- {
- this.list = Roo.get(document.body).createChild({
- tag: 'ul',
- cls: 'typeahead typeahead-long dropdown-menu tel-list',
- style: 'display:none'
- });
-
- this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- },
-
- collapseIf : function(e)
- {
- var in_combo = e.within(this.el);
- var in_list = e.within(this.list);
- var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
-
- if (in_combo || in_list || is_list) {
- return;
- }
- this.collapse();
- },
-
- onSelect : function(record, index)
- {
- if(this.fireEvent('beforeselect', this, record, index) !== false){
-
- this.setFlagClass(record.data.iso2);
- this.setDialCode(record.data.dialCode);
- this.hasFocus = false;
- this.collapse();
- this.fireEvent('select', this, record, index);
- }
- },
-
- flagEl : function()
- {
- var flag = this.el.select('div.flag',true).first();
- if(!flag){
- return false;
- }
- return flag;
- },
-
- dialCodeHolderEl : function()
- {
- var d = this.el.select('input.dial-code-holder',true).first();
- if(!d){
- return false;
- }
- return d;
- },
-
- setDialCode : function(v)
- {
- this.dialCodeHolder.dom.value = '+'+v;
- },
-
- setFlagClass : function(n)
- {
- this.flag.dom.className = 'flag '+n;
- },
-
- getValue : function()
- {
- var v = this.inputEl().getValue();
- if(this.dialCodeHolder) {
- v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
- }
- return v;
- },
-
- setValue : function(v)
- {
- var d = this.getDialCode(v);
-
- //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)
- {
- v = v || '';
-
- if (v.length == 0) {
- return this.dialCodeHolder.dom.value;
- }
-
- var dialCode = "";
- if (v.charAt(0) != "+") {
- return false;
- }
- var numericChars = "";
- for (var i = 1; i < v.length; i++) {
- var c = v.charAt(i);
- if (!isNaN(c)) {
- numericChars += c;
- if (this.dialCodeMapping[numericChars]) {
- dialCode = v.substr(1, i);
- }
- if (numericChars.length == 4) {
- break;
- }
- }
- }
- return dialCode;
- },
-
- reset : function()
- {
- this.setValue(this.defaultDialCode);
- this.validate();
- },
-
- hiddenEl : function()
- {
- return this.el.select('input.hidden-tel-input',true).first();
- },
-
- // after setting val
- onKeyUp : function(e){
- this.setValue(this.getValue());
- },
-
- onKeyPress : function(e){
- if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){
- e.stopEvent();
- }
- }
-
-});
\ No newline at end of file
projects / roojs1 / blobdiff