Add font to dropdown offset calculation

This commit is contained in:
Clement Ho 2016-12-07 12:33:02 -06:00
parent b16a38c8a2
commit 6d2a8b5b14

View file

@ -108,18 +108,22 @@
document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word; document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word;
} }
loadDropdown(dropdownName = '') { loadDropdown(dropdownName = '', hideDropdown) {
dropdownName = dropdownName.toLowerCase(); dropdownName = dropdownName.toLowerCase();
const filterIconPadding = 27; const filterIconPadding = 27;
const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0];
const filteredSearch = document.querySelector('.filtered-search'); const filteredSearch = document.querySelector('.filtered-search');
if (!this.font) {
this.font = window.getComputedStyle(filteredSearch).font;
}
if (match && this.currentDropdown !== match.key) { if (match && this.currentDropdown !== match.key) {
console.log(`🦄 load ${match.key} dropdown`); console.log(`🦄 load ${match.key} dropdown`);
const dynamicDropdownPadding = 12; const dynamicDropdownPadding = 12;
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding + dynamicDropdownPadding; const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding;
this.dismissCurrentDropdown(); this.dismissCurrentDropdown();
this.currentDropdown = match.key; this.currentDropdown = match.key;
@ -157,8 +161,9 @@
} else if (!match && this.currentDropdown !== 'hint') { } else if (!match && this.currentDropdown !== 'hint') {
console.log('🦄 load hint dropdown'); console.log('🦄 load hint dropdown');
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding; const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding;
console.log(dropdownOffset)
this.dismissCurrentDropdown();
this.currentDropdown = 'hint'; this.currentDropdown = 'hint';
if (!dropdownHint) { if (!dropdownHint) {