@internetarchive/ia-topnav 1.4.1 → 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/.prettierignore +1 -1
- package/LICENSE +661 -661
- package/README.md +147 -147
- package/demo/index.html +28 -28
- package/dist/src/data/menus.js +0 -2
- 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 +10 -10
- package/dist/src/ia-topnav.js +39 -67
- package/dist/src/ia-topnav.js.map +1 -1
- package/dist/src/login-button.d.ts +3 -0
- package/dist/src/login-button.js +11 -1
- package/dist/src/login-button.js.map +1 -1
- package/dist/src/models.d.ts +0 -4
- package/dist/src/models.js.map +1 -1
- package/dist/src/primary-nav.d.ts +9 -4
- package/dist/src/primary-nav.js +34 -36
- 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 +0 -5
- package/dist/src/styles/ia-topnav.js.map +1 -1
- package/dist/src/styles/primary-nav.js +50 -5
- 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 +18 -60
- package/dist/test/ia-topnav.test.js.map +1 -1
- package/dist/test/primary-nav.test.js +31 -2
- package/dist/test/primary-nav.test.js.map +1 -1
- package/eslint.config.mjs +53 -53
- package/package.json +72 -72
- package/prettier.config.js +9 -9
- package/src/data/menus.ts +0 -2
- package/src/dropdown-menu.ts +6 -12
- package/src/ia-topnav.ts +44 -78
- package/src/login-button.ts +12 -1
- package/src/models.ts +0 -5
- package/src/primary-nav.ts +38 -34
- package/src/signed-out-dropdown.ts +1 -2
- package/src/styles/dropdown-menu.ts +1 -0
- package/src/styles/ia-topnav.ts +0 -5
- package/src/styles/primary-nav.ts +50 -5
- package/src/user-menu.ts +3 -4
- package/ssl/server.key +28 -28
- package/test/ia-topnav.test.ts +20 -81
- package/test/primary-nav.test.ts +43 -2
- package/tsconfig.json +31 -31
- package/web-dev-server.config.mjs +32 -32
- package/web-test-runner.config.mjs +41 -41
- package/dist/src/lib/location-handler.d.ts +0 -1
- package/dist/src/lib/location-handler.js +0 -5
- package/dist/src/lib/location-handler.js.map +0 -1
- package/dist/src/nav-search.d.ts +0 -19
- package/dist/src/nav-search.js +0 -127
- package/dist/src/nav-search.js.map +0 -1
- package/dist/src/search-menu.d.ts +0 -20
- package/dist/src/search-menu.js +0 -162
- package/dist/src/search-menu.js.map +0 -1
- package/dist/src/styles/nav-search.d.ts +0 -2
- package/dist/src/styles/nav-search.js +0 -136
- package/dist/src/styles/nav-search.js.map +0 -1
- package/dist/src/styles/search-menu.d.ts +0 -2
- package/dist/src/styles/search-menu.js +0 -118
- package/dist/src/styles/search-menu.js.map +0 -1
- 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/dist/test/nav-search.test.d.ts +0 -1
- package/dist/test/nav-search.test.js +0 -47
- package/dist/test/nav-search.test.js.map +0 -1
- package/dist/test/search-menu.test.d.ts +0 -1
- package/dist/test/search-menu.test.js +0 -42
- package/dist/test/search-menu.test.js.map +0 -1
- package/src/lib/location-handler.ts +0 -5
- package/src/nav-search.ts +0 -117
- package/src/search-menu.ts +0 -156
- package/src/styles/nav-search.ts +0 -136
- package/src/styles/search-menu.ts +0 -118
- package/src/styles/signed-out-dropdown.ts +0 -31
- package/src/styles/user-menu.ts +0 -31
- package/test/nav-search.test.ts +0 -70
- package/test/search-menu.test.ts +0 -58
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
// import { playwrightLauncher } from '@web/test-runner-playwright';
|
|
2
|
-
|
|
3
|
-
const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
|
|
4
|
-
|
|
5
|
-
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
|
|
6
|
-
/** Test files to run */
|
|
7
|
-
files: 'dist/test/**/*.test.js',
|
|
8
|
-
|
|
9
|
-
/** Resolve bare module imports */
|
|
10
|
-
nodeResolve: {
|
|
11
|
-
exportConditions: ['browser', 'development'],
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
/** Filter out lit dev mode logs */
|
|
15
|
-
filterBrowserLogs(log) {
|
|
16
|
-
for (const arg of log.args) {
|
|
17
|
-
if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
|
|
18
|
-
return false;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return true;
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
|
25
|
-
// esbuildTarget: 'auto',
|
|
26
|
-
|
|
27
|
-
/** Amount of browsers to run concurrently */
|
|
28
|
-
// concurrentBrowsers: 2,
|
|
29
|
-
|
|
30
|
-
/** Amount of test files per browser to test concurrently */
|
|
31
|
-
// concurrency: 1,
|
|
32
|
-
|
|
33
|
-
/** Browsers to run tests on */
|
|
34
|
-
// browsers: [
|
|
35
|
-
// playwrightLauncher({ product: 'chromium' }),
|
|
36
|
-
// playwrightLauncher({ product: 'firefox' }),
|
|
37
|
-
// playwrightLauncher({ product: 'webkit' }),
|
|
38
|
-
// ],
|
|
39
|
-
|
|
40
|
-
// See documentation for all available options
|
|
41
|
-
});
|
|
1
|
+
// import { playwrightLauncher } from '@web/test-runner-playwright';
|
|
2
|
+
|
|
3
|
+
const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
|
|
4
|
+
|
|
5
|
+
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
|
|
6
|
+
/** Test files to run */
|
|
7
|
+
files: 'dist/test/**/*.test.js',
|
|
8
|
+
|
|
9
|
+
/** Resolve bare module imports */
|
|
10
|
+
nodeResolve: {
|
|
11
|
+
exportConditions: ['browser', 'development'],
|
|
12
|
+
},
|
|
13
|
+
|
|
14
|
+
/** Filter out lit dev mode logs */
|
|
15
|
+
filterBrowserLogs(log) {
|
|
16
|
+
for (const arg of log.args) {
|
|
17
|
+
if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return true;
|
|
22
|
+
},
|
|
23
|
+
|
|
24
|
+
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
|
25
|
+
// esbuildTarget: 'auto',
|
|
26
|
+
|
|
27
|
+
/** Amount of browsers to run concurrently */
|
|
28
|
+
// concurrentBrowsers: 2,
|
|
29
|
+
|
|
30
|
+
/** Amount of test files per browser to test concurrently */
|
|
31
|
+
// concurrency: 1,
|
|
32
|
+
|
|
33
|
+
/** Browsers to run tests on */
|
|
34
|
+
// browsers: [
|
|
35
|
+
// playwrightLauncher({ product: 'chromium' }),
|
|
36
|
+
// playwrightLauncher({ product: 'firefox' }),
|
|
37
|
+
// playwrightLauncher({ product: 'webkit' }),
|
|
38
|
+
// ],
|
|
39
|
+
|
|
40
|
+
// See documentation for all available options
|
|
41
|
+
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function (url: string): void;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"location-handler.js","sourceRoot":"","sources":["../../../src/lib/location-handler.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAE1B,MAAM,CAAC,OAAO,WAAW,GAAW;IAClC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;AAC7B,CAAC","sourcesContent":["/* istanbul ignore file */\n\nexport default function (url: string) {\n window.location.href = url;\n}\n"]}
|
package/dist/src/nav-search.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { nothing } from 'lit';
|
|
2
|
-
import TrackedElement from './tracked-element';
|
|
3
|
-
import { IATopNavConfig } from './models';
|
|
4
|
-
export declare class NavSearch extends TrackedElement {
|
|
5
|
-
baseHost: string;
|
|
6
|
-
config: IATopNavConfig;
|
|
7
|
-
locationHandler: (url: string) => void;
|
|
8
|
-
open: boolean;
|
|
9
|
-
openMenu: string;
|
|
10
|
-
searchIn: string;
|
|
11
|
-
searchQuery: string;
|
|
12
|
-
private queryInput?;
|
|
13
|
-
static get styles(): import("lit").CSSResult[];
|
|
14
|
-
search(e: CustomEvent): boolean;
|
|
15
|
-
toggleSearchMenu(): void;
|
|
16
|
-
get searchInsideInput(): import("lit").TemplateResult<1> | typeof nothing;
|
|
17
|
-
get searchEndpoint(): string;
|
|
18
|
-
render(): import("lit").TemplateResult<1>;
|
|
19
|
-
}
|
package/dist/src/nav-search.js
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { nothing, html } from 'lit';
|
|
3
|
-
import TrackedElement from './tracked-element';
|
|
4
|
-
import navSearchCSS from './styles/nav-search';
|
|
5
|
-
import icons from './assets/img/icons';
|
|
6
|
-
import formatUrl from './lib/format-url';
|
|
7
|
-
import { customElement, property, query } from 'lit/decorators.js';
|
|
8
|
-
import { defaultTopNavConfig } from './data/menus';
|
|
9
|
-
import { iaSronlyStyles } from '@internetarchive/ia-styles';
|
|
10
|
-
let NavSearch = class NavSearch extends TrackedElement {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments);
|
|
13
|
-
this.baseHost = '';
|
|
14
|
-
this.config = defaultTopNavConfig;
|
|
15
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
16
|
-
this.locationHandler = (url) => { };
|
|
17
|
-
this.open = false;
|
|
18
|
-
this.openMenu = '';
|
|
19
|
-
this.searchIn = '';
|
|
20
|
-
this.searchQuery = '';
|
|
21
|
-
}
|
|
22
|
-
static get styles() {
|
|
23
|
-
return [navSearchCSS, iaSronlyStyles];
|
|
24
|
-
}
|
|
25
|
-
search(e) {
|
|
26
|
-
var _a;
|
|
27
|
-
const query = (_a = this.queryInput) === null || _a === void 0 ? void 0 : _a.value;
|
|
28
|
-
if (!query) {
|
|
29
|
-
e.preventDefault();
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
// TV search points to a detail page with a q param instead
|
|
33
|
-
if (this.searchIn === 'TV') {
|
|
34
|
-
this.locationHandler(formatUrl(`/details/tv?q=${query}`, this.baseHost));
|
|
35
|
-
e.preventDefault();
|
|
36
|
-
return false;
|
|
37
|
-
}
|
|
38
|
-
this.trackSubmit(e);
|
|
39
|
-
return true;
|
|
40
|
-
}
|
|
41
|
-
toggleSearchMenu() {
|
|
42
|
-
if (this.openMenu === 'search') {
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
this.dispatchEvent(new CustomEvent('menuToggled', {
|
|
46
|
-
detail: {
|
|
47
|
-
menuName: 'search',
|
|
48
|
-
},
|
|
49
|
-
composed: true,
|
|
50
|
-
bubbles: true,
|
|
51
|
-
}));
|
|
52
|
-
}
|
|
53
|
-
get searchInsideInput() {
|
|
54
|
-
return this.searchIn
|
|
55
|
-
? html `<input type="hidden" name="sin" value="${this.searchIn}" />`
|
|
56
|
-
: nothing;
|
|
57
|
-
}
|
|
58
|
-
get searchEndpoint() {
|
|
59
|
-
return '/search';
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
var _a, _b;
|
|
63
|
-
const searchMenuClass = this.open ? 'flex' : 'search-inactive';
|
|
64
|
-
return html `
|
|
65
|
-
<div class="search-activated fade-in ${searchMenuClass}">
|
|
66
|
-
<form
|
|
67
|
-
id="nav-search"
|
|
68
|
-
class="highlight"
|
|
69
|
-
.action=${formatUrl(this.searchEndpoint, this.baseHost)}
|
|
70
|
-
method="get"
|
|
71
|
-
@submit=${this.search}
|
|
72
|
-
data-event-submit-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchSubmit"
|
|
73
|
-
>
|
|
74
|
-
<label for="query" class="sr-only">Search the Archive</label>
|
|
75
|
-
<input
|
|
76
|
-
type="text"
|
|
77
|
-
name="query"
|
|
78
|
-
id="query"
|
|
79
|
-
class="search-field"
|
|
80
|
-
placeholder="Search"
|
|
81
|
-
autocomplete="off"
|
|
82
|
-
value=${this.searchQuery || ''}
|
|
83
|
-
@focus=${this.toggleSearchMenu}
|
|
84
|
-
/>
|
|
85
|
-
${this.searchInsideInput}
|
|
86
|
-
<button
|
|
87
|
-
type="submit"
|
|
88
|
-
class="search"
|
|
89
|
-
tabindex="-1"
|
|
90
|
-
data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavSearchClose"
|
|
91
|
-
>
|
|
92
|
-
${icons.search}
|
|
93
|
-
</button>
|
|
94
|
-
</form>
|
|
95
|
-
</div>
|
|
96
|
-
`;
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
__decorate([
|
|
100
|
-
property({ type: String })
|
|
101
|
-
], NavSearch.prototype, "baseHost", void 0);
|
|
102
|
-
__decorate([
|
|
103
|
-
property({ type: Object })
|
|
104
|
-
], NavSearch.prototype, "config", void 0);
|
|
105
|
-
__decorate([
|
|
106
|
-
property({ type: Object })
|
|
107
|
-
], NavSearch.prototype, "locationHandler", void 0);
|
|
108
|
-
__decorate([
|
|
109
|
-
property({ type: Boolean })
|
|
110
|
-
], NavSearch.prototype, "open", void 0);
|
|
111
|
-
__decorate([
|
|
112
|
-
property({ type: String })
|
|
113
|
-
], NavSearch.prototype, "openMenu", void 0);
|
|
114
|
-
__decorate([
|
|
115
|
-
property({ type: String })
|
|
116
|
-
], NavSearch.prototype, "searchIn", void 0);
|
|
117
|
-
__decorate([
|
|
118
|
-
property({ type: String })
|
|
119
|
-
], NavSearch.prototype, "searchQuery", void 0);
|
|
120
|
-
__decorate([
|
|
121
|
-
query('[name=query]')
|
|
122
|
-
], NavSearch.prototype, "queryInput", void 0);
|
|
123
|
-
NavSearch = __decorate([
|
|
124
|
-
customElement('nav-search')
|
|
125
|
-
], NavSearch);
|
|
126
|
-
export { NavSearch };
|
|
127
|
-
//# sourceMappingURL=nav-search.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nav-search.js","sourceRoot":"","sources":["../../src/nav-search.ts"],"names":[],"mappings":"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","sourcesContent":["import { nothing, html } from 'lit';\n\nimport TrackedElement from './tracked-element';\nimport navSearchCSS from './styles/nav-search';\nimport icons from './assets/img/icons';\nimport formatUrl from './lib/format-url';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { defaultTopNavConfig } from './data/menus';\nimport { IATopNavConfig } from './models';\nimport { iaSronlyStyles } from '@internetarchive/ia-styles';\n\n@customElement('nav-search')\nexport class NavSearch extends TrackedElement {\n @property({ type: String }) baseHost = '';\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n @property({ type: Object }) locationHandler = (url: string) => {};\n @property({ type: Boolean }) open = false;\n @property({ type: String }) openMenu = '';\n @property({ type: String }) searchIn = '';\n @property({ type: String }) searchQuery = '';\n\n @query('[name=query]') private queryInput?: HTMLInputElement;\n\n static get styles() {\n return [navSearchCSS, iaSronlyStyles];\n }\n\n search(e: CustomEvent) {\n const query = this.queryInput?.value;\n\n if (!query) {\n e.preventDefault();\n return false;\n }\n\n // TV search points to a detail page with a q param instead\n if (this.searchIn === 'TV') {\n this.locationHandler(\n formatUrl(`/details/tv?q=${query}` as string & Location, this.baseHost),\n );\n e.preventDefault();\n return false;\n }\n\n this.trackSubmit(e);\n return true;\n }\n\n toggleSearchMenu() {\n if (this.openMenu === 'search') {\n return;\n }\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'search',\n },\n composed: true,\n bubbles: true,\n }),\n );\n }\n\n get searchInsideInput() {\n return this.searchIn\n ? html`<input type=\"hidden\" name=\"sin\" value=\"${this.searchIn}\" />`\n : nothing;\n }\n\n get searchEndpoint() {\n return '/search';\n }\n\n render() {\n const searchMenuClass = this.open ? 'flex' : 'search-inactive';\n\n return html`\n <div class=\"search-activated fade-in ${searchMenuClass}\">\n <form\n id=\"nav-search\"\n class=\"highlight\"\n .action=${formatUrl(\n this.searchEndpoint as string & Location,\n this.baseHost,\n )}\n method=\"get\"\n @submit=${this.search}\n data-event-submit-tracking=\"${this.config\n ?.eventCategory}|NavSearchSubmit\"\n >\n <label for=\"query\" class=\"sr-only\">Search the Archive</label>\n <input\n type=\"text\"\n name=\"query\"\n id=\"query\"\n class=\"search-field\"\n placeholder=\"Search\"\n autocomplete=\"off\"\n value=${this.searchQuery || ''}\n @focus=${this.toggleSearchMenu}\n />\n ${this.searchInsideInput}\n <button\n type=\"submit\"\n class=\"search\"\n tabindex=\"-1\"\n data-event-click-tracking=\"${this.config\n ?.eventCategory}|NavSearchClose\"\n >\n ${icons.search}\n </button>\n </form>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import TrackedElement from './tracked-element';
|
|
2
|
-
import { IATopNavConfig } from './models';
|
|
3
|
-
export declare class SearchMenu extends TrackedElement {
|
|
4
|
-
baseHost: string;
|
|
5
|
-
config: IATopNavConfig;
|
|
6
|
-
hideSearch: boolean;
|
|
7
|
-
openMenu: string;
|
|
8
|
-
searchMenuOpen: boolean;
|
|
9
|
-
searchMenuAnimate: boolean;
|
|
10
|
-
selectedSearchType: string;
|
|
11
|
-
static get styles(): import("lit").CSSResult;
|
|
12
|
-
firstUpdated(): void;
|
|
13
|
-
disconnectedCallback(): void;
|
|
14
|
-
private handleKeyDownEvent;
|
|
15
|
-
selectSearchType(e: Event): void;
|
|
16
|
-
searchInChanged(e: InputEvent): void;
|
|
17
|
-
get searchTypesTemplate(): import("lit").TemplateResult<1>[];
|
|
18
|
-
get menuClass(): "closed" | "open";
|
|
19
|
-
render(): import("lit").TemplateResult<1>;
|
|
20
|
-
}
|
package/dist/src/search-menu.js
DELETED
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import TrackedElement from './tracked-element';
|
|
5
|
-
import searchMenuCSS from './styles/search-menu';
|
|
6
|
-
import formatUrl from './lib/format-url';
|
|
7
|
-
import { defaultTopNavConfig } from './data/menus';
|
|
8
|
-
let SearchMenu = class SearchMenu extends TrackedElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this.baseHost = '';
|
|
12
|
-
this.config = defaultTopNavConfig;
|
|
13
|
-
this.hideSearch = false;
|
|
14
|
-
this.openMenu = '';
|
|
15
|
-
this.searchMenuOpen = false;
|
|
16
|
-
this.searchMenuAnimate = false;
|
|
17
|
-
this.selectedSearchType = '';
|
|
18
|
-
}
|
|
19
|
-
static get styles() {
|
|
20
|
-
return searchMenuCSS;
|
|
21
|
-
}
|
|
22
|
-
firstUpdated() {
|
|
23
|
-
var _a;
|
|
24
|
-
(_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', (e) => this.handleKeyDownEvent(e));
|
|
25
|
-
}
|
|
26
|
-
disconnectedCallback() {
|
|
27
|
-
var _a;
|
|
28
|
-
// Clean up event listener when the element is removed
|
|
29
|
-
(_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', (e) => this.handleKeyDownEvent(e));
|
|
30
|
-
}
|
|
31
|
-
handleKeyDownEvent(e) {
|
|
32
|
-
if (!this.shadowRoot)
|
|
33
|
-
return;
|
|
34
|
-
const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
|
|
35
|
-
const length = searchTypes.length - 1;
|
|
36
|
-
if (!length)
|
|
37
|
-
return;
|
|
38
|
-
const searchTypeHandler = (index) => {
|
|
39
|
-
e.preventDefault();
|
|
40
|
-
const searchType = searchTypes[index];
|
|
41
|
-
searchType.checked = true;
|
|
42
|
-
searchType.dispatchEvent(new Event('change'));
|
|
43
|
-
searchType.focus();
|
|
44
|
-
};
|
|
45
|
-
if (e.key === 'Home') {
|
|
46
|
-
searchTypeHandler(0);
|
|
47
|
-
}
|
|
48
|
-
else if (e.key === 'End') {
|
|
49
|
-
searchTypeHandler(length);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
selectSearchType(e) {
|
|
53
|
-
const target = e.target;
|
|
54
|
-
this.selectedSearchType = target.value;
|
|
55
|
-
}
|
|
56
|
-
searchInChanged(e) {
|
|
57
|
-
const target = e.target;
|
|
58
|
-
this.dispatchEvent(new CustomEvent('searchInChanged', {
|
|
59
|
-
detail: {
|
|
60
|
-
searchIn: target.value,
|
|
61
|
-
},
|
|
62
|
-
}));
|
|
63
|
-
}
|
|
64
|
-
get searchTypesTemplate() {
|
|
65
|
-
const searchTypes = [
|
|
66
|
-
{
|
|
67
|
-
label: 'metadata',
|
|
68
|
-
value: '',
|
|
69
|
-
isDefault: true,
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
label: 'text contents',
|
|
73
|
-
value: 'TXT',
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
label: 'TV news captions',
|
|
77
|
-
value: 'TV',
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
label: 'radio transcripts',
|
|
81
|
-
value: 'RADIO',
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
label: 'archived web sites',
|
|
85
|
-
value: 'WEB',
|
|
86
|
-
},
|
|
87
|
-
].map(({ value, label, isDefault }) => {
|
|
88
|
-
if (this.config.hiddenSearchOptions &&
|
|
89
|
-
this.config.hiddenSearchOptions.includes(value)) {
|
|
90
|
-
return html ``;
|
|
91
|
-
}
|
|
92
|
-
return html `
|
|
93
|
-
<label @click="${this.selectSearchType}">
|
|
94
|
-
<input
|
|
95
|
-
form="nav-search"
|
|
96
|
-
type="radio"
|
|
97
|
-
name="sin"
|
|
98
|
-
value="${value}"
|
|
99
|
-
?checked=${isDefault}
|
|
100
|
-
?disabled=${!this.openMenu}
|
|
101
|
-
@change=${this.searchInChanged}
|
|
102
|
-
/>
|
|
103
|
-
Search ${label}
|
|
104
|
-
</label>
|
|
105
|
-
`;
|
|
106
|
-
});
|
|
107
|
-
return searchTypes;
|
|
108
|
-
}
|
|
109
|
-
get menuClass() {
|
|
110
|
-
return this.openMenu === 'search' ? 'open' : 'closed';
|
|
111
|
-
}
|
|
112
|
-
render() {
|
|
113
|
-
if (this.hideSearch) {
|
|
114
|
-
return html ``;
|
|
115
|
-
}
|
|
116
|
-
return html `
|
|
117
|
-
<div class="menu-wrapper">
|
|
118
|
-
<div
|
|
119
|
-
class="search-menu-inner tx-slide ${this.menuClass}"
|
|
120
|
-
aria-hidden="${!this.openMenu}"
|
|
121
|
-
>
|
|
122
|
-
${this.searchTypesTemplate}
|
|
123
|
-
<a
|
|
124
|
-
class="advanced-search"
|
|
125
|
-
href="${formatUrl('/advancedsearch.php', this.baseHost)}"
|
|
126
|
-
@click=${this.trackClick}
|
|
127
|
-
tabindex=${this.openMenu ? '0' : '-1'}
|
|
128
|
-
data-event-click-tracking="${this.config
|
|
129
|
-
.eventCategory}|NavAdvancedSearch"
|
|
130
|
-
>Advanced Search</a
|
|
131
|
-
>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
`;
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
__decorate([
|
|
138
|
-
property({ type: String })
|
|
139
|
-
], SearchMenu.prototype, "baseHost", void 0);
|
|
140
|
-
__decorate([
|
|
141
|
-
property({ type: Object })
|
|
142
|
-
], SearchMenu.prototype, "config", void 0);
|
|
143
|
-
__decorate([
|
|
144
|
-
property({ type: Boolean })
|
|
145
|
-
], SearchMenu.prototype, "hideSearch", void 0);
|
|
146
|
-
__decorate([
|
|
147
|
-
property({ type: String })
|
|
148
|
-
], SearchMenu.prototype, "openMenu", void 0);
|
|
149
|
-
__decorate([
|
|
150
|
-
property({ type: Boolean })
|
|
151
|
-
], SearchMenu.prototype, "searchMenuOpen", void 0);
|
|
152
|
-
__decorate([
|
|
153
|
-
property({ type: Boolean })
|
|
154
|
-
], SearchMenu.prototype, "searchMenuAnimate", void 0);
|
|
155
|
-
__decorate([
|
|
156
|
-
property({ type: String })
|
|
157
|
-
], SearchMenu.prototype, "selectedSearchType", void 0);
|
|
158
|
-
SearchMenu = __decorate([
|
|
159
|
-
customElement('search-menu')
|
|
160
|
-
], SearchMenu);
|
|
161
|
-
export { SearchMenu };
|
|
162
|
-
//# sourceMappingURL=search-menu.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"search-menu.js","sourceRoot":"","sources":["../../src/search-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport TrackedElement from './tracked-element';\nimport searchMenuCSS from './styles/search-menu';\nimport formatUrl from './lib/format-url';\nimport { IATopNavConfig } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('search-menu')\nexport class SearchMenu extends TrackedElement {\n @property({ type: String }) baseHost = '';\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n @property({ type: Boolean }) hideSearch = false;\n @property({ type: String }) openMenu = '';\n @property({ type: Boolean }) searchMenuOpen = false;\n @property({ type: Boolean }) searchMenuAnimate = false;\n @property({ type: String }) selectedSearchType = '';\n\n static get styles() {\n return searchMenuCSS;\n }\n\n firstUpdated() {\n this.shadowRoot?.addEventListener('keydown', (e) =>\n this.handleKeyDownEvent(e as KeyboardEvent),\n );\n }\n\n disconnectedCallback() {\n // Clean up event listener when the element is removed\n this.shadowRoot?.removeEventListener('keydown', (e) =>\n this.handleKeyDownEvent(e as KeyboardEvent),\n );\n }\n\n private handleKeyDownEvent(e: KeyboardEvent) {\n if (!this.shadowRoot) return;\n\n const searchTypes = this.shadowRoot.querySelectorAll(\n '.search-menu-inner label input[type=radio]',\n ) as NodeListOf<HTMLInputElement>;\n\n const length = searchTypes.length - 1;\n if (!length) return;\n\n const searchTypeHandler = (index: number) => {\n e.preventDefault();\n const searchType = searchTypes[index];\n searchType.checked = true;\n searchType.dispatchEvent(new Event('change'));\n searchType.focus();\n };\n\n if (e.key === 'Home') {\n searchTypeHandler(0);\n } else if (e.key === 'End') {\n searchTypeHandler(length);\n }\n }\n\n selectSearchType(e: Event) {\n const target = e.target as HTMLInputElement;\n this.selectedSearchType = target.value;\n }\n\n searchInChanged(e: InputEvent) {\n const target = e.target as HTMLInputElement;\n this.dispatchEvent(\n new CustomEvent('searchInChanged', {\n detail: {\n searchIn: target.value,\n },\n }),\n );\n }\n\n get searchTypesTemplate() {\n const searchTypes = [\n {\n label: 'metadata',\n value: '',\n isDefault: true,\n },\n {\n label: 'text contents',\n value: 'TXT',\n },\n {\n label: 'TV news captions',\n value: 'TV',\n },\n {\n label: 'radio transcripts',\n value: 'RADIO',\n },\n {\n label: 'archived web sites',\n value: 'WEB',\n },\n ].map(({ value, label, isDefault }) => {\n if (\n this.config.hiddenSearchOptions &&\n this.config.hiddenSearchOptions.includes(value)\n ) {\n return html``;\n }\n return html`\n <label @click=\"${this.selectSearchType}\">\n <input\n form=\"nav-search\"\n type=\"radio\"\n name=\"sin\"\n value=\"${value}\"\n ?checked=${isDefault}\n ?disabled=${!this.openMenu}\n @change=${this.searchInChanged}\n />\n Search ${label}\n </label>\n `;\n });\n\n return searchTypes;\n }\n\n get menuClass() {\n return this.openMenu === 'search' ? 'open' : 'closed';\n }\n\n render() {\n if (this.hideSearch) {\n return html``;\n }\n\n return html`\n <div class=\"menu-wrapper\">\n <div\n class=\"search-menu-inner tx-slide ${this.menuClass}\"\n aria-hidden=\"${!this.openMenu}\"\n >\n ${this.searchTypesTemplate}\n <a\n class=\"advanced-search\"\n href=\"${formatUrl('/advancedsearch.php', this.baseHost)}\"\n @click=${this.trackClick}\n tabindex=${this.openMenu ? '0' : '-1'}\n data-event-click-tracking=\"${this.config\n .eventCategory}|NavAdvancedSearch\"\n >Advanced Search</a\n >\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export default css `
|
|
3
|
-
input[type='text'] {
|
|
4
|
-
color: var(--grey13);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
input:focus {
|
|
8
|
-
outline: none;
|
|
9
|
-
}
|
|
10
|
-
button {
|
|
11
|
-
background: none;
|
|
12
|
-
color: inherit;
|
|
13
|
-
border: none;
|
|
14
|
-
font: inherit;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
}
|
|
17
|
-
button:focus {
|
|
18
|
-
outline: none;
|
|
19
|
-
}
|
|
20
|
-
.search {
|
|
21
|
-
padding-top: 0;
|
|
22
|
-
margin-right: 0.5rem;
|
|
23
|
-
}
|
|
24
|
-
.search svg {
|
|
25
|
-
position: relative;
|
|
26
|
-
fill: var(--activeSearchColor);
|
|
27
|
-
}
|
|
28
|
-
.search-activated {
|
|
29
|
-
display: -webkit-box;
|
|
30
|
-
display: -ms-flexbox;
|
|
31
|
-
display: flex;
|
|
32
|
-
position: absolute;
|
|
33
|
-
top: 0;
|
|
34
|
-
right: 4rem;
|
|
35
|
-
bottom: 0;
|
|
36
|
-
left: 4rem;
|
|
37
|
-
z-index: 3;
|
|
38
|
-
padding: 0.5rem 0.2rem;
|
|
39
|
-
border-radius: 1rem 1rem 0 0;
|
|
40
|
-
background: var(--searchActiveBg);
|
|
41
|
-
}
|
|
42
|
-
.search-inactive {
|
|
43
|
-
display: none;
|
|
44
|
-
}
|
|
45
|
-
.search-activated .highlight,
|
|
46
|
-
.search-activated .search {
|
|
47
|
-
background: var(--searchActiveInputBg);
|
|
48
|
-
border-radius: 0.5rem;
|
|
49
|
-
}
|
|
50
|
-
.search-activated .highlight {
|
|
51
|
-
display: -webkit-box;
|
|
52
|
-
display: -ms-flexbox;
|
|
53
|
-
display: flex;
|
|
54
|
-
width: 100%;
|
|
55
|
-
margin: 0 0.5rem;
|
|
56
|
-
}
|
|
57
|
-
.search-activated .search {
|
|
58
|
-
height: 100%;
|
|
59
|
-
padding: 0;
|
|
60
|
-
margin-right: 0;
|
|
61
|
-
-ms-flex-item-align: center;
|
|
62
|
-
-ms-grid-row-align: center;
|
|
63
|
-
align-self: center;
|
|
64
|
-
}
|
|
65
|
-
.search-activated .search svg {
|
|
66
|
-
height: 3rem;
|
|
67
|
-
width: 3rem;
|
|
68
|
-
}
|
|
69
|
-
.search-activated .search-field {
|
|
70
|
-
width: 100%;
|
|
71
|
-
height: 100%;
|
|
72
|
-
box-sizing: border-box;
|
|
73
|
-
padding-left: 1rem;
|
|
74
|
-
border-radius: 0.5rem;
|
|
75
|
-
border: none;
|
|
76
|
-
font-size: 1.6rem;
|
|
77
|
-
text-align: center;
|
|
78
|
-
}
|
|
79
|
-
.search-activated .search-field:focus {
|
|
80
|
-
outline: none;
|
|
81
|
-
}
|
|
82
|
-
@keyframes fade-in {
|
|
83
|
-
0% {
|
|
84
|
-
opacity: 0;
|
|
85
|
-
}
|
|
86
|
-
100% {
|
|
87
|
-
opacity: 1;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
.fade-in {
|
|
91
|
-
animation: fade-in 0.2s forwards;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
@media (min-width: 890px) {
|
|
95
|
-
.search svg {
|
|
96
|
-
display: inline;
|
|
97
|
-
width: 2.8rem;
|
|
98
|
-
height: 2.8rem;
|
|
99
|
-
vertical-align: -14px;
|
|
100
|
-
}
|
|
101
|
-
.search path {
|
|
102
|
-
fill: var(--desktopSearchIconFill);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.search-inactive,
|
|
106
|
-
.search-activated {
|
|
107
|
-
display: block;
|
|
108
|
-
position: static;
|
|
109
|
-
padding: 1.1rem 0.2rem;
|
|
110
|
-
background: transparent;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.search-activated .highlight {
|
|
114
|
-
width: 13rem;
|
|
115
|
-
height: 2.8rem;
|
|
116
|
-
-webkit-box-orient: horizontal;
|
|
117
|
-
-webkit-box-direction: reverse;
|
|
118
|
-
-ms-flex-direction: row-reverse;
|
|
119
|
-
flex-direction: row-reverse;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.search-activated .search-field {
|
|
123
|
-
width: calc(100% - 28px);
|
|
124
|
-
height: 100%;
|
|
125
|
-
padding-left: 0;
|
|
126
|
-
font-size: 1.4rem;
|
|
127
|
-
text-align: left;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.search-activated .search svg {
|
|
131
|
-
width: 2.8rem;
|
|
132
|
-
height: 2.8rem;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
`;
|
|
136
|
-
//# sourceMappingURL=nav-search.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nav-search.js","sourceRoot":"","sources":["../../../src/styles/nav-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n input[type='text'] {\n color: var(--grey13);\n }\n\n input:focus {\n outline: none;\n }\n button {\n background: none;\n color: inherit;\n border: none;\n font: inherit;\n cursor: pointer;\n }\n button:focus {\n outline: none;\n }\n .search {\n padding-top: 0;\n margin-right: 0.5rem;\n }\n .search svg {\n position: relative;\n fill: var(--activeSearchColor);\n }\n .search-activated {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 4rem;\n bottom: 0;\n left: 4rem;\n z-index: 3;\n padding: 0.5rem 0.2rem;\n border-radius: 1rem 1rem 0 0;\n background: var(--searchActiveBg);\n }\n .search-inactive {\n display: none;\n }\n .search-activated .highlight,\n .search-activated .search {\n background: var(--searchActiveInputBg);\n border-radius: 0.5rem;\n }\n .search-activated .highlight {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n margin: 0 0.5rem;\n }\n .search-activated .search {\n height: 100%;\n padding: 0;\n margin-right: 0;\n -ms-flex-item-align: center;\n -ms-grid-row-align: center;\n align-self: center;\n }\n .search-activated .search svg {\n height: 3rem;\n width: 3rem;\n }\n .search-activated .search-field {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n padding-left: 1rem;\n border-radius: 0.5rem;\n border: none;\n font-size: 1.6rem;\n text-align: center;\n }\n .search-activated .search-field:focus {\n outline: none;\n }\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .fade-in {\n animation: fade-in 0.2s forwards;\n }\n\n @media (min-width: 890px) {\n .search svg {\n display: inline;\n width: 2.8rem;\n height: 2.8rem;\n vertical-align: -14px;\n }\n .search path {\n fill: var(--desktopSearchIconFill);\n }\n\n .search-inactive,\n .search-activated {\n display: block;\n position: static;\n padding: 1.1rem 0.2rem;\n background: transparent;\n }\n\n .search-activated .highlight {\n width: 13rem;\n height: 2.8rem;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -ms-flex-direction: row-reverse;\n flex-direction: row-reverse;\n }\n\n .search-activated .search-field {\n width: calc(100% - 28px);\n height: 100%;\n padding-left: 0;\n font-size: 1.4rem;\n text-align: left;\n }\n\n .search-activated .search svg {\n width: 2.8rem;\n height: 2.8rem;\n }\n }\n`;\n"]}
|