@internetarchive/bookreader 5.0.0-30-b → 5.0.0-30

Sign up to get free protection for your applications and to get access to all the features.
@@ -43,7 +43,7 @@
43
43
  <ia-bookreader
44
44
  baseHost="https://archive.org"
45
45
  >
46
- <div id="IABookReaderWrapper" slot="theater-main">
46
+ <div id="IABookReaderWrapper" slot="main">
47
47
  <div id="BookReader" class="BookReader"></div>
48
48
  </div>
49
49
  <div>
@@ -88,6 +88,7 @@
88
88
  <h3>Placeholder div to allow scrolling</h3>
89
89
  </div>
90
90
 
91
+ <!-- Certain features, like Bookmarks, use modal-manager to draw their interface -->
91
92
  <modal-manager></modal-manager>
92
93
  <script >
93
94
  // Set up demo things
package/CHANGELOG.md CHANGED
@@ -1,3 +1,6 @@
1
+ # 5.0.0-30
2
+ - `<ia-bookreader>` is top-most web component @iisa
3
+
1
4
  # 5.0.0-29
2
5
  - import ia-item-navigator for menu management @iisa
3
6
  - url plugin: suppress default state on load @dualcnhq
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/bookreader",
3
- "version": "5.0.0-30-b",
3
+ "version": "5.0.0-30",
4
4
  "description": "The Internet Archive BookReader.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,7 +26,7 @@
26
26
  "private": false,
27
27
  "dependencies": {
28
28
  "@internetarchive/ia-activity-indicator": "^0.0.1",
29
- "@internetarchive/ia-item-navigator": "0.0.4-3",
29
+ "@internetarchive/ia-item-navigator": "^0.0.4",
30
30
  "@internetarchive/ia-menu-slider": "^1.1.1",
31
31
  "@internetarchive/ia-sharing-options": "^0.1.4",
32
32
  "@internetarchive/icon-bookmark": "^1.1.3",
@@ -504,7 +504,7 @@ export class BookNavigator extends LitElement {
504
504
  const placeholder = this.bookReaderCannotLoad ? this.itemImage : this.loader;
505
505
  return html`<div id="book-navigator" class="${this.loadingClass}">
506
506
  ${placeholder}
507
- <slot name="theater-main"></slot>
507
+ <slot name="main"></slot>
508
508
  </div>
509
509
  `;
510
510
  }
@@ -368,7 +368,7 @@ export class Mode1UpLit extends LitElement {
368
368
  computeDefaultScale(page) {
369
369
  // Default to real size if it fits, otherwise default to full width
370
370
  const containerWidthIn = this.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
371
- return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN));
371
+ return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
372
372
  }
373
373
 
