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

package/BookReader/ia-bookreader-bundle.js

@@ -704,9 +704,9 @@ let ItemNavigator = class ItemNavigator extends lit_element__WEBPACK_IMPORTED_MO
         return this.viewportInFullscreen ? 'Internet Archive' : '';
     }
     get readerHeightStyle() {
-        var _a;
-        const calcFSHeight = `calc(100vh - ${((_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0}px)`;
-        return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
+        var _a, _b;
+        const calcFSHeight = `calc(100% - ${((_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0}px)`;
+        return ((_b = this.headerSlot) === null || _b === void 0 ? void 0 : _b.offsetHeight) > 0 ? `height: ${calcFSHeight}` : '';
     }
     get loadingArea() {
         return lit_element__WEBPACK_IMPORTED_MODULE_1__.html `
@@ -728,18 +728,14 @@ let ItemNavigator = class ItemNavigator extends lit_element__WEBPACK_IMPORTED_MO
     render() {
         const displayReaderClass = this.loaded ? '' : 'hidden';
         return lit_element__WEBPACK_IMPORTED_MODULE_1__.html `
-      <div id="frame" class=${`${this.menuClass}`}>
+      <div id="frame" class=${this.menuClass}>
         <slot
           name="theater-header"
           @slotchange=${(e) => this.slotChange(e, 'header')}
         ></slot>
-        <div class="menu-and-reader">
+        <div class="menu-and-reader" style=${this.readerHeightStyle}>
           ${this.shouldRenderMenu ? this.renderSideMenu : lit_html__WEBPACK_IMPORTED_MODULE_2__.nothing}
-          <div
-            id="reader"
-            class=${displayReaderClass}
-            style=${this.readerHeightStyle}
-          >
+          <div id="reader" class=${displayReaderClass}>
             ${this.renderViewport}
           </div>
           ${!this.loaded ? this.loadingArea : lit_html__WEBPACK_IMPORTED_MODULE_2__.nothing}
@@ -913,6 +909,7 @@ let ItemNavigator = class ItemNavigator extends lit_element__WEBPACK_IMPORTED_MO
       slot {
         display: block;
         overflow: hidden;
+        width: 100%;
       }
 
       slot * {
@@ -1024,6 +1021,13 @@ let ItemNavigator = class ItemNavigator extends lit_element__WEBPACK_IMPORTED_MO
         z-index: 1;
         transform: translateX(0);
         width: 100%;
+        height: 100%;
+      }
+
+      #reader > * {
+        width: 100%;
+        display: flex;
+        height: 100%;
       }
 
       .open.overlay #reader {
