@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,45 +1,45 @@
1
- import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
2
- import TrackedElement from './tracked-element.js';
3
- import desktopSubnavCSS from './styles/desktop-subnav.js';
4
- import icons from './assets/img/icons.js';
5
- import formatUrl from './lib/formatUrl.js';
6
-
7
- class DesktopSubnav extends TrackedElement {
8
- static get styles() {
9
- return desktopSubnavCSS;
10
- }
11
-
12
- static get properties() {
13
- return {
14
- baseHost: { type: String },
15
- menuItems: { type: Array },
16
- };
17
- }
18
-
19
- get listItems() {
20
- return this.menuItems ? this.menuItems.map(link => (
21
- html`
22
- <li>
23
- <a class="${link.title.toLowerCase()}" href="${formatUrl(link.url, this.baseHost)}">${link.title}${DesktopSubnav.iconFor(link.title)}</a>
24
- </li>
25
- `
26
- )) : nothing;
27
- }
28
-
29
- static iconFor(title) {
30
- const subnavIcons = {
31
- Donate: icons.donate
32
- };
33
- return subnavIcons[title] ? subnavIcons[title] : html``;
34
- }
35
-
36
- render() {
37
- return html`
38
- <ul>
39
- ${this.listItems}
40
- </ul>
41
- `;
42
- }
43
- }
44
-
45
- customElements.define('desktop-subnav', DesktopSubnav);
1
+ import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
2
+ import TrackedElement from './tracked-element.js';
3
+ import desktopSubnavCSS from './styles/desktop-subnav.js';
4
+ import icons from './assets/img/icons.js';
5
+ import formatUrl from './lib/formatUrl.js';
6
+
7
+ class DesktopSubnav extends TrackedElement {
8
+ static get styles() {
9
+ return desktopSubnavCSS;
10
+ }
11
+
12
+ static get properties() {
13
+ return {
14
+ baseHost: { type: String },
15
+ menuItems: { type: Array },
16
+ };
17
+ }
18
+
19
+ get listItems() {
20
+ return this.menuItems ? this.menuItems.map(link => (
21
+ html`
22
+ <li>
23
+ <a class="${link.title.toLowerCase()}" href="${formatUrl(link.url, this.baseHost)}">${link.title}${DesktopSubnav.iconFor(link.title)}</a>
24
+ </li>
25
+ `
26
+ )) : nothing;
27
+ }
28
+
29
+ static iconFor(title) {
30
+ const subnavIcons = {
31
+ Donate: icons.donate
32
+ };
33
+ return subnavIcons[title] ? subnavIcons[title] : html``;
34
+ }
35
+
36
+ render() {
37
+ return html`
38
+ <ul>
39
+ ${this.listItems}
40
+ </ul>
41
+ `;
42
+ }
43
+ }
44
+
45
+ customElements.define('desktop-subnav', DesktopSubnav);
@@ -1,109 +1,109 @@
1
- import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
2
- import TrackedElement from './tracked-element.js';
3
- import dropdownMenuCSS from './styles/dropdown-menu.js';
4
- import formatUrl from './lib/formatUrl.js';
5
- import icons from './assets/img/icons.js';
6
-
7
- class DropdownMenu extends TrackedElement {
8
- static get styles() {
9
- return dropdownMenuCSS;
10
- }
11
-
12
- static get properties() {
13
- return {
14
- baseHost: { type: String },
15
- config: { type: Object },
16
- hideSearch: { type: Boolean },
17
- menuItems: { type: Array },
18
- animate: { type: Boolean },
19
- open: { type: Boolean },
20
- };
21
- }
22
-
23
- constructor() {
24
- super();
25
- this.config = {};
26
- this.menuItems = [];
27
- this.open = false;
28
- this.animate = false;
29
- }
30
-
31
- get dropdownItems() {
32
- if (!this.menuItems) return nothing;
33
-
34
- if (!Array.isArray(this.menuItems[0])) {
35
- return this.dropdownSection(this.menuItems);
36
- }
37
- return this.menuItems.map((submenu, i) => {
38
- const joiner = i ? DropdownMenu.dropdownDivider : html``;
39
- return [joiner, ...this.dropdownSection(submenu)];
40
- });
41
- }
42
-
43
- static get dropdownDivider() {
44
- return html`<li role="presentation" class="divider"></li>`;
45
- }
46
-
47
- dropdownSection(submenu) {
48
- return submenu.map(item => (
49
- html`
50
- <li>${item.url ? this.dropdownLink(item) : DropdownMenu.dropdownText(item)}</li>
51
- `
52
- ));
53
- }
54
-
55
- dropdownLink(link) {
56
- const calloutText = this.config.callouts?.[link.title];
57
- return html`<a
58
- href="${formatUrl(link.url, this.baseHost)}"
59
- class="${link.class}"
60
- @click=${this.trackClick}
61
- data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}"
62
- aria-label=${calloutText ? `New feature: ${link.title}` : nothing}>
63
- ${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing}
64
- ${link.title}
65
- ${calloutText ? html`<span class="callout" aria-hidden="true">${calloutText}</span>` : nothing}
66
- </a>`;
67
- }
68
-
69
- static dropdownText(item) {
70
- return html`<span class="info-item">${item.title}</span>`;
71
- }
72
-
73
- get menuClass() {
74
- const hiddenClass = this.hideSearch ? ' search-hidden' : '';
75
- if (this.open) {
76
- return `open${hiddenClass}`;
77
- }
78
- if (this.animate) {
79
- return `closed${hiddenClass}`;
80
- }
81
- return `initial${hiddenClass}`;
82
- }
83
-
84
- get ariaHidden() {
85
- return Boolean(!this.open).toString();
86
- }
87
-
88
- get ariaExpanded() {
89
- return Boolean(this.open).toString();
90
- }
91
-
92
- render() {
93
- return html`
94
- <div class="nav-container">
95
- <nav
96
- class="${this.menuClass}"
97
- aria-hidden="${this.ariaHidden}"
98
- aria-expanded="${this.ariaExpanded}"
99
- >
100
- <ul>
101
- ${this.dropdownItems}
102
- </ul>
103
- </nav>
104
- </div>
105
- `;
106
- }
107
- }
108
-
109
- export default DropdownMenu;
1
+ import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
2
+ import TrackedElement from './tracked-element.js';
3
+ import dropdownMenuCSS from './styles/dropdown-menu.js';
4
+ import formatUrl from './lib/formatUrl.js';
5
+ import icons from './assets/img/icons.js';
6
+
7
+ class DropdownMenu extends TrackedElement {
8
+ static get styles() {
9
+ return dropdownMenuCSS;
10
+ }
11
+
12
+ static get properties() {
13
+ return {
14
+ baseHost: { type: String },
15
+ config: { type: Object },
16
+ hideSearch: { type: Boolean },
17
+ menuItems: { type: Array },
18
+ animate: { type: Boolean },
19
+ open: { type: Boolean },
20
+ };
21
+ }
22
+
23
+ constructor() {
24
+ super();
25
+ this.config = {};
26
+ this.menuItems = [];
27
+ this.open = false;
28
+ this.animate = false;
29
+ }
30
+
31
+ get dropdownItems() {
32
+ if (!this.menuItems) return nothing;
33
+
34
+ if (!Array.isArray(this.menuItems[0])) {
35
+ return this.dropdownSection(this.menuItems);
36
+ }
37
+ return this.menuItems.map((submenu, i) => {
38
+ const joiner = i ? DropdownMenu.dropdownDivider : html``;
39
+ return [joiner, ...this.dropdownSection(submenu)];
40
+ });
41
+ }
42
+
43
+ static get dropdownDivider() {
44
+ return html`<li role="presentation" class="divider"></li>`;
45
+ }
46
+
47
+ dropdownSection(submenu) {
48
+ return submenu.map(item => (
49
+ html`
50
+ <li>${item.url ? this.dropdownLink(item) : DropdownMenu.dropdownText(item)}</li>
51
+ `
52
+ ));
53
+ }
54
+
55
+ dropdownLink(link) {
56
+ const calloutText = this.config.callouts?.[link.title];
57
+ return html`<a
58
+ href="${formatUrl(link.url, this.baseHost)}"
59
+ class="${link.class}"
60
+ @click=${this.trackClick}
61
+ data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}"
62
+ aria-label=${calloutText ? `New feature: ${link.title}` : nothing}>
63
+ ${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing}
64
+ ${link.title}
65
+ ${calloutText ? html`<span class="callout" aria-hidden="true">${calloutText}</span>` : nothing}
66
+ </a>`;
67
+ }
68
+
69
+ static dropdownText(item) {
70
+ return html`<span class="info-item">${item.title}</span>`;
71
+ }
72
+
73
+ get menuClass() {
74
+ const hiddenClass = this.hideSearch ? ' search-hidden' : '';
75
+ if (this.open) {
76
+ return `open${hiddenClass}`;
77
+ }
78
+ if (this.animate) {
79
+ return `closed${hiddenClass}`;
80
+ }
81
+ return `initial${hiddenClass}`;
82
+ }
83
+
84
+ get ariaHidden() {
85
+ return Boolean(!this.open).toString();
86
+ }
87
+
88
+ get ariaExpanded() {
89
+ return Boolean(this.open).toString();
90
+ }
91
+
92
+ render() {
93
+ return html`
94
+ <div class="nav-container">
95
+ <nav
96
+ class="${this.menuClass}"
97
+ aria-hidden="${this.ariaHidden}"
98
+ aria-expanded="${this.ariaExpanded}"
99
+ >
100
+ <ul>
101
+ ${this.dropdownItems}
102
+ </ul>
103
+ </nav>
104
+ </div>
105
+ `;
106
+ }
107
+ }
108
+
109
+ export default DropdownMenu;