374
374
  computeWorldDimensions() {
@@ -40,12 +40,11 @@ export class IaBookReader extends LitElement {
40
40
  this.loaded = false;
41
41
  this.menuShortcuts = [];
42
42
  this.menuContents = [];
43
- console.log("ia-bookreader constructor", this);
44
43
  }
45
44
 
46
45
  updated() {
47
46
  if (!this.modal) {
48
- this.modal = new ModalManager();
47
+ this.setModalManager();
49
48
  }
50
49
 
51
50
  if (!this.sharedObserver) {
@@ -53,12 +52,24 @@ export class IaBookReader extends LitElement {
53
52
  }
54
53
  }
55
54
 
55
+ /** Creates modal DOM & attaches to `<body>` */
56
+ setModalManager() {
57
+ let modalManager = document.querySelector('modal-manager');
58
+ if (!modalManager) {
59
+ modalManager = document.createElement(
60
+ 'modal-manager'
61
+ );
62
+ document.body.appendChild(this.modal);
63
+ }
64
+
65
+ this.modal = modalManager;
66
+ }
56
67
 
57
68
  manageFullscreen(e) {
58
69
  const { detail } = e;
59
70
  const fullscreen = !!detail.isFullScreen;
60
71
  this.fullscreen = fullscreen;
61
- this.dispatchEvent(new CustomEvent('fullscreenStatusUpdated', { detail: { fullscreen }}));
72
+ this.dispatchEvent(new CustomEvent('fullscreenStateUpdated', { detail: { fullscreen }}));
62
73
 
63
74
  }
64
75
 
@@ -92,14 +103,11 @@ export class IaBookReader extends LitElement {
92
103
  }
93
104
  }
94
105
 
95
- // LINER NOTES --- iaux.min.js is loading wayy to late for booknav listener, to br. init
96
-
97
106
  render() {
98
107
  return html`
99
108
  <div class="ia-bookreader">
100
109
  <ia-item-navigator
101
110
  ?viewportInFullscreen=${this.fullscreen}
102
- .itemType=${'open'}
103
111
  .basehost=${this.baseHost}
104
112
  .item=${this.item}
105
113
  .modal=${this.modal}
@@ -109,10 +117,10 @@ export class IaBookReader extends LitElement {
109
117
  .menuShortcuts=${this.menuShortcuts}
110
118
  .menuContents=${this.menuContents}
111
119
  >
112
- <div slot="theater-header">
113
- <slot name="theater-header"></slot>
120
+ <div slot="header">
121
+ <slot name="header"></slot>
114
122
  </div>
115
- <div slot="theater-main">
123
+ <div slot="main">
116
124
  <book-navigator
117
125
  .modal=${this.modal}
118
126
  .baseHost=${this.baseHost}
@@ -126,8 +134,8 @@ export class IaBookReader extends LitElement {
126
134
  @menuUpdated=${this.setMenuContents}
127
135
  @menuShortcutsUpdated=${this.setMenuShortcuts}
128
136
  >
129
- <div slot="theater-main">
130
- <slot name="theater-main"></slot>
137
+ <div slot="main">
138
+ <slot name="main"></slot>
131
139
  </div>
132
140
  </book-navigator>
133
141
  </div>
@@ -158,12 +166,12 @@ export class IaBookReader extends LitElement {
158
166
  ia-item-navigator[viewportinfullscreen] {
159
167
  position: fixed;
160
168
  inset: 0;
161
- height: 100vh;
169
+ height: 100%;
162
170
  min-height: unset;
163
171
  }
164
172
 
165
- div[slot="theater-main"],
166
- div[slot="theater-main"] > * {
173
+ div[slot="main"],
174
+ div[slot="main"] > * {
167
175
  height: inherit;
168
176
  }
169
177
 
@@ -465,7 +465,7 @@ export class BookNavigator extends LitElement {
465
465
  const placeholder = this.bookReaderCannotLoad ? this.itemImage : this.loader;
466
466
  return html`<div id="book-navigator" class="${this.loadingClass}">
467
467
  ${placeholder}
468
- <slot name="theater-main"></slot>
468
+ <slot name="main"></slot>
469
469
  </div>
470
470
  `;
471
471
  }
@@ -57,8 +57,8 @@ export class BookReader extends LitElement {
57
57
  .basehost=${this.baseHost}
58
58
  .item=${this.base64Json}>
59
59
  .sharedObserver=${this.sharedObserver}
60
- <div slot="theater-main">
61
- <slot name="theater-main"></slot>
60
+ <div slot="main">
61
+ <slot name="main"></slot>
62
62
  </div>
63
63
  </ia-item-navigator>
64
64
  </div>
@@ -33,7 +33,7 @@ const container = (sharedObserver = null) => {
33
33
  .sharedObserver=${sharedObserver || new SharedResizeObserver()}
34
34
  .modal=${modalMgr}
35
35
  >
36
- <div slot="theater-main">
36
+ <div slot="main">
37
37
  <div id="BookReader"></div>
38
38
  <p class="visible-in-reader">now showing</p>
39
39
  <\div>