@internetarchive/ia-topnav 1.3.30 → 1.4.1-alpha-webdev8259.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierignore +1 -1
- package/LICENSE +661 -661
- package/README.md +147 -147
- package/demo/index.html +28 -28
- package/dist/index.d.ts +1 -0
- package/dist/index.js.map +1 -1
- package/dist/src/data/menus.js.map +1 -1
- package/dist/src/dropdown-menu.js +26 -26
- package/dist/src/dropdown-menu.js.map +1 -1
- package/dist/src/ia-topnav.d.ts +4 -1
- package/dist/src/ia-topnav.js +96 -81
- package/dist/src/ia-topnav.js.map +1 -1
- package/dist/src/lib/keyboard-navigation.js.map +1 -1
- package/dist/src/login-button.js +17 -17
- package/dist/src/login-button.js.map +1 -1
- package/dist/src/media-menu.js +21 -21
- package/dist/src/media-menu.js.map +1 -1
- package/dist/src/models.d.ts +1 -0
- package/dist/src/models.js.map +1 -1
- package/dist/src/primary-nav.d.ts +3 -1
- package/dist/src/primary-nav.js +118 -95
- package/dist/src/primary-nav.js.map +1 -1
- package/dist/src/styles/login-button.js +87 -87
- package/dist/src/styles/login-button.js.map +1 -1
- package/dist/src/styles/primary-nav.js +343 -308
- package/dist/src/styles/primary-nav.js.map +1 -1
- package/dist/src/user-menu.js +13 -13
- package/dist/src/user-menu.js.map +1 -1
- package/dist/test/ia-topnav.test.js +39 -9
- package/dist/test/ia-topnav.test.js.map +1 -1
- package/dist/test/primary-nav.test.js +55 -7
- package/dist/test/primary-nav.test.js.map +1 -1
- package/eslint.config.mjs +53 -53
- package/index.ts +4 -3
- package/package.json +72 -72
- package/prettier.config.js +9 -9
- package/src/data/menus.ts +652 -652
- package/src/dropdown-menu.ts +132 -132
- package/src/ia-topnav.ts +383 -366
- package/src/lib/keyboard-navigation.ts +166 -166
- package/src/login-button.ts +78 -78
- package/src/media-menu.ts +143 -143
- package/src/models.ts +65 -63
- package/src/primary-nav.ts +324 -296
- package/src/styles/login-button.ts +90 -90
- package/src/styles/primary-nav.ts +346 -311
- package/src/user-menu.ts +32 -32
- package/ssl/server.key +28 -28
- package/test/ia-topnav.test.ts +381 -343
- package/test/primary-nav.test.ts +163 -94
- package/tsconfig.json +31 -31
- package/web-dev-server.config.mjs +32 -32
- package/web-test-runner.config.mjs +41 -41
package/dist/src/ia-topnav.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { LitElement, PropertyValues, nothing } from 'lit';
|
|
|
2
2
|
import './desktop-subnav';
|
|
3
3
|
import './dropdown-menu';
|
|
4
4
|
import './media-slider';
|
|
5
|
-
import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
|
|
5
|
+
import { IATopNavConfig, IATopNavSearchSlotMode, IATopNavSecondIdentitySlotMode } from './models';
|
|
6
6
|
import './primary-nav';
|
|
7
7
|
import './search-menu';
|
|
8
8
|
import './signed-out-dropdown';
|
|
@@ -26,6 +26,7 @@ export declare class IATopNav extends LitElement {
|
|
|
26
26
|
username: string;
|
|
27
27
|
userProfileImagePath: string;
|
|
28
28
|
secondIdentitySlotMode: IATopNavSecondIdentitySlotMode;
|
|
29
|
+
searchSlotMode: IATopNavSearchSlotMode;
|
|
29
30
|
currentTab?: {
|
|
30
31
|
mediatype: string;
|
|
31
32
|
moveTo: string;
|
|
@@ -64,6 +65,8 @@ export declare class IATopNav extends LitElement {
|
|
|
64
65
|
*/
|
|
65
66
|
get userMenuItems(): import("./models").IATopNavLink[][];
|
|
66
67
|
get allowSecondaryIcon(): boolean;
|
|
68
|
+
get useCustomSearch(): boolean;
|
|
69
|
+
get customSearchSlot(): import("lit").TemplateResult<1> | typeof nothing;
|
|
67
70
|
get secondLogoSlot(): import("lit").TemplateResult<1> | typeof nothing;
|
|
68
71
|
get separatorTemplate(): import("lit").TemplateResult<1>;
|
|
69
72
|
render(): import("lit").TemplateResult<1>;
|
package/dist/src/ia-topnav.js
CHANGED
|
@@ -32,6 +32,7 @@ let IATopNav = class IATopNav extends LitElement {
|
|
|
32
32
|
this.username = '';
|
|
33
33
|
this.userProfileImagePath = '/services/img/user/profile';
|
|
34
34
|
this.secondIdentitySlotMode = '';
|
|
35
|
+
this.searchSlotMode = '';
|
|
35
36
|
this.menus = buildTopNavMenus();
|
|
36
37
|
}
|
|
37
38
|
get normalizedBaseHost() {
|
|
@@ -155,34 +156,34 @@ let IATopNav = class IATopNav extends LitElement {
|
|
|
155
156
|
return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';
|
|
156
157
|
}
|
|
157
158
|
get userMenu() {
|
|
158
|
-
return html `
|
|
159
|
-
<user-menu
|
|
160
|
-
.baseHost=${this.normalizedBaseHost}
|
|
161
|
-
.config=${this.config}
|
|
162
|
-
.menuItems=${this.userMenuItems}
|
|
163
|
-
?open=${this.openMenu === 'user'}
|
|
164
|
-
.username=${this.username}
|
|
165
|
-
?hideSearch=${this.hideSearch}
|
|
166
|
-
tabindex="${this.userMenuTabIndex}"
|
|
167
|
-
@menuToggled=${this.menuToggled}
|
|
168
|
-
@trackClick=${this.trackClick}
|
|
169
|
-
@focusToOtherMenuItem=${(e) => (this.currentTab = e.detail)}
|
|
170
|
-
></user-menu>
|
|
159
|
+
return html `
|
|
160
|
+
<user-menu
|
|
161
|
+
.baseHost=${this.normalizedBaseHost}
|
|
162
|
+
.config=${this.config}
|
|
163
|
+
.menuItems=${this.userMenuItems}
|
|
164
|
+
?open=${this.openMenu === 'user'}
|
|
165
|
+
.username=${this.username}
|
|
166
|
+
?hideSearch=${this.hideSearch}
|
|
167
|
+
tabindex="${this.userMenuTabIndex}"
|
|
168
|
+
@menuToggled=${this.menuToggled}
|
|
169
|
+
@trackClick=${this.trackClick}
|
|
170
|
+
@focusToOtherMenuItem=${(e) => (this.currentTab = e.detail)}
|
|
171
|
+
></user-menu>
|
|
171
172
|
`;
|
|
172
173
|
}
|
|
173
174
|
get signedOutDropdown() {
|
|
174
|
-
return html `
|
|
175
|
-
<signed-out-dropdown
|
|
176
|
-
.baseHost=${this.normalizedBaseHost}
|
|
177
|
-
.config=${this.config}
|
|
178
|
-
.open=${this.signedOutOpened}
|
|
179
|
-
?hideSearch=${this.hideSearch}
|
|
180
|
-
tabindex="${this.signedOutTabIndex}"
|
|
181
|
-
.menuItems=${this.signedOutMenuItems}
|
|
175
|
+
return html `
|
|
176
|
+
<signed-out-dropdown
|
|
177
|
+
.baseHost=${this.normalizedBaseHost}
|
|
178
|
+
.config=${this.config}
|
|
179
|
+
.open=${this.signedOutOpened}
|
|
180
|
+
?hideSearch=${this.hideSearch}
|
|
181
|
+
tabindex="${this.signedOutTabIndex}"
|
|
182
|
+
.menuItems=${this.signedOutMenuItems}
|
|
182
183
|
@focusToOtherMenuItem=${(e) => {
|
|
183
184
|
this.currentTab = e.detail;
|
|
184
|
-
}}
|
|
185
|
-
></signed-out-dropdown>
|
|
185
|
+
}}
|
|
186
|
+
></signed-out-dropdown>
|
|
186
187
|
`;
|
|
187
188
|
}
|
|
188
189
|
get signedOutMenuItems() {
|
|
@@ -206,11 +207,19 @@ let IATopNav = class IATopNav extends LitElement {
|
|
|
206
207
|
get allowSecondaryIcon() {
|
|
207
208
|
return this.secondIdentitySlotMode === 'allow';
|
|
208
209
|
}
|
|
210
|
+
get useCustomSearch() {
|
|
211
|
+
return this.searchSlotMode === 'custom';
|
|
212
|
+
}
|
|
213
|
+
get customSearchSlot() {
|
|
214
|
+
return this.useCustomSearch
|
|
215
|
+
? html `<slot name="custom-search" slot="custom-search"></slot>`
|
|
216
|
+
: nothing;
|
|
217
|
+
}
|
|
209
218
|
get secondLogoSlot() {
|
|
210
219
|
return this.allowSecondaryIcon
|
|
211
|
-
? html `
|
|
212
|
-
<slot name="opt-sec-logo" slot="opt-sec-logo"></slot>
|
|
213
|
-
<slot name="opt-sec-logo-mobile" slot="opt-sec-logo-mobile"></slot>
|
|
220
|
+
? html `
|
|
221
|
+
<slot name="opt-sec-logo" slot="opt-sec-logo"></slot>
|
|
222
|
+
<slot name="opt-sec-logo-mobile" slot="opt-sec-logo-mobile"></slot>
|
|
214
223
|
`
|
|
215
224
|
: nothing;
|
|
216
225
|
}
|
|
@@ -218,61 +227,64 @@ let IATopNav = class IATopNav extends LitElement {
|
|
|
218
227
|
return html `<li class="divider" role="presentation"></li>`;
|
|
219
228
|
}
|
|
220
229
|
render() {
|
|
221
|
-
return html `
|
|
222
|
-
<div class="topnav">
|
|
223
|
-
<primary-nav
|
|
224
|
-
.baseHost=${this.normalizedBaseHost}
|
|
225
|
-
.mediaBaseHost=${this.mediaBaseHost}
|
|
226
|
-
.config=${this.config}
|
|
227
|
-
.openMenu=${this.openMenu}
|
|
228
|
-
.screenName=${this.screenName}
|
|
229
|
-
.searchIn=${this.searchIn}
|
|
230
|
-
.searchQuery=${this.searchQuery}
|
|
231
|
-
.
|
|
232
|
-
.
|
|
233
|
-
.
|
|
234
|
-
.
|
|
235
|
-
.
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
@
|
|
239
|
-
@
|
|
240
|
-
@
|
|
241
|
-
@
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
.
|
|
248
|
-
.
|
|
249
|
-
.
|
|
250
|
-
.
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
230
|
+
return html `
|
|
231
|
+
<div class="topnav">
|
|
232
|
+
<primary-nav
|
|
233
|
+
.baseHost=${this.normalizedBaseHost}
|
|
234
|
+
.mediaBaseHost=${this.mediaBaseHost}
|
|
235
|
+
.config=${this.config}
|
|
236
|
+
.openMenu=${this.openMenu}
|
|
237
|
+
.screenName=${this.screenName}
|
|
238
|
+
.searchIn=${this.searchIn}
|
|
239
|
+
.searchQuery=${this.searchQuery}
|
|
240
|
+
.searchSlotMode=${this.searchSlotMode}
|
|
241
|
+
.secondIdentitySlotMode=${this.secondIdentitySlotMode}
|
|
242
|
+
.selectedMenuOption=${this.selectedMenuOption}
|
|
243
|
+
.username=${this.username}
|
|
244
|
+
.userProfileImagePath=${this.userProfileImagePath}
|
|
245
|
+
.currentTab=${this.currentTab}
|
|
246
|
+
?hideSearch=${this.hideSearch}
|
|
247
|
+
@mediaTypeSelected=${this.mediaTypeSelected}
|
|
248
|
+
@trackClick=${this.trackClick}
|
|
249
|
+
@trackSubmit=${this.trackSubmit}
|
|
250
|
+
@menuToggled=${this.menuToggled}
|
|
251
|
+
@navSearchBlur=${this.navSearchBlurEvent}
|
|
252
|
+
>
|
|
253
|
+
${this.secondLogoSlot} ${this.customSearchSlot}
|
|
254
|
+
</primary-nav>
|
|
255
|
+
<media-slider
|
|
256
|
+
.baseHost=${this.normalizedBaseHost}
|
|
257
|
+
.config=${this.config}
|
|
258
|
+
.selectedMenuOption=${this.selectedMenuOption}
|
|
259
|
+
.mediaSliderOpen=${this.mediaSliderOpen}
|
|
260
|
+
.menus=${this.menus}
|
|
261
|
+
tabindex="${this.mediaSliderOpen ? '1' : '-1'}"
|
|
262
|
+
@focusToOtherMenuItem=${(e) => (this.currentTab = e.detail)}
|
|
263
|
+
></media-slider>
|
|
264
|
+
</div>
|
|
265
|
+
${this.username ? this.userMenu : this.signedOutDropdown}
|
|
266
|
+
${this.useCustomSearch
|
|
267
|
+
? nothing
|
|
268
|
+
: html `<search-menu
|
|
269
|
+
.baseHost=${this.normalizedBaseHost}
|
|
270
|
+
.config=${this.config}
|
|
271
|
+
.openMenu=${this.openMenu}
|
|
272
|
+
tabindex="${this.searchMenuTabIndex}"
|
|
273
|
+
?hideSearch=${this.hideSearch}
|
|
274
|
+
@searchInChanged=${this.searchInChanged}
|
|
275
|
+
@trackClick=${this.trackClick}
|
|
276
|
+
@trackSubmit=${this.trackSubmit}
|
|
277
|
+
></search-menu>`}
|
|
278
|
+
<desktop-subnav
|
|
279
|
+
.baseHost=${this.normalizedBaseHost}
|
|
280
|
+
.menuItems=${this.menus.more.links}
|
|
281
|
+
@focus=${this.closeMenus}
|
|
282
|
+
></desktop-subnav>
|
|
283
|
+
<div
|
|
284
|
+
id="close-layer"
|
|
285
|
+
class="${this.closeLayerClass}"
|
|
286
|
+
@click=${this.closeMenus}
|
|
287
|
+
></div>
|
|
276
288
|
`;
|
|
277
289
|
}
|
|
278
290
|
};
|
|
@@ -330,6 +342,9 @@ __decorate([
|
|
|
330
342
|
__decorate([
|
|
331
343
|
property({ type: String })
|
|
332
344
|
], IATopNav.prototype, "secondIdentitySlotMode", void 0);
|
|
345
|
+
__decorate([
|
|
346
|
+
property({ type: String })
|
|
347
|
+
], IATopNav.prototype, "searchSlotMode", void 0);
|
|
333
348
|
__decorate([
|
|
334
349
|
property({ type: Object })
|
|
335
350
|
], IATopNav.prototype, "currentTab", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../src/ia-topnav.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\nimport './desktop-subnav';\nimport './dropdown-menu';\nimport './media-slider';\nimport {\n IATopNavConfig,\n IATopNavMenuConfig,\n IATopNavSecondIdentitySlotMode,\n} from './models';\nimport './primary-nav';\nimport './search-menu';\nimport './signed-out-dropdown';\nimport iaTopNavCSS from './styles/ia-topnav';\nimport './user-menu';\nimport KeyboardNavigation from './lib/keyboard-navigation';\n\n@customElement('ia-topnav')\nexport class IATopNav extends LitElement {\n @property({ type: Boolean }) localLinks = false;\n\n @property({ type: String }) waybackPagesArchived = '';\n\n @property({ type: String }) baseHost = 'https://archive.org';\n\n @property({ type: String }) mediaBaseHost = 'https://archive.org';\n\n @property({ type: Boolean }) admin = false;\n\n @property({ type: Boolean }) canManageFlags = false;\n\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n\n @property({ type: Boolean }) hideSearch = false;\n\n @property({ type: String }) itemIdentifier = '';\n\n @property({ type: Boolean }) mediaSliderOpen = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ type: String }) screenName: string = '';\n\n @property({ type: String }) searchIn = '';\n\n @property({ type: String }) searchQuery = '';\n\n @property({ type: String }) selectedMenuOption = '';\n\n @property({ type: String }) username: string = '';\n\n @property({ type: String }) userProfileImagePath =\n '/services/img/user/profile';\n\n @property({ type: String })\n secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n\n @property({ type: Object }) currentTab?: {\n mediatype: string;\n moveTo: string;\n };\n\n @state() private menus: IATopNavMenuConfig = buildTopNavMenus();\n private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;\n\n private keyboardNavigation?: KeyboardNavigation;\n\n private get normalizedBaseHost() {\n return !this.localLinks ? this.baseHost : '';\n }\n\n static get styles() {\n return iaTopNavCSS;\n }\n\n updated(props: PropertyValues) {\n if (\n props.has('username') ||\n props.has('waybackPagesArchived') ||\n props.has('itemIdentifier') ||\n props.has('localLinks') ||\n props.has('baseHost')\n ) {\n this.menuSetup();\n }\n\n if (this.openMenu === 'search') {\n const targetElement =\n this.renderRoot.querySelector('search-menu')?.shadowRoot;\n if (targetElement) {\n this.keyboardNavigation = new KeyboardNavigation(\n targetElement as unknown as HTMLElement,\n this.openMenu,\n );\n\n if (this.previousKeydownListener) {\n this.removeEventListener('keydown', this.previousKeydownListener);\n }\n this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);\n this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;\n }\n }\n }\n\n firstUpdated() {\n // close open menu on `esc` click\n document.addEventListener(\n 'keydown',\n (e) => {\n if (e.key === 'Escape') {\n this.openMenu = '';\n this.mediaSliderOpen = false;\n }\n },\n false,\n );\n }\n\n menuSetup() {\n // re/build the nav\n this.menus = buildTopNavMenus(\n this.username,\n this.normalizedBaseHost,\n this.waybackPagesArchived,\n this.itemIdentifier,\n );\n }\n\n menuToggled(e: CustomEvent) {\n const currentMenu = this.openMenu;\n this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;\n // Keeps media slider open if media menu is open\n if (this.openMenu === 'media') {\n return;\n }\n this.closeMediaSlider();\n }\n\n navSearchBlurEvent(e: CustomEvent) {\n if (this.previousKeydownListener) {\n this.removeEventListener('keydown', this.previousKeydownListener);\n }\n\n const isUploadButton = e.detail?.isUploadButton;\n if (!isUploadButton) {\n const searchMenu = this.renderRoot.querySelector(\n 'search-menu',\n ) as HTMLElement;\n const elements = this.keyboardNavigation?.getFocusableElements();\n if (searchMenu && elements?.length) {\n elements[0].focus();\n }\n }\n }\n\n openMediaSlider() {\n this.mediaSliderOpen = true;\n }\n\n closeMediaSlider() {\n this.mediaSliderOpen = false;\n this.selectedMenuOption = '';\n }\n\n closeMenus() {\n this.openMenu = '';\n this.closeMediaSlider();\n }\n\n searchInChanged(e: CustomEvent) {\n this.searchIn = e.detail.searchIn;\n }\n\n trackClick(e: CustomEvent) {\n this.dispatchEvent(\n new CustomEvent('analyticsClick', {\n bubbles: true,\n composed: true,\n detail: e.detail,\n }),\n );\n }\n\n trackSubmit(e: CustomEvent) {\n this.dispatchEvent(\n new CustomEvent('analyticsSubmit', {\n bubbles: true,\n composed: true,\n detail: e.detail,\n }),\n );\n }\n\n mediaTypeSelected(e: CustomEvent) {\n if (this.selectedMenuOption === e.detail.mediatype) {\n this.closeMediaSlider();\n return;\n }\n this.selectedMenuOption = e.detail.mediatype;\n this.openMediaSlider();\n }\n\n get searchMenuOpened() {\n return this.openMenu === 'search';\n }\n\n get signedOutOpened() {\n return this.openMenu === 'login';\n }\n\n get userMenuOpened() {\n return this.openMenu === 'user';\n }\n\n get searchMenuTabIndex() {\n return this.searchMenuOpened ? '' : '-1';\n }\n\n get userMenuTabIndex() {\n return this.userMenuOpened ? '' : '-1';\n }\n\n get signedOutTabIndex() {\n return this.signedOutOpened ? '' : '-1';\n }\n\n get closeLayerClass() {\n return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';\n }\n\n get userMenu() {\n return html`\n <user-menu\n .baseHost=${this.normalizedBaseHost}\n .config=${this.config}\n .menuItems=${this.userMenuItems}\n ?open=${this.openMenu === 'user'}\n .username=${this.username}\n ?hideSearch=${this.hideSearch}\n tabindex=\"${this.userMenuTabIndex}\"\n @menuToggled=${this.menuToggled}\n @trackClick=${this.trackClick}\n @focusToOtherMenuItem=${(e: CustomEvent) =>\n (this.currentTab = e.detail)}\n ></user-menu>\n `;\n }\n\n get signedOutDropdown() {\n return html`\n <signed-out-dropdown\n .baseHost=${this.normalizedBaseHost}\n .config=${this.config}\n .open=${this.signedOutOpened}\n ?hideSearch=${this.hideSearch}\n tabindex=\"${this.signedOutTabIndex}\"\n .menuItems=${this.signedOutMenuItems}\n @focusToOtherMenuItem=${(e: CustomEvent) => {\n this.currentTab = e.detail;\n }}\n ></signed-out-dropdown>\n `;\n }\n\n get signedOutMenuItems() {\n return this.menus.signedOut;\n }\n\n /**\n * Most users just get the basic menu items.\n * For users with `/items` priv, additional admin menu items are included too.\n * Having the `/flags` priv adds a further admin item for managing flags.\n */\n get userMenuItems() {\n const basicItems = this.menus.user;\n\n let adminItems = this.menus.userAdmin;\n if (this.canManageFlags) {\n adminItems = adminItems.concat(this.menus.userAdminFlags);\n }\n\n return this.itemIdentifier && this.admin\n ? [basicItems, adminItems]\n : [basicItems];\n }\n\n get allowSecondaryIcon() {\n return this.secondIdentitySlotMode === 'allow';\n }\n\n get secondLogoSlot() {\n return this.allowSecondaryIcon\n ? html`\n <slot name=\"opt-sec-logo\" slot=\"opt-sec-logo\"></slot>\n <slot name=\"opt-sec-logo-mobile\" slot=\"opt-sec-logo-mobile\"></slot>\n `\n : nothing;\n }\n\n get separatorTemplate() {\n return html`<li class=\"divider\" role=\"presentation\"></li>`;\n }\n\n render() {\n return html`\n <div class=\"topnav\">\n <primary-nav\n .baseHost=${this.normalizedBaseHost}\n .mediaBaseHost=${this.mediaBaseHost}\n .config=${this.config}\n .openMenu=${this.openMenu}\n .screenName=${this.screenName}\n .searchIn=${this.searchIn}\n .searchQuery=${this.searchQuery}\n .secondIdentitySlotMode=${this.secondIdentitySlotMode}\n .selectedMenuOption=${this.selectedMenuOption}\n .username=${this.username}\n .userProfileImagePath=${this.userProfileImagePath}\n .currentTab=${this.currentTab}\n ?hideSearch=${this.hideSearch}\n @mediaTypeSelected=${this.mediaTypeSelected}\n @trackClick=${this.trackClick}\n @trackSubmit=${this.trackSubmit}\n @menuToggled=${this.menuToggled}\n @navSearchBlur=${this.navSearchBlurEvent}\n >\n ${this.secondLogoSlot}\n </primary-nav>\n <media-slider\n .baseHost=${this.normalizedBaseHost}\n .config=${this.config}\n .selectedMenuOption=${this.selectedMenuOption}\n .mediaSliderOpen=${this.mediaSliderOpen}\n .menus=${this.menus}\n tabindex=\"${this.mediaSliderOpen ? '1' : '-1'}\"\n @focusToOtherMenuItem=${(e: CustomEvent) =>\n (this.currentTab = e.detail)}\n ></media-slider>\n </div>\n ${this.username ? this.userMenu : this.signedOutDropdown}\n <search-menu\n .baseHost=${this.normalizedBaseHost}\n .config=${this.config}\n .openMenu=${this.openMenu}\n tabindex=\"${this.searchMenuTabIndex}\"\n ?hideSearch=${this.hideSearch}\n @searchInChanged=${this.searchInChanged}\n @trackClick=${this.trackClick}\n @trackSubmit=${this.trackSubmit}\n ></search-menu>\n <desktop-subnav\n .baseHost=${this.normalizedBaseHost}\n .menuItems=${this.menus.more.links}\n @focus=${this.closeMenus}\n ></desktop-subnav>\n <div\n id=\"close-layer\"\n class=\"${this.closeLayerClass}\"\n @click=${this.closeMenus}\n ></div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../src/ia-topnav.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\r\nimport './desktop-subnav';\r\nimport './dropdown-menu';\r\nimport './media-slider';\r\nimport {\r\n IATopNavConfig,\r\n IATopNavMenuConfig,\r\n IATopNavSearchSlotMode,\r\n IATopNavSecondIdentitySlotMode,\r\n} from './models';\r\nimport './primary-nav';\r\nimport './search-menu';\r\nimport './signed-out-dropdown';\r\nimport iaTopNavCSS from './styles/ia-topnav';\r\nimport './user-menu';\r\nimport KeyboardNavigation from './lib/keyboard-navigation';\r\n\r\n@customElement('ia-topnav')\r\nexport class IATopNav extends LitElement {\r\n @property({ type: Boolean }) localLinks = false;\r\n\r\n @property({ type: String }) waybackPagesArchived = '';\r\n\r\n @property({ type: String }) baseHost = 'https://archive.org';\r\n\r\n @property({ type: String }) mediaBaseHost = 'https://archive.org';\r\n\r\n @property({ type: Boolean }) admin = false;\r\n\r\n @property({ type: Boolean }) canManageFlags = false;\r\n\r\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\r\n\r\n @property({ type: Boolean }) hideSearch = false;\r\n\r\n @property({ type: String }) itemIdentifier = '';\r\n\r\n @property({ type: Boolean }) mediaSliderOpen = false;\r\n\r\n @property({ type: String }) openMenu = '';\r\n\r\n @property({ type: String }) screenName: string = '';\r\n\r\n @property({ type: String }) searchIn = '';\r\n\r\n @property({ type: String }) searchQuery = '';\r\n\r\n @property({ type: String }) selectedMenuOption = '';\r\n\r\n @property({ type: String }) username: string = '';\r\n\r\n @property({ type: String }) userProfileImagePath =\r\n '/services/img/user/profile';\r\n\r\n @property({ type: String })\r\n secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\r\n\r\n @property({ type: String })\r\n searchSlotMode: IATopNavSearchSlotMode = '';\r\n\r\n @property({ type: Object }) currentTab?: {\r\n mediatype: string;\r\n moveTo: string;\r\n };\r\n\r\n @state() private menus: IATopNavMenuConfig = buildTopNavMenus();\r\n private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;\r\n\r\n private keyboardNavigation?: KeyboardNavigation;\r\n\r\n private get normalizedBaseHost() {\r\n return !this.localLinks ? this.baseHost : '';\r\n }\r\n\r\n static get styles() {\r\n return iaTopNavCSS;\r\n }\r\n\r\n updated(props: PropertyValues) {\r\n if (\r\n props.has('username') ||\r\n props.has('waybackPagesArchived') ||\r\n props.has('itemIdentifier') ||\r\n props.has('localLinks') ||\r\n props.has('baseHost')\r\n ) {\r\n this.menuSetup();\r\n }\r\n\r\n if (this.openMenu === 'search') {\r\n const targetElement =\r\n this.renderRoot.querySelector('search-menu')?.shadowRoot;\r\n if (targetElement) {\r\n this.keyboardNavigation = new KeyboardNavigation(\r\n targetElement as unknown as HTMLElement,\r\n this.openMenu,\r\n );\r\n\r\n if (this.previousKeydownListener) {\r\n this.removeEventListener('keydown', this.previousKeydownListener);\r\n }\r\n this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);\r\n this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;\r\n }\r\n }\r\n }\r\n\r\n firstUpdated() {\r\n // close open menu on `esc` click\r\n document.addEventListener(\r\n 'keydown',\r\n (e) => {\r\n if (e.key === 'Escape') {\r\n this.openMenu = '';\r\n this.mediaSliderOpen = false;\r\n }\r\n },\r\n false,\r\n );\r\n }\r\n\r\n menuSetup() {\r\n // re/build the nav\r\n this.menus = buildTopNavMenus(\r\n this.username,\r\n this.normalizedBaseHost,\r\n this.waybackPagesArchived,\r\n this.itemIdentifier,\r\n );\r\n }\r\n\r\n menuToggled(e: CustomEvent) {\r\n const currentMenu = this.openMenu;\r\n this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;\r\n // Keeps media slider open if media menu is open\r\n if (this.openMenu === 'media') {\r\n return;\r\n }\r\n this.closeMediaSlider();\r\n }\r\n\r\n navSearchBlurEvent(e: CustomEvent) {\r\n if (this.previousKeydownListener) {\r\n this.removeEventListener('keydown', this.previousKeydownListener);\r\n }\r\n\r\n const isUploadButton = e.detail?.isUploadButton;\r\n if (!isUploadButton) {\r\n const searchMenu = this.renderRoot.querySelector(\r\n 'search-menu',\r\n ) as HTMLElement;\r\n const elements = this.keyboardNavigation?.getFocusableElements();\r\n if (searchMenu && elements?.length) {\r\n elements[0].focus();\r\n }\r\n }\r\n }\r\n\r\n openMediaSlider() {\r\n this.mediaSliderOpen = true;\r\n }\r\n\r\n closeMediaSlider() {\r\n this.mediaSliderOpen = false;\r\n this.selectedMenuOption = '';\r\n }\r\n\r\n closeMenus() {\r\n this.openMenu = '';\r\n this.closeMediaSlider();\r\n }\r\n\r\n searchInChanged(e: CustomEvent) {\r\n this.searchIn = e.detail.searchIn;\r\n }\r\n\r\n trackClick(e: CustomEvent) {\r\n this.dispatchEvent(\r\n new CustomEvent('analyticsClick', {\r\n bubbles: true,\r\n composed: true,\r\n detail: e.detail,\r\n }),\r\n );\r\n }\r\n\r\n trackSubmit(e: CustomEvent) {\r\n this.dispatchEvent(\r\n new CustomEvent('analyticsSubmit', {\r\n bubbles: true,\r\n composed: true,\r\n detail: e.detail,\r\n }),\r\n );\r\n }\r\n\r\n mediaTypeSelected(e: CustomEvent) {\r\n if (this.selectedMenuOption === e.detail.mediatype) {\r\n this.closeMediaSlider();\r\n return;\r\n }\r\n this.selectedMenuOption = e.detail.mediatype;\r\n this.openMediaSlider();\r\n }\r\n\r\n get searchMenuOpened() {\r\n return this.openMenu === 'search';\r\n }\r\n\r\n get signedOutOpened() {\r\n return this.openMenu === 'login';\r\n }\r\n\r\n get userMenuOpened() {\r\n return this.openMenu === 'user';\r\n }\r\n\r\n get searchMenuTabIndex() {\r\n return this.searchMenuOpened ? '' : '-1';\r\n }\r\n\r\n get userMenuTabIndex() {\r\n return this.userMenuOpened ? '' : '-1';\r\n }\r\n\r\n get signedOutTabIndex() {\r\n return this.signedOutOpened ? '' : '-1';\r\n }\r\n\r\n get closeLayerClass() {\r\n return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';\r\n }\r\n\r\n get userMenu() {\r\n return html`\r\n <user-menu\r\n .baseHost=${this.normalizedBaseHost}\r\n .config=${this.config}\r\n .menuItems=${this.userMenuItems}\r\n ?open=${this.openMenu === 'user'}\r\n .username=${this.username}\r\n ?hideSearch=${this.hideSearch}\r\n tabindex=\"${this.userMenuTabIndex}\"\r\n @menuToggled=${this.menuToggled}\r\n @trackClick=${this.trackClick}\r\n @focusToOtherMenuItem=${(e: CustomEvent) =>\r\n (this.currentTab = e.detail)}\r\n ></user-menu>\r\n `;\r\n }\r\n\r\n get signedOutDropdown() {\r\n return html`\r\n <signed-out-dropdown\r\n .baseHost=${this.normalizedBaseHost}\r\n .config=${this.config}\r\n .open=${this.signedOutOpened}\r\n ?hideSearch=${this.hideSearch}\r\n tabindex=\"${this.signedOutTabIndex}\"\r\n .menuItems=${this.signedOutMenuItems}\r\n @focusToOtherMenuItem=${(e: CustomEvent) => {\r\n this.currentTab = e.detail;\r\n }}\r\n ></signed-out-dropdown>\r\n `;\r\n }\r\n\r\n get signedOutMenuItems() {\r\n return this.menus.signedOut;\r\n }\r\n\r\n /**\r\n * Most users just get the basic menu items.\r\n * For users with `/items` priv, additional admin menu items are included too.\r\n * Having the `/flags` priv adds a further admin item for managing flags.\r\n */\r\n get userMenuItems() {\r\n const basicItems = this.menus.user;\r\n\r\n let adminItems = this.menus.userAdmin;\r\n if (this.canManageFlags) {\r\n adminItems = adminItems.concat(this.menus.userAdminFlags);\r\n }\r\n\r\n return this.itemIdentifier && this.admin\r\n ? [basicItems, adminItems]\r\n : [basicItems];\r\n }\r\n\r\n get allowSecondaryIcon() {\r\n return this.secondIdentitySlotMode === 'allow';\r\n }\r\n\r\n get useCustomSearch() {\r\n return this.searchSlotMode === 'custom';\r\n }\r\n\r\n get customSearchSlot() {\r\n return this.useCustomSearch\r\n ? html`<slot name=\"custom-search\" slot=\"custom-search\"></slot>`\r\n : nothing;\r\n }\r\n\r\n get secondLogoSlot() {\r\n return this.allowSecondaryIcon\r\n ? html`\r\n <slot name=\"opt-sec-logo\" slot=\"opt-sec-logo\"></slot>\r\n <slot name=\"opt-sec-logo-mobile\" slot=\"opt-sec-logo-mobile\"></slot>\r\n `\r\n : nothing;\r\n }\r\n\r\n get separatorTemplate() {\r\n return html`<li class=\"divider\" role=\"presentation\"></li>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"topnav\">\r\n <primary-nav\r\n .baseHost=${this.normalizedBaseHost}\r\n .mediaBaseHost=${this.mediaBaseHost}\r\n .config=${this.config}\r\n .openMenu=${this.openMenu}\r\n .screenName=${this.screenName}\r\n .searchIn=${this.searchIn}\r\n .searchQuery=${this.searchQuery}\r\n .searchSlotMode=${this.searchSlotMode}\r\n .secondIdentitySlotMode=${this.secondIdentitySlotMode}\r\n .selectedMenuOption=${this.selectedMenuOption}\r\n .username=${this.username}\r\n .userProfileImagePath=${this.userProfileImagePath}\r\n .currentTab=${this.currentTab}\r\n ?hideSearch=${this.hideSearch}\r\n @mediaTypeSelected=${this.mediaTypeSelected}\r\n @trackClick=${this.trackClick}\r\n @trackSubmit=${this.trackSubmit}\r\n @menuToggled=${this.menuToggled}\r\n @navSearchBlur=${this.navSearchBlurEvent}\r\n >\r\n ${this.secondLogoSlot} ${this.customSearchSlot}\r\n </primary-nav>\r\n <media-slider\r\n .baseHost=${this.normalizedBaseHost}\r\n .config=${this.config}\r\n .selectedMenuOption=${this.selectedMenuOption}\r\n .mediaSliderOpen=${this.mediaSliderOpen}\r\n .menus=${this.menus}\r\n tabindex=\"${this.mediaSliderOpen ? '1' : '-1'}\"\r\n @focusToOtherMenuItem=${(e: CustomEvent) =>\r\n (this.currentTab = e.detail)}\r\n ></media-slider>\r\n </div>\r\n ${this.username ? this.userMenu : this.signedOutDropdown}\r\n ${this.useCustomSearch\r\n ? nothing\r\n : html`<search-menu\r\n .baseHost=${this.normalizedBaseHost}\r\n .config=${this.config}\r\n .openMenu=${this.openMenu}\r\n tabindex=\"${this.searchMenuTabIndex}\"\r\n ?hideSearch=${this.hideSearch}\r\n @searchInChanged=${this.searchInChanged}\r\n @trackClick=${this.trackClick}\r\n @trackSubmit=${this.trackSubmit}\r\n ></search-menu>`}\r\n <desktop-subnav\r\n .baseHost=${this.normalizedBaseHost}\r\n .menuItems=${this.menus.more.links}\r\n @focus=${this.closeMenus}\r\n ></desktop-subnav>\r\n <div\r\n id=\"close-layer\"\r\n class=\"${this.closeLayerClass}\"\r\n @click=${this.closeMenus}\r\n ></div>\r\n `;\r\n }\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-navigation.js","sourceRoot":"","sources":["../../../src/lib/keyboard-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["export default class KeyboardNavigation {\n elementsContainer: HTMLElement;\n menuOption: string;\n focusableElements: HTMLElement[];\n focusedIndex: number;\n\n /**\n * Constructor for the KeyboardNavigation class.\n * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.\n * @param {string} menuOption - The type of menu option ('web' or 'usermenu').\n */\n constructor(elementsContainer: HTMLElement, menuOption: string) {\n this.elementsContainer = elementsContainer;\n this.menuOption = menuOption;\n this.focusableElements = this.getFocusableElements();\n this.focusedIndex = 0; // always start from first element\n\n if (menuOption !== 'search') {\n this.focusableElements[this.focusedIndex]?.focus();\n }\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /**\n * Gets an array of focusable elements within the container.\n * @returns {HTMLElement[]} An array of focusable elements.\n */\n getFocusableElements(): HTMLElement[] {\n const focusableTagSelectors = 'a[href], button, input, [tabindex]';\n\n const isFocusable = (el: Element) =>\n !el.hasAttribute('disabled') &&\n el.getAttribute('aria-hidden') !== 'true' &&\n el.getAttribute('tabindex') !== '-1';\n\n let elements;\n if (this.menuOption === 'web') {\n // wayback focusable elements\n const waybackSlider =\n this.elementsContainer.querySelector('wayback-slider')?.shadowRoot;\n const waybackSearch = waybackSlider?.querySelector('wayback-search');\n const waybackSearchElements = Array.from(\n waybackSearch?.shadowRoot?.querySelectorAll(focusableTagSelectors) ??\n [],\n );\n\n const normalElements = Array.from(\n waybackSlider?.querySelectorAll(focusableTagSelectors) ?? [],\n );\n\n // wayback save-form focusable elements\n const savePageForm = waybackSlider?.querySelector('save-page-form');\n const savePageFormElements = Array.from(\n savePageForm?.shadowRoot?.querySelectorAll(focusableTagSelectors) ?? [],\n );\n\n elements = [\n ...waybackSearchElements,\n ...normalElements,\n ...savePageFormElements,\n ];\n } else {\n elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);\n }\n\n return Array.from(elements ?? []).filter(isFocusable) as HTMLElement[];\n }\n\n /**\n * Handles keyboard events and focuses the appropriate element.\n * @param {KeyboardEvent} event - The keyboard event object.\n */\n handleKeyDown(event: KeyboardEvent) {\n const target = event.composedPath()[0] as HTMLElement;\n\n // Ignore events from editable fields\n if (\n target instanceof HTMLInputElement ||\n target instanceof HTMLTextAreaElement ||\n target.isContentEditable\n ) {\n return;\n }\n\n const { key } = event;\n const isArrowKey = [\n 'ArrowDown',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowLeft',\n ].includes(key);\n const isTabKey = key === 'Tab';\n\n if (isArrowKey) {\n this.handleArrowKey(key);\n event.preventDefault();\n } else if (isTabKey) {\n this.handleTabKey(event);\n }\n }\n\n /**\n * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu\n * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').\n */\n handleArrowKey(key: string) {\n const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);\n if (isDownOrRight) {\n this.focusNext();\n } else {\n this.focusPrevious();\n }\n }\n\n /**\n * Handles the Tab key event and focuses the next or previous menu item.\n * @param {KeyboardEvent} event - The keyboard event object.\n */\n handleTabKey(event: KeyboardEvent) {\n const isShiftPressed = event.shiftKey;\n\n this.emitFocusToOtherMenuItems(isShiftPressed);\n\n this.focusableElements[this.focusedIndex]?.blur();\n if (!['search'].includes(this.menuOption)) {\n event.preventDefault();\n }\n }\n\n /**\n * Focuses the previous focusable element in the container.\n */\n focusPrevious() {\n if (this.focusableElements.length === 0) return;\n this.focusedIndex =\n (this.focusedIndex - 1 + this.focusableElements.length) %\n this.focusableElements.length;\n this.focusableElements[this.focusedIndex]?.focus();\n }\n\n /**\n * Focuses the next focusable element in the container.\n */\n focusNext() {\n if (this.focusableElements.length === 0) return;\n this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;\n this.focusableElements[this.focusedIndex]?.focus();\n }\n\n /**\n * Focuses the other parent menu items based on the provided flag.\n * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.\n */\n emitFocusToOtherMenuItems(isPrevious: boolean = false) {\n this.elementsContainer.dispatchEvent(\n new CustomEvent('focusToOtherMenuItem', {\n bubbles: true,\n composed: true,\n detail: {\n mediatype: this.menuOption,\n moveTo: isPrevious ? 'prev' : 'next',\n },\n }),\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"keyboard-navigation.js","sourceRoot":"","sources":["../../../src/lib/keyboard-navigation.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,kBAAkB;IAMrC;;;;OAIG;IACH,YAAY,iBAA8B,EAAE,UAAkB;;QAC5D,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACrD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,kCAAkC;QAEzD,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,KAAK,EAAE,CAAC;QACrD,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,oBAAoB;;QAClB,MAAM,qBAAqB,GAAG,oCAAoC,CAAC;QAEnE,MAAM,WAAW,GAAG,CAAC,EAAW,EAAE,EAAE,CAClC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;YAC5B,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM;YACzC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;QAEvC,IAAI,QAAQ,CAAC;QACb,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;YAC9B,6BAA6B;YAC7B,MAAM,aAAa,GACjB,MAAA,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,gBAAgB,CAAC,0CAAE,UAAU,CAAC;YACrE,MAAM,aAAa,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACrE,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CACtC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,UAAU,0CAAE,gBAAgB,CAAC,qBAAqB,CAAC,mCAChE,EAAE,CACL,CAAC;YAEF,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,gBAAgB,CAAC,qBAAqB,CAAC,mCAAI,EAAE,CAC7D,CAAC;YAEF,uCAAuC;YACvC,MAAM,YAAY,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACpE,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CACrC,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,gBAAgB,CAAC,qBAAqB,CAAC,mCAAI,EAAE,CACxE,CAAC;YAEF,QAAQ,GAAG;gBACT,GAAG,qBAAqB;gBACxB,GAAG,cAAc;gBACjB,GAAG,oBAAoB;aACxB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;QAC5E,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC,MAAM,CAAC,WAAW,CAAkB,CAAC;IACzE,CAAC;IAED;;;OAGG;IACH,aAAa,CAAC,KAAoB;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAgB,CAAC;QAEtD,qCAAqC;QACrC,IACE,MAAM,YAAY,gBAAgB;YAClC,MAAM,YAAY,mBAAmB;YACrC,MAAM,CAAC,iBAAiB,EACxB,CAAC;YACD,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;QACtB,MAAM,UAAU,GAAG;YACjB,WAAW;YACX,YAAY;YACZ,SAAS;YACT,WAAW;SACZ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAChB,MAAM,QAAQ,GAAG,GAAG,KAAK,KAAK,CAAC;QAE/B,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,GAAW;QACxB,MAAM,aAAa,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAChE,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY,CAAC,KAAoB;;QAC/B,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC;QAEtC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,CAAC;QAE/C,MAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,IAAI,EAAE,CAAC;QAClD,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IACH,aAAa;;QACX,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAChD,IAAI,CAAC,YAAY;YACf,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACvD,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;QAChC,MAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,KAAK,EAAE,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,SAAS;;QACP,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAChD,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;QAC5E,MAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,KAAK,EAAE,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,yBAAyB,CAAC,aAAsB,KAAK;QACnD,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAClC,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,SAAS,EAAE,IAAI,CAAC,UAAU;gBAC1B,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aACrC;SACF,CAAC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["export default class KeyboardNavigation {\r\n elementsContainer: HTMLElement;\r\n menuOption: string;\r\n focusableElements: HTMLElement[];\r\n focusedIndex: number;\r\n\r\n /**\r\n * Constructor for the KeyboardNavigation class.\r\n * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.\r\n * @param {string} menuOption - The type of menu option ('web' or 'usermenu').\r\n */\r\n constructor(elementsContainer: HTMLElement, menuOption: string) {\r\n this.elementsContainer = elementsContainer;\r\n this.menuOption = menuOption;\r\n this.focusableElements = this.getFocusableElements();\r\n this.focusedIndex = 0; // always start from first element\r\n\r\n if (menuOption !== 'search') {\r\n this.focusableElements[this.focusedIndex]?.focus();\r\n }\r\n this.handleKeyDown = this.handleKeyDown.bind(this);\r\n }\r\n\r\n /**\r\n * Gets an array of focusable elements within the container.\r\n * @returns {HTMLElement[]} An array of focusable elements.\r\n */\r\n getFocusableElements(): HTMLElement[] {\r\n const focusableTagSelectors = 'a[href], button, input, [tabindex]';\r\n\r\n const isFocusable = (el: Element) =>\r\n !el.hasAttribute('disabled') &&\r\n el.getAttribute('aria-hidden') !== 'true' &&\r\n el.getAttribute('tabindex') !== '-1';\r\n\r\n let elements;\r\n if (this.menuOption === 'web') {\r\n // wayback focusable elements\r\n const waybackSlider =\r\n this.elementsContainer.querySelector('wayback-slider')?.shadowRoot;\r\n const waybackSearch = waybackSlider?.querySelector('wayback-search');\r\n const waybackSearchElements = Array.from(\r\n waybackSearch?.shadowRoot?.querySelectorAll(focusableTagSelectors) ??\r\n [],\r\n );\r\n\r\n const normalElements = Array.from(\r\n waybackSlider?.querySelectorAll(focusableTagSelectors) ?? [],\r\n );\r\n\r\n // wayback save-form focusable elements\r\n const savePageForm = waybackSlider?.querySelector('save-page-form');\r\n const savePageFormElements = Array.from(\r\n savePageForm?.shadowRoot?.querySelectorAll(focusableTagSelectors) ?? [],\r\n );\r\n\r\n elements = [\r\n ...waybackSearchElements,\r\n ...normalElements,\r\n ...savePageFormElements,\r\n ];\r\n } else {\r\n elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);\r\n }\r\n\r\n return Array.from(elements ?? []).filter(isFocusable) as HTMLElement[];\r\n }\r\n\r\n /**\r\n * Handles keyboard events and focuses the appropriate element.\r\n * @param {KeyboardEvent} event - The keyboard event object.\r\n */\r\n handleKeyDown(event: KeyboardEvent) {\r\n const target = event.composedPath()[0] as HTMLElement;\r\n\r\n // Ignore events from editable fields\r\n if (\r\n target instanceof HTMLInputElement ||\r\n target instanceof HTMLTextAreaElement ||\r\n target.isContentEditable\r\n ) {\r\n return;\r\n }\r\n\r\n const { key } = event;\r\n const isArrowKey = [\r\n 'ArrowDown',\r\n 'ArrowRight',\r\n 'ArrowUp',\r\n 'ArrowLeft',\r\n ].includes(key);\r\n const isTabKey = key === 'Tab';\r\n\r\n if (isArrowKey) {\r\n this.handleArrowKey(key);\r\n event.preventDefault();\r\n } else if (isTabKey) {\r\n this.handleTabKey(event);\r\n }\r\n }\r\n\r\n /**\r\n * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu\r\n * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').\r\n */\r\n handleArrowKey(key: string) {\r\n const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);\r\n if (isDownOrRight) {\r\n this.focusNext();\r\n } else {\r\n this.focusPrevious();\r\n }\r\n }\r\n\r\n /**\r\n * Handles the Tab key event and focuses the next or previous menu item.\r\n * @param {KeyboardEvent} event - The keyboard event object.\r\n */\r\n handleTabKey(event: KeyboardEvent) {\r\n const isShiftPressed = event.shiftKey;\r\n\r\n this.emitFocusToOtherMenuItems(isShiftPressed);\r\n\r\n this.focusableElements[this.focusedIndex]?.blur();\r\n if (!['search'].includes(this.menuOption)) {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n /**\r\n * Focuses the previous focusable element in the container.\r\n */\r\n focusPrevious() {\r\n if (this.focusableElements.length === 0) return;\r\n this.focusedIndex =\r\n (this.focusedIndex - 1 + this.focusableElements.length) %\r\n this.focusableElements.length;\r\n this.focusableElements[this.focusedIndex]?.focus();\r\n }\r\n\r\n /**\r\n * Focuses the next focusable element in the container.\r\n */\r\n focusNext() {\r\n if (this.focusableElements.length === 0) return;\r\n this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;\r\n this.focusableElements[this.focusedIndex]?.focus();\r\n }\r\n\r\n /**\r\n * Focuses the other parent menu items based on the provided flag.\r\n * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.\r\n */\r\n emitFocusToOtherMenuItems(isPrevious: boolean = false) {\r\n this.elementsContainer.dispatchEvent(\r\n new CustomEvent('focusToOtherMenuItem', {\r\n bubbles: true,\r\n composed: true,\r\n detail: {\r\n mediatype: this.menuOption,\r\n moveTo: isPrevious ? 'prev' : 'next',\r\n },\r\n }),\r\n );\r\n }\r\n}\r\n"]}
|
package/dist/src/login-button.js
CHANGED
|
@@ -47,23 +47,23 @@ let LoginButton = class LoginButton extends TrackedElement {
|
|
|
47
47
|
}));
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
|
-
return html `
|
|
51
|
-
<div class="logged-out-toolbar">
|
|
52
|
-
<button
|
|
53
|
-
class="logged-out-menu ${this.avatarClass}"
|
|
54
|
-
@click=${this.toggleDropdown}
|
|
55
|
-
data-event-click-tracking="${this.analyticsEvent}"
|
|
56
|
-
aria-label="Toggle login menu"
|
|
57
|
-
aria-expanded="${makeBooleanString(this.menuOpened)}"
|
|
58
|
-
>
|
|
59
|
-
${icons.user}
|
|
60
|
-
</button>
|
|
61
|
-
<span>
|
|
62
|
-
<a href="${this.signupPath}">Sign up</a>
|
|
63
|
-
|
|
|
64
|
-
<a href="${this.loginPath}">Log in</a>
|
|
65
|
-
</span>
|
|
66
|
-
</div>
|
|
50
|
+
return html `
|
|
51
|
+
<div class="logged-out-toolbar">
|
|
52
|
+
<button
|
|
53
|
+
class="logged-out-menu ${this.avatarClass}"
|
|
54
|
+
@click=${this.toggleDropdown}
|
|
55
|
+
data-event-click-tracking="${this.analyticsEvent}"
|
|
56
|
+
aria-label="Toggle login menu"
|
|
57
|
+
aria-expanded="${makeBooleanString(this.menuOpened)}"
|
|
58
|
+
>
|
|
59
|
+
${icons.user}
|
|
60
|
+
</button>
|
|
61
|
+
<span>
|
|
62
|
+
<a href="${this.signupPath}">Sign up</a>
|
|
63
|
+
|
|
|
64
|
+
<a href="${this.loginPath}">Log in</a>
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
67
67
|
`;
|
|
68
68
|
}
|
|
69
69
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../src/login-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG5C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAEzB,qBAAgB,GAAG,EAAE,CAAC;IA6DzC,CAAC;IA3DC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,SAAS;QACX,OAAO,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,eAAe,CAAC;IACtD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,kBAAkB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9D,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,OAAO;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mCAGoB,IAAI,CAAC,WAAW;mBAChC,IAAI,CAAC,cAAc;uCACC,IAAI,CAAC,cAAc;;2BAE/B,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEjD,KAAK,CAAC,IAAI;;;qBAGD,IAAI,CAAC,UAAU;;qBAEf,IAAI,CAAC,SAAS;;;KAG9B,CAAC;IACJ,CAAC;CACF,CAAA;AAjE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEzB;IAAhB,KAAK,EAAE;qDAA+B;AAL5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkEvB","sourcesContent":["import { html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport loginButtonCSS from './styles/login-button';\nimport formatUrl from './lib/format-url';\nimport { makeBooleanString } from './lib/make-boolean-string';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IATopNavConfig } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('login-button')\nexport class LoginButton extends TrackedElement {\n @property({ type: String }) baseHost = '';\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n @property({ type: String }) openMenu = '';\n\n @state() private dropdownTabIndex = '';\n\n static get styles() {\n return loginButtonCSS;\n }\n\n get signupPath() {\n return formatUrl('/account/signup', this.baseHost);\n }\n\n get loginPath() {\n return formatUrl('/login', this.baseHost);\n }\n\n get analyticsEvent() {\n return `${this.config?.eventCategory}|NavLoginIcon`;\n }\n\n get menuOpened(): boolean {\n return this.openMenu === 'login';\n }\n\n get avatarClass() {\n return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;\n }\n\n toggleDropdown(e: Event) {\n e.preventDefault();\n this.trackClick(e);\n this.dropdownTabIndex = this.menuOpened ? '' : '-1';\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n bubbles: true,\n composed: true,\n detail: {\n menuName: 'login',\n },\n }),\n );\n }\n\n render() {\n return html`\n <div class=\"logged-out-toolbar\">\n <button\n class=\"logged-out-menu ${this.avatarClass}\"\n @click=${this.toggleDropdown}\n data-event-click-tracking=\"${this.analyticsEvent}\"\n aria-label=\"Toggle login menu\"\n aria-expanded=\"${makeBooleanString(this.menuOpened)}\"\n >\n ${icons.user}\n </button>\n <span>\n <a href=\"${this.signupPath}\">Sign up</a>\n |\n <a href=\"${this.loginPath}\">Log in</a>\n </span>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../src/login-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG5C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAEzB,qBAAgB,GAAG,EAAE,CAAC;IA6DzC,CAAC;IA3DC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,SAAS;QACX,OAAO,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,eAAe,CAAC;IACtD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,kBAAkB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9D,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,OAAO;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mCAGoB,IAAI,CAAC,WAAW;mBAChC,IAAI,CAAC,cAAc;uCACC,IAAI,CAAC,cAAc;;2BAE/B,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEjD,KAAK,CAAC,IAAI;;;qBAGD,IAAI,CAAC,UAAU;;qBAEf,IAAI,CAAC,SAAS;;;KAG9B,CAAC;IACJ,CAAC;CACF,CAAA;AAjE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEzB;IAAhB,KAAK,EAAE;qDAA+B;AAL5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkEvB","sourcesContent":["import { html } from 'lit';\r\nimport TrackedElement from './tracked-element';\r\nimport icons from './assets/img/icons';\r\nimport loginButtonCSS from './styles/login-button';\r\nimport formatUrl from './lib/format-url';\r\nimport { makeBooleanString } from './lib/make-boolean-string';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { IATopNavConfig } from './models';\r\nimport { defaultTopNavConfig } from './data/menus';\r\n\r\n@customElement('login-button')\r\nexport class LoginButton extends TrackedElement {\r\n @property({ type: String }) baseHost = '';\r\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\r\n @property({ type: String }) openMenu = '';\r\n\r\n @state() private dropdownTabIndex = '';\r\n\r\n static get styles() {\r\n return loginButtonCSS;\r\n }\r\n\r\n get signupPath() {\r\n return formatUrl('/account/signup', this.baseHost);\r\n }\r\n\r\n get loginPath() {\r\n return formatUrl('/login', this.baseHost);\r\n }\r\n\r\n get analyticsEvent() {\r\n return `${this.config?.eventCategory}|NavLoginIcon`;\r\n }\r\n\r\n get menuOpened(): boolean {\r\n return this.openMenu === 'login';\r\n }\r\n\r\n get avatarClass() {\r\n return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;\r\n }\r\n\r\n toggleDropdown(e: Event) {\r\n e.preventDefault();\r\n this.trackClick(e);\r\n this.dropdownTabIndex = this.menuOpened ? '' : '-1';\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n bubbles: true,\r\n composed: true,\r\n detail: {\r\n menuName: 'login',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"logged-out-toolbar\">\r\n <button\r\n class=\"logged-out-menu ${this.avatarClass}\"\r\n @click=${this.toggleDropdown}\r\n data-event-click-tracking=\"${this.analyticsEvent}\"\r\n aria-label=\"Toggle login menu\"\r\n aria-expanded=\"${makeBooleanString(this.menuOpened)}\"\r\n >\r\n ${icons.user}\r\n </button>\r\n <span>\r\n <a href=\"${this.signupPath}\">Sign up</a>\r\n |\r\n <a href=\"${this.loginPath}\">Log in</a>\r\n </span>\r\n </div>\r\n `;\r\n }\r\n}\r\n"]}
|
package/dist/src/media-menu.js
CHANGED
|
@@ -88,19 +88,19 @@ let MediaMenu = class MediaMenu extends LitElement {
|
|
|
88
88
|
get mediaMenuOptionsTemplate() {
|
|
89
89
|
const buttons = menuSelection.map(({ icon, menu, label, href, followable }) => {
|
|
90
90
|
const selected = this.selectedMenuOption === menu;
|
|
91
|
-
return html `
|
|
92
|
-
<media-button
|
|
93
|
-
.config=${this.config}
|
|
94
|
-
.icon=${icon}
|
|
95
|
-
.href=${formatUrl(href, this.baseHost)}
|
|
96
|
-
?followable=${followable}
|
|
97
|
-
.label=${label}
|
|
98
|
-
.mediatype=${menu}
|
|
99
|
-
.openMenu=${this.openMenu}
|
|
100
|
-
.selected=${selected}
|
|
101
|
-
.selectedMenuOption=${this.selectedMenuOption}
|
|
102
|
-
data-mediatype="${menu}"
|
|
103
|
-
></media-button>
|
|
91
|
+
return html `
|
|
92
|
+
<media-button
|
|
93
|
+
.config=${this.config}
|
|
94
|
+
.icon=${icon}
|
|
95
|
+
.href=${formatUrl(href, this.baseHost)}
|
|
96
|
+
?followable=${followable}
|
|
97
|
+
.label=${label}
|
|
98
|
+
.mediatype=${menu}
|
|
99
|
+
.openMenu=${this.openMenu}
|
|
100
|
+
.selected=${selected}
|
|
101
|
+
.selectedMenuOption=${this.selectedMenuOption}
|
|
102
|
+
data-mediatype="${menu}"
|
|
103
|
+
></media-button>
|
|
104
104
|
`;
|
|
105
105
|
});
|
|
106
106
|
return buttons;
|
|
@@ -112,14 +112,14 @@ let MediaMenu = class MediaMenu extends LitElement {
|
|
|
112
112
|
return this.menuOpened ? 'open' : 'closed';
|
|
113
113
|
}
|
|
114
114
|
render() {
|
|
115
|
-
return html `
|
|
116
|
-
<div class="media-menu-container ${this.menuClass}">
|
|
117
|
-
<div class="overflow-clip">
|
|
118
|
-
<nav class="media-menu-inner" aria-expanded="${this.menuOpened}">
|
|
119
|
-
<div class="menu-group">${this.mediaMenuOptionsTemplate}</div>
|
|
120
|
-
</nav>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
115
|
+
return html `
|
|
116
|
+
<div class="media-menu-container ${this.menuClass}">
|
|
117
|
+
<div class="overflow-clip">
|
|
118
|
+
<nav class="media-menu-inner" aria-expanded="${this.menuOpened}">
|
|
119
|
+
<div class="menu-group">${this.mediaMenuOptionsTemplate}</div>
|
|
120
|
+
</nav>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
123
|
`;
|
|
124
124
|
}
|
|
125
125
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-menu.js","sourceRoot":"","sources":["../../src/media-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,gBAAgB,CAAC;AAGxB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,MAAM,aAAa,GAAG;IACpB;QACE,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,iBAAiB;KACzB;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,OAAO;KACf;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,OAAO;KACf;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,OAAO;KACf;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,mCAAmC;QACzC,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,IAAI;KACjB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAGK,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC7C,aAAQ,GAAG,EAAE,CAAC;QACd,uBAAkB,GAAG,EAAE,CAAC;IA2EtD,CAAC;IAtEC,MAAM,KAAK,MAAM;QACf,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,OAAO,CAAC,KAAqB;;QAC3B,IAAI,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC5B,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,EAAE,CAAC,CAAC;YAEzD,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;gBACjC,MAAM,QAAQ,GAAG,MAAA,MAAM,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;gBACjE,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,EAAE,CAAC;wBAC9D,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;wBACrC,QAAwB,CAAC,IAAI,EAAE,CAAC;wBAEjC,MAAM,aAAa,GACjB,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,MAAK,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;wBAC7D,CACE,MAAA,MAAA,YAAY,CAAC,aAAa,CAAC,0CAAE,UAAU,0CAAE,aAAa,CACpD,aAAa,CAEhB,CAAA,CAAC,KAAK,EAAE,CAAC;oBACZ,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,IAAI,wBAAwB;QAC1B,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE;YAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC;YAClD,OAAO,IAAI,CAAA;;sBAEG,IAAI,CAAC,MAAM;oBACb,IAAI;oBACJ,SAAS,CAAC,IAAyB,EAAE,IAAI,CAAC,QAAQ,CAAC;0BAC7C,UAAU;qBACf,KAAK;yBACD,IAAI;wBACL,IAAI,CAAC,QAAQ;wBACb,QAAQ;kCACE,IAAI,CAAC,kBAAkB;8BAC3B,IAAI;;SAEzB,CAAC;QACJ,CAAC,CACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC7C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,SAAS;;yDAEE,IAAI,CAAC,UAAU;sCAClC,IAAI,CAAC,wBAAwB;;;;KAI9D,CAAC;IACJ,CAAC;CACF,CAAA;AA9E6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA4C;AAE7C;IAAzB,QAAQ,CAAC,cAAc,CAAC;+CAA8B;AAP5C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+ErB","sourcesContent":["import { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, queryAll } from 'lit/decorators.js';\n\nimport { defaultTopNavConfig } from './data/menus';\nimport formatUrl from './lib/format-url';\nimport './media-button';\nimport { MediaButton } from './media-button';\nimport { IATopNavConfig } from './models';\nimport mediaMenuCSS from './styles/media-menu';\n\nconst menuSelection = [\n {\n icon: 'web',\n menu: 'web',\n href: 'https://web.archive.org',\n label: 'Wayback Machine',\n },\n {\n icon: 'texts',\n menu: 'texts',\n href: '/details/texts',\n label: 'Texts',\n },\n {\n icon: 'video',\n menu: 'video',\n href: '/details/movies',\n label: 'Video',\n },\n {\n icon: 'audio',\n menu: 'audio',\n href: '/details/audio',\n label: 'Audio',\n },\n {\n icon: 'software',\n menu: 'software',\n href: '/details/software',\n label: 'Software',\n },\n {\n icon: 'images',\n menu: 'images',\n href: '/details/image',\n label: 'Images',\n },\n {\n icon: 'donate',\n menu: 'donate',\n href: '/donate/?origin=iawww-mbhmbgrmenu',\n label: 'Donate',\n followable: true,\n },\n {\n icon: 'ellipses',\n menu: 'more',\n href: '/about/',\n label: 'More',\n },\n];\n\n@customElement('media-menu')\nexport class MediaMenu extends LitElement {\n @property({ type: String }) baseHost = '';\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n @property({ type: String }) openMenu = '';\n @property({ type: String }) selectedMenuOption = '';\n @property({ type: Object }) currentTab: { moveTo: string } | undefined;\n\n @queryAll('media-button') mediaButtons?: MediaButton[];\n\n static get styles() {\n return mediaMenuCSS;\n }\n\n updated(props: PropertyValues) {\n if (props.has('currentTab')) {\n const mediaButtons = Array.from(this.mediaButtons ?? []);\n\n mediaButtons.map((button, index) => {\n const linkItem = button.shadowRoot?.querySelector('a.menu-item');\n if (linkItem) {\n if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {\n linkItem.classList.remove('selected');\n (linkItem as HTMLElement).blur();\n\n const newFocusIndex =\n this.currentTab?.moveTo === 'next' ? index + 1 : index - 1;\n (\n mediaButtons[newFocusIndex]?.shadowRoot?.querySelector(\n 'a.menu-item',\n ) as HTMLElement\n ).focus();\n }\n }\n });\n }\n }\n\n get mediaMenuOptionsTemplate() {\n const buttons = menuSelection.map(\n ({ icon, menu, label, href, followable }) => {\n const selected = this.selectedMenuOption === menu;\n return html`\n <media-button\n .config=${this.config}\n .icon=${icon}\n .href=${formatUrl(href as string & Location, this.baseHost)}\n ?followable=${followable}\n .label=${label}\n .mediatype=${menu}\n .openMenu=${this.openMenu}\n .selected=${selected}\n .selectedMenuOption=${this.selectedMenuOption}\n data-mediatype=\"${menu}\"\n ></media-button>\n `;\n },\n );\n return buttons;\n }\n\n get menuOpened() {\n return this.openMenu === 'media';\n }\n\n get menuClass() {\n return this.menuOpened ? 'open' : 'closed';\n }\n\n render() {\n return html`\n <div class=\"media-menu-container ${this.menuClass}\">\n <div class=\"overflow-clip\">\n <nav class=\"media-menu-inner\" aria-expanded=\"${this.menuOpened}\">\n <div class=\"menu-group\">${this.mediaMenuOptionsTemplate}</div>\n </nav>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"media-menu.js","sourceRoot":"","sources":["../../src/media-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html } from 'lit';\r\nimport { customElement, property, queryAll } from 'lit/decorators.js';\r\n\r\nimport { defaultTopNavConfig } from './data/menus';\r\nimport formatUrl from './lib/format-url';\r\nimport './media-button';\r\nimport { MediaButton } from './media-button';\r\nimport { IATopNavConfig } from './models';\r\nimport mediaMenuCSS from './styles/media-menu';\r\n\r\nconst menuSelection = [\r\n {\r\n icon: 'web',\r\n menu: 'web',\r\n href: 'https://web.archive.org',\r\n label: 'Wayback Machine',\r\n },\r\n {\r\n icon: 'texts',\r\n menu: 'texts',\r\n href: '/details/texts',\r\n label: 'Texts',\r\n },\r\n {\r\n icon: 'video',\r\n menu: 'video',\r\n href: '/details/movies',\r\n label: 'Video',\r\n },\r\n {\r\n icon: 'audio',\r\n menu: 'audio',\r\n href: '/details/audio',\r\n label: 'Audio',\r\n },\r\n {\r\n icon: 'software',\r\n menu: 'software',\r\n href: '/details/software',\r\n label: 'Software',\r\n },\r\n {\r\n icon: 'images',\r\n menu: 'images',\r\n href: '/details/image',\r\n label: 'Images',\r\n },\r\n {\r\n icon: 'donate',\r\n menu: 'donate',\r\n href: '/donate/?origin=iawww-mbhmbgrmenu',\r\n label: 'Donate',\r\n followable: true,\r\n },\r\n {\r\n icon: 'ellipses',\r\n menu: 'more',\r\n href: '/about/',\r\n label: 'More',\r\n },\r\n];\r\n\r\n@customElement('media-menu')\r\nexport class MediaMenu extends LitElement {\r\n @property({ type: String }) baseHost = '';\r\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\r\n @property({ type: String }) openMenu = '';\r\n @property({ type: String }) selectedMenuOption = '';\r\n @property({ type: Object }) currentTab: { moveTo: string } | undefined;\r\n\r\n @queryAll('media-button') mediaButtons?: MediaButton[];\r\n\r\n static get styles() {\r\n return mediaMenuCSS;\r\n }\r\n\r\n updated(props: PropertyValues) {\r\n if (props.has('currentTab')) {\r\n const mediaButtons = Array.from(this.mediaButtons ?? []);\r\n\r\n mediaButtons.map((button, index) => {\r\n const linkItem = button.shadowRoot?.querySelector('a.menu-item');\r\n if (linkItem) {\r\n if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {\r\n linkItem.classList.remove('selected');\r\n (linkItem as HTMLElement).blur();\r\n\r\n const newFocusIndex =\r\n this.currentTab?.moveTo === 'next' ? index + 1 : index - 1;\r\n (\r\n mediaButtons[newFocusIndex]?.shadowRoot?.querySelector(\r\n 'a.menu-item',\r\n ) as HTMLElement\r\n ).focus();\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n get mediaMenuOptionsTemplate() {\r\n const buttons = menuSelection.map(\r\n ({ icon, menu, label, href, followable }) => {\r\n const selected = this.selectedMenuOption === menu;\r\n return html`\r\n <media-button\r\n .config=${this.config}\r\n .icon=${icon}\r\n .href=${formatUrl(href as string & Location, this.baseHost)}\r\n ?followable=${followable}\r\n .label=${label}\r\n .mediatype=${menu}\r\n .openMenu=${this.openMenu}\r\n .selected=${selected}\r\n .selectedMenuOption=${this.selectedMenuOption}\r\n data-mediatype=\"${menu}\"\r\n ></media-button>\r\n `;\r\n },\r\n );\r\n return buttons;\r\n }\r\n\r\n get menuOpened() {\r\n return this.openMenu === 'media';\r\n }\r\n\r\n get menuClass() {\r\n return this.menuOpened ? 'open' : 'closed';\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"media-menu-container ${this.menuClass}\">\r\n <div class=\"overflow-clip\">\r\n <nav class=\"media-menu-inner\" aria-expanded=\"${this.menuOpened}\">\r\n <div class=\"menu-group\">${this.mediaMenuOptionsTemplate}</div>\r\n </nav>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"]}
|
package/dist/src/models.d.ts
CHANGED
package/dist/src/models.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["export interface IATopNavConfig {\n /**\n * Google Analytics event category\n */\n eventCategory?: string;\n\n /**\n * Copy to display for number of pages archived at the top of the Wayback search form\n *\n * ie. \"425 billion\"\n */\n waybackPagesArchived?: string;\n\n /**\n * Array of strings representing the values of options that should be hidden from search options\n */\n hiddenSearchOptions?: string[];\n\n /**\n * Map from dropdown item ids to any callout text that should be applied beside them\n */\n callouts?: Record<string, string>;\n}\n\nexport interface IATopNavLink {\n title: string;\n\n url?: string;\n\n class?: string;\n\n icon?: string;\n\n analyticsEvent?: string;\n\n external?: boolean;\n}\n\nexport interface IATopNavMediaMenu {\n heading: string;\n iconLinks: IATopNavLink[];\n featuredLinks: IATopNavLink[];\n links: IATopNavLink[];\n mobileAppsLinks: IATopNavLink[];\n browserExtensionsLinks: IATopNavLink[];\n archiveItLinks: IATopNavLink[];\n}\n\nexport interface IATopNavMenuConfig {\n audio: IATopNavMediaMenu;\n images: IATopNavMediaMenu;\n more: IATopNavMediaMenu;\n signedOut: IATopNavLink[];\n software: IATopNavMediaMenu;\n texts: IATopNavMediaMenu;\n user: IATopNavLink[];\n userAdmin: IATopNavLink[];\n userAdminFlags: IATopNavLink[];\n video: IATopNavMediaMenu;\n web: IATopNavMediaMenu;\n}\n\nexport type IATopNavSecondIdentitySlotMode = 'allow' | '';\n"]}
|
|
1
|
+
{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["export interface IATopNavConfig {\r\n /**\r\n * Google Analytics event category\r\n */\r\n eventCategory?: string;\r\n\r\n /**\r\n * Copy to display for number of pages archived at the top of the Wayback search form\r\n *\r\n * ie. \"425 billion\"\r\n */\r\n waybackPagesArchived?: string;\r\n\r\n /**\r\n * Array of strings representing the values of options that should be hidden from search options\r\n */\r\n hiddenSearchOptions?: string[];\r\n\r\n /**\r\n * Map from dropdown item ids to any callout text that should be applied beside them\r\n */\r\n callouts?: Record<string, string>;\r\n}\r\n\r\nexport interface IATopNavLink {\r\n title: string;\r\n\r\n url?: string;\r\n\r\n class?: string;\r\n\r\n icon?: string;\r\n\r\n analyticsEvent?: string;\r\n\r\n external?: boolean;\r\n}\r\n\r\nexport interface IATopNavMediaMenu {\r\n heading: string;\r\n iconLinks: IATopNavLink[];\r\n featuredLinks: IATopNavLink[];\r\n links: IATopNavLink[];\r\n mobileAppsLinks: IATopNavLink[];\r\n browserExtensionsLinks: IATopNavLink[];\r\n archiveItLinks: IATopNavLink[];\r\n}\r\n\r\nexport interface IATopNavMenuConfig {\r\n audio: IATopNavMediaMenu;\r\n images: IATopNavMediaMenu;\r\n more: IATopNavMediaMenu;\r\n signedOut: IATopNavLink[];\r\n software: IATopNavMediaMenu;\r\n texts: IATopNavMediaMenu;\r\n user: IATopNavLink[];\r\n userAdmin: IATopNavLink[];\r\n userAdminFlags: IATopNavLink[];\r\n video: IATopNavMediaMenu;\r\n web: IATopNavMediaMenu;\r\n}\r\n\r\nexport type IATopNavSecondIdentitySlotMode = 'allow' | '';\r\n\r\nexport type IATopNavSearchSlotMode = 'custom' | '';\r\n"]}
|
|
@@ -4,7 +4,7 @@ import './assets/img/hamburger';
|
|
|
4
4
|
import './login-button';
|
|
5
5
|
import './nav-search';
|
|
6
6
|
import './media-menu';
|
|
7
|
-
import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
|
|
7
|
+
import { IATopNavConfig, IATopNavSearchSlotMode, IATopNavSecondIdentitySlotMode } from './models';
|
|
8
8
|
export declare class PrimaryNav extends TrackedElement {
|
|
9
9
|
mediaBaseHost: string;
|
|
10
10
|
baseHost: string;
|
|
@@ -14,6 +14,7 @@ export declare class PrimaryNav extends TrackedElement {
|
|
|
14
14
|
screenName: string;
|
|
15
15
|
searchIn: string;
|
|
16
16
|
searchQuery: string;
|
|
17
|
+
searchSlotMode: IATopNavSearchSlotMode;
|
|
17
18
|
secondIdentitySlotMode: IATopNavSecondIdentitySlotMode;
|
|
18
19
|
selectedMenuOption: string;
|
|
19
20
|
signedOutMenuOpen: boolean;
|
|
@@ -34,6 +35,7 @@ export declare class PrimaryNav extends TrackedElement {
|
|
|
34
35
|
get userIcon(): import("lit").TemplateResult<1>;
|
|
35
36
|
get loginIcon(): import("lit").TemplateResult<1>;
|
|
36
37
|
get searchMenuOpen(): boolean;
|
|
38
|
+
get useCustomSearch(): boolean;
|
|
37
39
|
get allowSecondaryIcon(): boolean;
|
|
38
40
|
get searchMenu(): import("lit").TemplateResult<1> | typeof nothing;
|
|
39
41
|
private emitNavSearchBlurEvent;
|