diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js index 771fdc372..499944174 100644 --- a/build/js/intlTelInput.js +++ b/build/js/intlTelInput.js @@ -19,8 +19,8 @@ author: Jack O'Connor (http://jackocnr.com) var pluginName = "intlTelInput", id = 1, // give each instance it's own id for namespaced event handling defaults = { - // don't display the +1 prefix when America is selected - americaMode: false, + // don't insert international dial codes + nationalMode: false, // if there is just a dial code in the input: remove it on blur, and re-add it on focus autoHideDialCode: true, // default country @@ -201,8 +201,8 @@ Plugin.prototype = { // initialise the main event listeners: input keyup, and click selected flag _initListeners: function() { var that = this; - // auto hide dial code option - if (this.options.autoHideDialCode) { + // auto hide dial code option (ignore if in national mode) + if (this.options.autoHideDialCode && !this.options.nationalMode) { this._initAutoHideDialCode(); } // update flag on keyup (by extracting the dial code from the input value). @@ -414,8 +414,8 @@ Plugin.prototype = { }, // reset the input value to just a dial code _resetToDialCode: function(dialCode) { - // if the dialCode is for America, and americaMode is enabled, then don't insert the dial code - var value = dialCode == "1" && this.options.americaMode ? "" : "+" + dialCode + this.options.dialCodeDelimiter; + // if nationalMode is enabled then don't insert the dial code + var value = this.options.nationalMode ? "" : "+" + dialCode + this.options.dialCodeDelimiter; this.telInput.val(value); }, // remove highlighting from other list items and highlight the given item @@ -452,9 +452,10 @@ Plugin.prototype = { this._selectFlag(countryCode); this._closeDropdown(); // update input value - var newNumber = this._updateNumber("+" + listItem.attr("data-dial-code")); - this.telInput.val(newNumber); - this.telInput.trigger("change"); + if (!this.options.nationalMode) { + this._updateNumber("+" + listItem.attr("data-dial-code")); + this.telInput.trigger("change"); + } // focus the input this._focus(); }, @@ -498,11 +499,7 @@ Plugin.prototype = { var existingNumber = inputVal && inputVal.substr(0, 1) != "+" ? $.trim(inputVal) : ""; newNumber = newDialCode + this.options.dialCodeDelimiter + existingNumber; } - // if americaMode is enabled, we dont display the dial code for american numbers - if (this.options.americaMode && newNumber.substring(0, 3) == "+1" + this.options.dialCodeDelimiter) { - newNumber = newNumber.substring(3); - } - return newNumber; + this.telInput.val(newNumber); }, // try and extract a valid international dial code from a full telephone number // Note: returns the raw string inc plus character and any whitespace/dots etc diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js index 783edcca4..82ee28424 100644 --- a/build/js/intlTelInput.min.js +++ b/build/js/intlTelInput.min.js @@ -17,6 +17,6 @@ author: Jack O'Connor (http://jackocnr.com) }(function ($, window, document, undefined) { "use strict"; -function Plugin(a,b){this.element=a,this.options=$.extend({},defaults,b),this._defaults=defaults,this.ns="."+pluginName+id++,this._name=pluginName,this.init()}var pluginName="intlTelInput",id=1,defaults={americaMode:!1,autoHideDialCode:!0,defaultCountry:"",dialCodeDelimiter:" ",defaultStyling:"inside",onlyCountries:[],preferredCountries:["us","gb"],validationScript:""},keys={UP:38,DOWN:40,ENTER:13,ESCAPE:27,PLUS:43,A:65,Z:90};Plugin.prototype={init:function(){this._processCountryData(),this._generateMarkup(),this._setInitialState(),this._initListeners()},_processCountryData:function(){this._setGlobalIntlData(),this._setPreferredCountries(),this._setDefaultCountry()},_setGlobalIntlData:function(){var a=this;if(this.options.onlyCountries.length){var b=[],c={};$.each(this.options.onlyCountries,function(d,e){var f=a._getCountryData(e,!0);if(f){b.push(f);var g=f.dialCode;c[g]?c[g].push(e):c[g]=[e]}}),window.intlData={countries:b,countryCodes:c}}else window.intlData=intlDataFull},_setPreferredCountries:function(){var a=this;this.preferredCountries=[],$.each(this.options.preferredCountries,function(b,c){var d=a._getCountryData(c,!1);d&&a.preferredCountries.push(d)})},_setDefaultCountry:function(){this.defaultCountry=this.options.defaultCountry?this._getCountryData(this.options.defaultCountry,!1):this.preferredCountries.length?this.preferredCountries[0]:intlData.countries[0]},_generateMarkup:function(){this.telInput=$(this.element);var a="intl-tel-input";"none"!=this.options.defaultStyling&&(a+=" pretty "+this.options.defaultStyling),this.telInput.wrap($("
",{"class":a}));var b=$("
",{"class":"flag-dropdown"}).insertAfter(this.telInput),c=$("
",{"class":"selected-flag"}).appendTo(b);this.selectedFlagInner=$("
",{"class":"flag"}).appendTo(c),$("
",{"class":"arrow"}).appendTo(this.selectedFlagInner),this.countryList=$("
    ",{"class":"country-list hide"}).appendTo(b),this.preferredCountries.length&&(this._appendListItems(this.preferredCountries,"preferred"),$("
  • ",{"class":"divider"}).appendTo(this.countryList)),this._appendListItems(intlData.countries,""),this.countryListItems=this.countryList.children(".country")},_appendListItems:function(a,b){var c="";$.each(a,function(a,d){c+="
  • ",c+="
    ",c+=""+d.name+"",c+="+"+d.dialCode+"",c+="
    • "}),this.countryList.append(c)},_setInitialState:function(){this.telInput.val()?this._updateFlagFromInputVal():(this._selectFlag(this.defaultCountry.iso2),this.options.autoHideDialCode||this._resetToDialCode(this.defaultCountry.dialCode))},_initListeners:function(){var a=this;this.options.autoHideDialCode&&this._initAutoHideDialCode(),this.telInput.on("keyup"+this.ns,function(){a._updateFlagFromInputVal()});var b=this.selectedFlagInner.parent();b.on("click"+this.ns,function(){a.countryList.hasClass("hide")&&!a.telInput.prop("disabled")&&a._showDropdown()}),this.options.validationScript&&$(window).load(function(){var b=document.createElement("script");b.type="text/javascript",b.src=a.options.validationScript,document.body.appendChild(b)})},_initAutoHideDialCode:function(){var a=this;this.telInput.on("mousedown"+this.ns,function(b){a.telInput.is(":focus")||a.telInput.val()||(b.preventDefault(),a._focus())}),this.telInput.on("focus"+this.ns,function(){if(!$.trim(a.telInput.val())){var b=a.getSelectedCountryData();a._resetToDialCode(b.dialCode),a.telInput.one("keypress"+a.ns,function(b){b.which==keys.PLUS&&a.telInput.val("")})}}),this.telInput.on("blur"+this.ns,function(){var b=$.trim(a.telInput.val());b&&$.trim(a._getDialCode(b)+a.options.dialCodeDelimiter)==b&&a.telInput.val(""),a.telInput.off("keypress"+a.ns)})},_focus:function(){this.telInput.focus();var a=this.telInput[0];if(a.setSelectionRange){var b=this.telInput.val().length;a.setSelectionRange(b,b)}},_showDropdown:function(){this._setDropdownPosition();var a=this.countryList.children(".active");this._highlightListItem(a),this.countryList.removeClass("hide"),this._scrollTo(a),this._bindDropdownListeners(),this.selectedFlagInner.children(".arrow").addClass("up")},_setDropdownPosition:function(){var a=this.telInput.offset().top,b=$(window).scrollTop(),c=this.countryList.outerHeight(),d=a+this.telInput.outerHeight()+cb,f=!d&&e?"-"+(c-1)+"px":"";this.countryList.css("top",f)},_bindDropdownListeners:function(){var a=this;this.countryList.on("mouseover"+this.ns,".country",function(){a._highlightListItem($(this))}),this.countryList.on("click"+this.ns,".country",function(){a._selectListItem($(this))});var b=!0;$("html").on("click"+this.ns,function(){b||a._closeDropdown(),b=!1}),$(document).on("keydown"+this.ns,function(b){b.preventDefault(),b.which==keys.UP||b.which==keys.DOWN?a._handleUpDownKey(b.which):b.which==keys.ENTER?a._handleEnterKey():b.which==keys.ESCAPE?a._closeDropdown():b.which>=keys.A&&b.which<=keys.Z&&a._handleLetterKey(b.which)})},_handleUpDownKey:function(a){var b=this.countryList.children(".highlight").first(),c=a==keys.UP?b.prev():b.next();c.length&&(c.hasClass("divider")&&(c=a==keys.UP?c.prev():c.next()),this._highlightListItem(c),this._scrollTo(c))},_handleEnterKey:function(){var a=this.countryList.children(".highlight").first();a.length&&this._selectListItem(a)},_handleLetterKey:function(a){var b=String.fromCharCode(a),c=this.countryListItems.filter(function(){return $(this).text().charAt(0)==b&&!$(this).hasClass("preferred")});if(c.length){var d,e=c.filter(".highlight").first();d=e&&e.next()&&e.next().text().charAt(0)==b?e.next():c.first(),this._highlightListItem(d),this._scrollTo(d)}},_updateFlagFromInputVal:function(){var a=this,b=this._getDialCode(this.telInput.val());if(b){var c=intlData.countryCodes[b.replace(/\D/g,"")],d=!1;$.each(c,function(b,c){a.selectedFlagInner.hasClass(c)&&(d=!0)}),d||this._selectFlag(c[0])}},_resetToDialCode:function(a){var b="1"==a&&this.options.americaMode?"":"+"+a+this.options.dialCodeDelimiter;this.telInput.val(b)},_highlightListItem:function(a){this.countryListItems.removeClass("highlight"),a.addClass("highlight")},_getCountryData:function(a,b){for(var c=b?intlDataFull.countries:intlData.countries,d=0;dg)b.scrollTop(i);else if(h>e){var j=c-f;b.scrollTop(i-j)}},_updateNumber:function(a){var b,c=this.telInput.val(),d=this._getDialCode(c);if(d.length>1)b=c.replace(d,a),c==d&&(b+=this.options.dialCodeDelimiter);else{var e=c&&"+"!=c.substr(0,1)?$.trim(c):"";b=a+this.options.dialCodeDelimiter+e}return this.options.americaMode&&b.substring(0,3)=="+1"+this.options.dialCodeDelimiter&&(b=b.substring(3)),b},_getDialCode:function(a){var b="";if(a=$.trim(a),"+"==a.charAt(0))for(var c="",d=0;d",{"class":a}));var b=$("
    ",{"class":"flag-dropdown"}).insertAfter(this.telInput),c=$("
    ",{"class":"selected-flag"}).appendTo(b);this.selectedFlagInner=$("
    ",{"class":"flag"}).appendTo(c),$("
    ",{"class":"arrow"}).appendTo(this.selectedFlagInner),this.countryList=$("
      ",{"class":"country-list hide"}).appendTo(b),this.preferredCountries.length&&(this._appendListItems(this.preferredCountries,"preferred"),$("
    • ",{"class":"divider"}).appendTo(this.countryList)),this._appendListItems(intlData.countries,""),this.countryListItems=this.countryList.children(".country")},_appendListItems:function(a,b){var c="";$.each(a,function(a,d){c+="
    • ",c+="
      ",c+=""+d.name+"",c+="+"+d.dialCode+"",c+="
      • "}),this.countryList.append(c)},_setInitialState:function(){this.telInput.val()?this._updateFlagFromInputVal():(this._selectFlag(this.defaultCountry.iso2),this.options.autoHideDialCode||this._resetToDialCode(this.defaultCountry.dialCode))},_initListeners:function(){var a=this;this.options.autoHideDialCode&&!this.options.nationalMode&&this._initAutoHideDialCode(),this.telInput.on("keyup"+this.ns,function(){a._updateFlagFromInputVal()});var b=this.selectedFlagInner.parent();b.on("click"+this.ns,function(){a.countryList.hasClass("hide")&&!a.telInput.prop("disabled")&&a._showDropdown()}),this.options.validationScript&&$(window).load(function(){var b=document.createElement("script");b.type="text/javascript",b.src=a.options.validationScript,document.body.appendChild(b)})},_initAutoHideDialCode:function(){var a=this;this.telInput.on("mousedown"+this.ns,function(b){a.telInput.is(":focus")||a.telInput.val()||(b.preventDefault(),a._focus())}),this.telInput.on("focus"+this.ns,function(){if(!$.trim(a.telInput.val())){var b=a.getSelectedCountryData();a._resetToDialCode(b.dialCode),a.telInput.one("keypress"+a.ns,function(b){b.which==keys.PLUS&&a.telInput.val("")})}}),this.telInput.on("blur"+this.ns,function(){var b=$.trim(a.telInput.val());b&&$.trim(a._getDialCode(b)+a.options.dialCodeDelimiter)==b&&a.telInput.val(""),a.telInput.off("keypress"+a.ns)})},_focus:function(){this.telInput.focus();var a=this.telInput[0];if(a.setSelectionRange){var b=this.telInput.val().length;a.setSelectionRange(b,b)}},_showDropdown:function(){this._setDropdownPosition();var a=this.countryList.children(".active");this._highlightListItem(a),this.countryList.removeClass("hide"),this._scrollTo(a),this._bindDropdownListeners(),this.selectedFlagInner.children(".arrow").addClass("up")},_setDropdownPosition:function(){var a=this.telInput.offset().top,b=$(window).scrollTop(),c=this.countryList.outerHeight(),d=a+this.telInput.outerHeight()+cb,f=!d&&e?"-"+(c-1)+"px":"";this.countryList.css("top",f)},_bindDropdownListeners:function(){var a=this;this.countryList.on("mouseover"+this.ns,".country",function(){a._highlightListItem($(this))}),this.countryList.on("click"+this.ns,".country",function(){a._selectListItem($(this))});var b=!0;$("html").on("click"+this.ns,function(){b||a._closeDropdown(),b=!1}),$(document).on("keydown"+this.ns,function(b){b.preventDefault(),b.which==keys.UP||b.which==keys.DOWN?a._handleUpDownKey(b.which):b.which==keys.ENTER?a._handleEnterKey():b.which==keys.ESCAPE?a._closeDropdown():b.which>=keys.A&&b.which<=keys.Z&&a._handleLetterKey(b.which)})},_handleUpDownKey:function(a){var b=this.countryList.children(".highlight").first(),c=a==keys.UP?b.prev():b.next();c.length&&(c.hasClass("divider")&&(c=a==keys.UP?c.prev():c.next()),this._highlightListItem(c),this._scrollTo(c))},_handleEnterKey:function(){var a=this.countryList.children(".highlight").first();a.length&&this._selectListItem(a)},_handleLetterKey:function(a){var b=String.fromCharCode(a),c=this.countryListItems.filter(function(){return $(this).text().charAt(0)==b&&!$(this).hasClass("preferred")});if(c.length){var d,e=c.filter(".highlight").first();d=e&&e.next()&&e.next().text().charAt(0)==b?e.next():c.first(),this._highlightListItem(d),this._scrollTo(d)}},_updateFlagFromInputVal:function(){var a=this,b=this._getDialCode(this.telInput.val());if(b){var c=intlData.countryCodes[b.replace(/\D/g,"")],d=!1;$.each(c,function(b,c){a.selectedFlagInner.hasClass(c)&&(d=!0)}),d||this._selectFlag(c[0])}},_resetToDialCode:function(a){var b=this.options.nationalMode?"":"+"+a+this.options.dialCodeDelimiter;this.telInput.val(b)},_highlightListItem:function(a){this.countryListItems.removeClass("highlight"),a.addClass("highlight")},_getCountryData:function(a,b){for(var c=b?intlDataFull.countries:intlData.countries,d=0;dg)b.scrollTop(i);else if(h>e){var j=c-f;b.scrollTop(i-j)}},_updateNumber:function(a){var b,c=this.telInput.val(),d=this._getDialCode(c);if(d.length>1)b=c.replace(d,a),c==d&&(b+=this.options.dialCodeDelimiter);else{var e=c&&"+"!=c.substr(0,1)?$.trim(c):"";b=a+this.options.dialCodeDelimiter+e}this.telInput.val(b)},_getDialCode:function(a){var b="";if(a=$.trim(a),"+"==a.charAt(0))for(var c="",d=0;d - - + + diff --git a/src/js/intlTelInput.js b/src/js/intlTelInput.js index a7a6893c3..513e3e086 100644 --- a/src/js/intlTelInput.js +++ b/src/js/intlTelInput.js @@ -2,8 +2,8 @@ var pluginName = "intlTelInput", id = 1, // give each instance it's own id for namespaced event handling defaults = { - // don't display the +1 prefix when America is selected - americaMode: false, + // don't insert international dial codes + nationalMode: false, // if there is just a dial code in the input: remove it on blur, and re-add it on focus autoHideDialCode: true, // default country @@ -225,8 +225,8 @@ _initListeners: function() { var that = this; - // auto hide dial code option - if (this.options.autoHideDialCode) { + // auto hide dial code option (ignore if in national mode) + if (this.options.autoHideDialCode && !this.options.nationalMode) { this._initAutoHideDialCode(); } @@ -478,7 +478,7 @@ alreadySelected = true; } }); - + if (!alreadySelected) { this._selectFlag(countryCodes[0]); } @@ -488,8 +488,8 @@ // reset the input value to just a dial code _resetToDialCode: function(dialCode) { - // if the dialCode is for America, and americaMode is enabled, then don't insert the dial code - var value = (dialCode == "1" && this.options.americaMode) ? "" : "+" + dialCode + this.options.dialCodeDelimiter; + // if nationalMode is enabled then don't insert the dial code + var value = (this.options.nationalMode) ? "" : "+" + dialCode + this.options.dialCodeDelimiter; this.telInput.val(value); }, @@ -537,9 +537,10 @@ this._closeDropdown(); // update input value - var newNumber = this._updateNumber("+" + listItem.attr("data-dial-code")); - this.telInput.val(newNumber); - this.telInput.trigger("change"); + if (!this.options.nationalMode) { + this._updateNumber("+" + listItem.attr("data-dial-code")); + this.telInput.trigger("change"); + } // focus the input this._focus(); @@ -604,11 +605,7 @@ newNumber = newDialCode + this.options.dialCodeDelimiter + existingNumber; } - // if americaMode is enabled, we dont display the dial code for american numbers - if (this.options.americaMode && newNumber.substring(0, 3) == "+1"+this.options.dialCodeDelimiter) { - newNumber = newNumber.substring(3); - } - return newNumber; + this.telInput.val(newNumber); }, diff --git a/src/spec/tests/options/americaMode.js b/src/spec/tests/options/americaMode.js deleted file mode 100644 index 16764596b..000000000 --- a/src/spec/tests/options/americaMode.js +++ /dev/null @@ -1,48 +0,0 @@ -"use strict"; - -describe("init plugin with americaMode set to true", function() { - - beforeEach(function() { - input = $(""); - input.intlTelInput({ - americaMode: true - }); - }); - - afterEach(function() { - input = null; - }); - - it("defaults to no dial code", function() { - expect(getInputVal()).toEqual(""); - }); - - - - describe("selecting another country", function() { - - beforeEach(function() { - selectFlag("gb"); - }); - - it("does update the dial code", function() { - expect(getInputVal()).toEqual("+44"); - }); - - - - describe("selecting america again", function() { - - beforeEach(function() { - selectFlag("us"); - }); - - it("does not insert the dial code", function() { - expect(getInputVal()).toEqual(""); - }); - - }); - - }); - -}); \ No newline at end of file diff --git a/src/spec/tests/options/autoHideDialCode.js b/src/spec/tests/options/autoHideDialCode.js index 51181ac24..9acc922aa 100644 --- a/src/spec/tests/options/autoHideDialCode.js +++ b/src/spec/tests/options/autoHideDialCode.js @@ -19,6 +19,7 @@ describe("testing autoHideDialCode option", function() { input.intlTelInput({ autoHideDialCode: true }); + // must be in DOM for focus to work getParentElement().appendTo($("body")); }); diff --git a/src/spec/tests/options/defaultCountry.js b/src/spec/tests/options/defaultCountry.js index db3c834de..d00d2a405 100644 --- a/src/spec/tests/options/defaultCountry.js +++ b/src/spec/tests/options/defaultCountry.js @@ -15,26 +15,12 @@ describe("init plugin with a default country", function() { input = null; }); - it("defaults to that country", function() { + it("sets the selected flag correctly", function() { expect(getSelectedFlagElement()).toHaveClass(defaultCountry); }); - - describe("typing a number with a different dial code", function() { - - beforeEach(function() { - input.val("+44 1234567").keyup(); - }); - - it("updates the selected flag", function() { - expect(getSelectedFlagElement()).toHaveClass("gb"); - }); - - it("clearing the input again defaults to the right flag", function() { - input.val("").keyup(); - expect(getSelectedFlagElement()).toHaveClass(defaultCountry); - }); - + it("sets the active list item correctly", function() { + expect(getActiveListItem().attr("data-country-code")).toEqual(defaultCountry); }); }); \ No newline at end of file diff --git a/src/spec/tests/options/nationalMode.js b/src/spec/tests/options/nationalMode.js new file mode 100644 index 000000000..5bba1f4d7 --- /dev/null +++ b/src/spec/tests/options/nationalMode.js @@ -0,0 +1,38 @@ +"use strict"; + +describe("init plugin with nationalMode set to true", function() { + + beforeEach(function() { + input = $(""); + input.intlTelInput({ + nationalMode: true + }); + // must be in DOM for focus to work + getParentElement().appendTo($("body")); + }); + + afterEach(function() { + getParentElement().remove(); + input = null; + }); + + it("defaults to no dial code", function() { + expect(getInputVal()).toEqual(""); + }); + + it("focusing the input does not insert the dial code", function() { + input.focus(); + expect(getInputVal()).toEqual(""); + }); + + it("selecting another country does not insert the dial code", function() { + selectFlag("gb"); + expect(getInputVal()).toEqual(""); + }); + + it("but typing a dial code does still update the selected country", function() { + input.val("+44 1234567").keyup(); + expect(getSelectedFlagElement()).toHaveClass("gb"); + }); + +}); \ No newline at end of file diff --git a/src/spec/tests/vanilla/core.js b/src/spec/tests/vanilla/core.js index ba605ffe2..2ca5a204b 100644 --- a/src/spec/tests/vanilla/core.js +++ b/src/spec/tests/vanilla/core.js @@ -72,9 +72,9 @@ describe("init vanilla plugin", function() { expect(getSelectedFlagElement()).toHaveClass("gb"); }); - it("clearing the input again defaults to the right flag", function() { + it("clearing the input again does not change the selected flag", function() { input.val("").keyup(); - expect(getSelectedFlagElement()).toHaveClass("us"); + expect(getSelectedFlagElement()).toHaveClass("gb"); }); });