@internetarchive/ia-book-actions 0.0.29-alpha18 → 0.0.29-alpha19

package/demo/index.html

@@ -15,7 +15,7 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
     #demo {
-      height: 50px;
+      height: 100px;
     }
     ia-book-actions {
       --white: #fff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29-alpha18",
+  "version": "0.0.29-alpha19",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -22,7 +22,7 @@
     "@internetarchive/local-cache": "^0.2.0",
     "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "@internetarchive/toast-manager": "0.0.1-alpha1",
+    "@internetarchive/toast-manager": "0.0.1-alpha3",
     "lit": "^2.2.1"
   },
   "devDependencies": {

package/src/ia-book-actions.js

@@ -3,6 +3,7 @@ import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalConfig } from '@internetarchive/modal-manager';
+import '@internetarchive/toast-manager';
 import { ToastConfig } from '@internetarchive/toast-manager';
 import { LocalCache } from '@internetarchive/local-cache';
 
@@ -83,6 +84,7 @@ export default class IABookActions extends LitElement {
     this.consecutiveLoanCounts = 1; // consecutive loan count
     this.browserTimer = undefined;
 
+    this._shadowRoot = this.attachShadow({ mode: "open" });
     this.bindLoanRenewEvents();
   }
 
@@ -109,10 +111,6 @@ export default class IABookActions extends LitElement {
       this.disconnectResizeObserver();
       this.setupResizeObserver();
     }
-
-    if (changed.has('loanRenewResult')) {
-      this.showToastMessage();
-    }
   }
 
   bindLoanRenewEvents() {
@@ -144,6 +142,8 @@ export default class IABookActions extends LitElement {
 
     console.log(this.loanRenewResult);
 
+    this.showToastMessage();
+
     if (this.loanRenewResult.renewNow) {
       this.tokenPoller.disconnectedInterval();
       await this.browseHasRenew();
@@ -153,11 +153,14 @@ export default class IABookActions extends LitElement {
   }
 
   async showToastMessage() {
-    let toastManager = document.querySelector('toast-template');
+    let toastManager = this.shadowRoot.querySelector('toast-template');
     if (!toastManager) {
       toastManager = document.createElement('toast-template');
     }
-    await document.body.appendChild(toastManager);
+    this.shadowRoot.appendChild(toastManager)
+
+    // await this.shadowRoot.appendChild(toastManager)
+    // await document.body.appendChild(toastManager);
 
     toastManager.config = new ToastConfig(this.loanRenewResult);
   }
@@ -503,7 +506,7 @@ export default class IABookActions extends LitElement {
   get textGroupTemplate() {
     return html`<text-group
       textClass=${this.textClass}
-      texts=${this.primaryTitle}
+      .texts=${this.primaryTitle}
     >
     </text-group>`;
   }
@@ -516,12 +519,13 @@ export default class IABookActions extends LitElement {
     return css`
       :host {
         display: block;
-        background: var(--primaryBGColor, #000);
-        color: var(--primaryTextColor, #fff);
       }
+
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;
+        background: var(--primaryBGColor, #000);
+        color: var(--primaryTextColor, #fff);
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -529,9 +533,10 @@ export default class IABookActions extends LitElement {
       }
 
       toast-template {
-        --toastHeightFromTop: 15%;
+        --toastHeightFromTop: 22%;
         --toastBGColor: #333333;
         --toastFontColor: #ffffff;
+        --toastTopMargin: 80px;
       }
     `;
   }