@internetarchive/bookreader 5.0.0-30-d → 5.0.0-30-e

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, uses modal-manager to draw their interface -->
91
92
  <modal-manager></modal-manager>
92
93
  <script >
93
94
  // Set up demo things
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/bookreader",
3
- "version": "5.0.0-30-d",
3
+ "version": "5.0.0-30-e",
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-4",
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
  }
@@ -44,7 +44,7 @@ export class IaBookReader extends LitElement {
44
44
 
45
45
  updated() {
46
46
  if (!this.modal) {
47
- this.modal = new ModalManager();
47
+ this.setModalManager();
48
48
  }
49
49
 
50
50
  if (!this.sharedObserver) {
@@ -52,12 +52,24 @@ export class IaBookReader extends LitElement {
52
52
  }
53
53
  }
54
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
+ }
55
67
 
56
68
  manageFullscreen(e) {
57
69
  const { detail } = e;
58
70
  const fullscreen = !!detail.isFullScreen;
59
71
  this.fullscreen = fullscreen;
60
- this.dispatchEvent(new CustomEvent('fullscreenStatusUpdated', { detail: { fullscreen }}));
72
+ this.dispatchEvent(new CustomEvent('fullscreenStateUpdated', { detail: { fullscreen }}));
61
73
 
62
74
  }
63
75
 
@@ -96,7 +108,6 @@ export class IaBookReader extends LitElement {
96
108
  <div class="ia-bookreader">
97
109
  <ia-item-navigator
98
110
  ?viewportInFullscreen=${this.fullscreen}
99
- .itemType=${'open'}
100
111
  .basehost=${this.baseHost}
101
112
  .item=${this.item}
102
113
  .modal=${this.modal}
@@ -106,10 +117,10 @@ export class IaBookReader extends LitElement {
106
117
  .menuShortcuts=${this.menuShortcuts}
107
118
  .menuContents=${this.menuContents}
108
119
  >
109
- <div slot="theater-header">
110
- <slot name="theater-header"></slot>
120
+ <div slot="header">
121
+ <slot name="header"></slot>
111
122
  </div>
112
- <div slot="theater-main">
123
+ <div slot="main">
113
124
  <book-navigator
114
125
  .modal=${this.modal}
115
126
  .baseHost=${this.baseHost}
@@ -123,8 +134,8 @@ export class IaBookReader extends LitElement {
123
134
  @menuUpdated=${this.setMenuContents}
124
135
  @menuShortcutsUpdated=${this.setMenuShortcuts}
125
136
  >
126
- <div slot="theater-main">
127
- <slot name="theater-main"></slot>
137
+ <div slot="main">
138
+ <slot name="main"></slot>
128
139
  </div>
129
140
  </book-navigator>
130
141
  </div>
@@ -159,8 +170,8 @@ export class IaBookReader extends LitElement {
159
170
  min-height: unset;
160
171
  }
161
172
 
162
- div[slot="theater-main"],
163
- div[slot="theater-main"] > * {
173
+ div[slot="main"],
174
+ div[slot="main"] > * {
164
175
  height: inherit;
165
176
  }
166
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>