@internetarchive/ia-topnav 1.3.5 → 1.3.6
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/.eslintrc +16 -16
- package/LICENSE +661 -661
- package/README.md +147 -147
- package/index.d.ts +109 -109
- package/index.js +3 -3
- package/package.json +61 -61
- package/src/assets/img/hamburger.js +38 -38
- package/src/assets/img/ia-icon.js +33 -33
- package/src/assets/img/icon-audio.js +23 -23
- package/src/assets/img/icon-close.js +16 -16
- package/src/assets/img/icon-donate-unpadded.js +16 -16
- package/src/assets/img/icon-donate.js +15 -15
- package/src/assets/img/icon-ellipses.js +15 -15
- package/src/assets/img/icon-ia-logo.js +22 -22
- package/src/assets/img/icon-images.js +15 -15
- package/src/assets/img/icon-search.js +15 -15
- package/src/assets/img/icon-software.js +15 -15
- package/src/assets/img/icon-texts.js +15 -15
- package/src/assets/img/icon-upload-unpadded.js +14 -14
- package/src/assets/img/icon-upload.js +15 -15
- package/src/assets/img/icon-user.js +15 -15
- package/src/assets/img/icon-video.js +15 -15
- package/src/assets/img/icon-web.js +15 -15
- package/src/assets/img/icon.js +18 -18
- package/src/assets/img/icons.js +33 -33
- package/src/assets/img/wordmark-stacked.js +13 -13
- package/src/data/menus.js +646 -646
- package/src/desktop-subnav.js +45 -45
- package/src/dropdown-menu.js +109 -109
- package/src/ia-topnav.js +314 -314
- package/src/lib/formatUrl.js +1 -1
- package/src/lib/location-handler.js +5 -5
- package/src/lib/query-handler.js +7 -7
- package/src/lib/toSentenceCase.js +8 -8
- package/src/login-button.js +79 -79
- package/src/media-button.js +113 -113
- package/src/media-menu.js +133 -133
- package/src/media-slider.js +104 -104
- package/src/media-subnav.js +112 -112
- package/src/more-slider.js +33 -33
- package/src/nav-search.js +117 -125
- package/src/primary-nav.js +224 -224
- package/src/save-page-form.js +59 -59
- package/src/search-menu.js +115 -115
- package/src/signed-out-dropdown.js +10 -10
- package/src/styles/base.js +48 -48
- package/src/styles/desktop-subnav.js +37 -37
- package/src/styles/dropdown-menu.js +166 -166
- package/src/styles/ia-topnav.js +87 -87
- package/src/styles/login-button.js +79 -79
- package/src/styles/media-button.js +156 -156
- package/src/styles/media-menu.js +70 -70
- package/src/styles/media-slider.js +81 -81
- package/src/styles/media-subnav.js +156 -156
- package/src/styles/more-slider.js +15 -15
- package/src/styles/nav-search.js +136 -136
- package/src/styles/primary-nav.js +300 -300
- package/src/styles/save-page-form.js +54 -54
- package/src/styles/search-menu.js +99 -99
- package/src/styles/signed-out-dropdown.js +31 -31
- package/src/styles/user-menu.js +31 -31
- package/src/styles/wayback-search.js +48 -48
- package/src/styles/wayback-slider.js +30 -30
- package/src/tracked-element.js +27 -27
- package/src/user-menu.js +42 -42
- package/src/wayback-search.js +18 -18
- package/src/wayback-slider.js +87 -87
- package/test/assets/img/hamburger.test.js +15 -15
- package/test/assets/img/user.test.js +15 -15
- package/test/data/menus.test.js +19 -19
- package/test/dropdown-menu.test.js +25 -25
- package/test/ia-icon.test.js +13 -13
- package/test/ia-topnav.test.js +273 -273
- package/test/login-button.test.js +15 -15
- package/test/media-button.test.js +19 -19
- package/test/media-menu.test.js +40 -40
- package/test/media-slider.test.js +57 -57
- package/test/more-slider.test.js +13 -13
- package/test/nav-search.test.js +61 -61
- package/test/primary-nav.test.js +82 -82
- package/test/save-page-form.test.js +35 -35
- package/test/search-menu.test.js +49 -49
- package/test/user-menu.test.js +33 -33
- package/test/wayback-slider.test.js +80 -80
package/src/search-menu.js
CHANGED
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
import { html } from 'https://offshoot.prod.archive.org/lit.js';
|
|
2
|
-
import TrackedElement from './tracked-element.js';
|
|
3
|
-
import searchMenuCSS from './styles/search-menu.js';
|
|
4
|
-
import formatUrl from './lib/formatUrl.js';
|
|
5
|
-
|
|
6
|
-
class SearchMenu extends TrackedElement {
|
|
7
|
-
static get styles() {
|
|
8
|
-
return searchMenuCSS;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
static get properties() {
|
|
12
|
-
return {
|
|
13
|
-
baseHost: { type: String },
|
|
14
|
-
config: { type: Object },
|
|
15
|
-
hideSearch: { type: Boolean },
|
|
16
|
-
openMenu: { type: String },
|
|
17
|
-
searchMenuOpen: { type: Boolean },
|
|
18
|
-
searchMenuAnimate: { type: Boolean },
|
|
19
|
-
selectedSearchType: { type: String },
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
constructor() {
|
|
24
|
-
super();
|
|
25
|
-
this.config = {};
|
|
26
|
-
this.openMenu = '';
|
|
27
|
-
this.searchMenuOpen = false;
|
|
28
|
-
this.searchMenuAnimate = false;
|
|
29
|
-
this.selectedSearchType = '';
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
selectSearchType(e) {
|
|
33
|
-
this.selectedSearchType = e.target.value;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
searchInChanged(e) {
|
|
37
|
-
this.dispatchEvent(new CustomEvent('searchInChanged', {
|
|
38
|
-
detail: {
|
|
39
|
-
searchIn: e.target.value
|
|
40
|
-
}
|
|
41
|
-
}));
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
get searchTypesTemplate() {
|
|
45
|
-
const searchTypes = [
|
|
46
|
-
{
|
|
47
|
-
label: 'metadata',
|
|
48
|
-
value: '',
|
|
49
|
-
isDefault: true,
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
label: 'text contents',
|
|
53
|
-
value: 'TXT',
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
label: 'TV news captions',
|
|
57
|
-
value: 'TV',
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
label: 'radio transcripts',
|
|
61
|
-
value: 'RADIO'
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
label: 'archived web sites',
|
|
65
|
-
value: 'WEB',
|
|
66
|
-
},
|
|
67
|
-
].map(({ value, label, isDefault }) => {
|
|
68
|
-
if (this.config.hiddenSearchOptions && this.config.hiddenSearchOptions.includes(value)) {
|
|
69
|
-
return html``;
|
|
70
|
-
}
|
|
71
|
-
return html`
|
|
72
|
-
<label @click="${this.selectSearchType}">
|
|
73
|
-
<input form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
|
|
74
|
-
Search ${label}
|
|
75
|
-
</label>
|
|
76
|
-
`;
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
return searchTypes;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
get menuClass() {
|
|
83
|
-
return this.openMenu === 'search' ? 'open' : 'closed';
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
render() {
|
|
87
|
-
const searchMenuHidden = Boolean(!this.searchMenuOpen).toString();
|
|
88
|
-
const searchMenuExpanded = Boolean(this.searchMenuOpen).toString();
|
|
89
|
-
|
|
90
|
-
if (this.hideSearch) {
|
|
91
|
-
return html``;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
return html`
|
|
95
|
-
<div class="menu-wrapper">
|
|
96
|
-
<div
|
|
97
|
-
class="search-menu-inner tx-slide ${this.menuClass}"
|
|
98
|
-
aria-hidden="${searchMenuHidden}"
|
|
99
|
-
aria-expanded="${searchMenuExpanded}"
|
|
100
|
-
>
|
|
101
|
-
${this.searchTypesTemplate}
|
|
102
|
-
<a
|
|
103
|
-
class="advanced-search"
|
|
104
|
-
href="${formatUrl('/advancedsearch.php', this.baseHost)}"
|
|
105
|
-
@click=${this.trackClick}
|
|
106
|
-
data-event-click-tracking="${this.config.eventCategory}|NavAdvancedSearch"
|
|
107
|
-
>Advanced Search</a
|
|
108
|
-
>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
`;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
customElements.define('search-menu', SearchMenu);
|
|
1
|
+
import { html } from 'https://offshoot.prod.archive.org/lit.js';
|
|
2
|
+
import TrackedElement from './tracked-element.js';
|
|
3
|
+
import searchMenuCSS from './styles/search-menu.js';
|
|
4
|
+
import formatUrl from './lib/formatUrl.js';
|
|
5
|
+
|
|
6
|
+
class SearchMenu extends TrackedElement {
|
|
7
|
+
static get styles() {
|
|
8
|
+
return searchMenuCSS;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
static get properties() {
|
|
12
|
+
return {
|
|
13
|
+
baseHost: { type: String },
|
|
14
|
+
config: { type: Object },
|
|
15
|
+
hideSearch: { type: Boolean },
|
|
16
|
+
openMenu: { type: String },
|
|
17
|
+
searchMenuOpen: { type: Boolean },
|
|
18
|
+
searchMenuAnimate: { type: Boolean },
|
|
19
|
+
selectedSearchType: { type: String },
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
constructor() {
|
|
24
|
+
super();
|
|
25
|
+
this.config = {};
|
|
26
|
+
this.openMenu = '';
|
|
27
|
+
this.searchMenuOpen = false;
|
|
28
|
+
this.searchMenuAnimate = false;
|
|
29
|
+
this.selectedSearchType = '';
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
selectSearchType(e) {
|
|
33
|
+
this.selectedSearchType = e.target.value;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
searchInChanged(e) {
|
|
37
|
+
this.dispatchEvent(new CustomEvent('searchInChanged', {
|
|
38
|
+
detail: {
|
|
39
|
+
searchIn: e.target.value
|
|
40
|
+
}
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
get searchTypesTemplate() {
|
|
45
|
+
const searchTypes = [
|
|
46
|
+
{
|
|
47
|
+
label: 'metadata',
|
|
48
|
+
value: '',
|
|
49
|
+
isDefault: true,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: 'text contents',
|
|
53
|
+
value: 'TXT',
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
label: 'TV news captions',
|
|
57
|
+
value: 'TV',
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: 'radio transcripts',
|
|
61
|
+
value: 'RADIO'
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
label: 'archived web sites',
|
|
65
|
+
value: 'WEB',
|
|
66
|
+
},
|
|
67
|
+
].map(({ value, label, isDefault }) => {
|
|
68
|
+
if (this.config.hiddenSearchOptions && this.config.hiddenSearchOptions.includes(value)) {
|
|
69
|
+
return html``;
|
|
70
|
+
}
|
|
71
|
+
return html`
|
|
72
|
+
<label @click="${this.selectSearchType}">
|
|
73
|
+
<input form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
|
|
74
|
+
Search ${label}
|
|
75
|
+
</label>
|
|
76
|
+
`;
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
return searchTypes;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
get menuClass() {
|
|
83
|
+
return this.openMenu === 'search' ? 'open' : 'closed';
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
render() {
|
|
87
|
+
const searchMenuHidden = Boolean(!this.searchMenuOpen).toString();
|
|
88
|
+
const searchMenuExpanded = Boolean(this.searchMenuOpen).toString();
|
|
89
|
+
|
|
90
|
+
if (this.hideSearch) {
|
|
91
|
+
return html``;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return html`
|
|
95
|
+
<div class="menu-wrapper">
|
|
96
|
+
<div
|
|
97
|
+
class="search-menu-inner tx-slide ${this.menuClass}"
|
|
98
|
+
aria-hidden="${searchMenuHidden}"
|
|
99
|
+
aria-expanded="${searchMenuExpanded}"
|
|
100
|
+
>
|
|
101
|
+
${this.searchTypesTemplate}
|
|
102
|
+
<a
|
|
103
|
+
class="advanced-search"
|
|
104
|
+
href="${formatUrl('/advancedsearch.php', this.baseHost)}"
|
|
105
|
+
@click=${this.trackClick}
|
|
106
|
+
data-event-click-tracking="${this.config.eventCategory}|NavAdvancedSearch"
|
|
107
|
+
>Advanced Search</a
|
|
108
|
+
>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
`;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
customElements.define('search-menu', SearchMenu);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import DropdownMenu from './dropdown-menu.js';
|
|
2
|
-
import signedOutDropdownStyles from './styles/signed-out-dropdown.js';
|
|
3
|
-
|
|
4
|
-
class SignedOutDropdown extends DropdownMenu {
|
|
5
|
-
static get styles() {
|
|
6
|
-
return [DropdownMenu.styles, signedOutDropdownStyles];
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
customElements.define('signed-out-dropdown', SignedOutDropdown);
|
|
1
|
+
import DropdownMenu from './dropdown-menu.js';
|
|
2
|
+
import signedOutDropdownStyles from './styles/signed-out-dropdown.js';
|
|
3
|
+
|
|
4
|
+
class SignedOutDropdown extends DropdownMenu {
|
|
5
|
+
static get styles() {
|
|
6
|
+
return [DropdownMenu.styles, signedOutDropdownStyles];
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
customElements.define('signed-out-dropdown', SignedOutDropdown);
|
package/src/styles/base.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import { css } from 'https://offshoot.prod.archive.org/lit.js';
|
|
2
|
-
|
|
3
|
-
export const subnavListCSS = css`
|
|
4
|
-
h4 {
|
|
5
|
-
font-size: 1.6rem;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
a {
|
|
9
|
-
text-decoration: none;
|
|
10
|
-
color: var(--activeColor);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
ul {
|
|
14
|
-
padding: 0;
|
|
15
|
-
margin: 0;
|
|
16
|
-
list-style: none;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
li + li {
|
|
20
|
-
padding-top: 1.5rem;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@media (min-width: 890px) {
|
|
24
|
-
h4 {
|
|
25
|
-
margin: 0 0 1rem 0;
|
|
26
|
-
font-weight: 100;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
ul {
|
|
30
|
-
font-size: 1.3rem;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
li {
|
|
34
|
-
padding-bottom: .5rem;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
li + li {
|
|
38
|
-
padding-top: 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
li a {
|
|
42
|
-
display: block;
|
|
43
|
-
overflow: hidden;
|
|
44
|
-
white-space: nowrap;
|
|
45
|
-
text-overflow: ellipsis;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
1
|
+
import { css } from 'https://offshoot.prod.archive.org/lit.js';
|
|
2
|
+
|
|
3
|
+
export const subnavListCSS = css`
|
|
4
|
+
h4 {
|
|
5
|
+
font-size: 1.6rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
a {
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
color: var(--activeColor);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
ul {
|
|
14
|
+
padding: 0;
|
|
15
|
+
margin: 0;
|
|
16
|
+
list-style: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
li + li {
|
|
20
|
+
padding-top: 1.5rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (min-width: 890px) {
|
|
24
|
+
h4 {
|
|
25
|
+
margin: 0 0 1rem 0;
|
|
26
|
+
font-weight: 100;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
ul {
|
|
30
|
+
font-size: 1.3rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
li {
|
|
34
|
+
padding-bottom: .5rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
li + li {
|
|
38
|
+
padding-top: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
li a {
|
|
42
|
+
display: block;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
white-space: nowrap;
|
|
45
|
+
text-overflow: ellipsis;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { css } from 'https://offshoot.prod.archive.org/lit.js';
|
|
2
|
-
|
|
3
|
-
export default css`
|
|
4
|
-
ul {
|
|
5
|
-
position: relative;
|
|
6
|
-
z-index: 3;
|
|
7
|
-
padding: .8rem 0;
|
|
8
|
-
margin: 0;
|
|
9
|
-
font-size: 1.2rem;
|
|
10
|
-
text-transform: uppercase;
|
|
11
|
-
text-align: center;
|
|
12
|
-
background: var(--desktopSubnavBg);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
li {
|
|
16
|
-
display: inline-block;
|
|
17
|
-
padding: 0 15px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
a {
|
|
21
|
-
text-decoration: none;
|
|
22
|
-
color: var(--subnavLinkColor);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
a:hover,
|
|
26
|
-
a:active,
|
|
27
|
-
a:focus {
|
|
28
|
-
color: var(--linkHoverColor);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.donate svg {
|
|
32
|
-
width: 1.6rem;
|
|
33
|
-
height: 1.6rem;
|
|
34
|
-
vertical-align: top;
|
|
35
|
-
fill: #f00;
|
|
36
|
-
}
|
|
37
|
-
`;
|
|
1
|
+
import { css } from 'https://offshoot.prod.archive.org/lit.js';
|
|
2
|
+
|
|
3
|
+
export default css`
|
|
4
|
+
ul {
|
|
5
|
+
position: relative;
|
|
6
|
+
z-index: 3;
|
|
7
|
+
padding: .8rem 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
font-size: 1.2rem;
|
|
10
|
+
text-transform: uppercase;
|
|
11
|
+
text-align: center;
|
|
12
|
+
background: var(--desktopSubnavBg);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
li {
|
|
16
|
+
display: inline-block;
|
|
17
|
+
padding: 0 15px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
a {
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
color: var(--subnavLinkColor);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
a:hover,
|
|
26
|
+
a:active,
|
|
27
|
+
a:focus {
|
|
28
|
+
color: var(--linkHoverColor);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.donate svg {
|
|
32
|
+
width: 1.6rem;
|
|
33
|
+
height: 1.6rem;
|
|
34
|
+
vertical-align: top;
|
|
35
|
+
fill: #f00;
|
|
36
|
+
}
|
|
37
|
+
`;
|