@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.
Files changed (84) hide show
  1. package/.eslintrc +16 -16
  2. package/LICENSE +661 -661
  3. package/README.md +147 -147
  4. package/index.d.ts +109 -109
  5. package/index.js +3 -3
  6. package/package.json +61 -61
  7. package/src/assets/img/hamburger.js +38 -38
  8. package/src/assets/img/ia-icon.js +33 -33
  9. package/src/assets/img/icon-audio.js +23 -23
  10. package/src/assets/img/icon-close.js +16 -16
  11. package/src/assets/img/icon-donate-unpadded.js +16 -16
  12. package/src/assets/img/icon-donate.js +15 -15
  13. package/src/assets/img/icon-ellipses.js +15 -15
  14. package/src/assets/img/icon-ia-logo.js +22 -22
  15. package/src/assets/img/icon-images.js +15 -15
  16. package/src/assets/img/icon-search.js +15 -15
  17. package/src/assets/img/icon-software.js +15 -15
  18. package/src/assets/img/icon-texts.js +15 -15
  19. package/src/assets/img/icon-upload-unpadded.js +14 -14
  20. package/src/assets/img/icon-upload.js +15 -15
  21. package/src/assets/img/icon-user.js +15 -15
  22. package/src/assets/img/icon-video.js +15 -15
  23. package/src/assets/img/icon-web.js +15 -15
  24. package/src/assets/img/icon.js +18 -18
  25. package/src/assets/img/icons.js +33 -33
  26. package/src/assets/img/wordmark-stacked.js +13 -13
  27. package/src/data/menus.js +646 -646
  28. package/src/desktop-subnav.js +45 -45
  29. package/src/dropdown-menu.js +109 -109
  30. package/src/ia-topnav.js +314 -314
  31. package/src/lib/formatUrl.js +1 -1
  32. package/src/lib/location-handler.js +5 -5
  33. package/src/lib/query-handler.js +7 -7
  34. package/src/lib/toSentenceCase.js +8 -8
  35. package/src/login-button.js +79 -79
  36. package/src/media-button.js +113 -113
  37. package/src/media-menu.js +133 -133
  38. package/src/media-slider.js +104 -104
  39. package/src/media-subnav.js +112 -112
  40. package/src/more-slider.js +33 -33
  41. package/src/nav-search.js +117 -125
  42. package/src/primary-nav.js +224 -224
  43. package/src/save-page-form.js +59 -59
  44. package/src/search-menu.js +115 -115
  45. package/src/signed-out-dropdown.js +10 -10
  46. package/src/styles/base.js +48 -48
  47. package/src/styles/desktop-subnav.js +37 -37
  48. package/src/styles/dropdown-menu.js +166 -166
  49. package/src/styles/ia-topnav.js +87 -87
  50. package/src/styles/login-button.js +79 -79
  51. package/src/styles/media-button.js +156 -156
  52. package/src/styles/media-menu.js +70 -70
  53. package/src/styles/media-slider.js +81 -81
  54. package/src/styles/media-subnav.js +156 -156
  55. package/src/styles/more-slider.js +15 -15
  56. package/src/styles/nav-search.js +136 -136
  57. package/src/styles/primary-nav.js +300 -300
  58. package/src/styles/save-page-form.js +54 -54
  59. package/src/styles/search-menu.js +99 -99
  60. package/src/styles/signed-out-dropdown.js +31 -31
  61. package/src/styles/user-menu.js +31 -31
  62. package/src/styles/wayback-search.js +48 -48
  63. package/src/styles/wayback-slider.js +30 -30
  64. package/src/tracked-element.js +27 -27
  65. package/src/user-menu.js +42 -42
  66. package/src/wayback-search.js +18 -18
  67. package/src/wayback-slider.js +87 -87
  68. package/test/assets/img/hamburger.test.js +15 -15
  69. package/test/assets/img/user.test.js +15 -15
  70. package/test/data/menus.test.js +19 -19
  71. package/test/dropdown-menu.test.js +25 -25
  72. package/test/ia-icon.test.js +13 -13
  73. package/test/ia-topnav.test.js +273 -273
  74. package/test/login-button.test.js +15 -15
  75. package/test/media-button.test.js +19 -19
  76. package/test/media-menu.test.js +40 -40
  77. package/test/media-slider.test.js +57 -57
  78. package/test/more-slider.test.js +13 -13
  79. package/test/nav-search.test.js +61 -61
  80. package/test/primary-nav.test.js +82 -82
  81. package/test/save-page-form.test.js +35 -35
  82. package/test/search-menu.test.js +49 -49
  83. package/test/user-menu.test.js +33 -33
  84. package/test/wayback-slider.test.js +80 -80
@@ -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);
@@ -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
+ `;