@internetarchive/ia-item-navigator 1.0.3 → 1.0.4-a1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/src/item-navigator.d.ts +1 -1
- package/dist/src/item-navigator.js +1 -1
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/menu-slider/ia-menu-slider.d.ts +30 -0
- package/dist/src/menu-slider/ia-menu-slider.js +160 -0
- package/dist/src/menu-slider/ia-menu-slider.js.map +1 -0
- package/dist/src/menu-slider/menu-button.d.ts +19 -0
- package/dist/src/menu-slider/menu-button.js +91 -0
- package/dist/src/menu-slider/menu-button.js.map +1 -0
- package/dist/src/menu-slider/styles/menu-button.d.ts +2 -0
- package/dist/src/menu-slider/styles/menu-button.js +79 -0
- package/dist/src/menu-slider/styles/menu-button.js.map +1 -0
- package/dist/src/menu-slider/styles/menu-slider.d.ts +2 -0
- package/dist/src/menu-slider/styles/menu-slider.js +129 -0
- package/dist/src/menu-slider/styles/menu-slider.js.map +1 -0
- package/index.ts +2 -0
- package/package.json +3 -3
- package/src/item-navigator.ts +2 -2
- package/src/menu-slider/ia-menu-slider.ts +161 -0
- package/src/menu-slider/menu-button.ts +80 -0
- package/src/menu-slider/styles/menu-button.ts +79 -0
- package/src/menu-slider/styles/menu-slider.ts +130 -0
- package/test/ia-menu-slider.test.js +273 -0
- package/dist/src/event-interfaces.d.ts +0 -37
- package/dist/src/event-interfaces.js +0 -2
- package/dist/src/event-interfaces.js.map +0 -1
- package/dist/src/grouped-files-provider.d.ts +0 -0
- package/dist/src/grouped-files-provider.js +0 -2
- package/dist/src/grouped-files-provider.js.map +0 -1
- package/dist/src/interfaces/nav-controller-interface.d.ts +0 -20
- package/dist/src/interfaces/nav-controller-interface.js +0 -2
- package/dist/src/interfaces/nav-controller-interface.js.map +0 -1
- package/dist/src/item-inspector/files-by-type/files-by-type-provider.d.ts +0 -14
- package/dist/src/item-inspector/files-by-type/files-by-type-provider.js +0 -29
- package/dist/src/item-inspector/files-by-type/files-by-type-provider.js.map +0 -1
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.d.ts +0 -16
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.js +0 -95
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.js.map +0 -1
- package/dist/src/item-inspector/files-by-type/ia-grouped-files-by-type.d.ts +0 -0
- package/dist/src/item-inspector/files-by-type/ia-grouped-files-by-type.js +0 -2
- package/dist/src/item-inspector/files-by-type/ia-grouped-files-by-type.js.map +0 -1
- package/dist/src/item-inspector/grouped-files/files-by-type-provider.d.ts +0 -15
- package/dist/src/item-inspector/grouped-files/files-by-type-provider.js +0 -33
- package/dist/src/item-inspector/grouped-files/files-by-type-provider.js.map +0 -1
- package/dist/src/item-inspector/grouped-files/grouped-files-provider.d.ts +0 -15
- package/dist/src/item-inspector/grouped-files/grouped-files-provider.js +0 -33
- package/dist/src/item-inspector/grouped-files/grouped-files-provider.js.map +0 -1
- package/dist/src/item-inspector/grouped-files/ia-grouped-files-by-type.d.ts +0 -0
- package/dist/src/item-inspector/grouped-files/ia-grouped-files-by-type.js +0 -2
- package/dist/src/item-inspector/grouped-files/ia-grouped-files-by-type.js.map +0 -1
- package/dist/src/item-inspector/grouped-files/ia-grouped-files.d.ts +0 -0
- package/dist/src/item-inspector/grouped-files/ia-grouped-files.js +0 -2
- package/dist/src/item-inspector/grouped-files/ia-grouped-files.js.map +0 -1
- package/dist/src/item-inspector/grouped-files-provider.d.ts +0 -15
- package/dist/src/item-inspector/grouped-files-provider.js +0 -33
- package/dist/src/item-inspector/grouped-files-provider.js.map +0 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -0
- package/dist/src/item-inspector/item-inspector.js +0 -254
- package/dist/src/item-inspector/item-inspector.js.map +0 -1
- package/dist/src/item-inspector/share-provider.d.ts +0 -15
- package/dist/src/item-inspector/share-provider.js +0 -35
- package/dist/src/item-inspector/share-provider.js.map +0 -1
- package/dist/src/item-inspector/visual-mod-provider.d.ts +0 -19
- package/dist/src/item-inspector/visual-mod-provider.js +0 -46
- package/dist/src/item-inspector/visual-mod-provider.js.map +0 -1
- package/dist/src/item-inspector.d.ts +0 -24
- package/dist/src/item-inspector.js +0 -92
- package/dist/src/item-inspector.js.map +0 -1
- package/dist/src/menu-interfaces.d.ts +0 -16
- package/dist/src/menu-interfaces.js +0 -2
- package/dist/src/menu-interfaces.js.map +0 -1
- package/dist/src/nav-controller-interface.d.ts +0 -9
- package/dist/src/nav-controller-interface.js +0 -2
- package/dist/src/nav-controller-interface.js.map +0 -1
- package/dist/src/your-webcomponent.d.ts +0 -8
- package/dist/src/your-webcomponent.js +0 -37
- package/dist/src/your-webcomponent.js.map +0 -1
- package/dist/test/book-nav-stub.d.ts +0 -22
- package/dist/test/book-nav-stub.js +0 -49
- package/dist/test/book-nav-stub.js.map +0 -1
- package/dist/test/ia-stub-goody.d.ts +0 -210
- package/dist/test/ia-stub-goody.js +0 -276
- package/dist/test/ia-stub-goody.js.map +0 -1
- package/dist/test/your-webcomponent.test.d.ts +0 -0
- package/dist/test/your-webcomponent.test.js +0 -33
- package/dist/test/your-webcomponent.test.js.map +0 -1
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { ItemNavigator } from './src/item-navigator';\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC","sourcesContent":["export { ItemNavigator } from './src/item-navigator';\nexport { MenuButton } from './src/menu-slider/menu-button';\nexport { IaMenuSlider } from './src/menu-slider/ia-menu-slider';\n"]}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { LitElement, PropertyValues, CSSResult, TemplateResult, nothing } from 'lit';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
3
|
import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
|
4
|
-
import '@internetarchive/ia-menu-slider';
|
5
4
|
import { ModalManager } from '@internetarchive/modal-manager';
|
6
5
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
6
|
+
import './menu-slider/ia-menu-slider';
|
7
7
|
import './loader';
|
8
8
|
import { ToggleSideMenuOpenEvent, ToggleSidePanelOpenEvent, SetSideMenuContentsEvent, SetSideMenuShortcutsEvent, loadingStateUpdatedEvent, ManageFullscreenEvent } from './interfaces/event-interfaces';
|
9
9
|
import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './interfaces/menu-interfaces';
|
@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement, nothing, } from 'lit';
|
3
3
|
import { customElement, property, state, query } from 'lit/decorators.js';
|
4
4
|
import { MetadataResponse } from '@internetarchive/search-service';
|
5
|
-
import '@internetarchive/ia-menu-slider';
|
6
5
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
6
|
+
import './menu-slider/ia-menu-slider';
|
7
7
|
import './loader';
|
8
8
|
import './no-theater-available';
|
9
9
|
let ItemNavigator = class ItemNavigator extends LitElement {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n PropertyValues,\n CSSResult,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n loadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (value && typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item?: MetadataResponse;\n\n @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean | null = null;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu?: MenuId;\n\n @property({ attribute: false }) modal?: ModalManager;\n\n @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n | true\n | null = null;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('sharedObserver')) {\n const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n oldObserver?.removeObserver(this.resizeObserverConfig);\n this.setResizeObserver();\n }\n }\n\n /** Shared observer */\n handleResize(entry: ResizeObserverEntry): void {\n const { width } = entry.contentRect;\n if (width <= 600) {\n this.openMenuState = 'overlay';\n return;\n }\n this.openMenuState = 'shift';\n }\n\n private setResizeObserver(): void {\n this.sharedObserver?.addObserver(this.resizeObserverConfig);\n this.sharedObserver?.addObserver({\n target: this.headerSlot,\n handler: {\n handleResize: ({ contentRect }) => {\n if (contentRect.height) {\n this.requestUpdate();\n }\n },\n },\n });\n }\n\n private removeResizeObserver(): void {\n this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n }\n\n get resizeObserverConfig(): {\n handler: SharedResizeObserverResizeHandlerInterface;\n target: Element;\n } {\n return {\n handler: this,\n target: this.frame,\n };\n }\n /** End shared observer */\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n get loadingArea() {\n return html`\n <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n </div>\n </div>\n `;\n }\n\n slotChange(e: Event, type: 'header' | 'main'): void {\n const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n this.dispatchEvent(\n new CustomEvent('slotChange', {\n detail: { slot: slottedContent, type },\n })\n );\n this.requestUpdate();\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n const headerHeight =\n (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot\n name=\"header\"\n style=${`height: ${headerHeight}px`}\n @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n ></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n ${!this.loaded ? this.loadingArea : nothing}\n </div>\n </div>\n `;\n }\n\n get noTheaterView() {\n return html`<ia-no-theater-available\n .identifier=${this.item?.metadata?.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-no-theater-available>`;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.viewAvailable) {\n return this.noTheaterView;\n }\n\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n return html`\n <div slot=\"main\" style=${slotVisibility}>\n <slot\n name=\"main\"\n @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n ></slot>\n </div>\n `;\n }\n\n loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded || null;\n }\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!this.menuContents?.length;\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton() {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${this.toggleMenu}\n title=\"Toggle theater side panels\"\n >\n <div>\n <ia-icon-ellipses\n style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n ></ia-icon-ellipses>\n </div>\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId | '' {\n return this.openMenu || '';\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n openShortcut(selectedMenuId: MenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `;\n });\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const hasMenuOrShortcuts =\n this.menuContents?.length || this.menuShortcuts?.length;\n const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles(): CSSResult {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n const theaterBg = css`var(--theaterBgColor, #000)`;\n\n return css`\n :host,\n #frame,\n .menu-and-reader {\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame,\n .loading-area,\n .loading-view {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n width: 100%;\n }\n\n slot * {\n display: block;\n height: inherit;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n display: flex;\n flex-direction: column;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n }\n\n .loading-view {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .loading-area {\n width: 100%;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n display: none !important;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n display: flex;\n flex: 1;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin-bottom: 0.2rem;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n transform: translateX(0);\n width: 100%;\n display: flex;\n }\n\n #reader > * {\n width: 100%;\n display: flex;\n flex: 1;\n }\n\n .open.overlay #reader {\n transition: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n .open.shift #reader {\n width: calc(100% - ${subnavWidth});\n margin-left: ${subnavWidth};\n transition: ${transitionEffect};\n }\n `;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n PropertyValues,\n CSSResult,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\n\nimport './menu-slider/ia-menu-slider';\nimport './loader';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n loadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (value && typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item?: MetadataResponse;\n\n @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean | null = null;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu?: MenuId;\n\n @property({ attribute: false }) modal?: ModalManager;\n\n @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n | true\n | null = null;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('sharedObserver')) {\n const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n oldObserver?.removeObserver(this.resizeObserverConfig);\n this.setResizeObserver();\n }\n }\n\n /** Shared observer */\n handleResize(entry: ResizeObserverEntry): void {\n const { width } = entry.contentRect;\n if (width <= 600) {\n this.openMenuState = 'overlay';\n return;\n }\n this.openMenuState = 'shift';\n }\n\n private setResizeObserver(): void {\n this.sharedObserver?.addObserver(this.resizeObserverConfig);\n this.sharedObserver?.addObserver({\n target: this.headerSlot,\n handler: {\n handleResize: ({ contentRect }) => {\n if (contentRect.height) {\n this.requestUpdate();\n }\n },\n },\n });\n }\n\n private removeResizeObserver(): void {\n this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n }\n\n get resizeObserverConfig(): {\n handler: SharedResizeObserverResizeHandlerInterface;\n target: Element;\n } {\n return {\n handler: this,\n target: this.frame,\n };\n }\n /** End shared observer */\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n get loadingArea() {\n return html`\n <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n </div>\n </div>\n `;\n }\n\n slotChange(e: Event, type: 'header' | 'main'): void {\n const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n this.dispatchEvent(\n new CustomEvent('slotChange', {\n detail: { slot: slottedContent, type },\n })\n );\n this.requestUpdate();\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n const headerHeight =\n (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot\n name=\"header\"\n style=${`height: ${headerHeight}px`}\n @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n ></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n ${!this.loaded ? this.loadingArea : nothing}\n </div>\n </div>\n `;\n }\n\n get noTheaterView() {\n return html`<ia-no-theater-available\n .identifier=${this.item?.metadata?.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-no-theater-available>`;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.viewAvailable) {\n return this.noTheaterView;\n }\n\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n return html`\n <div slot=\"main\" style=${slotVisibility}>\n <slot\n name=\"main\"\n @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n ></slot>\n </div>\n `;\n }\n\n loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded || null;\n }\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!this.menuContents?.length;\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton() {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${this.toggleMenu}\n title=\"Toggle theater side panels\"\n >\n <div>\n <ia-icon-ellipses\n style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n ></ia-icon-ellipses>\n </div>\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId | '' {\n return this.openMenu || '';\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n openShortcut(selectedMenuId: MenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `;\n });\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const hasMenuOrShortcuts =\n this.menuContents?.length || this.menuShortcuts?.length;\n const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles(): CSSResult {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n const theaterBg = css`var(--theaterBgColor, #000)`;\n\n return css`\n :host,\n #frame,\n .menu-and-reader {\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame,\n .loading-area,\n .loading-view {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n width: 100%;\n }\n\n slot * {\n display: block;\n height: inherit;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n display: flex;\n flex-direction: column;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n }\n\n .loading-view {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .loading-area {\n width: 100%;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n display: none !important;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n display: flex;\n flex: 1;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin-bottom: 0.2rem;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n transform: translateX(0);\n width: 100%;\n display: flex;\n }\n\n #reader > * {\n width: 100%;\n display: flex;\n flex: 1;\n }\n\n .open.overlay #reader {\n transition: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n .open.shift #reader {\n width: calc(100% - ${subnavWidth});\n margin-left: ${subnavWidth};\n transition: ${transitionEffect};\n }\n `;\n }\n}\n"]}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
import '@internetarchive/icon-collapse-sidebar';
|
3
|
+
import './menu-button';
|
4
|
+
export declare class IaMenuSlider extends LitElement {
|
5
|
+
static get styles(): import("lit").CSSResult;
|
6
|
+
menus: never[];
|
7
|
+
open: boolean;
|
8
|
+
manuallyHandleClose: boolean;
|
9
|
+
selectedMenu: string;
|
10
|
+
selectedMenuAction: symbol;
|
11
|
+
animateMenuOpen: boolean;
|
12
|
+
updated(): void;
|
13
|
+
/**
|
14
|
+
* Event handler, captures state of selected menu
|
15
|
+
*/
|
16
|
+
setSelectedMenu({ detail }: CustomEvent): void;
|
17
|
+
/**
|
18
|
+
* closes menu drawer
|
19
|
+
*/
|
20
|
+
closeMenu(): void;
|
21
|
+
get selectedMenuDetails(): undefined;
|
22
|
+
get selectedMenuComponent(): any;
|
23
|
+
get sliderDetailsClass(): string;
|
24
|
+
get selectedMenuClass(): "" | "open";
|
25
|
+
get menuItems(): import("lit-html").TemplateResult<1>[];
|
26
|
+
get renderMenuHeader(): import("lit-html").TemplateResult<1>;
|
27
|
+
get closeButton(): import("lit-html").TemplateResult<1>;
|
28
|
+
/** @inheritdoc */
|
29
|
+
render(): import("lit-html").TemplateResult<1>;
|
30
|
+
}
|
@@ -0,0 +1,160 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { LitElement, html, nothing } from 'lit';
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
4
|
+
import menuSliderCSS from './styles/menu-slider';
|
5
|
+
import '@internetarchive/icon-collapse-sidebar';
|
6
|
+
import './menu-button';
|
7
|
+
const sliderEvents = {
|
8
|
+
closeDrawer: 'menuSliderClosed',
|
9
|
+
};
|
10
|
+
let IaMenuSlider = class IaMenuSlider extends LitElement {
|
11
|
+
constructor() {
|
12
|
+
super(...arguments);
|
13
|
+
this.menus = [];
|
14
|
+
this.open = false;
|
15
|
+
this.manuallyHandleClose = false;
|
16
|
+
this.selectedMenu = '';
|
17
|
+
this.selectedMenuAction = nothing;
|
18
|
+
this.animateMenuOpen = false;
|
19
|
+
}
|
20
|
+
static get styles() {
|
21
|
+
return menuSliderCSS;
|
22
|
+
}
|
23
|
+
updated() {
|
24
|
+
const { actionButton } = this.selectedMenuDetails || {};
|
25
|
+
const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
|
26
|
+
if (actionButtonHasChanged) {
|
27
|
+
this.selectedMenuAction = actionButton || nothing;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
/**
|
31
|
+
* Event handler, captures state of selected menu
|
32
|
+
*/
|
33
|
+
setSelectedMenu({ detail }) {
|
34
|
+
const { id } = detail;
|
35
|
+
this.selectedMenu = this.selectedMenu === id ? '' : id;
|
36
|
+
const { actionButton } = this.selectedMenuDetails || {};
|
37
|
+
this.selectedMenuAction = actionButton || nothing;
|
38
|
+
}
|
39
|
+
/**
|
40
|
+
* closes menu drawer
|
41
|
+
*/
|
42
|
+
closeMenu() {
|
43
|
+
if (!this.manuallyHandleClose) {
|
44
|
+
this.open = false;
|
45
|
+
}
|
46
|
+
const { closeDrawer } = sliderEvents;
|
47
|
+
const drawerClosed = new CustomEvent(closeDrawer, {
|
48
|
+
detail: this.selectedMenuDetails,
|
49
|
+
});
|
50
|
+
this.dispatchEvent(drawerClosed);
|
51
|
+
}
|
52
|
+
get selectedMenuDetails() {
|
53
|
+
const selectedMenu = this.menus.find(menu => menu.id === this.selectedMenu);
|
54
|
+
return selectedMenu;
|
55
|
+
}
|
56
|
+
get selectedMenuComponent() {
|
57
|
+
var _a;
|
58
|
+
const menuItem = this.selectedMenuDetails;
|
59
|
+
return menuItem && ((_a = menuItem) === null || _a === void 0 ? void 0 : _a.component)
|
60
|
+
? menuItem.component
|
61
|
+
: html ``;
|
62
|
+
}
|
63
|
+
/* render */
|
64
|
+
get sliderDetailsClass() {
|
65
|
+
const animate = this.animateMenuOpen ? 'animate' : '';
|
66
|
+
const state = this.open ? 'open' : '';
|
67
|
+
return `${animate} ${state}`;
|
68
|
+
}
|
69
|
+
get selectedMenuClass() {
|
70
|
+
return this.selectedMenu ? 'open' : '';
|
71
|
+
}
|
72
|
+
get menuItems() {
|
73
|
+
return this.menus.map((menu) => html `
|
74
|
+
<li>
|
75
|
+
<menu-button
|
76
|
+
@menuTypeSelected=${this.setSelectedMenu}
|
77
|
+
.icon=${menu.icon}
|
78
|
+
.label=${menu.label}
|
79
|
+
.menuDetails=${menu.menuDetails}
|
80
|
+
.id=${menu.id}
|
81
|
+
.selected=${menu.id === this.selectedMenu}
|
82
|
+
.followable=${menu.followable}
|
83
|
+
.href=${menu.href}
|
84
|
+
></menu-button>
|
85
|
+
</li>
|
86
|
+
`);
|
87
|
+
}
|
88
|
+
get renderMenuHeader() {
|
89
|
+
const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
|
90
|
+
const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
|
91
|
+
const actionBlock = this.selectedMenuAction
|
92
|
+
? html `<span class="custom-action">${this.selectedMenuAction}</span>`
|
93
|
+
: nothing;
|
94
|
+
return html `
|
95
|
+
<header class="${headerClass}">
|
96
|
+
<div class="details">
|
97
|
+
<h3>${label}</h3>
|
98
|
+
<span class="extra-details">${menuDetails}</span>
|
99
|
+
</div>
|
100
|
+
${actionBlock} ${this.closeButton}
|
101
|
+
</header>
|
102
|
+
`;
|
103
|
+
}
|
104
|
+
get closeButton() {
|
105
|
+
return html `
|
106
|
+
<button
|
107
|
+
class="close"
|
108
|
+
aria-label="Close this menu"
|
109
|
+
@click=${this.closeMenu}
|
110
|
+
>
|
111
|
+
<ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
|
112
|
+
</button>
|
113
|
+
`;
|
114
|
+
}
|
115
|
+
/** @inheritdoc */
|
116
|
+
render() {
|
117
|
+
return html `
|
118
|
+
<div class="main">
|
119
|
+
<div class="menu ${this.sliderDetailsClass}">
|
120
|
+
${this.closeButton}
|
121
|
+
<ul class="menu-list">
|
122
|
+
${this.menuItems}
|
123
|
+
</ul>
|
124
|
+
<div
|
125
|
+
class="content ${this.selectedMenuClass}"
|
126
|
+
@menuTypeSelected=${this.setSelectedMenu}
|
127
|
+
>
|
128
|
+
${this.renderMenuHeader}
|
129
|
+
<section>
|
130
|
+
<div class="selected-menu">${this.selectedMenuComponent}</div>
|
131
|
+
</section>
|
132
|
+
</div>
|
133
|
+
</div>
|
134
|
+
</div>
|
135
|
+
`;
|
136
|
+
}
|
137
|
+
};
|
138
|
+
__decorate([
|
139
|
+
property({ type: Array })
|
140
|
+
], IaMenuSlider.prototype, "menus", void 0);
|
141
|
+
__decorate([
|
142
|
+
property({ type: Boolean })
|
143
|
+
], IaMenuSlider.prototype, "open", void 0);
|
144
|
+
__decorate([
|
145
|
+
property({ type: Boolean })
|
146
|
+
], IaMenuSlider.prototype, "manuallyHandleClose", void 0);
|
147
|
+
__decorate([
|
148
|
+
property({ type: String })
|
149
|
+
], IaMenuSlider.prototype, "selectedMenu", void 0);
|
150
|
+
__decorate([
|
151
|
+
property({ type: Object })
|
152
|
+
], IaMenuSlider.prototype, "selectedMenuAction", void 0);
|
153
|
+
__decorate([
|
154
|
+
property({ type: Boolean })
|
155
|
+
], IaMenuSlider.prototype, "animateMenuOpen", void 0);
|
156
|
+
IaMenuSlider = __decorate([
|
157
|
+
customElement('ia-menu-slider')
|
158
|
+
], IaMenuSlider);
|
159
|
+
export { IaMenuSlider };
|
160
|
+
//# sourceMappingURL=ia-menu-slider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ia-menu-slider.js","sourceRoot":"","sources":["../../../src/menu-slider/ia-menu-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuSliderCSS from './styles/menu-slider';\nimport '@internetarchive/icon-collapse-sidebar';\nimport './menu-button';\n\nconst sliderEvents = {\n closeDrawer: 'menuSliderClosed',\n};\n\n@customElement('ia-menu-slider')\nexport class IaMenuSlider extends LitElement {\n static get styles() {\n return menuSliderCSS;\n }\n\n @property({ type: Array }) menus = [];\n\n @property({ type: Boolean }) open = false;\n\n @property({ type: Boolean }) manuallyHandleClose = false;\n\n @property({ type: String }) selectedMenu = '';\n\n @property({ type: Object }) selectedMenuAction = nothing;\n\n @property({ type: Boolean }) animateMenuOpen = false;\n\n updated() {\n const { actionButton } =\n this.selectedMenuDetails || ({} as Record<string, any>);\n const actionButtonHasChanged = actionButton !== this.selectedMenuAction;\n if (actionButtonHasChanged) {\n this.selectedMenuAction = actionButton || nothing;\n }\n }\n\n /**\n * Event handler, captures state of selected menu\n */\n setSelectedMenu({ detail }: CustomEvent) {\n const { id } = detail;\n this.selectedMenu = this.selectedMenu === id ? '' : id;\n const { actionButton } =\n this.selectedMenuDetails || ({} as Record<string, any>);\n this.selectedMenuAction = actionButton || nothing;\n }\n\n /**\n * closes menu drawer\n */\n closeMenu() {\n if (!this.manuallyHandleClose) {\n this.open = false;\n }\n const { closeDrawer } = sliderEvents;\n const drawerClosed = new CustomEvent(closeDrawer, {\n detail: this.selectedMenuDetails,\n });\n this.dispatchEvent(drawerClosed);\n }\n\n get selectedMenuDetails() {\n const selectedMenu = this.menus.find(\n menu => (menu as any).id === this.selectedMenu\n );\n return selectedMenu;\n }\n\n get selectedMenuComponent() {\n const menuItem = this.selectedMenuDetails;\n return menuItem && (menuItem as any)?.component\n ? (menuItem as any).component\n : html``;\n }\n\n /* render */\n\n get sliderDetailsClass() {\n const animate = this.animateMenuOpen ? 'animate' : '';\n const state = this.open ? 'open' : '';\n return `${animate} ${state}`;\n }\n\n get selectedMenuClass() {\n return this.selectedMenu ? 'open' : '';\n }\n\n get menuItems() {\n return this.menus.map(\n (menu: Record<string, any>) =>\n html`\n <li>\n <menu-button\n @menuTypeSelected=${this.setSelectedMenu}\n .icon=${menu.icon}\n .label=${menu.label}\n .menuDetails=${menu.menuDetails}\n .id=${menu.id}\n .selected=${menu.id === this.selectedMenu}\n .followable=${menu.followable}\n .href=${menu.href}\n ></menu-button>\n </li>\n `\n );\n }\n\n get renderMenuHeader() {\n const { label = '', menuDetails = '' } =\n this.selectedMenuDetails || ({} as Record<string, any>);\n const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';\n const actionBlock = this.selectedMenuAction\n ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n : nothing;\n return html`\n <header class=\"${headerClass}\">\n <div class=\"details\">\n <h3>${label}</h3>\n <span class=\"extra-details\">${menuDetails}</span>\n </div>\n ${actionBlock} ${this.closeButton}\n </header>\n `;\n }\n\n get closeButton() {\n return html`\n <button\n class=\"close\"\n aria-label=\"Close this menu\"\n @click=${this.closeMenu}\n >\n <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>\n </button>\n `;\n }\n\n /** @inheritdoc */\n render() {\n return html`\n <div class=\"main\">\n <div class=\"menu ${this.sliderDetailsClass}\">\n ${this.closeButton}\n <ul class=\"menu-list\">\n ${this.menuItems}\n </ul>\n <div\n class=\"content ${this.selectedMenuClass}\"\n @menuTypeSelected=${this.setSelectedMenu}\n >\n ${this.renderMenuHeader}\n <section>\n <div class=\"selected-menu\">${this.selectedMenuComponent}</div>\n </section>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
export declare class MenuButton extends LitElement {
|
3
|
+
static get styles(): import("lit").CSSResult;
|
4
|
+
icon: string;
|
5
|
+
href: string;
|
6
|
+
label: string;
|
7
|
+
menuDetails: string;
|
8
|
+
id: string;
|
9
|
+
selected: boolean;
|
10
|
+
followable: boolean;
|
11
|
+
onClick(e: Event): void;
|
12
|
+
dispatchMenuTypeSelectedEvent(): void;
|
13
|
+
get buttonClass(): "" | "selected";
|
14
|
+
get iconClass(): "active" | "";
|
15
|
+
get menuItem(): import("lit-html").TemplateResult<1>;
|
16
|
+
get linkButton(): import("lit-html").TemplateResult<1>;
|
17
|
+
get clickButton(): import("lit-html").TemplateResult<1>;
|
18
|
+
render(): import("lit-html").TemplateResult<1>;
|
19
|
+
}
|
@@ -0,0 +1,91 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { html, LitElement } from 'lit';
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
4
|
+
import menuButtonCSS from './styles/menu-button';
|
5
|
+
let MenuButton = class MenuButton extends LitElement {
|
6
|
+
constructor() {
|
7
|
+
super(...arguments);
|
8
|
+
this.icon = '';
|
9
|
+
this.href = '';
|
10
|
+
this.label = '';
|
11
|
+
this.menuDetails = '';
|
12
|
+
this.id = '';
|
13
|
+
this.selected = false;
|
14
|
+
this.followable = false;
|
15
|
+
}
|
16
|
+
static get styles() {
|
17
|
+
return menuButtonCSS;
|
18
|
+
}
|
19
|
+
onClick(e) {
|
20
|
+
e.preventDefault();
|
21
|
+
this.dispatchMenuTypeSelectedEvent();
|
22
|
+
}
|
23
|
+
dispatchMenuTypeSelectedEvent() {
|
24
|
+
this.dispatchEvent(new CustomEvent('menuTypeSelected', {
|
25
|
+
bubbles: true,
|
26
|
+
composed: true,
|
27
|
+
detail: {
|
28
|
+
id: this.id,
|
29
|
+
},
|
30
|
+
}));
|
31
|
+
}
|
32
|
+
get buttonClass() {
|
33
|
+
return this.selected ? 'selected' : '';
|
34
|
+
}
|
35
|
+
get iconClass() {
|
36
|
+
return this.selected ? 'active' : '';
|
37
|
+
}
|
38
|
+
get menuItem() {
|
39
|
+
return html `
|
40
|
+
<span class="icon ${this.iconClass}"> ${this.icon} </span>
|
41
|
+
<span class="label">${this.label}</span>
|
42
|
+
<span class="menu-details">${this.menuDetails}</span>
|
43
|
+
`;
|
44
|
+
}
|
45
|
+
get linkButton() {
|
46
|
+
return html `
|
47
|
+
<a
|
48
|
+
href="${this.href}"
|
49
|
+
class="menu-item ${this.buttonClass}"
|
50
|
+
@click=${this.followable ? undefined : this.onClick}
|
51
|
+
>${this.menuItem}</a
|
52
|
+
>
|
53
|
+
`;
|
54
|
+
}
|
55
|
+
get clickButton() {
|
56
|
+
return html `
|
57
|
+
<button class="menu-item ${this.buttonClass}" @click=${this.onClick}>
|
58
|
+
${this.menuItem}
|
59
|
+
</button>
|
60
|
+
`;
|
61
|
+
}
|
62
|
+
render() {
|
63
|
+
return this.href ? this.linkButton : this.clickButton;
|
64
|
+
}
|
65
|
+
};
|
66
|
+
__decorate([
|
67
|
+
property({ type: String })
|
68
|
+
], MenuButton.prototype, "icon", void 0);
|
69
|
+
__decorate([
|
70
|
+
property({ type: String })
|
71
|
+
], MenuButton.prototype, "href", void 0);
|
72
|
+
__decorate([
|
73
|
+
property({ type: String })
|
74
|
+
], MenuButton.prototype, "label", void 0);
|
75
|
+
__decorate([
|
76
|
+
property({ type: String })
|
77
|
+
], MenuButton.prototype, "menuDetails", void 0);
|
78
|
+
__decorate([
|
79
|
+
property({ type: String })
|
80
|
+
], MenuButton.prototype, "id", void 0);
|
81
|
+
__decorate([
|
82
|
+
property({ type: Boolean })
|
83
|
+
], MenuButton.prototype, "selected", void 0);
|
84
|
+
__decorate([
|
85
|
+
property({ type: Boolean })
|
86
|
+
], MenuButton.prototype, "followable", void 0);
|
87
|
+
MenuButton = __decorate([
|
88
|
+
customElement('menu-button')
|
89
|
+
], MenuButton);
|
90
|
+
export { MenuButton };
|
91
|
+
//# sourceMappingURL=menu-button.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["../../../src/menu-slider/menu-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAGjD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAK8B,SAAI,GAAG,EAAE,CAAC;QAEV,SAAI,GAAG,EAAE,CAAC;QAEV,UAAK,GAAG,EAAE,CAAC;QAEX,gBAAW,GAAG,EAAE,CAAC;QAEjB,OAAE,GAAG,EAAE,CAAC;QAEP,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAAG,KAAK,CAAC;IAyDlD,CAAC;IAzEC,MAAM,KAAK,MAAM;QACf,OAAO,aAAa,CAAC;IACvB,CAAC;IAgBD,OAAO,CAAC,CAAQ;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAED,6BAA6B;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,EAAE,EAAE,IAAI,CAAC,EAAE;aACZ;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,SAAS,MAAM,IAAI,CAAC,IAAI;4BAC3B,IAAI,CAAC,KAAK;mCACH,IAAI,CAAC,WAAW;KAC9C,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;2BACE,IAAI,CAAC,WAAW;iBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;WAChD,IAAI,CAAC,QAAQ;;KAEnB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,WAAW,YAAY,IAAI,CAAC,OAAO;UAC/D,IAAI,CAAC,QAAQ;;KAElB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACxD,CAAC;CACF,CAAA;AArE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAEP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAoB;AAjBrC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0EtB;SA1EY,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuButtonCSS from './styles/menu-button';\n\n@customElement('menu-button')\nexport class MenuButton extends LitElement {\n static get styles() {\n return menuButtonCSS;\n }\n\n @property({ type: String }) icon = '';\n\n @property({ type: String }) href = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) menuDetails = '';\n\n @property({ type: String }) id = '';\n\n @property({ type: Boolean }) selected = false;\n\n @property({ type: Boolean }) followable = false;\n\n onClick(e: Event) {\n e.preventDefault();\n this.dispatchMenuTypeSelectedEvent();\n }\n\n dispatchMenuTypeSelectedEvent() {\n this.dispatchEvent(\n new CustomEvent('menuTypeSelected', {\n bubbles: true,\n composed: true,\n detail: {\n id: this.id,\n },\n })\n );\n }\n\n get buttonClass() {\n return this.selected ? 'selected' : '';\n }\n\n get iconClass() {\n return this.selected ? 'active' : '';\n }\n\n get menuItem() {\n return html`\n <span class=\"icon ${this.iconClass}\"> ${this.icon} </span>\n <span class=\"label\">${this.label}</span>\n <span class=\"menu-details\">${this.menuDetails}</span>\n `;\n }\n\n get linkButton() {\n return html`\n <a\n href=\"${this.href}\"\n class=\"menu-item ${this.buttonClass}\"\n @click=${this.followable ? undefined : this.onClick}\n >${this.menuItem}</a\n >\n `;\n }\n\n get clickButton() {\n return html`\n <button class=\"menu-item ${this.buttonClass}\" @click=${this.onClick}>\n ${this.menuItem}\n </button>\n `;\n }\n\n render() {\n return this.href ? this.linkButton : this.clickButton;\n }\n}\n"]}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import { css } from 'lit';
|
2
|
+
export default css `
|
3
|
+
a {
|
4
|
+
display: inline-block;
|
5
|
+
text-decoration: none;
|
6
|
+
}
|
7
|
+
|
8
|
+
.menu-item {
|
9
|
+
display: inline-flex;
|
10
|
+
width: 100%;
|
11
|
+
padding: 0;
|
12
|
+
font-size: 1.6rem;
|
13
|
+
text-align: left;
|
14
|
+
background: transparent;
|
15
|
+
-webkit-box-align: center;
|
16
|
+
-ms-flex-align: center;
|
17
|
+
align-items: center;
|
18
|
+
border: none;
|
19
|
+
cursor: pointer;
|
20
|
+
}
|
21
|
+
|
22
|
+
button.menu-item {
|
23
|
+
-webkit-appearance: none;
|
24
|
+
appearance: none;
|
25
|
+
border-radius: 0;
|
26
|
+
}
|
27
|
+
|
28
|
+
.menu-item:focus {
|
29
|
+
outline: none;
|
30
|
+
}
|
31
|
+
|
32
|
+
.label {
|
33
|
+
display: var(--menuButtonLabelDisplay, none);
|
34
|
+
padding: 0;
|
35
|
+
font-weight: 400;
|
36
|
+
color: var(--primaryTextColor);
|
37
|
+
text-align: left;
|
38
|
+
vertical-align: middle;
|
39
|
+
margin-left: 1rem;
|
40
|
+
}
|
41
|
+
|
42
|
+
.menu-details {
|
43
|
+
color: var(--primaryTextColor);
|
44
|
+
display: inline-block;
|
45
|
+
margin-left: 0.5rem;
|
46
|
+
font-style: italic;
|
47
|
+
font-size: 1.5rem;
|
48
|
+
}
|
49
|
+
|
50
|
+
.menu-item > .icon {
|
51
|
+
position: relative;
|
52
|
+
display: inline-flex;
|
53
|
+
z-index: 2;
|
54
|
+
min-width: 4.2rem;
|
55
|
+
max-width: 4.2rem;
|
56
|
+
height: 4.2rem;
|
57
|
+
vertical-align: middle;
|
58
|
+
-webkit-box-align: center;
|
59
|
+
-ms-flex-align: center;
|
60
|
+
align-items: center;
|
61
|
+
-webkit-box-pack: center;
|
62
|
+
-ms-flex-pack: center;
|
63
|
+
justify-content: center;
|
64
|
+
}
|
65
|
+
|
66
|
+
.menu-item.selected .icon {
|
67
|
+
background-color: var(--activeButtonBg);
|
68
|
+
border-radius: 1rem 0 0 1rem;
|
69
|
+
}
|
70
|
+
|
71
|
+
.icon .fill-color {
|
72
|
+
fill: #999;
|
73
|
+
}
|
74
|
+
|
75
|
+
.icon.active .fill-color {
|
76
|
+
fill: #fff;
|
77
|
+
}
|
78
|
+
`;
|
79
|
+
//# sourceMappingURL=menu-button.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n a {\n display: inline-block;\n text-decoration: none;\n }\n\n .menu-item {\n display: inline-flex;\n width: 100%;\n padding: 0;\n font-size: 1.6rem;\n text-align: left;\n background: transparent;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: none;\n cursor: pointer;\n }\n\n button.menu-item {\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0;\n }\n\n .menu-item:focus {\n outline: none;\n }\n\n .label {\n display: var(--menuButtonLabelDisplay, none);\n padding: 0;\n font-weight: 400;\n color: var(--primaryTextColor);\n text-align: left;\n vertical-align: middle;\n margin-left: 1rem;\n }\n\n .menu-details {\n color: var(--primaryTextColor);\n display: inline-block;\n margin-left: 0.5rem;\n font-style: italic;\n font-size: 1.5rem;\n }\n\n .menu-item > .icon {\n position: relative;\n display: inline-flex;\n z-index: 2;\n min-width: 4.2rem;\n max-width: 4.2rem;\n height: 4.2rem;\n vertical-align: middle;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n\n .menu-item.selected .icon {\n background-color: var(--activeButtonBg);\n border-radius: 1rem 0 0 1rem;\n }\n\n .icon .fill-color {\n fill: #999;\n }\n\n .icon.active .fill-color {\n fill: #fff;\n }\n`;\n"]}
|