@internetarchive/ia-item-navigator 0.0.0-a12 → 0.0.0-a13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -19
- package/demo/app-root.ts +31 -27
- package/demo/index.html +1 -0
- package/dist/demo/app-root.d.ts +11 -14
- package/dist/demo/app-root.js +25 -23
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +3 -2
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/item-navigator.d.ts +17 -11
- package/dist/src/item-navigator.js +29 -50
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/no-theater-available.js.map +1 -1
- package/dist/test/ia-item-navigator.test.js +32 -23
- package/dist/test/ia-item-navigator.test.js.map +1 -1
- package/package.json +2 -2
- package/src/interfaces/menu-interfaces.ts +3 -2
- package/src/item-navigator.ts +44 -62
- package/src/no-theater-available.ts +2 -4
- package/test/ia-item-navigator.test.ts +42 -31
- package/demo/demo-book-manifest.json +0 -1163
- package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -43
- package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -100
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-inspector/visual-mod-provider.ts +0 -65
- package/src/item-navigator-js.js +0 -372
@@ -1,43 +0,0 @@
|
|
1
|
-
import { html, TemplateResult } from 'lit-element';
|
2
|
-
|
3
|
-
import './ia-files-by-type';
|
4
|
-
import '@internetarchive/icon-share/icon-share';
|
5
|
-
import {
|
6
|
-
IntMenuProvider,
|
7
|
-
IntProviderArgs,
|
8
|
-
} from '../../interfaces/menu-interfaces';
|
9
|
-
|
10
|
-
export class FilesByTypeProvider implements IntMenuProvider {
|
11
|
-
item: any = null;
|
12
|
-
|
13
|
-
baseHost: string = 'https://archive.org';
|
14
|
-
|
15
|
-
icon: TemplateResult = html`<p
|
16
|
-
style="color: #fff; font-size: var(--iconHeight);"
|
17
|
-
>
|
18
|
-
F
|
19
|
-
</p>`;
|
20
|
-
|
21
|
-
id: string = 'filesByType';
|
22
|
-
|
23
|
-
label: string = 'Files by type';
|
24
|
-
|
25
|
-
component: TemplateResult | null = null;
|
26
|
-
|
27
|
-
subPrefix: string = '';
|
28
|
-
|
29
|
-
constructor(shareArgs: IntProviderArgs) {
|
30
|
-
const { item, baseHost, subPrefix = '' } = shareArgs;
|
31
|
-
const { title = '' } = item.metadata;
|
32
|
-
|
33
|
-
this.item = item;
|
34
|
-
this.baseHost = baseHost;
|
35
|
-
this.subPrefix = subPrefix;
|
36
|
-
|
37
|
-
this.component = html`<ia-files-by-type
|
38
|
-
.item=${this.item}
|
39
|
-
.description="${title}"
|
40
|
-
.baseHost="${this.baseHost}"
|
41
|
-
></ia-files-by-type>`;
|
42
|
-
}
|
43
|
-
}
|
@@ -1,100 +0,0 @@
|
|
1
|
-
import { MetadataResponse, File } from '@internetarchive/search-service';
|
2
|
-
import { html, customElement, LitElement, property } from 'lit-element';
|
3
|
-
|
4
|
-
interface CollapsedFileInt extends File {
|
5
|
-
[menuId: string]: any;
|
6
|
-
derivatives: [];
|
7
|
-
}
|
8
|
-
|
9
|
-
@customElement('ia-files-by-type')
|
10
|
-
export default class IaFilesByType extends LitElement {
|
11
|
-
@property({ type: Object }) item: MetadataResponse = {} as MetadataResponse;
|
12
|
-
|
13
|
-
@property({ type: Array }) archivalArtifacts: File[] = [];
|
14
|
-
|
15
|
-
@property({ type: Array }) collapsedFiles: CollapsedFileInt[] = [];
|
16
|
-
|
17
|
-
firstUpdated() {
|
18
|
-
this.collapseFiles();
|
19
|
-
}
|
20
|
-
|
21
|
-
render() {
|
22
|
-
return html`
|
23
|
-
<div>
|
24
|
-
<p>there are ${this.collapsedFiles.length} original files</p>
|
25
|
-
|
26
|
-
<p>there are ${this.archivalArtifacts.length} archival artifacts</p>
|
27
|
-
|
28
|
-
<p></p>
|
29
|
-
</div>
|
30
|
-
`;
|
31
|
-
}
|
32
|
-
|
33
|
-
sortByViewer() {
|
34
|
-
// const images = [];
|
35
|
-
// const books = [];
|
36
|
-
// const radio = [];
|
37
|
-
// const audio = [];
|
38
|
-
// const video = [];
|
39
|
-
// const albums = [];
|
40
|
-
// const software = [];
|
41
|
-
// this.collapsedFiles.forEach((fi) => {
|
42
|
-
// // if image
|
43
|
-
// // sort by various viewers
|
44
|
-
// })
|
45
|
-
|
46
|
-
return true;
|
47
|
-
}
|
48
|
-
|
49
|
-
collapseFiles() {
|
50
|
-
const { files = [] } = this?.item as MetadataResponse;
|
51
|
-
|
52
|
-
const archivalArtifacts: File[] = [];
|
53
|
-
const origDir: any = {};
|
54
|
-
|
55
|
-
files.forEach(fi => {
|
56
|
-
const { format, source, name, original = '' } = fi as File;
|
57
|
-
if (
|
58
|
-
format.toLowerCase() === 'metadata' ||
|
59
|
-
format.toLowerCase() === 'item tile'
|
60
|
-
) {
|
61
|
-
archivalArtifacts.push(fi);
|
62
|
-
return;
|
63
|
-
}
|
64
|
-
|
65
|
-
let origEntry: any = {};
|
66
|
-
if (source === 'original') {
|
67
|
-
origEntry = origDir[name];
|
68
|
-
if (!origEntry) {
|
69
|
-
// add new
|
70
|
-
origDir[name] = { ...fi, derivatives: [] } as CollapsedFileInt;
|
71
|
-
origEntry = origDir[name];
|
72
|
-
} else {
|
73
|
-
// update
|
74
|
-
const merged = { ...origEntry, ...fi };
|
75
|
-
origDir[name] = merged;
|
76
|
-
}
|
77
|
-
return;
|
78
|
-
}
|
79
|
-
|
80
|
-
if (source === 'derivative') {
|
81
|
-
const keyToFile = original || '';
|
82
|
-
origEntry = origDir[keyToFile];
|
83
|
-
if (!origEntry && original) {
|
84
|
-
// add new
|
85
|
-
const fileFrame = { derivatives: [] } as CollapsedFileInt;
|
86
|
-
origEntry = fileFrame;
|
87
|
-
origEntry?.derivatives.push(fi);
|
88
|
-
origDir[keyToFile] = origEntry;
|
89
|
-
origEntry = origDir[keyToFile];
|
90
|
-
}
|
91
|
-
origEntry?.derivatives.push(fi);
|
92
|
-
}
|
93
|
-
});
|
94
|
-
|
95
|
-
this.archivalArtifacts = archivalArtifacts;
|
96
|
-
this.collapsedFiles = Object.keys(origDir).map(
|
97
|
-
(fileName: string) => origDir[fileName]
|
98
|
-
);
|
99
|
-
}
|
100
|
-
}
|
@@ -1,51 +0,0 @@
|
|
1
|
-
import { html, TemplateResult } from 'lit-element';
|
2
|
-
|
3
|
-
import '@internetarchive/ia-sharing-options';
|
4
|
-
import '@internetarchive/icon-share/icon-share';
|
5
|
-
import {
|
6
|
-
IntMenuProvider,
|
7
|
-
IntProviderArgs,
|
8
|
-
} from '../interfaces/menu-interfaces';
|
9
|
-
|
10
|
-
export class ShareProvider implements IntMenuProvider {
|
11
|
-
item: any = null;
|
12
|
-
|
13
|
-
baseHost: string = 'https://archive.org';
|
14
|
-
|
15
|
-
icon: TemplateResult = html`<ia-icon-share
|
16
|
-
style="width: var(--iconWidth); height: var(--iconHeight);"
|
17
|
-
></ia-icon-share>`;
|
18
|
-
|
19
|
-
id: string = 'share';
|
20
|
-
|
21
|
-
label: string = 'Share this item';
|
22
|
-
|
23
|
-
component: TemplateResult | null = null;
|
24
|
-
|
25
|
-
subPrefix: string = '';
|
26
|
-
|
27
|
-
encodedSubPrefix: string = '';
|
28
|
-
|
29
|
-
constructor(shareArgs: IntProviderArgs) {
|
30
|
-
const { item, baseHost, subPrefix = '' } = shareArgs;
|
31
|
-
const { identifier = '', creator = '', title = '' } = item.metadata || {};
|
32
|
-
const encodedSubPrefix = encodeURIComponent(subPrefix);
|
33
|
-
const urlIdentifier =
|
34
|
-
subPrefix && subPrefix !== identifier
|
35
|
-
? `${identifier}/${encodedSubPrefix}`
|
36
|
-
: identifier;
|
37
|
-
|
38
|
-
this.item = item;
|
39
|
-
this.baseHost = baseHost;
|
40
|
-
this.subPrefix = subPrefix;
|
41
|
-
this.encodedSubPrefix = encodedSubPrefix;
|
42
|
-
|
43
|
-
this.component = html`<ia-sharing-options
|
44
|
-
identifier=${urlIdentifier}
|
45
|
-
type="item"
|
46
|
-
creator="${creator}"
|
47
|
-
description="${title}"
|
48
|
-
baseHost="${this.baseHost}"
|
49
|
-
></ia-sharing-options>`;
|
50
|
-
}
|
51
|
-
}
|
@@ -1,65 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-vars */
|
2
|
-
/* eslint-disable max-classes-per-file */
|
3
|
-
|
4
|
-
import { html, TemplateResult, customElement, LitElement } from 'lit-element';
|
5
|
-
|
6
|
-
import '@internetarchive/ia-sharing-options';
|
7
|
-
import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
|
8
|
-
import {
|
9
|
-
IntMenuProvider,
|
10
|
-
IntProviderArgs,
|
11
|
-
} from '../interfaces/menu-interfaces';
|
12
|
-
|
13
|
-
@customElement('ia-visual-mods')
|
14
|
-
class VisualMods extends LitElement {
|
15
|
-
toggleFullscreen() {
|
16
|
-
this.dispatchEvent(new Event('fullscreenToggle'));
|
17
|
-
}
|
18
|
-
|
19
|
-
render() {
|
20
|
-
return html`<section>
|
21
|
-
<button @click=${this.toggleFullscreen}>Toggle Fullscreen</button>
|
22
|
-
</section>`;
|
23
|
-
}
|
24
|
-
}
|
25
|
-
|
26
|
-
export class VisualModsProvider implements IntMenuProvider {
|
27
|
-
item: any = null;
|
28
|
-
|
29
|
-
baseHost: string = 'https://archive.org';
|
30
|
-
|
31
|
-
icon: TemplateResult = html`<ia-icon-visual-adjustment
|
32
|
-
style="width: var(--iconWidth); height: var(--iconHeight);"
|
33
|
-
></ia-icon-visual-adjustment>`;
|
34
|
-
|
35
|
-
id: string = 'visualMods';
|
36
|
-
|
37
|
-
label: string = 'Visual Modifications';
|
38
|
-
|
39
|
-
component: TemplateResult | null = null;
|
40
|
-
|
41
|
-
subPrefix: string = '';
|
42
|
-
|
43
|
-
encodedSubPrefix: string = '';
|
44
|
-
|
45
|
-
updated: any = () => {};
|
46
|
-
|
47
|
-
constructor(providerArgs: IntProviderArgs) {
|
48
|
-
const { item, baseHost, subPrefix = '', updated } = providerArgs;
|
49
|
-
|
50
|
-
this.updated = updated;
|
51
|
-
|
52
|
-
this.component = html`<ia-visual-mods
|
53
|
-
@fullscreenToggle=${() => this?.updated('toggleFullscreen')}
|
54
|
-
@openModa=${this.openModal}
|
55
|
-
></ia-visual-mods>`;
|
56
|
-
}
|
57
|
-
|
58
|
-
openModal() {}
|
59
|
-
|
60
|
-
closeModal() {}
|
61
|
-
|
62
|
-
toggleFullscreen() {
|
63
|
-
this.updated('toggleFullscreen');
|
64
|
-
}
|
65
|
-
}
|
package/src/item-navigator-js.js
DELETED
@@ -1,372 +0,0 @@
|
|
1
|
-
import { css, html, LitElement } from 'lit-element';
|
2
|
-
import { nothing } from 'lit-html';
|
3
|
-
import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
|
4
|
-
import { ModalConfig } from '@internetarchive/modal-manager';
|
5
|
-
|
6
|
-
export default class ItemNavigator extends LitElement {
|
7
|
-
static get properties() {
|
8
|
-
return {
|
9
|
-
baseHost: { type: String },
|
10
|
-
item: {
|
11
|
-
type: Object,
|
12
|
-
converter(value) {
|
13
|
-
return !value ? {} : JSON.parse(atob(value));
|
14
|
-
},
|
15
|
-
},
|
16
|
-
itemType: { type: String },
|
17
|
-
menuShortcuts: {
|
18
|
-
type: Array,
|
19
|
-
hasChanged(newVal, oldVal) {
|
20
|
-
if (newVal !== oldVal) {
|
21
|
-
return true;
|
22
|
-
}
|
23
|
-
return false;
|
24
|
-
},
|
25
|
-
},
|
26
|
-
menuOpened: { type: Boolean },
|
27
|
-
menuContents: { type: Array },
|
28
|
-
openMenu: { type: String },
|
29
|
-
signedIn: {
|
30
|
-
type: Boolean,
|
31
|
-
converter: (arg) => {
|
32
|
-
if (typeof (arg) === 'boolean') {
|
33
|
-
return arg;
|
34
|
-
}
|
35
|
-
return arg === 'true';
|
36
|
-
},
|
37
|
-
},
|
38
|
-
viewportInFullscreen: { type: Boolean },
|
39
|
-
};
|
40
|
-
}
|
41
|
-
|
42
|
-
constructor() {
|
43
|
-
/** TODO: Request BookModel.js
|
44
|
-
* Request BookNavigator.js
|
45
|
-
* Show loading spinner
|
46
|
-
* When JS assets loaded:
|
47
|
-
* - render book-navigator component
|
48
|
-
*/
|
49
|
-
super();
|
50
|
-
this.baseHost = 'archive.org';
|
51
|
-
this.item = {};
|
52
|
-
this.itemType = '';
|
53
|
-
this.menuOpened = false;
|
54
|
-
this.signedIn = false;
|
55
|
-
this.menuShortcuts = [];
|
56
|
-
this.menuContents = [];
|
57
|
-
this.viewportInFullscreen = false;
|
58
|
-
this.openMenu = '';
|
59
|
-
this.renderModalManager();
|
60
|
-
}
|
61
|
-
|
62
|
-
showItemNavigatorModal({ detail }) {
|
63
|
-
this.modal.showModal({
|
64
|
-
config: this.modalConfig,
|
65
|
-
customModalContent: detail.customModalContent,
|
66
|
-
});
|
67
|
-
}
|
68
|
-
|
69
|
-
closeItemNavigatorModal() {
|
70
|
-
this.modal.closeModal();
|
71
|
-
}
|
72
|
-
|
73
|
-
/**
|
74
|
-
* Event handler - handles viewport slot going into fullscreen
|
75
|
-
* @param {Event} e - custom event object
|
76
|
-
*/
|
77
|
-
manageViewportFullscreen({ detail }) {
|
78
|
-
const { isFullScreen } = detail;
|
79
|
-
this.viewportInFullscreen = isFullScreen;
|
80
|
-
}
|
81
|
-
|
82
|
-
/**
|
83
|
-
* Event handler - handles viewport slot going into fullscreen
|
84
|
-
* @param {Event} e - custom event object
|
85
|
-
* @param {object} event.detail - custom event detail
|
86
|
-
* @param {string} detail.action - open, toggle, close
|
87
|
-
* @param {string} detail.menuId - menu id to be shown
|
88
|
-
*/
|
89
|
-
manageSideMenuEvents({ detail }) {
|
90
|
-
const { action = '', menuId = '' } = detail;
|
91
|
-
if (menuId) {
|
92
|
-
if (action === 'open') {
|
93
|
-
this.openShortcut(menuId);
|
94
|
-
} else if (action === 'toggle') {
|
95
|
-
this.openMenu = menuId;
|
96
|
-
this.toggleMenu();
|
97
|
-
}
|
98
|
-
}
|
99
|
-
}
|
100
|
-
|
101
|
-
toggleMenu() {
|
102
|
-
this.menuOpened = !this.menuOpened;
|
103
|
-
}
|
104
|
-
|
105
|
-
closeMenu() {
|
106
|
-
this.menuOpened = false;
|
107
|
-
}
|
108
|
-
|
109
|
-
/**
|
110
|
-
* Opens menu to selected menu
|
111
|
-
* @param {string} selectedMenuId
|
112
|
-
*/
|
113
|
-
openShortcut(selectedMenuId = '') {
|
114
|
-
// open sidemenu to proper tab
|
115
|
-
this.openMenu = selectedMenuId;
|
116
|
-
this.menuOpened = true;
|
117
|
-
}
|
118
|
-
|
119
|
-
setOpenMenu({ detail }) {
|
120
|
-
const { id } = detail;
|
121
|
-
this.openMenu = id === this.openMenu ? '' : id;
|
122
|
-
}
|
123
|
-
|
124
|
-
setMenuContents({ detail }) {
|
125
|
-
this.menuContents = [...detail];
|
126
|
-
}
|
127
|
-
|
128
|
-
setMenuShortcuts({ detail }) {
|
129
|
-
this.menuShortcuts = [...detail];
|
130
|
-
}
|
131
|
-
|
132
|
-
/**
|
133
|
-
* computes classes for item-navigator <section> node
|
134
|
-
*/
|
135
|
-
get menuClass() {
|
136
|
-
const drawerState = this.menuOpened ? 'open' : '';
|
137
|
-
const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
|
138
|
-
return `${drawerState} ${fullscreenState}`;
|
139
|
-
}
|
140
|
-
|
141
|
-
get menuToggleButton() {
|
142
|
-
// <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
|
143
|
-
return html`
|
144
|
-
<button class="toggle-menu" @click=${this.toggleMenu.bind(this)} title="Toggle theater side panels">
|
145
|
-
<div>
|
146
|
-
<ia-icon-ellipses style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-ellipses>
|
147
|
-
</div>
|
148
|
-
</button>
|
149
|
-
`;
|
150
|
-
}
|
151
|
-
|
152
|
-
get menuSlider() {
|
153
|
-
return html`
|
154
|
-
<div id="menu">
|
155
|
-
<ia-menu-slider
|
156
|
-
.menus=${this.menuContents}
|
157
|
-
.open=${true}
|
158
|
-
.selectedMenu=${this.openMenu}
|
159
|
-
@menuTypeSelected=${this.setOpenMenu}
|
160
|
-
@menuSliderClosed=${this.closeMenu}
|
161
|
-
?manuallyHandleClose=${true}
|
162
|
-
?animateMenuOpen=${false}
|
163
|
-
></ia-menu-slider>
|
164
|
-
</div>
|
165
|
-
`;
|
166
|
-
}
|
167
|
-
|
168
|
-
/**
|
169
|
-
* Returns the shortcut buttons for minimized view
|
170
|
-
* @return html
|
171
|
-
*/
|
172
|
-
get shortcuts() {
|
173
|
-
// todo: aria tags
|
174
|
-
const shortcuts = this.menuShortcuts.map(({
|
175
|
-
icon,
|
176
|
-
id,
|
177
|
-
}) => html`
|
178
|
-
<button class="shortcut ${id}" @click="${(e) => { this.openShortcut(id); }}">
|
179
|
-
${icon}
|
180
|
-
</button>
|
181
|
-
`);
|
182
|
-
|
183
|
-
return html`<div class="shortcuts">${shortcuts}</div>`;
|
184
|
-
}
|
185
|
-
|
186
|
-
/**
|
187
|
-
* Returns the side menu given it's open/close state
|
188
|
-
* @return html
|
189
|
-
*/
|
190
|
-
get renderSideMenu() {
|
191
|
-
// todo: aria tags
|
192
|
-
return html`
|
193
|
-
<nav>
|
194
|
-
<div class="minimized">
|
195
|
-
${this.shortcuts}
|
196
|
-
${this.menuToggleButton}
|
197
|
-
</div>
|
198
|
-
${this.menuSlider}
|
199
|
-
</nav>
|
200
|
-
`;
|
201
|
-
}
|
202
|
-
|
203
|
-
/**
|
204
|
-
* Given a itemType, this chooses the proper viewport component
|
205
|
-
* @return html
|
206
|
-
*/
|
207
|
-
get renderViewport() {
|
208
|
-
if (this.itemType === 'bookreader') {
|
209
|
-
return html`
|
210
|
-
<book-navigator
|
211
|
-
.baseHost=${this.baseHost}
|
212
|
-
.book=${this.item}
|
213
|
-
?signedIn=${this.signedIn}
|
214
|
-
?sideMenuOpen=${this.menuOpened}
|
215
|
-
@ViewportInFullScreen=${this.manageViewportFullscreen}
|
216
|
-
@updateSideMenu=${this.manageSideMenuEvents}
|
217
|
-
@menuUpdated=${this.setMenuContents}
|
218
|
-
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
219
|
-
@showItemNavigatorModal=${this.showItemNavigatorModal}
|
220
|
-
@closeItemNavigatorModal=${this.closeItemNavigatorModal}
|
221
|
-
>
|
222
|
-
<div slot="bookreader">
|
223
|
-
<slot name="bookreader"></slot>
|
224
|
-
</div>
|
225
|
-
</book-navigator>
|
226
|
-
`;
|
227
|
-
}
|
228
|
-
return html`<div class="viewport"></div>`;
|
229
|
-
}
|
230
|
-
|
231
|
-
renderModalManager() {
|
232
|
-
this.modal = document.createElement('modal-manager');
|
233
|
-
this.modal.setAttribute('id', 'item-navigator-modal');
|
234
|
-
this.modalConfig = new ModalConfig();
|
235
|
-
this.modalConfig.title = 'Delete Bookmark';
|
236
|
-
this.modalConfig.headline = 'This bookmark contains a note. Deleting it will permanently delete the note. Are you sure?';
|
237
|
-
this.modalConfig.headerColor = '#194880';
|
238
|
-
document.body.appendChild(this.modal);
|
239
|
-
}
|
240
|
-
|
241
|
-
render() {
|
242
|
-
const renderMenu = this.menuContents.length || this.menuShortcuts.length;
|
243
|
-
return html`
|
244
|
-
<div id="frame" class=${this.menuClass}>
|
245
|
-
<slot name="item-nav-header"></slot>
|
246
|
-
<div class="menu-and-reader">
|
247
|
-
${renderMenu ? this.renderSideMenu : nothing}
|
248
|
-
<div id="reader">
|
249
|
-
${this.renderViewport}
|
250
|
-
</div>
|
251
|
-
</div>
|
252
|
-
</div>
|
253
|
-
`;
|
254
|
-
}
|
255
|
-
|
256
|
-
static get styles() {
|
257
|
-
const subnavWidth = css`var(--menuWidth, 320px)`;
|
258
|
-
const tabletPlusQuery = css`@media (min-width: 640px)`;
|
259
|
-
const transitionTiming = css`var(--animationTiming, 200ms)`;
|
260
|
-
const transitionEffect = css`transform ${transitionTiming} ease-out`;
|
261
|
-
|
262
|
-
return css`
|
263
|
-
#frame {
|
264
|
-
position: relative;
|
265
|
-
overflow: hidden;
|
266
|
-
}
|
267
|
-
|
268
|
-
#frame.fullscreen,
|
269
|
-
#frame.fullscreen #reader {
|
270
|
-
height: 100vh;
|
271
|
-
}
|
272
|
-
|
273
|
-
button {
|
274
|
-
cursor: pointer;
|
275
|
-
padding: 0;
|
276
|
-
border: 0;
|
277
|
-
}
|
278
|
-
|
279
|
-
button:focus,
|
280
|
-
button:active {
|
281
|
-
outline: none;
|
282
|
-
}
|
283
|
-
|
284
|
-
.menu-and-reader {
|
285
|
-
position: relative;
|
286
|
-
}
|
287
|
-
|
288
|
-
nav button {
|
289
|
-
background: none;
|
290
|
-
}
|
291
|
-
|
292
|
-
nav .minimized {
|
293
|
-
background: rgba(0, 0, 0, .7);
|
294
|
-
border-bottom-right-radius: 5%;
|
295
|
-
position: absolute;
|
296
|
-
padding-top: .6rem;
|
297
|
-
left: 0;
|
298
|
-
width: 4rem;
|
299
|
-
z-index: 2;
|
300
|
-
}
|
301
|
-
|
302
|
-
nav .minimized button {
|
303
|
-
width: var(--iconWidth);
|
304
|
-
height: var(--iconHeight);
|
305
|
-
margin: auto;
|
306
|
-
display: inline-flex;
|
307
|
-
vertical-align: middle;
|
308
|
-
-webkit-box-align: center;
|
309
|
-
align-items: center;
|
310
|
-
-webkit-box-pack: center;
|
311
|
-
justify-content: center;
|
312
|
-
width: 4rem;
|
313
|
-
height: 4rem;
|
314
|
-
}
|
315
|
-
|
316
|
-
nav .minimized button.toggle-menu > * {
|
317
|
-
border: 2px solid var(--iconStrokeColor);
|
318
|
-
border-radius: var(--iconWidth);
|
319
|
-
width: var(--iconWidth);
|
320
|
-
height: var(--iconHeight);
|
321
|
-
margin: auto;
|
322
|
-
}
|
323
|
-
|
324
|
-
#menu {
|
325
|
-
position: absolute;
|
326
|
-
top: 0;
|
327
|
-
bottom: 0;
|
328
|
-
left: 0;
|
329
|
-
z-index: 3;
|
330
|
-
overflow: hidden;
|
331
|
-
transform: translateX(-${subnavWidth});
|
332
|
-
width: ${subnavWidth};
|
333
|
-
transform: translateX(calc(${subnavWidth} * -1));
|
334
|
-
transition: ${transitionEffect};
|
335
|
-
}
|
336
|
-
|
337
|
-
#reader {
|
338
|
-
position: relative;
|
339
|
-
z-index: 1;
|
340
|
-
transition: ${transitionEffect};
|
341
|
-
transform: translateX(0);
|
342
|
-
width: 100%;
|
343
|
-
}
|
344
|
-
|
345
|
-
.open #menu {
|
346
|
-
width: ${subnavWidth};
|
347
|
-
transform: translateX(0);
|
348
|
-
transition: ${transitionEffect};
|
349
|
-
}
|
350
|
-
|
351
|
-
${tabletPlusQuery} {
|
352
|
-
.open #reader {
|
353
|
-
transition: ${transitionEffect};
|
354
|
-
transform: translateX(${subnavWidth});
|
355
|
-
width: calc(100% - ${subnavWidth});
|
356
|
-
}
|
357
|
-
}
|
358
|
-
|
359
|
-
#loading-indicator {
|
360
|
-
display: none;
|
361
|
-
}
|
362
|
-
|
363
|
-
#loading-indicator.visible {
|
364
|
-
display: block;
|
365
|
-
}
|
366
|
-
`;
|
367
|
-
}
|
368
|
-
}
|
369
|
-
|
370
|
-
// customElements.define('ia-icon', IAIcon);
|
371
|
-
customElements.define('ia-menu-slider', IAMenuSlider);
|
372
|
-
customElements.define('item-navigator', ItemNavigator);
|