@@ -1286,7 +1290,8 @@ let IANoTheaterAvailable = class IANoTheaterAvailable extends lit_element__WEBPA
         text-align: center;
       }
       section {
-        margin: 10% auto 0;
+        width: 100%;
+        margin: 5%;
         padding: 0 5%;
       }
       p {
@@ -11123,7 +11128,6 @@ var IaBookReader = /*#__PURE__*/function (_LitElement) {
     _this.loaded = false;
     _this.menuShortcuts = [];
     _this.menuContents = [];
-    console.log("ia-bookreader constructor", _assertThisInitialized(_this));
     return _this;
   }
 
@@ -11191,8 +11195,7 @@ var IaBookReader = /*#__PURE__*/function (_LitElement) {
         this.itemNav.openMenu(menuId);
         this.itemNav.toggleMenu();
       }
-    } // LINER NOTES --- iaux.min.js is loading wayy to late for booknav listener, to br. init
-
+    }
   }, {
     key: "render",
     value: function render() {
@@ -11238,7 +11241,7 @@ var IaBookReader = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "styles",
     get: function get() {
-      return (0,lit_element__WEBPACK_IMPORTED_MODULE_13__.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      :host {\n        display: block;\n        height: inherit;\n        min-height: inherit;\n        --primaryBGColor: var(--black, #000);\n        --secondaryBGColor: #222;\n        --tertiaryBGColor: #333;\n        --primaryTextColor: var(--white, #fff);\n        --primaryCTAFill: #194880;\n        --primaryCTABorder: #c5d1df;\n        --secondaryCTAFill: #333;\n        --secondaryCTABorder: #999;\n        --primaryErrorCTAFill: #e51c26;\n        --primaryErrorCTABorder: #f8c6c8;\n      }\n\n      :host([fullscreen]),\n      ia-item-navigator[viewportinfullscreen] {\n        position: fixed;\n        inset: 0;\n        height: 100vh;\n        min-height: unset;\n      }\n\n      div[slot=\"theater-main\"],\n      div[slot=\"theater-main\"] > * {\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n      }\n\n      .ia-bookreader {\n        background-color: var(--primaryBGColor);\n        position: relative;\n        min-height: inherit;\n        height: inherit;\n      }\n\n      ia-item-navigator {\n        min-height: var(--br-height, inherit);\n        height: var(--br-height, inherit);\n        display: block;\n        width: 100%;\n        color: var(--primaryTextColor);\n        --menuButtonLabelDisplay: block;\n        --menuWidth: 320px;\n        --menuSliderBg: var(--secondaryBGColor);\n        --activeButtonBg: var(--tertiaryBGColor);\n        --subpanelRightBorderColor: var(--secondaryCTABorder);\n        --animationTiming: 100ms;\n        --iconFillColor: var(--primaryTextColor);\n        --iconStrokeColor: var(--primaryTextColor);\n        --menuSliderHeaderIconHeight: 2rem;\n        --menuSliderHeaderIconWidth: 2rem;\n        --iconWidth: 2.4rem;\n        --iconHeight: 2.4rem;\n        --shareLinkColor: var(--primaryTextColor);\n        --shareIconBorder: var(--primaryTextColor);\n        --shareIconBg: var(--secondaryBGColor);\n        --activityIndicatorLoadingDotColor: var(--primaryTextColor);\n        --activityIndicatorLoadingRingColor: var(--primaryTextColor);\n      }\n    "])));
+      return (0,lit_element__WEBPACK_IMPORTED_MODULE_13__.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      :host {\n        display: block;\n        height: inherit;\n        min-height: inherit;\n        --primaryBGColor: var(--black, #000);\n        --secondaryBGColor: #222;\n        --tertiaryBGColor: #333;\n        --primaryTextColor: var(--white, #fff);\n        --primaryCTAFill: #194880;\n        --primaryCTABorder: #c5d1df;\n        --secondaryCTAFill: #333;\n        --secondaryCTABorder: #999;\n        --primaryErrorCTAFill: #e51c26;\n        --primaryErrorCTABorder: #f8c6c8;\n      }\n\n      :host([fullscreen]),\n      ia-item-navigator[viewportinfullscreen] {\n        position: fixed;\n        inset: 0;\n        height: 100%;\n        min-height: unset;\n      }\n\n      div[slot=\"theater-main\"],\n      div[slot=\"theater-main\"] > * {\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n      }\n\n      .ia-bookreader {\n        background-color: var(--primaryBGColor);\n        position: relative;\n        min-height: inherit;\n        height: inherit;\n      }\n\n      ia-item-navigator {\n        min-height: var(--br-height, inherit);\n        height: var(--br-height, inherit);\n        display: block;\n        width: 100%;\n        color: var(--primaryTextColor);\n        --menuButtonLabelDisplay: block;\n        --menuWidth: 320px;\n        --menuSliderBg: var(--secondaryBGColor);\n        --activeButtonBg: var(--tertiaryBGColor);\n        --subpanelRightBorderColor: var(--secondaryCTABorder);\n        --animationTiming: 100ms;\n        --iconFillColor: var(--primaryTextColor);\n        --iconStrokeColor: var(--primaryTextColor);\n        --menuSliderHeaderIconHeight: 2rem;\n        --menuSliderHeaderIconWidth: 2rem;\n        --iconWidth: 2.4rem;\n        --iconHeight: 2.4rem;\n        --shareLinkColor: var(--primaryTextColor);\n        --shareIconBorder: var(--primaryTextColor);\n        --shareIconBg: var(--secondaryBGColor);\n        --activityIndicatorLoadingDotColor: var(--primaryTextColor);\n        --activityIndicatorLoadingRingColor: var(--primaryTextColor);\n      }\n    "])));
     }
   }]);