@internetarchive/ia-item-navigator 0.0.0-a1 → 0.0.0-a5
Sign up to get free protection for your applications and to get access to all the features.
- package/demo/app-root.ts +2 -0
- package/dist/demo/app-root.js +2 -0
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.js +9 -6
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-navigator.d.ts +2 -2
- package/dist/src/item-navigator.js +24 -8
- package/dist/src/item-navigator.js.map +1 -1
- package/package.json +1 -1
- package/src/item-inspector/item-inspector.ts +11 -8
- package/src/item-navigator.ts +25 -8
package/demo/app-root.ts
CHANGED
|
@@ -76,11 +76,13 @@ export class AppRoot extends LitElement {
|
|
|
76
76
|
border: 1px solid pink;
|
|
77
77
|
color: #222;
|
|
78
78
|
}
|
|
79
|
+
|
|
79
80
|
:host,
|
|
80
81
|
item-navigator {
|
|
81
82
|
display: block;
|
|
82
83
|
position: relative;
|
|
83
84
|
width: 100%;
|
|
85
|
+
min-height: 64vh;
|
|
84
86
|
}
|
|
85
87
|
item-navigator {
|
|
86
88
|
height: inherit;
|
package/dist/demo/app-root.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AAEzC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAC8B,WAAM,GAAiC,SAAS,CAAC;QAEjD,iBAAY,GAAG,EAAE,CAAC;QAElB,oBAAe,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AAEzC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAC8B,WAAM,GAAiC,SAAS,CAAC;QAEjD,iBAAY,GAAG,EAAE,CAAC;QAElB,oBAAe,GAAG,EAAE,CAAC;IAoFnD,CAAC;IAlFC,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,wBAAwB;IAC1B,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,KAAK,CAAC,WAAW;QACf,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAE5C,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAEtE,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;YACjD,MAAc,CAAC,OAAO,CACrB,gEAAgE,CACjE,CAAC;YACF,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;QACjC,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED,IAAI,QAAQ;QACV,MAAM,CAAC,GAAG,EAAE,CAAC;QACb,8DAA8D;QAC9D,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE;YAC5B,MAAM,GAAG,GAAI,IAAI,CAAC,MAAc,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC,CAAC,IAAI,CACJ,IAAI,CAAA,OAAO,EAAE;;gBAEL,GAAG,OAAO,CACnB,CAAC;SACH;QACD,OAAO,IAAI,CAAA,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,IAAI,CAAA,iDAAiD,CAAC;SAC9D;QAED,OAAO,IAAI,CAAA;;6DAE8C,IAAI,CAAC,MAAM;;iBAEvD,IAAI,CAAC,QAAQ;KACzB,CAAC;IACJ,CAAC;CA2BF,CAAA;AAzBQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,CAAC;AAvF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkD;AAEjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AALtC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyFnB;SAzFY,OAAO","sourcesContent":["import { html, css, LitElement, customElement, property } from 'lit-element';\nimport '../src/item-navigator';\nimport '../src/item-inspector/item-inspector';\nimport {\n MetadataResponse,\n SearchService,\n} from '@internetarchive/search-service';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;\n\n @property({ type: Object }) bookManifest = {};\n\n @property({ type: String }) encodedManifest = '';\n\n firstUpdated() {\n this.fetchItemMD();\n // this.fetchDemoBook();\n }\n\n async fetchDemoBook() {\n const manifest = await fetch('/demo/demo-book-manifest.json');\n const theJson = await manifest.json();\n this.bookManifest = theJson;\n this.encodedManifest = btoa(JSON.stringify(this.bookManifest));\n }\n\n async fetchItemMD() {\n const searchService = SearchService.default;\n\n const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n if (mdResponse.error) {\n console.log('MD Fetch error: ', mdResponse.error);\n (window as any).confirm(\n 'There was an error fetching response, please check dev console'\n );\n return;\n }\n\n this.itemMD = mdResponse.success;\n console.log('** App Root: this.itemMD', this.itemMD);\n }\n\n get renderMD() {\n const x = [];\n // eslint-disable-next-line guard-for-in, no-restricted-syntax\n for (const md in this.itemMD) {\n const val = (this.itemMD as any)[md];\n x.push(\n html`<dt>${md}</dt>\n :\n <dd>${val}</dd>`\n );\n }\n return html`<dl>${[...x]}</dl>`;\n }\n\n render() {\n console.log('---- APP ROOT - ', this.itemMD);\n if (!this.itemMD) {\n return html`<h2>Please hold as we fetch an item for ya</h2>`;\n }\n\n return html`\n <h1>theater, in page</h1>\n <item-navigator baseHost=\"https://archive.org\" .item=${this.itemMD}>\n </item-navigator>\n <section>${this.renderMD}</section>\n `;\n }\n\n static styles = css`\n :host {\n min-height: 64vh;\n border: 1px solid pink;\n color: #222;\n }\n\n :host,\n item-navigator {\n display: block;\n position: relative;\n width: 100%;\n min-height: 64vh;\n }\n item-navigator {\n height: inherit;\n min-height: inherit;\n }\n div {\n position: relative;\n overflow: hidden;\n height: 100%;\n min-height: inherit;\n }\n `;\n}\n"]}
|
|
@@ -81,7 +81,9 @@ let IaItemInspector = class IaItemInspector extends LitElement {
|
|
|
81
81
|
const menu = this.menuShortcuts.find(m => m.id === id);
|
|
82
82
|
// eslint-disable-next-line no-param-reassign
|
|
83
83
|
if (menu) {
|
|
84
|
-
|
|
84
|
+
const newShortcuts = [...shortcuts, menu];
|
|
85
|
+
// eslint-disable-next-line no-param-reassign
|
|
86
|
+
shortcuts = newShortcuts;
|
|
85
87
|
}
|
|
86
88
|
console.log({ shortcuts, menu });
|
|
87
89
|
return shortcuts;
|
|
@@ -122,11 +124,12 @@ let IaItemInspector = class IaItemInspector extends LitElement {
|
|
|
122
124
|
this.addMenuShortcut('visualMods');
|
|
123
125
|
}
|
|
124
126
|
updateFullscreenState() {
|
|
125
|
-
const
|
|
126
|
-
this.fullscreenState =
|
|
127
|
-
|
|
128
|
-
detail:
|
|
129
|
-
})
|
|
127
|
+
const isFullScreen = !this.fullscreenState;
|
|
128
|
+
this.fullscreenState = isFullScreen;
|
|
129
|
+
const event = new CustomEvent('ViewportInFullScreen', {
|
|
130
|
+
detail: { isFullScreen },
|
|
131
|
+
});
|
|
132
|
+
this.dispatchEvent(event);
|
|
130
133
|
}
|
|
131
134
|
updateMenuContents() {
|
|
132
135
|
const { share, filesByType, visualMods } = this.menuProviders;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-inspector.js","sourceRoot":"","sources":["../../../src/item-inspector/item-inspector.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console */\nimport {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n} from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nimport { IntNavController } from '../interfaces/nav-controller-interface';\nimport {\n IntMenuProvider,\n IntMenuShortcut,\n} from '../interfaces/menu-interfaces';\n\nimport { ShareProvider } from './share-provider';\nimport { FilesByTypeProvider } from './files-by-type/files-by-type-provider';\nimport { VisualModsProvider } from './visual-mod-provider';\n\n// eslint-disable-next-line no-shadow\nenum ItemInspectorEvents {\n menuUpdated = 'menuUpdated',\n updateSideMenu = 'updateSideMenu',\n PostInit = 'PostInit',\n ViewportInFullScreen = 'ViewportInFullScreen',\n}\n\ninterface menuProvidersInt {\n [menuId: string]: IntMenuProvider;\n}\n\n@customElement('ia-item-inspector')\nexport class IaItemInspector extends LitElement implements IntNavController {\n @property({ type: Object }) itemMD: MetadataResponse = {\n metadata: {},\n } as MetadataResponse;\n\n @property({ type: String }) baseHost = 'https://archive.org';\n\n @property({ type: Object }) menuProviders: menuProvidersInt = {};\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean }) sideMenuOpen = false;\n\n @property({ type: Boolean }) fullscreenState = false;\n\n @state() fileCount: number = 0;\n\n @state() loaded: boolean = false;\n\n @state() private shortcutOrder = ['visualMods'];\n\n firstUpdated() {\n this.loaded = true;\n console.log('loaded ');\n }\n\n updated(changed: any) {\n if (changed.has('loaded')) {\n setTimeout(() => this.emitLoadingStatusUpdate(this.loaded), 1000);\n }\n\n if (changed.has('itemMD') && this.itemMD) {\n this.parseItemInfo();\n this.setMenu();\n }\n\n if (changed.has('menuProviders') || changed.has('menuShortcuts')) {\n this.updateMenuContents();\n }\n }\n\n render() {\n const { identifier = '' } = this.itemMD?.metadata;\n return html`\n <section>\n <div>\n <h2>${identifier}</h2>\n </div>\n <img src=${this.imageUrl} alt=${`${identifier} thumbnail`} />\n </section>\n `;\n }\n\n addMenuShortcut(menuId: keyof menuProvidersInt) {\n if (this.menuShortcuts.find(m => m.id === menuId)) {\n return;\n }\n\n const shortcut = this.menuProviders[menuId];\n this.menuShortcuts.push(shortcut);\n this.sortMenuShortcuts();\n this.emitMenuShortcutsUpdated();\n }\n\n /**\n * Removes a provider object from the menuShortcuts array and emits a\n * menuShortcutsUpdated event.\n */\n removeMenuShortcut(menuId: string) {\n this.menuShortcuts = this.menuShortcuts.filter(m => m.id !== menuId);\n this.emitMenuShortcutsUpdated();\n }\n\n /**\n * Sorts the menuShortcuts property by comparing each provider's id to\n * the id in each iteration over the shortcutOrder array.\n */\n sortMenuShortcuts() {\n this.menuShortcuts = this.shortcutOrder.reduce(\n (shortcuts: IntMenuShortcut[], id) => {\n const menu = this.menuShortcuts.find(m => m.id === id);\n\n // eslint-disable-next-line no-param-reassign\n if (menu) {\n shortcuts = [...shortcuts, menu];\n }\n console.log({ shortcuts, menu });\n return shortcuts;\n },\n []\n );\n }\n\n emitMenuShortcutsUpdated() {\n const event = new CustomEvent('menuShortcutsUpdated', {\n detail: this.menuShortcuts,\n });\n this.dispatchEvent(event);\n }\n\n setMenu() {\n const menuProviders = {\n share: new ShareProvider({\n item: this.itemMD,\n baseHost: this.baseHost,\n subPrefix: '',\n }),\n filesByType: new FilesByTypeProvider({\n item: this.itemMD,\n baseHost: this.baseHost,\n subPrefix: '',\n }),\n visualMods: new VisualModsProvider({\n updated: (modType: string) => {\n console.log('visal mods updated', modType);\n if (modType === 'toggleFullscreen') {\n this.updateFullscreenState();\n }\n },\n item: this.itemMD,\n baseHost: this.baseHost,\n subPrefix: '',\n // maybe DOM root for class configs?\n }),\n };\n\n this.menuProviders = menuProviders;\n this.addMenuShortcut('visualMods');\n }\n\n updateFullscreenState() {\n const nextFSState = !this.fullscreenState;\n this.fullscreenState = nextFSState;\n this.dispatchEvent(\n new CustomEvent('ViewportInFullScreen', {\n detail: nextFSState,\n })\n );\n }\n\n updateMenuContents() {\n const { share, filesByType, visualMods } = this.menuProviders;\n const availableMenus = [filesByType, share, visualMods].filter(\n menu => !!menu\n );\n\n const event = new CustomEvent(ItemInspectorEvents.menuUpdated, {\n detail: availableMenus,\n });\n\n this.dispatchEvent(event);\n }\n\n emitLoadingStatusUpdate(loaded: boolean) {\n const event = new CustomEvent('loadingStateUpdated', {\n detail: { loaded },\n });\n this.dispatchEvent(event);\n }\n\n parseItemInfo() {\n this.fileCount = this.itemMD?.files?.length || 0;\n }\n\n get imageUrl() {\n const { metadata = {} } = this.itemMD;\n const url = `${this.baseHost}/download/${metadata?.identifier}/__ia_thumb.jpg`;\n return url;\n }\n\n static get styles() {\n const main = css`\n :host {\n display: block;\n width: 100%;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n background-color: black;\n color: var(--primaryTextColor, #fff);\n }\n\n :host,\n section {\n min-height: inherit;\n height: inherit;\n }\n\n section {\n margin: auto;\n width: 100%;\n text-align: center;\n }\n\n img {\n border: 1px solid var(--primaryTextColor, #fff);\n }\n `;\n return [main];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"item-inspector.js","sourceRoot":"","sources":["../../../src/item-inspector/item-inspector.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console */\nimport {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n} from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nimport { IntNavController } from '../interfaces/nav-controller-interface';\nimport {\n IntMenuProvider,\n IntMenuShortcut,\n} from '../interfaces/menu-interfaces';\nimport { IntManageFullscreenEvent } from '../interfaces/event-interfaces';\n\nimport { ShareProvider } from './share-provider';\nimport { FilesByTypeProvider } from './files-by-type/files-by-type-provider';\nimport { VisualModsProvider } from './visual-mod-provider';\n\n// eslint-disable-next-line no-shadow\nenum ItemInspectorEvents {\n menuUpdated = 'menuUpdated',\n updateSideMenu = 'updateSideMenu',\n PostInit = 'PostInit',\n ViewportInFullScreen = 'ViewportInFullScreen',\n}\n\ninterface menuProvidersInt {\n [menuId: string]: IntMenuProvider;\n}\n\n@customElement('ia-item-inspector')\nexport class IaItemInspector extends LitElement implements IntNavController {\n @property({ type: Object }) itemMD: MetadataResponse = {\n metadata: {},\n } as MetadataResponse;\n\n @property({ type: String }) baseHost = 'https://archive.org';\n\n @property({ type: Object }) menuProviders: menuProvidersInt = {};\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean }) sideMenuOpen = false;\n\n @property({ type: Boolean }) fullscreenState = false;\n\n @state() fileCount: number = 0;\n\n @state() loaded: boolean = false;\n\n @state() private shortcutOrder = ['visualMods'];\n\n firstUpdated() {\n this.loaded = true;\n console.log('loaded ');\n }\n\n updated(changed: any) {\n if (changed.has('loaded')) {\n setTimeout(() => this.emitLoadingStatusUpdate(this.loaded), 1000);\n }\n\n if (changed.has('itemMD') && this.itemMD) {\n this.parseItemInfo();\n this.setMenu();\n }\n\n if (changed.has('menuProviders') || changed.has('menuShortcuts')) {\n this.updateMenuContents();\n }\n }\n\n render() {\n const { identifier = '' } = this.itemMD?.metadata;\n return html`\n <section>\n <div>\n <h2>${identifier}</h2>\n </div>\n <img src=${this.imageUrl} alt=${`${identifier} thumbnail`} />\n </section>\n `;\n }\n\n addMenuShortcut(menuId: keyof menuProvidersInt) {\n if (this.menuShortcuts.find(m => m.id === menuId)) {\n return;\n }\n\n const shortcut = this.menuProviders[menuId];\n this.menuShortcuts.push(shortcut);\n this.sortMenuShortcuts();\n this.emitMenuShortcutsUpdated();\n }\n\n /**\n * Removes a provider object from the menuShortcuts array and emits a\n * menuShortcutsUpdated event.\n */\n removeMenuShortcut(menuId: string) {\n this.menuShortcuts = this.menuShortcuts.filter(m => m.id !== menuId);\n this.emitMenuShortcutsUpdated();\n }\n\n /**\n * Sorts the menuShortcuts property by comparing each provider's id to\n * the id in each iteration over the shortcutOrder array.\n */\n sortMenuShortcuts() {\n this.menuShortcuts = this.shortcutOrder.reduce(\n (shortcuts: IntMenuShortcut[], id) => {\n const menu = this.menuShortcuts.find(m => m.id === id);\n\n // eslint-disable-next-line no-param-reassign\n if (menu) {\n const newShortcuts = [...shortcuts, menu];\n // eslint-disable-next-line no-param-reassign\n shortcuts = newShortcuts;\n }\n console.log({ shortcuts, menu });\n return shortcuts;\n },\n []\n );\n }\n\n emitMenuShortcutsUpdated() {\n const event = new CustomEvent('menuShortcutsUpdated', {\n detail: this.menuShortcuts,\n });\n this.dispatchEvent(event);\n }\n\n setMenu() {\n const menuProviders = {\n share: new ShareProvider({\n item: this.itemMD,\n baseHost: this.baseHost,\n subPrefix: '',\n }),\n filesByType: new FilesByTypeProvider({\n item: this.itemMD,\n baseHost: this.baseHost,\n subPrefix: '',\n }),\n visualMods: new VisualModsProvider({\n updated: (modType: string) => {\n console.log('visal mods updated', modType);\n if (modType === 'toggleFullscreen') {\n this.updateFullscreenState();\n }\n },\n item: this.itemMD,\n baseHost: this.baseHost,\n subPrefix: '',\n // maybe DOM root for class configs?\n }),\n };\n\n this.menuProviders = menuProviders;\n this.addMenuShortcut('visualMods');\n }\n\n updateFullscreenState() {\n const isFullScreen = !this.fullscreenState;\n this.fullscreenState = isFullScreen;\n\n const event = new CustomEvent('ViewportInFullScreen', {\n detail: { isFullScreen },\n } as IntManageFullscreenEvent);\n this.dispatchEvent(event);\n }\n\n updateMenuContents() {\n const { share, filesByType, visualMods } = this.menuProviders;\n const availableMenus = [filesByType, share, visualMods].filter(\n menu => !!menu\n );\n\n const event = new CustomEvent(ItemInspectorEvents.menuUpdated, {\n detail: availableMenus,\n });\n\n this.dispatchEvent(event);\n }\n\n emitLoadingStatusUpdate(loaded: boolean) {\n const event = new CustomEvent('loadingStateUpdated', {\n detail: { loaded },\n });\n this.dispatchEvent(event);\n }\n\n parseItemInfo() {\n this.fileCount = this.itemMD?.files?.length || 0;\n }\n\n get imageUrl() {\n const { metadata = {} } = this.itemMD;\n const url = `${this.baseHost}/download/${metadata?.identifier}/__ia_thumb.jpg`;\n return url;\n }\n\n static get styles() {\n const main = css`\n :host {\n display: block;\n width: 100%;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n background-color: black;\n color: var(--primaryTextColor, #fff);\n }\n\n :host,\n section {\n min-height: inherit;\n height: inherit;\n }\n\n section {\n margin: auto;\n width: 100%;\n text-align: center;\n }\n\n img {\n border: 1px solid var(--primaryTextColor, #fff);\n }\n `;\n return [main];\n }\n}\n"]}
|
|
@@ -5,7 +5,7 @@ import { SharedResizeObserverResizeHandlerInterface } from '@internetarchive/sha
|
|
|
5
5
|
import { ModalManagerInterface } from '@internetarchive/modal-manager';
|
|
6
6
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
|
7
7
|
import './loader';
|
|
8
|
-
import { IntOpenModalEvent, IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent } from './interfaces/event-interfaces';
|
|
8
|
+
import { IntOpenModalEvent, IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
|
|
9
9
|
import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
|
|
10
10
|
export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
|
|
11
11
|
item: MetadataResponse | undefined;
|
|
@@ -35,7 +35,7 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
|
|
|
35
35
|
/** Creates modal DOM & attaches to `<body>` */
|
|
36
36
|
private createModal;
|
|
37
37
|
/** Fullscreen Management */
|
|
38
|
-
manageViewportFullscreen(): void;
|
|
38
|
+
manageViewportFullscreen(e: IntManageFullscreenEvent): void;
|
|
39
39
|
/** End Fullscreen Management */
|
|
40
40
|
/** Side menu */
|
|
41
41
|
get shouldRenderMenu(): boolean;
|
|
@@ -44,7 +44,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
44
44
|
return;
|
|
45
45
|
}
|
|
46
46
|
this.openMenuState = 'shift';
|
|
47
|
-
console.log('width', width);
|
|
48
47
|
}
|
|
49
48
|
async startResizeObserver() {
|
|
50
49
|
var _a;
|
|
@@ -66,15 +65,22 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
66
65
|
<slot name="item-nav-header"></slot>
|
|
67
66
|
<div class="menu-and-reader">
|
|
68
67
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
|
69
|
-
${!this.loaded
|
|
70
|
-
? html `<div class="loading-view">
|
|
71
|
-
<ia-itemnav-loader></ia-itemnav-loader>
|
|
72
|
-
</div>`
|
|
73
|
-
: nothing}
|
|
74
68
|
<div id="reader" class=${displayReaderClass}>
|
|
75
69
|
${this.renderViewport}
|
|
76
70
|
</div>
|
|
71
|
+
<div class="loading-area">
|
|
72
|
+
<div class="loading-view">
|
|
73
|
+
<ia-itemnav-loader></ia-itemnav-loader>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
77
76
|
</div>
|
|
77
|
+
${!this.loaded
|
|
78
|
+
? html ` <div class="loading-area">
|
|
79
|
+
<div class="loading-view">
|
|
80
|
+
<ia-itemnav-loader></ia-itemnav-loader>
|
|
81
|
+
</div>
|
|
82
|
+
</div>`
|
|
83
|
+
: nothing}
|
|
78
84
|
</div>
|
|
79
85
|
`;
|
|
80
86
|
}
|
|
@@ -145,8 +151,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
145
151
|
}
|
|
146
152
|
/* End Modal management */
|
|
147
153
|
/** Fullscreen Management */
|
|
148
|
-
manageViewportFullscreen() {
|
|
149
|
-
this.viewportInFullscreen =
|
|
154
|
+
manageViewportFullscreen(e) {
|
|
155
|
+
this.viewportInFullscreen = !!e.detail.isFullScreen;
|
|
150
156
|
}
|
|
151
157
|
/** End Fullscreen Management */
|
|
152
158
|
/** Side menu */
|
|
@@ -273,6 +279,16 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
273
279
|
height: 100vh;
|
|
274
280
|
}
|
|
275
281
|
|
|
282
|
+
.loading-area {
|
|
283
|
+
position: absolute;
|
|
284
|
+
top: 0;
|
|
285
|
+
left: 0;
|
|
286
|
+
right: 0;
|
|
287
|
+
bottom: 0;
|
|
288
|
+
height: inherit;
|
|
289
|
+
min-height: inherit;
|
|
290
|
+
}
|
|
291
|
+
|
|
276
292
|
.loading-view {
|
|
277
293
|
display: flex;
|
|
278
294
|
align-items: center;
|
|
@@ -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 customElement,\n property,\n state,\n query,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport {\n SharedResizeObserver,\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntOpenModalEvent,\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('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 | undefined = undefined;\n\n @property({ type: String }) itemType = '';\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({\n type: Array,\n hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {\n if (newVal !== oldVal) {\n return true;\n }\n return false;\n },\n })\n @property({ type: Array })\n menuContents: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ type: Object }) modal:\n | ModalManagerInterface\n | undefined = undefined;\n\n @property({ attribute: false }) private sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;\n\n @state() private loaded: boolean = false;\n\n @state() private openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n disconnectedCallback() {\n this.sharedObserver?.removeObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n firstUpdated(): void {\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\n }\n\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 console.log('width', width);\n }\n\n private async startResizeObserver(): Promise<void> {\n const ro = new PromisedSingleton<SharedResizeObserverInterface>({\n generator: async (): Promise<SharedResizeObserverInterface> => {\n return new SharedResizeObserver();\n },\n });\n\n this.sharedObserver = await ro.get();\n this.sharedObserver?.addObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot name=\"item-nav-header\"></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n ${!this.loaded\n ? html`<div class=\"loading-view\">\n <ia-itemnav-loader></ia-itemnav-loader>\n </div>`\n : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n </div>\n </div>\n `;\n }\n\n get BooksViewer(): TemplateResult {\n return html`\n <book-navigator\n .baseHost=${this.baseHost}\n .book=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n >\n <div slot=\"bookreader\">\n <slot name=\"bookreader\"></slot>\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === 'bookreader') {\n return this.BooksViewer;\n }\n return html` <ia-item-inspector\n .itemMD=${this.item}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-item-inspector>`;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n }\n\n /* Modal management */\n openModal(e: IntOpenModalEvent): void {\n const { config, customModalContent } = e.detail;\n if (!config || !customModalContent) {\n return;\n }\n\n this.modal?.showModal({\n config,\n customModalContent,\n });\n }\n\n closeModal(): void {\n this.modal?.closeModal();\n }\n\n /** Creates modal DOM & attaches to `<body>` */\n private createModal(): void {\n this.modal = document.createElement(\n 'modal-manager'\n ) as ModalManagerInterface;\n document.body.appendChild(this.modal);\n }\n /* End Modal management */\n\n /** Fullscreen Management */\n manageViewportFullscreen(): void {\n this.viewportInFullscreen = !this.viewportInFullscreen;\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: IntSetOpenMenuEvent): void {\n const { id } = e.detail;\n this.openMenu = id === this.openMenu ? '' : id;\n }\n\n setMenuContents(e: IntSetMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: IntSetMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): void {\n const { menuId, action } = e.detail;\n if (menuId) {\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n }\n\n get menuToggleButton() {\n // <ia-icon icon=\"ellipses\" style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon>\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 renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n\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.openMenu}\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 = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(\n ({ icon, id }) => 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 drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles() {\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\n return css`\n :host,\n #frame,\n #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n #frame {\n background-color: var(--menuSliderBg);\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 #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n height: 1px;\n width: 1px;\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 }\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 /* transition: ${transitionEffect}; */\n transform: translateX(0);\n width: 100%;\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% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\n }\n `;\n }\n}\n\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
|
|
1
|
+
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,QAAQ,EACR,KAAK,EACL,KAAK,GACN,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAkB,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EACL,oBAAoB,GAGrB,MAAM,yCAAyC,CAAC;AACjD,aAAa;AACb,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,OAAO,8CAA8C,CAAC;AACtD,OAAO,UAAU,CAAC;AAelB,IAAa,aAAa,GAA1B,MAAa,aACX,SAAQ,UAAU;IADpB;;QAYE,SAAI,GAAiC,SAAS,CAAC;QAEnB,aAAQ,GAAG,EAAE,CAAC;QAEd,aAAQ,GAAG,aAAa,CAAC;QAUrD,aAAQ,GAAG,KAAK,CAAC;QAYjB,iBAAY,GAAsB,EAAE,CAAC;QAEV,kBAAa,GAAsB,EAAE,CAAC;QAErB,yBAAoB,GAAG,KAAK,CAAC;QAE5C,eAAU,GAAG,KAAK,CAAC;QAEpB,aAAQ,GAAG,EAAE,CAAC;QAEd,UAAK,GAEjB,SAAS,CAAC;QAIT,WAAM,GAAY,KAAK,CAAC;QAExB,kBAAa,GAAwB,OAAO,CAAC;IA0ZhE,CAAC;IAtZC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,cAAc,CAAC;YAClC,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;QAED,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;QACpC,IAAI,KAAK,IAAI,GAAG,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YAC/B,OAAO;SACR;QACD,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,mBAAmB;;QAC/B,MAAM,EAAE,GAAG,IAAI,iBAAiB,CAAgC;YAC9D,SAAS,EAAE,KAAK,IAA4C,EAAE;gBAC5D,OAAO,IAAI,oBAAoB,EAAE,CAAC;YACpC,CAAC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,GAAG,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;QACrC,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAC;YAC/B,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,SAAS;;;YAGhC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;mCAC9B,kBAAkB;cACvC,IAAI,CAAC,cAAc;;;;;;;;UAQvB,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;;;mBAIG;YACT,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;wBACT,IAAI,CAAC,UAAU;0BACb,IAAI,CAAC,cAAc;gCACb,IAAI,CAAC,wBAAwB;+BAC9B,IAAI,CAAC,mBAAmB;0BAC7B,IAAI,CAAC,oBAAoB;uBAC5B,IAAI,CAAC,eAAe;gCACX,IAAI,CAAC,gBAAgB;kCACnB,IAAI,CAAC,SAAS;mCACb,IAAI,CAAC,UAAU;;;;;;KAM7C,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,OAAO,CAAC;SAChB;QACD,IAAI,IAAI,CAAC,QAAQ,KAAK,YAAY,EAAE;YAClC,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QACD,OAAO,IAAI,CAAA;gBACC,IAAI,CAAC,IAAI;wBACD,IAAI,CAAC,oBAAoB;qBAC5B,IAAI,CAAC,eAAe;8BACX,IAAI,CAAC,wBAAwB;8BAC7B,IAAI,CAAC,gBAAgB;gCACnB,IAAI,CAAC,SAAS;iCACb,IAAI,CAAC,UAAU;6BACnB,IAAI,CAAC,mBAAmB;0BAC3B,CAAC;IACzB,CAAC;IAED,mBAAmB,CAAC,CAA8B;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;IACzB,CAAC;IAED,sBAAsB;IACtB,SAAS,CAAC,CAAoB;;QAC5B,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAChD,IAAI,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE;YAClC,OAAO;SACR;QAED,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YACpB,MAAM;YACN,kBAAkB;SACnB,CAAC,CAAC;IACL,CAAC;IAED,UAAU;;QACR,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IAC3B,CAAC;IAED,+CAA+C;IACvC,WAAW;QACjB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,aAAa,CACjC,eAAe,CACS,CAAC;QAC3B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IACD,0BAA0B;IAE1B,4BAA4B;IAC5B,wBAAwB,CAAC,CAA2B;QAClD,IAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IACtD,CAAC;IACD,gCAAgC;IAEhC,gBAAgB;IAChB,IAAI,gBAAgB;QAClB,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;IACpC,CAAC;IAED,UAAU;QACR,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,CAAsB;QAChC,MAAM,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;IAED,eAAe,CAAC,CAA0B;QACxC,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;IACtC,CAAC;IAED,gBAAgB,CAAC,CAA2B;QAC1C,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,kDAAkD;IAClD,oBAAoB,CAAC,CAAyB;QAC5C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACpC,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;aAC3B;iBAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;gBAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;gBACvB,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;SACF;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,kGAAkG;QAClG,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,UAAU;;;;;;;;;KAS3B,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpD,OAAO,IAAI,CAAA;;iCAEkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;+BACzC,WAAW;;qBAErB,IAAI,CAAC,YAAY;4BACV,IAAI,CAAC,QAAQ;gCACT,IAAI,CAAC,WAAW;gCAChB,IAAI,CAAC,SAAS;;;;;;KAMzC,CAAC;IACJ,CAAC;IACD,oBAAoB;IAEpB,qBAAqB;IACrB,YAAY,CAAC,cAAc,GAAG,EAAE;QAC9B,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,IAAI,SAAS;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CACtC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;kCACM,EAAE,aAAa,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YAChE,IAAI;;OAET,CACF,CAAC;QACF,OAAO,IAAI,CAAA,0BAA0B,SAAS,QAAQ,CAAC;IACzD,CAAC;IACD,yBAAyB;IAEzB,kBAAkB;IAClB,IAAI,SAAS;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,OAAO,GAAG,WAAW,IAAI,eAAe,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;IACnE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;QACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;QAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAA,aAAa,gBAAgB,WAAW,CAAC;QACrE,MAAM,UAAU,GAAG,GAAG,CAAA,gCAAgC,CAAC;QAEvD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiFG,UAAU;;;;;;;;;;;;;;;;;iBAiBV,UAAU;kBACT,UAAU;;;;;;;;;;;;;;;;;;;;;;;iCAuBK,WAAW;iBAC3B,WAAW;qCACS,WAAW;sBAC1B,gBAAgB;;;;;;yBAMb,gBAAgB;;;;;;;;;;iBAUxB,WAAW;;sBAEN,gBAAgB;;;;;;sBAMhB,gBAAgB;;KAEjC,CAAC;IACJ,CAAC;CACF,CAAA;AAtcC;IATC,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,CAAC,KAAuC,EAAoB,EAAE;YACvE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACtC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtD;YACD,OAAO,KAAyB,CAAC;QACnC,CAAC;KACF,CAAC;2CAC6C;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA0B;AAUrD;IARC,QAAQ,CAAC;QACR,SAAS,EAAE,CAAC,GAA4B,EAAE,EAAE;YAC1C,IAAI,OAAO,GAAG,KAAK,SAAS,EAAE;gBAC5B,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,GAAG,KAAK,MAAM,CAAC;QACxB,CAAC;KACF,CAAC;+CACe;AAYjB;IAVC,QAAQ,CAAC;QACR,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,CAAC,MAAqB,EAAE,MAAqB,EAAE,EAAE;YAC3D,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,OAAO,IAAI,CAAC;aACb;YACD,OAAO,KAAK,CAAC;QACf,CAAC;KACF,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDACW;AAEV;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAuC;AAErB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAA8B;AAE5C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAED;AAEM;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAA8B;AAEpD;IAAR,KAAK,EAAE;6CAAiC;AAEhC;IAAR,KAAK,EAAE;oDAAsD;AAE7C;IAAhB,KAAK,CAAC,QAAQ,CAAC;4CAAgC;AA1DrC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAkdzB;SAldY,aAAa;AAod1B,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport {\n SharedResizeObserver,\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntOpenModalEvent,\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n IntManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('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 | undefined = undefined;\n\n @property({ type: String }) itemType = '';\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({\n type: Array,\n hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {\n if (newVal !== oldVal) {\n return true;\n }\n return false;\n },\n })\n @property({ type: Array })\n menuContents: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ type: Object }) modal:\n | ModalManagerInterface\n | undefined = undefined;\n\n @property({ attribute: false }) private sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;\n\n @state() private loaded: boolean = false;\n\n @state() private openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n disconnectedCallback() {\n this.sharedObserver?.removeObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n firstUpdated(): void {\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\n }\n\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 async startResizeObserver(): Promise<void> {\n const ro = new PromisedSingleton<SharedResizeObserverInterface>({\n generator: async (): Promise<SharedResizeObserverInterface> => {\n return new SharedResizeObserver();\n },\n });\n\n this.sharedObserver = await ro.get();\n this.sharedObserver?.addObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot name=\"item-nav-header\"></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 <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader></ia-itemnav-loader>\n </div>\n </div>\n </div>\n ${!this.loaded\n ? html` <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader></ia-itemnav-loader>\n </div>\n </div>`\n : nothing}\n </div>\n `;\n }\n\n get BooksViewer(): TemplateResult {\n return html`\n <book-navigator\n .baseHost=${this.baseHost}\n .book=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n >\n <div slot=\"bookreader\">\n <slot name=\"bookreader\"></slot>\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === 'bookreader') {\n return this.BooksViewer;\n }\n return html` <ia-item-inspector\n .itemMD=${this.item}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-item-inspector>`;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n }\n\n /* Modal management */\n openModal(e: IntOpenModalEvent): void {\n const { config, customModalContent } = e.detail;\n if (!config || !customModalContent) {\n return;\n }\n\n this.modal?.showModal({\n config,\n customModalContent,\n });\n }\n\n closeModal(): void {\n this.modal?.closeModal();\n }\n\n /** Creates modal DOM & attaches to `<body>` */\n private createModal(): void {\n this.modal = document.createElement(\n 'modal-manager'\n ) as ModalManagerInterface;\n document.body.appendChild(this.modal);\n }\n /* End Modal management */\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: IntManageFullscreenEvent): void {\n this.viewportInFullscreen = !!e.detail.isFullScreen;\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: IntSetOpenMenuEvent): void {\n const { id } = e.detail;\n this.openMenu = id === this.openMenu ? '' : id;\n }\n\n setMenuContents(e: IntSetMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: IntSetMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): void {\n const { menuId, action } = e.detail;\n if (menuId) {\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n }\n\n get menuToggleButton() {\n // <ia-icon icon=\"ellipses\" style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon>\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 renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n\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.openMenu}\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 = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(\n ({ icon, id }) => 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 drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles() {\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\n return css`\n :host,\n #frame,\n #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n #frame {\n background-color: var(--menuSliderBg);\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 #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .loading-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n height: 1px;\n width: 1px;\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 }\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 /* transition: ${transitionEffect}; */\n transform: translateX(0);\n width: 100%;\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% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\n }\n `;\n }\n}\n\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
|
package/package.json
CHANGED
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
IntMenuProvider,
|
|
15
15
|
IntMenuShortcut,
|
|
16
16
|
} from '../interfaces/menu-interfaces';
|
|
17
|
+
import { IntManageFullscreenEvent } from '../interfaces/event-interfaces';
|
|
17
18
|
|
|
18
19
|
import { ShareProvider } from './share-provider';
|
|
19
20
|
import { FilesByTypeProvider } from './files-by-type/files-by-type-provider';
|
|
@@ -116,7 +117,9 @@ export class IaItemInspector extends LitElement implements IntNavController {
|
|
|
116
117
|
|
|
117
118
|
// eslint-disable-next-line no-param-reassign
|
|
118
119
|
if (menu) {
|
|
119
|
-
|
|
120
|
+
const newShortcuts = [...shortcuts, menu];
|
|
121
|
+
// eslint-disable-next-line no-param-reassign
|
|
122
|
+
shortcuts = newShortcuts;
|
|
120
123
|
}
|
|
121
124
|
console.log({ shortcuts, menu });
|
|
122
125
|
return shortcuts;
|
|
@@ -163,13 +166,13 @@ export class IaItemInspector extends LitElement implements IntNavController {
|
|
|
163
166
|
}
|
|
164
167
|
|
|
165
168
|
updateFullscreenState() {
|
|
166
|
-
const
|
|
167
|
-
this.fullscreenState =
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
);
|
|
169
|
+
const isFullScreen = !this.fullscreenState;
|
|
170
|
+
this.fullscreenState = isFullScreen;
|
|
171
|
+
|
|
172
|
+
const event = new CustomEvent('ViewportInFullScreen', {
|
|
173
|
+
detail: { isFullScreen },
|
|
174
|
+
} as IntManageFullscreenEvent);
|
|
175
|
+
this.dispatchEvent(event);
|
|
173
176
|
}
|
|
174
177
|
|
|
175
178
|
updateMenuContents() {
|
package/src/item-navigator.ts
CHANGED
|
@@ -28,6 +28,7 @@ import {
|
|
|
28
28
|
IntSetMenuContentsEvent,
|
|
29
29
|
IntSetMenuShortcutsEvent,
|
|
30
30
|
IntLoadingStateUpdatedEvent,
|
|
31
|
+
IntManageFullscreenEvent,
|
|
31
32
|
} from './interfaces/event-interfaces';
|
|
32
33
|
|
|
33
34
|
import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
|
|
@@ -115,7 +116,6 @@ export class ItemNavigator
|
|
|
115
116
|
return;
|
|
116
117
|
}
|
|
117
118
|
this.openMenuState = 'shift';
|
|
118
|
-
console.log('width', width);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
private async startResizeObserver(): Promise<void> {
|
|
@@ -139,15 +139,22 @@ export class ItemNavigator
|
|
|
139
139
|
<slot name="item-nav-header"></slot>
|
|
140
140
|
<div class="menu-and-reader">
|
|
141
141
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
|
142
|
-
${!this.loaded
|
|
143
|
-
? html`<div class="loading-view">
|
|
144
|
-
<ia-itemnav-loader></ia-itemnav-loader>
|
|
145
|
-
</div>`
|
|
146
|
-
: nothing}
|
|
147
142
|
<div id="reader" class=${displayReaderClass}>
|
|
148
143
|
${this.renderViewport}
|
|
149
144
|
</div>
|
|
145
|
+
<div class="loading-area">
|
|
146
|
+
<div class="loading-view">
|
|
147
|
+
<ia-itemnav-loader></ia-itemnav-loader>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
150
|
</div>
|
|
151
|
+
${!this.loaded
|
|
152
|
+
? html` <div class="loading-area">
|
|
153
|
+
<div class="loading-view">
|
|
154
|
+
<ia-itemnav-loader></ia-itemnav-loader>
|
|
155
|
+
</div>
|
|
156
|
+
</div>`
|
|
157
|
+
: nothing}
|
|
151
158
|
</div>
|
|
152
159
|
`;
|
|
153
160
|
}
|
|
@@ -226,8 +233,8 @@ export class ItemNavigator
|
|
|
226
233
|
/* End Modal management */
|
|
227
234
|
|
|
228
235
|
/** Fullscreen Management */
|
|
229
|
-
manageViewportFullscreen(): void {
|
|
230
|
-
this.viewportInFullscreen =
|
|
236
|
+
manageViewportFullscreen(e: IntManageFullscreenEvent): void {
|
|
237
|
+
this.viewportInFullscreen = !!e.detail.isFullScreen;
|
|
231
238
|
}
|
|
232
239
|
/** End Fullscreen Management */
|
|
233
240
|
|
|
@@ -370,6 +377,16 @@ export class ItemNavigator
|
|
|
370
377
|
height: 100vh;
|
|
371
378
|
}
|
|
372
379
|
|
|
380
|
+
.loading-area {
|
|
381
|
+
position: absolute;
|
|
382
|
+
top: 0;
|
|
383
|
+
left: 0;
|
|
384
|
+
right: 0;
|
|
385
|
+
bottom: 0;
|
|
386
|
+
height: inherit;
|
|
387
|
+
min-height: inherit;
|
|
388
|
+
}
|
|
389
|
+
|
|
373
390
|
.loading-view {
|
|
374
391
|
display: flex;
|
|
375
392
|
align-items: center;
|