Skip to content

Commit

Permalink
Give preferred countries a custom ID
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackocnr
jackocnr committed Apr 18, 2020
1 parent 91b08e9 commit 097002e
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 16 deletions.
9 changes: 5 additions & 4 deletions build/js/intlTelInput-jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,7 @@
role: "listbox"
});
if (this.preferredCountries.length) {
this._appendListItems(this.preferredCountries, "iti__preferred");
this._appendListItems(this.preferredCountries, "iti__preferred", true);
this._createEl("li", {
"class": "iti__divider",
role: "separator",
Expand Down Expand Up @@ -422,15 +422,16 @@
}
}, {
key: "_appendListItems",
value: function _appendListItems(countries, className) {
value: function _appendListItems(countries, className, preferred) {
// we create so many DOM elements, it is faster to build a temp string
// and then add everything to the DOM in one go at the end
var tmp = "";
// for each country
for (var i = 0; i < countries.length; i++) {
var c = countries[i];
var idSuffix = preferred ? "-preferred" : "";
// open the list item
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-item-").concat(c.iso2, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
// add the flag
tmp += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
// and the country name and dial code
Expand Down Expand Up @@ -940,7 +941,7 @@
prevItem.setAttribute("aria-selected", "false");
}
if (countryCode) {
var nextItem = this.countryList.querySelector("#iti-item-".concat(countryCode));
var nextItem = this.countryList.querySelector("#iti-item-".concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-item-".concat(countryCode));
nextItem.setAttribute("aria-selected", "true");
nextItem.classList.add("iti__active");
this.activeItem = nextItem;
Expand Down
4 changes: 2 additions & 2 deletions build/js/intlTelInput-jquery.min.js
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions build/js/intlTelInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@
role: "listbox"
});
if (this.preferredCountries.length) {
this._appendListItems(this.preferredCountries, "iti__preferred");
this._appendListItems(this.preferredCountries, "iti__preferred", true);
this._createEl("li", {
"class": "iti__divider",
role: "separator",
Expand Down Expand Up @@ -417,15 +417,16 @@
}
}, {
key: "_appendListItems",
value: function _appendListItems(countries, className) {
value: function _appendListItems(countries, className, preferred) {
// we create so many DOM elements, it is faster to build a temp string
// and then add everything to the DOM in one go at the end
var tmp = "";
// for each country
for (var i = 0; i < countries.length; i++) {
var c = countries[i];
var idSuffix = preferred ? "-preferred" : "";
// open the list item
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-item-").concat(c.iso2, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
// add the flag
tmp += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
// and the country name and dial code
Expand Down Expand Up @@ -935,7 +936,7 @@
prevItem.setAttribute("aria-selected", "false");
}
if (countryCode) {
var nextItem = this.countryList.querySelector("#iti-item-".concat(countryCode));
var nextItem = this.countryList.querySelector("#iti-item-".concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-item-".concat(countryCode));
nextItem.setAttribute("aria-selected", "true");
nextItem.classList.add("iti__active");
this.activeItem = nextItem;
Expand Down
4 changes: 2 additions & 2 deletions build/js/intlTelInput.min.js
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions src/js/intlTelInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ class Iti {
role: 'listbox',
});
if (this.preferredCountries.length) {
this._appendListItems(this.preferredCountries, 'iti__preferred');
this._appendListItems(this.preferredCountries, 'iti__preferred', true);
this._createEl('li', {
class: 'iti__divider',
role: 'separator',
Expand Down Expand Up @@ -393,15 +393,16 @@ class Iti {


// add a country <li> to the countryList <ul> container
_appendListItems(countries, className) {
_appendListItems(countries, className, preferred) {
// we create so many DOM elements, it is faster to build a temp string
// and then add everything to the DOM in one go at the end
let tmp = '';
// for each country
for (let i = 0; i < countries.length; i++) {
const c = countries[i];
const idSuffix = preferred ? '-preferred' : '';
// open the list item
tmp += `<li class='iti__country ${className}' tabIndex='-1' id='iti-item-${c.iso2}' role='option' data-dial-code='${c.dialCode}' data-country-code='${c.iso2}'>`;
tmp += `<li class='iti__country ${className}' tabIndex='-1' id='iti-item-${c.iso2}${idSuffix}' role='option' data-dial-code='${c.dialCode}' data-country-code='${c.iso2}'>`;
// add the flag
tmp += `<div class='iti__flag-box'><div class='iti__flag iti__${c.iso2}'></div></div>`;
// and the country name and dial code
Expand Down Expand Up @@ -989,7 +990,7 @@ class Iti {
prevItem.setAttribute('aria-selected', 'false');
}
if (countryCode) {
const nextItem = this.countryList.querySelector(`#iti-item-${countryCode}`);
const nextItem = this.countryList.querySelector(`#iti-item-${countryCode}-preferred`) || this.countryList.querySelector(`#iti-item-${countryCode}`);
nextItem.setAttribute('aria-selected', 'true');
nextItem.classList.add('iti__active');
this.activeItem = nextItem;
Expand Down

0 comments on commit 097002e

Please sign in to comment.