From e4f901216348c4da91a38988ab51fb59fef26996 Mon Sep 17 00:00:00 2001 From: Cyrille David Date: Wed, 27 Nov 2019 15:35:16 +0100 Subject: [PATCH 1/5] fix: Remove js script injection when option lazyLoad = false --- index.js | 36 ------------------------------------ package.json | 2 -- 2 files changed, 38 deletions(-) diff --git a/index.js b/index.js index 314038ea..82e64811 100644 --- a/index.js +++ b/index.js @@ -1,13 +1,5 @@ 'use strict'; -const Funnel = require('broccoli-funnel'); -const MergeTrees = require('broccoli-merge-trees'); -const path = require('path'); - -const scriptsDestDir = 'assets/ember-phone-input/scripts/'; -const intlTelInputScriptName = 'intlTelInput.min.js'; -const utilsScriptName = 'utils.js'; - module.exports = { name: 'ember-phone-input', @@ -33,33 +25,5 @@ module.exports = { // it get merged into vendor.css app.import('node_modules/intl-tel-input/build/css/intlTelInput.css'); app.import('vendor/ember-phone-input.css'); - }, - - treeForPublic() { - // copy these files to destDir - // to be able to lazyLoad them || not to bundle them into vendor.js - const intlTelInputPath = path.resolve( - require.resolve('intl-tel-input'), - '..' - ); - const intlTelInputFiles = new Funnel(intlTelInputPath, { - srcDir: '/build/js', - include: [intlTelInputScriptName, utilsScriptName], - destDir: `/${scriptsDestDir}` - }); - - return new MergeTrees([intlTelInputFiles]); - }, - - contentFor(type, config) { - const { phoneInput, rootURL } = config; - const shouldLazyLoad = phoneInput ? phoneInput.lazyLoad : false; - - if (type === 'body-footer' && !shouldLazyLoad) { - return ` - - - `; - } } }; diff --git a/package.json b/package.json index 186568ff..e8c3a182 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,6 @@ "@ember/optional-features": "^1.0.0", "babel-eslint": "^10.0.1", "broccoli-asset-rev": "^3.0.0", - "broccoli-funnel": "^2.0.1", - "broccoli-merge-trees": "^3.0.1", "ember-cli": "~3.13.1", "ember-cli-addon-docs": "^0.6.1", "ember-cli-addon-docs-yuidoc": "^0.2.1", From 89fbcc57f6440450e0faac7d0896508421e409a8 Mon Sep 17 00:00:00 2001 From: Cyrille David Date: Wed, 27 Nov 2019 15:45:44 +0100 Subject: [PATCH 2/5] Make sure intlTelInput is loaded before initalizing the componet internals --- addon/components/phone-input.js | 54 ++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js index 4cc16ff4..614adee9 100644 --- a/addon/components/phone-input.js +++ b/addon/components/phone-input.js @@ -152,6 +152,36 @@ export default Component.extend({ didInsertElement() { this._super(...arguments); + this._loadAndSetup(); + }, + + // this is a trick to format the number on user input + didRender() { + this._super(...arguments); + + if (!this._iti) { + return; + } + + if (this.country) { + this._iti.setCountry(this.country); + } + + if (this.number) { + this._iti.setNumber(this.number); + } + }, + + willDestroyElement() { + this._iti.destroy(); + this.element.removeEventListener('countrychange', this.onCountryChange); + + this._super(...arguments); + }, + + async _loadAndSetup() { + await this.phoneInput.load(); + const { allowDropdown, autoPlaceholder, @@ -192,30 +222,6 @@ export default Component.extend({ this.element.addEventListener('countrychange', this.onCountryChange); }, - // this is a trick to format the number on user input - didRender() { - this._super(...arguments); - - if (!this._iti) { - return; - } - - if (this.country) { - this._iti.setCountry(this.country); - } - - if (this.number) { - this._iti.setNumber(this.number); - } - }, - - willDestroyElement() { - this._iti.destroy(); - this.element.removeEventListener('countrychange', this.onCountryChange); - - this._super(...arguments); - }, - _metaData(iti) { const extension = iti.getExtension(); const selectedCountryData = iti.getSelectedCountryData(); From 548a4519b0420310c5247e182151ff43d6e187dd Mon Sep 17 00:00:00 2001 From: Cyrille David Date: Wed, 27 Nov 2019 16:09:21 +0100 Subject: [PATCH 3/5] CLean up the tests - remove redundant script loading - rename a test (name was duplicated) --- tests/integration/components/phone-input-test.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/tests/integration/components/phone-input-test.js b/tests/integration/components/phone-input-test.js index 0cde7ba6..c5424ee6 100644 --- a/tests/integration/components/phone-input-test.js +++ b/tests/integration/components/phone-input-test.js @@ -13,8 +13,6 @@ module('Integration | Component | phone-input', function(hooks) { test('renders an input of type tel', async function(assert) { assert.expect(1); - await this.owner.lookup('service:phone-input').load(); - await render(hbs`{{phone-input number='1111'}}`); assert.dom('input').hasAttribute('type', 'tel'); @@ -23,8 +21,6 @@ module('Integration | Component | phone-input', function(hooks) { test('renders the value', async function(assert) { assert.expect(3); - await this.owner.lookup('service:phone-input').load(); - const newValue = '2'; this.set('number', null); this.set('update', () => {}); @@ -46,8 +42,6 @@ module('Integration | Component | phone-input', function(hooks) { test('renders the value with separate dial code option', async function(assert) { assert.expect(3); - await this.owner.lookup('service:phone-input').load(); - const newValue = '2'; this.set('separateDialNumber', null); this.set('update', value => { @@ -69,8 +63,6 @@ module('Integration | Component | phone-input', function(hooks) { test('can update the country', async function(assert) { assert.expect(2); - await this.owner.lookup('service:phone-input').load(); - const country = 'us'; this.set('number', null); this.set('update', () => {}); @@ -87,11 +79,9 @@ module('Integration | Component | phone-input', function(hooks) { assert.dom('.iti-flag').hasClass('nz'); }); - test('can update the country', async function(assert) { + test('phoneNumber is correctly invalid when country is changed', async function(assert) { assert.expect(2); - await this.owner.lookup('service:phone-input').load(); - const country = 'fr'; const validFrenchNumber = '0622334455'; this.set('number', null); From ac0bd7a768f2121fcbbb950734e71eb472b01c6b Mon Sep 17 00:00:00 2001 From: Cyrille David Date: Wed, 27 Nov 2019 16:20:16 +0100 Subject: [PATCH 4/5] Add a _formatNumber and use it after first render --- addon/components/phone-input.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js index 614adee9..3a59526d 100644 --- a/addon/components/phone-input.js +++ b/addon/components/phone-input.js @@ -159,17 +159,7 @@ export default Component.extend({ didRender() { this._super(...arguments); - if (!this._iti) { - return; - } - - if (this.country) { - this._iti.setCountry(this.country); - } - - if (this.number) { - this._iti.setNumber(this.number); - } + this._formatNumber(); }, willDestroyElement() { @@ -220,6 +210,22 @@ export default Component.extend({ this.input(); }; this.element.addEventListener('countrychange', this.onCountryChange); + + this._formatNumber(); + }, + + _formatNumber() { + if (!this._iti) { + return; + } + + if (this.country) { + this._iti.setCountry(this.country); + } + + if (this.number) { + this._iti.setNumber(this.number); + } }, _metaData(iti) { From ad72e2cb56e0187439a0fd3d97c62d8c2b7895f1 Mon Sep 17 00:00:00 2001 From: Cyrille David Date: Wed, 27 Nov 2019 16:21:17 +0100 Subject: [PATCH 5/5] Split _loadAndSetup into four steps --- addon/components/phone-input.js | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js index 3a59526d..295a0454 100644 --- a/addon/components/phone-input.js +++ b/addon/components/phone-input.js @@ -164,7 +164,7 @@ export default Component.extend({ willDestroyElement() { this._iti.destroy(); - this.element.removeEventListener('countrychange', this.onCountryChange); + this.element.removeEventListener('countrychange', this._onCountryChange); this._super(...arguments); }, @@ -172,6 +172,17 @@ export default Component.extend({ async _loadAndSetup() { await this.phoneInput.load(); + this._setupLibrary(); + + this._formatNumber(); + + this.element.addEventListener( + 'countrychange', + this._onCountryChange.bind(this) + ); + }, + + _setupLibrary() { const { allowDropdown, autoPlaceholder, @@ -193,9 +204,8 @@ export default Component.extend({ separateDialCode }); - const number = this.number; - if (number) { - _iti.setNumber(number); + if (this.number) { + _iti.setNumber(this.number); } this._iti = _iti; @@ -203,15 +213,7 @@ export default Component.extend({ this._iti.setCountry(this.initialCountry); } - this.update(number, this._metaData(_iti)); - - this.onCountryChange = () => { - this._iti.setCountry(this._iti.getSelectedCountryData().iso2); - this.input(); - }; - this.element.addEventListener('countrychange', this.onCountryChange); - - this._formatNumber(); + this.update(this.number, this._metaData(_iti)); }, _formatNumber() { @@ -228,6 +230,11 @@ export default Component.extend({ } }, + _onCountryChange() { + this._iti.setCountry(this._iti.getSelectedCountryData().iso2); + this.input(); + }, + _metaData(iti) { const extension = iti.getExtension(); const selectedCountryData = iti.getSelectedCountryData();