@internetarchive/elements 0.2.14-webdev-8969.0 → 0.3.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/README.md +20 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts +97 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js +588 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts +39 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js +249 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts +55 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js +394 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts +20 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js +102 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/icons/collapse-sidebar.svg +7 -0
- package/dist/src/elements/ia-item-navigator/icons/ellipses.svg +7 -0
- package/dist/src/elements/ia-item-navigator/icons.d.ts +13 -0
- package/dist/src/elements/ia-item-navigator/icons.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/icons.js +16 -0
- package/dist/src/elements/ia-item-navigator/icons.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts +41 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js +2 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts +23 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js +2 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts +47 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js +352 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts +22 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js +137 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts +40 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js +217 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/email.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/facebook.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/link.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/list.svg +3 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/pinterest.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/share.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-asc.svg +22 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-desc.svg +21 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-neutral.svg +13 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/tumblr.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/twitter.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/viewable-files.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/models.d.ts +17 -0
- package/dist/src/elements/ia-item-navigator/menus/models.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/models.js +2 -0
- package/dist/src/elements/ia-item-navigator/menus/models.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts +16 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.js +23 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts +12 -3
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map +1 -1
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js +26 -9
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map +1 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts +51 -5
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map +1 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.js +156 -16
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map +1 -1
- package/dist/src/elements/ia-status-indicator/icons/audio.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/collection.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/etree.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/images.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/search.svg +10 -0
- package/dist/src/elements/ia-status-indicator/icons/software.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/texts.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/tv.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/video.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/web.svg +6 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts +6 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts.map +1 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js +20 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js.map +1 -1
- package/dist/src/elements/index.d.ts +4 -0
- package/dist/src/elements/index.d.ts.map +1 -1
- package/dist/src/elements/index.js +4 -0
- package/dist/src/elements/index.js.map +1 -1
- package/dist/src/util/masked-icon.d.ts +24 -0
- package/dist/src/util/masked-icon.d.ts.map +1 -0
- package/dist/src/util/masked-icon.js +30 -0
- package/dist/src/util/masked-icon.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -143,6 +143,26 @@ src
|
|
|
143
143
|
```
|
|
144
144
|
Export your component in `src/index.ts`
|
|
145
145
|
|
|
146
|
+
### Naming
|
|
147
|
+
Custom elements all share one global registry, and that registry is shared with every other script on the host page. Give each element a name specific enough that nothing else would plausibly want it.
|
|
148
|
+
|
|
149
|
+
If a component is built from several elements, prefix its parts with the component's own name rather than naming them generically, and keep the file name matching the tag:
|
|
150
|
+
```
|
|
151
|
+
src
|
|
152
|
+
- elements
|
|
153
|
+
- ia-foobar
|
|
154
|
+
- ia-foobar.ts // ia-foobar
|
|
155
|
+
- ia-foobar-list-item.ts // ia-foobar-list-item, not ia-list-item
|
|
156
|
+
```
|
|
157
|
+
Declare each element in `HTMLElementTagNameMap` so `querySelector` is typed and a mistyped tag in a template is caught at build time:
|
|
158
|
+
```ts
|
|
159
|
+
declare global {
|
|
160
|
+
interface HTMLElementTagNameMap {
|
|
161
|
+
'ia-foobar-list-item': IAFoobarListItem;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
146
166
|
### Story
|
|
147
167
|
To demo your component, we have a component catalog that you can add your demo to. Create a component in your component directory. Name it `COMPONENT-NAME-story.ts`, ie `ia-button-story.ts`.
|
|
148
168
|
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { LitElement, TemplateResult, nothing, type CSSResultGroup } from 'lit';
|
|
2
|
+
import './ia-itemnav-menu-slider.js';
|
|
3
|
+
import './ia-itemnav-no-theater-available.js';
|
|
4
|
+
import { ToggleSideMenuOpenEvent, ToggleSidePanelOpenEvent, SetSideMenuContentsEvent, SetSideMenuShortcutsEvent, LoadingStateUpdatedEvent, ManageFullscreenEvent } from './interfaces/event-interfaces.js';
|
|
5
|
+
import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './interfaces/menu-interfaces.js';
|
|
6
|
+
/**
|
|
7
|
+
* A fullscreen-capable frame that hosts an Archive.org item's theater. The
|
|
8
|
+
* consumer projects a header bar and the theater itself into the `header` and
|
|
9
|
+
* `main` slots; a collapsible left drawer (`ia-itemnav-menu-slider`) is driven by a
|
|
10
|
+
* data array of menu providers, and a minimized rail shows shortcut icons.
|
|
11
|
+
*
|
|
12
|
+
* The navigator is a shell — it does not know how to render any particular
|
|
13
|
+
* viewer. Menu panel bodies are opaque `TemplateResult`s supplied by the
|
|
14
|
+
* consumer via `menuContents`.
|
|
15
|
+
*/
|
|
16
|
+
export declare class IAItemNavigator extends LitElement {
|
|
17
|
+
/** archive.org item identifier. */
|
|
18
|
+
identifier?: string;
|
|
19
|
+
viewAvailable: boolean;
|
|
20
|
+
baseHost: string;
|
|
21
|
+
signedIn: boolean;
|
|
22
|
+
menuContents: MenuProviderInterface[];
|
|
23
|
+
menuShortcuts: MenuShortcutInterface[];
|
|
24
|
+
viewportInFullscreen: boolean | null;
|
|
25
|
+
menuOpened: boolean;
|
|
26
|
+
openMenu?: MenuId;
|
|
27
|
+
/**
|
|
28
|
+
* Whether the slotted theater is ready. While false the reader stays
|
|
29
|
+
* hidden and the frame is empty.
|
|
30
|
+
*
|
|
31
|
+
* The navigator used to fill that gap with its own spinner, but a shell
|
|
32
|
+
* shouldn't decide what loading looks like — and its glyph and fullscreen
|
|
33
|
+
* caption were branding a consumer couldn't override. An indicator returns
|
|
34
|
+
* once WEBDEV-8951 moves the shared status indicators into elements, so the
|
|
35
|
+
* navigator can use that one instead of carrying its own.
|
|
36
|
+
*/
|
|
37
|
+
loaded: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Set for the render where the drawer opens straight to a panel, so the
|
|
40
|
+
* panel holds still and rides in. Every other path clears it, rather
|
|
41
|
+
* than waiting for the drawer's `transitionend` — that never fires when
|
|
42
|
+
* animations are disabled, which would strand the flag on.
|
|
43
|
+
*/
|
|
44
|
+
private drawerEntering;
|
|
45
|
+
private menuSlider;
|
|
46
|
+
private toggleMenuButton;
|
|
47
|
+
slotChange(e: Event, type: 'header' | 'main'): void;
|
|
48
|
+
render(): TemplateResult;
|
|
49
|
+
get noTheaterView(): TemplateResult;
|
|
50
|
+
get renderViewport(): TemplateResult | typeof nothing;
|
|
51
|
+
loadingStateUpdated(e: LoadingStateUpdatedEvent): void;
|
|
52
|
+
/** Fullscreen Management */
|
|
53
|
+
manageViewportFullscreen(e: ManageFullscreenEvent): void;
|
|
54
|
+
/** End Fullscreen Management */
|
|
55
|
+
/** Side menu */
|
|
56
|
+
get shouldRenderMenu(): boolean;
|
|
57
|
+
toggleMenu(forceValue?: boolean | undefined): void;
|
|
58
|
+
/**
|
|
59
|
+
* Opening the drawer moves focus into it; closing hands focus back to the
|
|
60
|
+
* toggle. Without this, opening from the shortcut rail would leave focus on
|
|
61
|
+
* a button that is about to be hidden, dropping it to the document.
|
|
62
|
+
*/
|
|
63
|
+
private moveFocusForDrawer;
|
|
64
|
+
/**
|
|
65
|
+
* Closing the drawer also closes whatever panel was open inside it, so the
|
|
66
|
+
* two can't disagree and a stale panel can't reappear on the next open.
|
|
67
|
+
*/
|
|
68
|
+
closeMenu(): void;
|
|
69
|
+
setOpenMenu(e: ToggleSidePanelOpenEvent): void;
|
|
70
|
+
/**
|
|
71
|
+
* Clears the open channel when the slider closes its sub-panel, without
|
|
72
|
+
* closing the drawer. Keeps `openMenu` in sync with the slider so the same
|
|
73
|
+
* channel can be reopened afterwards.
|
|
74
|
+
*/
|
|
75
|
+
closeSidePanel(): void;
|
|
76
|
+
setMenuContents(e: SetSideMenuContentsEvent): void;
|
|
77
|
+
setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
|
|
78
|
+
/** Toggles Side Menu & Sets viewable subpanel */
|
|
79
|
+
manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
|
|
80
|
+
get menuToggleButton(): TemplateResult;
|
|
81
|
+
get selectedMenuId(): MenuId | '';
|
|
82
|
+
get renderSideMenu(): TemplateResult;
|
|
83
|
+
/** End Side menu */
|
|
84
|
+
/** Menu Shortcuts */
|
|
85
|
+
openShortcut(selectedMenuId?: MenuId): void;
|
|
86
|
+
get shortcuts(): TemplateResult;
|
|
87
|
+
/** End Menu Shortcuts */
|
|
88
|
+
/** Misc Render */
|
|
89
|
+
get menuClass(): string;
|
|
90
|
+
static get styles(): CSSResultGroup;
|
|
91
|
+
}
|
|
92
|
+
declare global {
|
|
93
|
+
interface HTMLElementTagNameMap {
|
|
94
|
+
'ia-item-navigator': IAItemNavigator;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
//# sourceMappingURL=ia-item-navigator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-item-navigator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-item-navigator.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,cAAc,EACd,OAAO,EACP,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,0BAA0B,CAAC;AAClC,OAAO,mCAAmC,CAAC;AAG3C,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,yBAAyB,EACzB,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,MAAM,EACP,MAAM,8BAA8B,CAAC;AAEtC;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,mCAAmC;IACP,UAAU,CAAC,EAAE,MAAM,CAAC;IAEJ,aAAa,EAAE,OAAO,CAAQ;IAE9C,QAAQ,SAAiB;IAExB,QAAQ,UAAS;IAEnB,YAAY,EAAE,qBAAqB,EAAE,CAAM;IAE3C,aAAa,EAAE,qBAAqB,EAAE,CAAM;IAGvE,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEA,UAAU,UAAS;IAEpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE7D;;;;;;;;;OASG;IAC0D,MAAM,EAAE,OAAO,CACpE;IAER;;;;;OAKG;IACM,OAAO,CAAC,cAAc,CAAS;IAEP,OAAO,CAAC,UAAU,CAAuB;IAE7C,OAAO,CAAC,gBAAgB,CAAqB;IAE1E,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAanD,MAAM,IAAI,cAAc;IAkBxB,IAAI,aAAa,IAAI,cAAc,CAKlC;IAED,IAAI,cAAc,IAAI,cAAc,GAAG,OAAO,OAAO,CAcpD;IAED,mBAAmB,CAAC,CAAC,EAAE,wBAAwB,GAAG,IAAI;IAKtD,4BAA4B;IAC5B,wBAAwB,CAAC,CAAC,EAAE,qBAAqB,GAAG,IAAI;IAUxD,gCAAgC;IAEhC,gBAAgB;IAChB,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAED,UAAU,CAAC,UAAU,GAAE,OAAO,GAAG,SAAqB,GAAG,IAAI;IAM7D;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;;OAGG;IACH,SAAS,IAAI,IAAI;IAKjB,WAAW,CAAC,CAAC,EAAE,wBAAwB,GAAG,IAAI;IAM9C;;;;OAIG;IACH,cAAc,IAAI,IAAI;IAKtB,eAAe,CAAC,CAAC,EAAE,wBAAwB,GAAG,IAAI;IAKlD,gBAAgB,CAAC,CAAC,EAAE,yBAAyB,GAAG,IAAI;IAIpD,kDAAkD;IAClD,oBAAoB,CAAC,CAAC,EAAE,uBAAuB,GAAG,IAAI;IActD,IAAI,gBAAgB,IAAI,cAAc,CAcrC;IAED,IAAI,cAAc,IAAI,MAAM,GAAG,EAAE,CAEhC;IAED,IAAI,cAAc,IAAI,cAAc,CA2BnC;IACD,oBAAoB;IAEpB,qBAAqB;IACrB,YAAY,CAAC,cAAc,GAAE,MAAW,GAAG,IAAI;IAa/C,IAAI,SAAS,IAAI,cAAc,CAuB9B;IACD,yBAAyB;IAEzB,kBAAkB;IAClB,IAAI,SAAS,IAAI,MAAM,CAUtB;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAoRlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
|