@internetarchive/ia-topnav 2.0.0 → 2.0.1-alpha-webdev8396.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/dist/src/data/menus.js.map +1 -1
- package/dist/src/dropdown-menu.d.ts +3 -4
- package/dist/src/dropdown-menu.js +6 -13
- package/dist/src/dropdown-menu.js.map +1 -1
- package/dist/src/ia-topnav.d.ts +3 -0
- package/dist/src/ia-topnav.js +79 -69
- package/dist/src/ia-topnav.js.map +1 -1
- package/dist/src/login-button.d.ts +3 -0
- package/dist/src/login-button.js +28 -18
- package/dist/src/login-button.js.map +1 -1
- package/dist/src/models.js.map +1 -1
- package/dist/src/primary-nav.d.ts +4 -0
- package/dist/src/primary-nav.js +109 -90
- package/dist/src/primary-nav.js.map +1 -1
- package/dist/src/signed-out-dropdown.d.ts +1 -1
- package/dist/src/signed-out-dropdown.js +1 -2
- package/dist/src/signed-out-dropdown.js.map +1 -1
- package/dist/src/styles/dropdown-menu.js +1 -0
- package/dist/src/styles/dropdown-menu.js.map +1 -1
- package/dist/src/styles/ia-topnav.js +82 -82
- package/dist/src/styles/ia-topnav.js.map +1 -1
- package/dist/src/styles/primary-nav.js +353 -353
- package/dist/src/styles/primary-nav.js.map +1 -1
- package/dist/src/user-menu.d.ts +1 -2
- package/dist/src/user-menu.js +1 -2
- package/dist/src/user-menu.js.map +1 -1
- package/dist/test/ia-topnav.test.js +9 -9
- package/dist/test/ia-topnav.test.js.map +1 -1
- package/dist/test/primary-nav.test.js +7 -7
- package/dist/test/primary-nav.test.js.map +1 -1
- package/package.json +1 -1
- package/src/data/menus.ts +650 -650
- package/src/dropdown-menu.ts +6 -12
- package/src/ia-topnav.ts +332 -318
- package/src/login-button.ts +89 -78
- package/src/models.ts +58 -58
- package/src/primary-nav.ts +300 -277
- package/src/signed-out-dropdown.ts +1 -2
- package/src/styles/dropdown-menu.ts +1 -0
- package/src/styles/ia-topnav.ts +85 -85
- package/src/styles/primary-nav.ts +356 -356
- package/src/user-menu.ts +3 -4
- package/test/ia-topnav.test.ts +282 -282
- package/test/primary-nav.test.ts +135 -135
- package/dist/src/styles/signed-out-dropdown.d.ts +0 -2
- package/dist/src/styles/signed-out-dropdown.js +0 -31
- package/dist/src/styles/signed-out-dropdown.js.map +0 -1
- package/dist/src/styles/user-menu.d.ts +0 -2
- package/dist/src/styles/user-menu.js +0 -31
- package/dist/src/styles/user-menu.js.map +0 -1
- package/src/styles/signed-out-dropdown.ts +0 -31
- package/src/styles/user-menu.ts +0 -31
package/dist/src/login-button.js
CHANGED
|
@@ -5,7 +5,7 @@ import icons from './assets/img/icons';
|
|
|
5
5
|
import loginButtonCSS from './styles/login-button';
|
|
6
6
|
import formatUrl from './lib/format-url';
|
|
7
7
|
import { makeBooleanString } from './lib/make-boolean-string';
|
|
8
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
|
8
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
9
9
|
import { defaultTopNavConfig } from './data/menus';
|
|
10
10
|
let LoginButton = class LoginButton extends TrackedElement {
|
|
11
11
|
constructor() {
|
|
@@ -18,6 +18,13 @@ let LoginButton = class LoginButton extends TrackedElement {
|
|
|
18
18
|
static get styles() {
|
|
19
19
|
return loginButtonCSS;
|
|
20
20
|
}
|
|
21
|
+
/** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */
|
|
22
|
+
getDropdownToggleOffset() {
|
|
23
|
+
if (!this.toggleButton)
|
|
24
|
+
return 0;
|
|
25
|
+
return (this.getBoundingClientRect().right -
|
|
26
|
+
this.toggleButton.getBoundingClientRect().right);
|
|
27
|
+
}
|
|
21
28
|
get signupPath() {
|
|
22
29
|
return formatUrl('/signup', this.baseHost);
|
|
23
30
|
}
|
|
@@ -47,23 +54,23 @@ let LoginButton = class LoginButton extends TrackedElement {
|
|
|
47
54
|
}));
|
|
48
55
|
}
|
|
49
56
|
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>
|
|
57
|
+
return html `
|
|
58
|
+
<div class="logged-out-toolbar">
|
|
59
|
+
<button
|
|
60
|
+
class="logged-out-menu ${this.avatarClass}"
|
|
61
|
+
@click=${this.toggleDropdown}
|
|
62
|
+
data-event-click-tracking="${this.analyticsEvent}"
|
|
63
|
+
aria-label="Toggle login menu"
|
|
64
|
+
aria-expanded="${makeBooleanString(this.menuOpened)}"
|
|
65
|
+
>
|
|
66
|
+
${icons.user}
|
|
67
|
+
</button>
|
|
68
|
+
<span>
|
|
69
|
+
<a href="${this.signupPath}">Sign up</a>
|
|
70
|
+
|
|
|
71
|
+
<a href="${this.loginPath}">Log in</a>
|
|
72
|
+
</span>
|
|
73
|
+
</div>
|
|
67
74
|
`;
|
|
68
75
|
}
|
|
69
76
|
};
|
|
@@ -76,6 +83,9 @@ __decorate([
|
|
|
76
83
|
__decorate([
|
|
77
84
|
property({ type: String })
|
|
78
85
|
], LoginButton.prototype, "openMenu", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
query('button.logged-out-menu')
|
|
88
|
+
], LoginButton.prototype, "toggleButton", void 0);
|
|
79
89
|
__decorate([
|
|
80
90
|
state()
|
|
81
91
|
], LoginButton.prototype, "dropdownTabIndex", void 0);
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../src/login-button.ts"],"names":[],"mappings":"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","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, query, 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 @query('button.logged-out-menu') private toggleButton?: HTMLButtonElement;\n\n @state() private dropdownTabIndex = '';\n\n static get styles() {\n return loginButtonCSS;\n }\n\n /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */\n getDropdownToggleOffset(): number {\n if (!this.toggleButton) return 0;\n return (\n this.getBoundingClientRect().right -\n this.toggleButton.getBoundingClientRect().right\n );\n }\n\n get signupPath() {\n return formatUrl('/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"]}
|
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 {\
|
|
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 * 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"]}
|
|
@@ -23,7 +23,11 @@ export declare class PrimaryNav extends TrackedElement {
|
|
|
23
23
|
moveTo: string;
|
|
24
24
|
} | undefined;
|
|
25
25
|
signedOutMenuToggled: unknown;
|
|
26
|
+
private userMenuButton?;
|
|
27
|
+
private loginButton?;
|
|
26
28
|
static get styles(): import("lit").CSSResult;
|
|
29
|
+
/** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */
|
|
30
|
+
getAccountDropdownOffset(): number;
|
|
27
31
|
toggleMediaMenu(e: Event): void;
|
|
28
32
|
toggleSearchMenu(e: Event): void;
|
|
29
33
|
toggleUserMenu(e: Event): void;
|
package/dist/src/primary-nav.js
CHANGED
|
@@ -8,7 +8,7 @@ import './media-menu';
|
|
|
8
8
|
import logoWordmarkStacked from './assets/img/wordmark-stacked';
|
|
9
9
|
import primaryNavCSS from './styles/primary-nav';
|
|
10
10
|
import formatUrl from './lib/format-url';
|
|
11
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
11
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
12
12
|
import { defaultTopNavConfig } from './data/menus';
|
|
13
13
|
let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
14
14
|
constructor() {
|
|
@@ -30,6 +30,19 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
30
30
|
static get styles() {
|
|
31
31
|
return primaryNavCSS;
|
|
32
32
|
}
|
|
33
|
+
/** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */
|
|
34
|
+
getAccountDropdownOffset() {
|
|
35
|
+
const hostRect = this.getBoundingClientRect();
|
|
36
|
+
if (this.userMenuButton) {
|
|
37
|
+
return hostRect.right - this.userMenuButton.getBoundingClientRect().right;
|
|
38
|
+
}
|
|
39
|
+
if (this.loginButton) {
|
|
40
|
+
const loginRect = this.loginButton.getBoundingClientRect();
|
|
41
|
+
const innerOffset = this.loginButton.getDropdownToggleOffset();
|
|
42
|
+
return hostRect.right - loginRect.right + innerOffset;
|
|
43
|
+
}
|
|
44
|
+
return 0;
|
|
45
|
+
}
|
|
33
46
|
toggleMediaMenu(e) {
|
|
34
47
|
this.trackClick(e);
|
|
35
48
|
this.dispatchEvent(new CustomEvent('menuToggled', {
|
|
@@ -94,30 +107,30 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
94
107
|
var _a;
|
|
95
108
|
const userMenuClass = this.openMenu === 'user' ? 'active' : '';
|
|
96
109
|
const userMenuToolTip = this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';
|
|
97
|
-
return html `
|
|
98
|
-
<button
|
|
99
|
-
class="user-menu ${userMenuClass}"
|
|
100
|
-
title="${userMenuToolTip}"
|
|
101
|
-
@click="${this.toggleUserMenu}"
|
|
102
|
-
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavUserMenu"
|
|
103
|
-
>
|
|
104
|
-
<img
|
|
105
|
-
src="${this.mediaBaseHost}${this.userProfileImagePath}"
|
|
106
|
-
alt="Profile picture for ${this.screenName}"
|
|
107
|
-
/>
|
|
108
|
-
<span class="screen-name" dir="auto">${this.screenName}</span>
|
|
109
|
-
</button>
|
|
110
|
+
return html `
|
|
111
|
+
<button
|
|
112
|
+
class="user-menu ${userMenuClass}"
|
|
113
|
+
title="${userMenuToolTip}"
|
|
114
|
+
@click="${this.toggleUserMenu}"
|
|
115
|
+
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavUserMenu"
|
|
116
|
+
>
|
|
117
|
+
<img
|
|
118
|
+
src="${this.mediaBaseHost}${this.userProfileImagePath}"
|
|
119
|
+
alt="Profile picture for ${this.screenName}"
|
|
120
|
+
/>
|
|
121
|
+
<span class="screen-name" dir="auto">${this.screenName}</span>
|
|
122
|
+
</button>
|
|
110
123
|
`;
|
|
111
124
|
}
|
|
112
125
|
get loginIcon() {
|
|
113
|
-
return html `
|
|
114
|
-
<login-button
|
|
115
|
-
.baseHost=${this.baseHost}
|
|
116
|
-
.config=${this.config}
|
|
117
|
-
.dropdownOpen=${this.signedOutMenuOpen}
|
|
118
|
-
.openMenu=${this.openMenu}
|
|
119
|
-
@signedOutMenuToggled=${this.signedOutMenuToggled}
|
|
120
|
-
></login-button>
|
|
126
|
+
return html `
|
|
127
|
+
<login-button
|
|
128
|
+
.baseHost=${this.baseHost}
|
|
129
|
+
.config=${this.config}
|
|
130
|
+
.dropdownOpen=${this.signedOutMenuOpen}
|
|
131
|
+
.openMenu=${this.openMenu}
|
|
132
|
+
@signedOutMenuToggled=${this.signedOutMenuToggled}
|
|
133
|
+
></login-button>
|
|
121
134
|
`;
|
|
122
135
|
}
|
|
123
136
|
get searchMenuOpen() {
|
|
@@ -133,57 +146,57 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
133
146
|
get searchSlotContainer() {
|
|
134
147
|
if (this.hideSearch)
|
|
135
148
|
return nothing;
|
|
136
|
-
return html `
|
|
137
|
-
<div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
|
|
138
|
-
<slot name="search"></slot>
|
|
139
|
-
</div>
|
|
149
|
+
return html `
|
|
150
|
+
<div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
|
|
151
|
+
<slot name="search"></slot>
|
|
152
|
+
</div>
|
|
140
153
|
`;
|
|
141
154
|
}
|
|
142
155
|
get searchMenu() {
|
|
143
156
|
var _a;
|
|
144
157
|
if (this.hideSearch)
|
|
145
158
|
return nothing;
|
|
146
|
-
return html `
|
|
147
|
-
<button
|
|
148
|
-
class="search-trigger"
|
|
149
|
-
@click="${this.toggleSearchMenu}"
|
|
150
|
-
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchOpen"
|
|
151
|
-
>
|
|
152
|
-
${icons.search}
|
|
153
|
-
</button>
|
|
159
|
+
return html `
|
|
160
|
+
<button
|
|
161
|
+
class="search-trigger"
|
|
162
|
+
@click="${this.toggleSearchMenu}"
|
|
163
|
+
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchOpen"
|
|
164
|
+
>
|
|
165
|
+
${icons.search}
|
|
166
|
+
</button>
|
|
154
167
|
`;
|
|
155
168
|
}
|
|
156
169
|
get mobileDonateHeart() {
|
|
157
|
-
return html `
|
|
158
|
-
<a
|
|
159
|
-
class="mobile-donate-link"
|
|
160
|
-
.href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
|
|
161
|
-
>
|
|
162
|
-
${icons.donateUnpadded}
|
|
163
|
-
<span class="sr-only">"Donate to the archive"</span>
|
|
164
|
-
</a>
|
|
170
|
+
return html `
|
|
171
|
+
<a
|
|
172
|
+
class="mobile-donate-link"
|
|
173
|
+
.href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
|
|
174
|
+
>
|
|
175
|
+
${icons.donateUnpadded}
|
|
176
|
+
<span class="sr-only">"Donate to the archive"</span>
|
|
177
|
+
</a>
|
|
165
178
|
`;
|
|
166
179
|
}
|
|
167
180
|
get uploadButtonTemplate() {
|
|
168
|
-
return html ` <a
|
|
169
|
-
.href="${formatUrl('/upload', this.baseHost)}"
|
|
170
|
-
class="upload"
|
|
171
|
-
@focus=${this.toggleMediaMenu}
|
|
172
|
-
>
|
|
173
|
-
${icons.upload}
|
|
174
|
-
<span>Upload</span>
|
|
181
|
+
return html ` <a
|
|
182
|
+
.href="${formatUrl('/upload', this.baseHost)}"
|
|
183
|
+
class="upload"
|
|
184
|
+
@focus=${this.toggleMediaMenu}
|
|
185
|
+
>
|
|
186
|
+
${icons.upload}
|
|
187
|
+
<span>Upload</span>
|
|
175
188
|
</a>`;
|
|
176
189
|
}
|
|
177
190
|
get userStateTemplate() {
|
|
178
|
-
return html `<div class="user-info">
|
|
179
|
-
${this.username ? this.userIcon : this.loginIcon}
|
|
191
|
+
return html `<div class="user-info">
|
|
192
|
+
${this.username ? this.userIcon : this.loginIcon}
|
|
180
193
|
</div>`;
|
|
181
194
|
}
|
|
182
195
|
get secondLogoSlot() {
|
|
183
196
|
return this.allowSecondaryIcon
|
|
184
|
-
? html `
|
|
185
|
-
<slot name="opt-sec-logo"></slot>
|
|
186
|
-
<slot name="opt-sec-logo-mobile"></slot>
|
|
197
|
+
? html `
|
|
198
|
+
<slot name="opt-sec-logo"></slot>
|
|
199
|
+
<slot name="opt-sec-logo-mobile"></slot>
|
|
187
200
|
`
|
|
188
201
|
: nothing;
|
|
189
202
|
}
|
|
@@ -193,42 +206,42 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
193
206
|
render() {
|
|
194
207
|
var _a, _b;
|
|
195
208
|
// const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
|
|
196
|
-
return html `
|
|
197
|
-
<nav class=${this.hideSearch ? 'hide-search' : ''}>
|
|
198
|
-
<button
|
|
199
|
-
class="hamburger"
|
|
200
|
-
@click="${this.toggleMediaMenu}"
|
|
201
|
-
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavHamburger"
|
|
202
|
-
title="Open main menu"
|
|
203
|
-
>
|
|
204
|
-
<icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
|
|
205
|
-
</button>
|
|
206
|
-
|
|
207
|
-
<div class=${`branding ${this.secondLogoClass}`}>
|
|
208
|
-
<a
|
|
209
|
-
.href=${formatUrl('/', this.baseHost)}
|
|
210
|
-
@click=${this.trackClick}
|
|
211
|
-
data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavHome"
|
|
212
|
-
title="Go home"
|
|
213
|
-
class="link-home"
|
|
214
|
-
>${icons.iaLogo}${logoWordmarkStacked}</a
|
|
215
|
-
>
|
|
216
|
-
${this.secondLogoSlot}
|
|
217
|
-
</div>
|
|
218
|
-
<media-menu
|
|
219
|
-
.baseHost=${this.baseHost}
|
|
220
|
-
.config=${this.config}
|
|
221
|
-
?mediaMenuAnimate=${this.mediaMenuAnimate}
|
|
222
|
-
.selectedMenuOption=${this.selectedMenuOption}
|
|
223
|
-
.openMenu=${this.openMenu}
|
|
224
|
-
.currentTab=${this.currentTab}
|
|
225
|
-
></media-menu>
|
|
226
|
-
${this.searchSlotContainer}
|
|
227
|
-
<div class="right-side-section">
|
|
228
|
-
${this.mobileDonateHeart} ${this.userStateTemplate}
|
|
229
|
-
${this.uploadButtonTemplate} ${this.searchMenu}
|
|
230
|
-
</div>
|
|
231
|
-
</nav>
|
|
209
|
+
return html `
|
|
210
|
+
<nav class=${this.hideSearch ? 'hide-search' : ''}>
|
|
211
|
+
<button
|
|
212
|
+
class="hamburger"
|
|
213
|
+
@click="${this.toggleMediaMenu}"
|
|
214
|
+
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavHamburger"
|
|
215
|
+
title="Open main menu"
|
|
216
|
+
>
|
|
217
|
+
<icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
|
|
218
|
+
</button>
|
|
219
|
+
|
|
220
|
+
<div class=${`branding ${this.secondLogoClass}`}>
|
|
221
|
+
<a
|
|
222
|
+
.href=${formatUrl('/', this.baseHost)}
|
|
223
|
+
@click=${this.trackClick}
|
|
224
|
+
data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavHome"
|
|
225
|
+
title="Go home"
|
|
226
|
+
class="link-home"
|
|
227
|
+
>${icons.iaLogo}${logoWordmarkStacked}</a
|
|
228
|
+
>
|
|
229
|
+
${this.secondLogoSlot}
|
|
230
|
+
</div>
|
|
231
|
+
<media-menu
|
|
232
|
+
.baseHost=${this.baseHost}
|
|
233
|
+
.config=${this.config}
|
|
234
|
+
?mediaMenuAnimate=${this.mediaMenuAnimate}
|
|
235
|
+
.selectedMenuOption=${this.selectedMenuOption}
|
|
236
|
+
.openMenu=${this.openMenu}
|
|
237
|
+
.currentTab=${this.currentTab}
|
|
238
|
+
></media-menu>
|
|
239
|
+
${this.searchSlotContainer}
|
|
240
|
+
<div class="right-side-section">
|
|
241
|
+
${this.mobileDonateHeart} ${this.userStateTemplate}
|
|
242
|
+
${this.uploadButtonTemplate} ${this.searchMenu}
|
|
243
|
+
</div>
|
|
244
|
+
</nav>
|
|
232
245
|
`;
|
|
233
246
|
}
|
|
234
247
|
};
|
|
@@ -274,6 +287,12 @@ __decorate([
|
|
|
274
287
|
__decorate([
|
|
275
288
|
property({ type: Object })
|
|
276
289
|
], PrimaryNav.prototype, "currentTab", void 0);
|
|
290
|
+
__decorate([
|
|
291
|
+
query('button.user-menu')
|
|
292
|
+
], PrimaryNav.prototype, "userMenuButton", void 0);
|
|
293
|
+
__decorate([
|
|
294
|
+
query('login-button')
|
|
295
|
+
], PrimaryNav.prototype, "loginButton", void 0);
|
|
277
296
|
PrimaryNav = __decorate([
|
|
278
297
|
customElement('primary-nav')
|
|
279
298
|
], PrimaryNav);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\r\nimport TrackedElement from './tracked-element';\r\nimport icons from './assets/img/icons';\r\nimport './assets/img/hamburger';\r\nimport './login-button';\r\nimport './media-menu';\r\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\r\nimport primaryNavCSS from './styles/primary-nav';\r\nimport formatUrl from './lib/format-url';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\r\nimport { defaultTopNavConfig } from './data/menus';\r\n\r\n@customElement('primary-nav')\r\nexport class PrimaryNav extends TrackedElement {\r\n @property({ type: String }) mediaBaseHost = 'https://archive.org';\r\n @property({ type: String }) baseHost = '';\r\n @property({ type: Boolean }) hideSearch = false;\r\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\r\n @property({ type: String }) openMenu = '';\r\n @property({ type: String }) screenName = '';\r\n @property({ type: String })\r\n secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\r\n @property({ type: String }) selectedMenuOption = '';\r\n @property({ type: Boolean }) signedOutMenuOpen = false;\r\n @property({ type: Boolean }) userMenuOpen = false;\r\n @property({ type: Boolean }) mediaMenuAnimate = false;\r\n @property({ type: String }) username = '';\r\n @property({ type: String }) userProfileImagePath = '';\r\n @property({ type: Object }) currentTab:\r\n | { mediatype: string; moveTo: string }\r\n | undefined;\r\n signedOutMenuToggled: unknown;\r\n\r\n static get styles() {\r\n return primaryNavCSS;\r\n }\r\n\r\n toggleMediaMenu(e: Event) {\r\n this.trackClick(e);\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n detail: {\r\n menuName: 'media',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n toggleSearchMenu(e: Event) {\r\n this.trackClick(e);\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n detail: {\r\n menuName: 'search',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n toggleUserMenu(e: Event) {\r\n this.trackClick(e);\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n detail: {\r\n menuName: 'user',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n updated(props: PropertyValues) {\r\n if (props.has('currentTab')) {\r\n // early return\r\n if (!this.currentTab || Object.keys(this.currentTab).length === 0)\r\n return nothing;\r\n\r\n const isUserMenuTab =\r\n this.currentTab && this.currentTab.mediatype === 'usermenu';\r\n if (isUserMenuTab) {\r\n const mediaButtons = Array.from(\r\n this.shadowRoot\r\n ?.querySelector('media-menu')\r\n ?.shadowRoot?.querySelectorAll('media-button') ?? [],\r\n );\r\n const lastMediaButton = mediaButtons.filter((element) => {\r\n return element.shadowRoot\r\n ?.querySelector('a')\r\n ?.classList.contains('images');\r\n });\r\n\r\n let nextElement;\r\n if (this.username) {\r\n nextElement = this.shadowRoot?.querySelector('a.upload');\r\n } else {\r\n nextElement = this.shadowRoot\r\n ?.querySelector('login-button')\r\n ?.shadowRoot?.querySelector('span a');\r\n }\r\n\r\n const menuItemElement =\r\n lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\r\n\r\n const focusElement =\r\n this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\r\n\r\n if (focusElement) {\r\n (focusElement as HTMLElement).focus();\r\n }\r\n } else if (this.currentTab.moveTo === 'next') {\r\n if (this.shadowRoot?.querySelector('.user-menu')) {\r\n (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\r\n } else {\r\n (\r\n this.shadowRoot\r\n ?.querySelector('login-button')\r\n ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\r\n )?.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n get userIcon() {\r\n const userMenuClass = this.openMenu === 'user' ? 'active' : '';\r\n const userMenuToolTip =\r\n this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\r\n\r\n return html`\r\n <button\r\n class=\"user-menu ${userMenuClass}\"\r\n title=\"${userMenuToolTip}\"\r\n @click=\"${this.toggleUserMenu}\"\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\r\n >\r\n <img\r\n src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\r\n alt=\"Profile picture for ${this.screenName}\"\r\n />\r\n <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\r\n </button>\r\n `;\r\n }\r\n\r\n get loginIcon() {\r\n return html`\r\n <login-button\r\n .baseHost=${this.baseHost}\r\n .config=${this.config}\r\n .dropdownOpen=${this.signedOutMenuOpen}\r\n .openMenu=${this.openMenu}\r\n @signedOutMenuToggled=${this.signedOutMenuToggled}\r\n ></login-button>\r\n `;\r\n }\r\n\r\n get searchMenuOpen() {\r\n return this.openMenu === 'search';\r\n }\r\n\r\n get allowSecondaryIcon() {\r\n return this.secondIdentitySlotMode === 'allow';\r\n }\r\n\r\n /**\r\n * The search slot container, rendered between media-menu and\r\n * right-side-section so it sits left of the Upload button on desktop.\r\n */\r\n get searchSlotContainer() {\r\n if (this.hideSearch) return nothing;\r\n return html`\r\n <div class=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\r\n <slot name=\"search\"></slot>\r\n </div>\r\n `;\r\n }\r\n\r\n get searchMenu() {\r\n if (this.hideSearch) return nothing;\r\n\r\n return html`\r\n <button\r\n class=\"search-trigger\"\r\n @click=\"${this.toggleSearchMenu}\"\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\r\n >\r\n ${icons.search}\r\n </button>\r\n `;\r\n }\r\n\r\n get mobileDonateHeart() {\r\n return html`\r\n <a\r\n class=\"mobile-donate-link\"\r\n .href=${formatUrl(\r\n '/donate/?origin=iawww-mbhrt' as string & Location,\r\n this.baseHost,\r\n )}\r\n >\r\n ${icons.donateUnpadded}\r\n <span class=\"sr-only\">\"Donate to the archive\"</span>\r\n </a>\r\n `;\r\n }\r\n\r\n get uploadButtonTemplate() {\r\n return html` <a\r\n .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\r\n class=\"upload\"\r\n @focus=${this.toggleMediaMenu}\r\n >\r\n ${icons.upload}\r\n <span>Upload</span>\r\n </a>`;\r\n }\r\n\r\n get userStateTemplate() {\r\n return html`<div class=\"user-info\">\r\n ${this.username ? this.userIcon : this.loginIcon}\r\n </div>`;\r\n }\r\n\r\n get secondLogoSlot() {\r\n return this.allowSecondaryIcon\r\n ? html`\r\n <slot name=\"opt-sec-logo\"></slot>\r\n <slot name=\"opt-sec-logo-mobile\"></slot>\r\n `\r\n : nothing;\r\n }\r\n\r\n get secondLogoClass() {\r\n return this.allowSecondaryIcon ? 'second-logo' : '';\r\n }\r\n\r\n render() {\r\n // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\r\n return html`\r\n <nav class=${this.hideSearch ? 'hide-search' : ''}>\r\n <button\r\n class=\"hamburger\"\r\n @click=\"${this.toggleMediaMenu}\"\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\r\n title=\"Open main menu\"\r\n >\r\n <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\r\n </button>\r\n\r\n <div class=${`branding ${this.secondLogoClass}`}>\r\n <a\r\n .href=${formatUrl('/' as string & Location, this.baseHost)}\r\n @click=${this.trackClick}\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\r\n title=\"Go home\"\r\n class=\"link-home\"\r\n >${icons.iaLogo}${logoWordmarkStacked}</a\r\n >\r\n ${this.secondLogoSlot}\r\n </div>\r\n <media-menu\r\n .baseHost=${this.baseHost}\r\n .config=${this.config}\r\n ?mediaMenuAnimate=${this.mediaMenuAnimate}\r\n .selectedMenuOption=${this.selectedMenuOption}\r\n .openMenu=${this.openMenu}\r\n .currentTab=${this.currentTab}\r\n ></media-menu>\r\n ${this.searchSlotContainer}\r\n <div class=\"right-side-section\">\r\n ${this.mobileDonateHeart} ${this.userStateTemplate}\r\n ${this.uploadButtonTemplate} ${this.searchMenu}\r\n </div>\r\n </nav>\r\n `;\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './assets/img/hamburger';\nimport './login-button';\nimport type { LoginButton } from './login-button';\nimport './media-menu';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport primaryNavCSS from './styles/primary-nav';\nimport formatUrl from './lib/format-url';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('primary-nav')\nexport class PrimaryNav extends TrackedElement {\n @property({ type: String }) mediaBaseHost = 'https://archive.org';\n @property({ type: String }) baseHost = '';\n @property({ type: Boolean }) hideSearch = false;\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n @property({ type: String }) openMenu = '';\n @property({ type: String }) screenName = '';\n @property({ type: String })\n secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n @property({ type: String }) selectedMenuOption = '';\n @property({ type: Boolean }) signedOutMenuOpen = false;\n @property({ type: Boolean }) userMenuOpen = false;\n @property({ type: Boolean }) mediaMenuAnimate = false;\n @property({ type: String }) username = '';\n @property({ type: String }) userProfileImagePath = '';\n @property({ type: Object }) currentTab:\n | { mediatype: string; moveTo: string }\n | undefined;\n signedOutMenuToggled: unknown;\n\n @query('button.user-menu') private userMenuButton?: HTMLButtonElement;\n @query('login-button') private loginButton?: HTMLElement;\n\n static get styles() {\n return primaryNavCSS;\n }\n\n /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */\n getAccountDropdownOffset(): number {\n const hostRect = this.getBoundingClientRect();\n\n if (this.userMenuButton) {\n return hostRect.right - this.userMenuButton.getBoundingClientRect().right;\n }\n\n if (this.loginButton) {\n const loginRect = this.loginButton.getBoundingClientRect();\n const innerOffset = (\n this.loginButton as LoginButton\n ).getDropdownToggleOffset();\n return hostRect.right - loginRect.right + innerOffset;\n }\n\n return 0;\n }\n\n toggleMediaMenu(e: Event) {\n this.trackClick(e);\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'media',\n },\n }),\n );\n }\n\n toggleSearchMenu(e: Event) {\n this.trackClick(e);\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'search',\n },\n }),\n );\n }\n\n toggleUserMenu(e: Event) {\n this.trackClick(e);\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'user',\n },\n }),\n );\n }\n\n updated(props: PropertyValues) {\n if (props.has('currentTab')) {\n // early return\n if (!this.currentTab || Object.keys(this.currentTab).length === 0)\n return nothing;\n\n const isUserMenuTab =\n this.currentTab && this.currentTab.mediatype === 'usermenu';\n if (isUserMenuTab) {\n const mediaButtons = Array.from(\n this.shadowRoot\n ?.querySelector('media-menu')\n ?.shadowRoot?.querySelectorAll('media-button') ?? [],\n );\n const lastMediaButton = mediaButtons.filter((element) => {\n return element.shadowRoot\n ?.querySelector('a')\n ?.classList.contains('images');\n });\n\n let nextElement;\n if (this.username) {\n nextElement = this.shadowRoot?.querySelector('a.upload');\n } else {\n nextElement = this.shadowRoot\n ?.querySelector('login-button')\n ?.shadowRoot?.querySelector('span a');\n }\n\n const menuItemElement =\n lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\n\n const focusElement =\n this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\n\n if (focusElement) {\n (focusElement as HTMLElement).focus();\n }\n } else if (this.currentTab.moveTo === 'next') {\n if (this.shadowRoot?.querySelector('.user-menu')) {\n (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\n } else {\n (\n this.shadowRoot\n ?.querySelector('login-button')\n ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\n )?.focus();\n }\n }\n }\n }\n\n get userIcon() {\n const userMenuClass = this.openMenu === 'user' ? 'active' : '';\n const userMenuToolTip =\n this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\n\n return html`\n <button\n class=\"user-menu ${userMenuClass}\"\n title=\"${userMenuToolTip}\"\n @click=\"${this.toggleUserMenu}\"\n data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\n >\n <img\n src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\n alt=\"Profile picture for ${this.screenName}\"\n />\n <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\n </button>\n `;\n }\n\n get loginIcon() {\n return html`\n <login-button\n .baseHost=${this.baseHost}\n .config=${this.config}\n .dropdownOpen=${this.signedOutMenuOpen}\n .openMenu=${this.openMenu}\n @signedOutMenuToggled=${this.signedOutMenuToggled}\n ></login-button>\n `;\n }\n\n get searchMenuOpen() {\n return this.openMenu === 'search';\n }\n\n get allowSecondaryIcon() {\n return this.secondIdentitySlotMode === 'allow';\n }\n\n /**\n * The search slot container, rendered between media-menu and\n * right-side-section so it sits left of the Upload button on desktop.\n */\n get searchSlotContainer() {\n if (this.hideSearch) return nothing;\n return html`\n <div class=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\n <slot name=\"search\"></slot>\n </div>\n `;\n }\n\n get searchMenu() {\n if (this.hideSearch) return nothing;\n\n return html`\n <button\n class=\"search-trigger\"\n @click=\"${this.toggleSearchMenu}\"\n data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\n >\n ${icons.search}\n </button>\n `;\n }\n\n get mobileDonateHeart() {\n return html`\n <a\n class=\"mobile-donate-link\"\n .href=${formatUrl(\n '/donate/?origin=iawww-mbhrt' as string & Location,\n this.baseHost,\n )}\n >\n ${icons.donateUnpadded}\n <span class=\"sr-only\">\"Donate to the archive\"</span>\n </a>\n `;\n }\n\n get uploadButtonTemplate() {\n return html` <a\n .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\n class=\"upload\"\n @focus=${this.toggleMediaMenu}\n >\n ${icons.upload}\n <span>Upload</span>\n </a>`;\n }\n\n get userStateTemplate() {\n return html`<div class=\"user-info\">\n ${this.username ? this.userIcon : this.loginIcon}\n </div>`;\n }\n\n get secondLogoSlot() {\n return this.allowSecondaryIcon\n ? html`\n <slot name=\"opt-sec-logo\"></slot>\n <slot name=\"opt-sec-logo-mobile\"></slot>\n `\n : nothing;\n }\n\n get secondLogoClass() {\n return this.allowSecondaryIcon ? 'second-logo' : '';\n }\n\n render() {\n // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\n return html`\n <nav class=${this.hideSearch ? 'hide-search' : ''}>\n <button\n class=\"hamburger\"\n @click=\"${this.toggleMediaMenu}\"\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\n title=\"Open main menu\"\n >\n <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\n </button>\n\n <div class=${`branding ${this.secondLogoClass}`}>\n <a\n .href=${formatUrl('/' as string & Location, this.baseHost)}\n @click=${this.trackClick}\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\n title=\"Go home\"\n class=\"link-home\"\n >${icons.iaLogo}${logoWordmarkStacked}</a\n >\n ${this.secondLogoSlot}\n </div>\n <media-menu\n .baseHost=${this.baseHost}\n .config=${this.config}\n ?mediaMenuAnimate=${this.mediaMenuAnimate}\n .selectedMenuOption=${this.selectedMenuOption}\n .openMenu=${this.openMenu}\n .currentTab=${this.currentTab}\n ></media-menu>\n ${this.searchSlotContainer}\n <div class=\"right-side-section\">\n ${this.mobileDonateHeart} ${this.userStateTemplate}\n ${this.uploadButtonTemplate} ${this.searchMenu}\n </div>\n </nav>\n `;\n }\n}\n"]}
|
|
@@ -2,10 +2,9 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { customElement } from 'lit/decorators.js';
|
|
3
3
|
import DropdownMenu from './dropdown-menu';
|
|
4
4
|
import dropdownMenuCSS from './styles/dropdown-menu';
|
|
5
|
-
import signedOutDropdownStyles from './styles/signed-out-dropdown';
|
|
6
5
|
let SignedOutDropdown = class SignedOutDropdown extends DropdownMenu {
|
|
7
6
|
static get styles() {
|
|
8
|
-
return
|
|
7
|
+
return dropdownMenuCSS;
|
|
9
8
|
}
|
|
10
9
|
};
|
|
11
10
|
SignedOutDropdown = __decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signed-out-dropdown.js","sourceRoot":"","sources":["../../src/signed-out-dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,eAAe,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"signed-out-dropdown.js","sourceRoot":"","sources":["../../src/signed-out-dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,eAAe,MAAM,wBAAwB,CAAC;AAG9C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,YAAY;IACjD,MAAM,KAAK,MAAM;QACf,OAAO,eAAe,CAAC;IACzB,CAAC;CACF,CAAA;AAJY,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAI7B","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport DropdownMenu from './dropdown-menu';\nimport dropdownMenuCSS from './styles/dropdown-menu';\n\n@customElement('signed-out-dropdown')\nexport class SignedOutDropdown extends DropdownMenu {\n static get styles() {\n return dropdownMenuCSS;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/styles/dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/styles/dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n .nav-container {\n position: relative;\n }\n\n nav {\n position: absolute;\n right: 0;\n z-index: 4;\n overflow: hidden;\n font-size: 1.6rem;\n background-color: var(--dropdownMenuBg);\n transition-property: top;\n transition-duration: 0.2s;\n transition-timing-function: ease;\n }\n\n .initial,\n .closed {\n top: var(--topOffset, -1500px);\n }\n\n .closed {\n transition-duration: 0.5s;\n }\n\n .open {\n max-width: 100vw;\n overflow: auto;\n }\n\n h3 {\n padding: 0.6rem 2rem;\n margin: 0;\n font-size: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n ul {\n padding: 0.4rem 0 0.7rem 0;\n margin: 0;\n list-style: none;\n /* viewport height - nav height + bottom nav border */\n max-height: calc(100vh - 7.2rem + 1px);\n overflow: auto;\n box-sizing: border-box;\n }\n\n .divider {\n margin: 0.5rem 0;\n border-bottom: 1px solid var(--dropdownMenuDivider);\n }\n\n a,\n .info-item {\n display: block;\n color: var(--primaryTextColor);\n text-decoration: none;\n padding: 1rem 2rem;\n }\n\n .info-item {\n font-size: 0.8em;\n color: var(--dropdownMenuInfoItem);\n }\n\n .callout {\n position: absolute;\n margin-left: 10px;\n padding: 0 5px;\n border-radius: 2px;\n background: #fee257;\n color: #2c2c2c;\n font-size: 1.4rem;\n font-weight: bold;\n }\n\n a.mobile-upload {\n display: flex;\n justify-content: left;\n align-items: center;\n }\n a.mobile-upload svg {\n fill: var(--white);\n margin-right: 1rem;\n height: 1.4rem;\n width: 1.4rem;\n }\n\n @media (min-width: 890px) {\n nav {\n display: flex;\n overflow: visible;\n top: 0;\n left: auto;\n right: var(--dropdownMenuRight, 0);\n z-index: 5;\n transition: opacity 0.2s ease-in-out;\n font-size: 1.4rem;\n border-radius: 2px;\n background: var(--primaryTextColor);\n box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n nav:after {\n position: absolute;\n right: 7px;\n top: -7px;\n width: 12px;\n height: 7px;\n box-sizing: border-box;\n color: var(--white);\n content: '';\n border-bottom: 7px solid currentColor;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n }\n\n h3 {\n display: none;\n }\n\n ul {\n /* viewport height - nav height + bottom nav border */\n max-height: calc(100vh - 8.5rem + 1px);\n }\n\n .divider {\n border-bottom-color: var(--dropdownMenuDivider);\n }\n\n a {\n padding: 0.5rem 2rem;\n color: var(--inverseTextColor);\n transition:\n background 0.1s ease-out,\n color 0.1s ease-out;\n }\n\n .info-item {\n padding: 0.5rem 2rem;\n font-size: 0.8em;\n color: var(--inverseDropdownMenuInfoItem);\n }\n\n a:hover,\n a:active,\n a:focus {\n color: var(--linkHoverColor);\n background: var(--linkColor);\n outline: none;\n }\n\n .initial,\n .closed {\n opacity: 0;\n transition-duration: 0.2s;\n }\n\n .open {\n opacity: 1;\n overflow: visible;\n }\n\n a.mobile-upload {\n display: none;\n }\n }\n`;\n"]}
|