From c55d83e28a56bb748eca9442b6affb7d7e0e2c9e Mon Sep 17 00:00:00 2001 From: Mark Carranza Date: Sun, 22 Oct 2023 15:43:46 -0700 Subject: [PATCH 1/6] Test ver for screenname --- packages/ia-topnav/package.json | 2 +- packages/ia-topnav/src/ia-topnav.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ia-topnav/package.json b/packages/ia-topnav/package.json index 206bada2b..4c9505451 100644 --- a/packages/ia-topnav/package.json +++ b/packages/ia-topnav/package.json @@ -1,6 +1,6 @@ { "name": "@internetarchive/ia-topnav", - "version": "1.1.29", + "version": "1.1.30-alpha.0", "description": "Top nav for Internet Archive", "license": "AGPL-3.0-only", "main": "index.js", diff --git a/packages/ia-topnav/src/ia-topnav.js b/packages/ia-topnav/src/ia-topnav.js index a8a19e63f..322c60ad3 100644 --- a/packages/ia-topnav/src/ia-topnav.js +++ b/packages/ia-topnav/src/ia-topnav.js @@ -89,7 +89,7 @@ export default class IATopNav extends LitElement { menuSetup() { this.localLinks = this.getAttribute('localLinks') !== 'false' && this.getAttribute('localLinks') !== false; this.username = this.getAttribute('username') - this.screenName = this.username; // set screenName when username changes to display + this.screenName = this.getAttribute('screenName') // this.username; // set screenName when username changes to display this.waybackPagesArchived = this.getAttribute('waybackPagesArchived') ?? '' // ensure we update other components that use `baseHost` From 4891f5d099712aaf5c1f8f3152c63bcd9e9d6645 Mon Sep 17 00:00:00 2001 From: Mark Carranza Date: Sun, 22 Oct 2023 19:52:26 -0700 Subject: [PATCH 2/6] Truncate unicode aware --- packages/ia-topnav/package.json | 2 +- packages/ia-topnav/src/primary-nav.js | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/ia-topnav/package.json b/packages/ia-topnav/package.json index 4c9505451..b1e315dd4 100644 --- a/packages/ia-topnav/package.json +++ b/packages/ia-topnav/package.json @@ -1,6 +1,6 @@ { "name": "@internetarchive/ia-topnav", - "version": "1.1.30-alpha.0", + "version": "1.1.30-alpha.1", "description": "Top nav for Internet Archive", "license": "AGPL-3.0-only", "main": "index.js", diff --git a/packages/ia-topnav/src/primary-nav.js b/packages/ia-topnav/src/primary-nav.js index c33349f05..bf248cc1c 100644 --- a/packages/ia-topnav/src/primary-nav.js +++ b/packages/ia-topnav/src/primary-nav.js @@ -79,9 +79,23 @@ class PrimaryNav extends TrackedElement { ); } + get isRTL() { + const ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF'; + const rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'; + const rtlCheck = new RegExp('^[^'+ltrChars+']*['+rtlChars+']'); + + return rtlCheck.test(this.screenName); + } + get truncatedScreenName() { - if (this.screenName && this.screenName.length > 10) { - return `${this.screenName.substr(0, 9)}…`; + if (this.screenName && [...this.screenName].length > 10) { + // Works with RTL and Unicode + const truncated = [...this.screenName].slice(0, 9).join(''); + if (this.isRTL) { + return `…${truncated}`; + } else { + return `${truncated}…`; + } } return this.screenName; } From 9b7f9102e2581981fc275bb506a0aaa30f445aee Mon Sep 17 00:00:00 2001 From: Mark Carranza Date: Wed, 25 Oct 2023 15:08:16 -0700 Subject: [PATCH 3/6] Comments --- packages/ia-topnav/README.md | 1 + packages/ia-topnav/src/primary-nav.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/ia-topnav/README.md b/packages/ia-topnav/README.md index a5e9a87b3..b4838d03b 100644 --- a/packages/ia-topnav/README.md +++ b/packages/ia-topnav/README.md @@ -4,6 +4,7 @@ https://git.archive.org/www/offshoot/-/blob/main/guides/update-top-nav.md ## Installation +## Add to your project ```bash yarn add @internetarchive/ia-topnav ``` diff --git a/packages/ia-topnav/src/primary-nav.js b/packages/ia-topnav/src/primary-nav.js index bf248cc1c..ec6acfd38 100644 --- a/packages/ia-topnav/src/primary-nav.js +++ b/packages/ia-topnav/src/primary-nav.js @@ -80,6 +80,7 @@ class PrimaryNav extends TrackedElement { } get isRTL() { + // https://stackoverflow.com/questions/12006095/javascript-how-to-check-if-character-is-rtl const ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF'; const rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'; const rtlCheck = new RegExp('^[^'+ltrChars+']*['+rtlChars+']'); From 181becef7b91010c65a7f94cd0fb019e1e209fc9 Mon Sep 17 00:00:00 2001 From: Mark Carranza Date: Tue, 31 Oct 2023 11:46:45 -0700 Subject: [PATCH 4/6] Add screenname tests --- packages/ia-topnav/test/primary-nav.test.js | 24 +++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/ia-topnav/test/primary-nav.test.js b/packages/ia-topnav/test/primary-nav.test.js index c4544a0d0..e341a1f54 100644 --- a/packages/ia-topnav/test/primary-nav.test.js +++ b/packages/ia-topnav/test/primary-nav.test.js @@ -56,6 +56,30 @@ describe('', () => { expect(usernameSpan.innerText).to.equal('somesuper…'); }); + it('truncates a long screen name with extended characters', async () => { + const el = await fixture(component({ + baseHost: 'archive.org', + username: '@foo', + screenName: 'a😊b😊c😊d😊😊😊😊😊😊😊😊', + })); + + const usernameSpan = el.shadowRoot.querySelector('.username'); + + expect(usernameSpan.innerText).to.equal('a😊b😊c😊dπŸ˜ŠπŸ˜Šβ€¦'); + }); + + it('truncates a long screen name with RTL extended characters', async () => { + const el = await fixture(component({ + baseHost: 'archive.org', + username: '@foo', + screenName: ' Ψ§Ω„Ψ―ΩƒΨͺور Ω…Ψ­Ω…Ψ§Ω„Ψ―ΩƒΨͺور Ω…Ψ­Ω…Ψ― Ψ§Ω„ΨΉΨ¬ΩˆΨ²', + })); + + const usernameSpan = el.shadowRoot.querySelector('.username'); + + expect(usernameSpan.innerText).to.equal('… Ψ§Ω„Ψ―ΩƒΨͺور '); + }); + it('opens a slot with `secondIdentitySlotMode`', async () => { const el = await fixture(component({ baseHost: 'archive.org', From f3fa16609424499fd6b912f89c7e07bddcf19b99 Mon Sep 17 00:00:00 2001 From: Mark Carranza Date: Tue, 31 Oct 2023 11:47:30 -0700 Subject: [PATCH 5/6] Fix switch user button, add another --- www/ia-topnav/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/www/ia-topnav/index.html b/www/ia-topnav/index.html index 67c0db150..bedbcb738 100644 --- a/www/ia-topnav/index.html +++ b/www/ia-topnav/index.html @@ -17,10 +17,14 @@

demo

-
+ +
From 0fbc87e7cabc98e20c135732da1a78ac310cabf9 Mon Sep 17 00:00:00 2001 From: Mark Carranza Date: Tue, 31 Oct 2023 11:49:33 -0700 Subject: [PATCH 6/6] Bump test value --- packages/ia-topnav/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ia-topnav/package.json b/packages/ia-topnav/package.json index b1e315dd4..8385f4f8b 100644 --- a/packages/ia-topnav/package.json +++ b/packages/ia-topnav/package.json @@ -1,6 +1,6 @@ { "name": "@internetarchive/ia-topnav", - "version": "1.1.30-alpha.1", + "version": "1.1.30-alpha.2", "description": "Top nav for Internet Archive", "license": "AGPL-3.0-only", "main": "index.js",