@internetarchive/ia-book-actions 0.0.29-alpha17 → 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-alpha17",
+  "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();
@@ -152,12 +152,15 @@ export default class IABookActions extends LitElement {
     return nothing;
   }
 
-  showToastMessage() {
-    let toastManager = document.querySelector('toast-template');
+  async showToastMessage() {
+    let toastManager = this.shadowRoot.querySelector('toast-template');
     if (!toastManager) {
       toastManager = document.createElement('toast-template');
     }
-    document.body.appendChild(toastManager);
+    this.shadowRoot.appendChild(toastManager)
+
+    // await this.shadowRoot.appendChild(toastManager)
+    // await document.body.appendChild(toastManager);
 
     toastManager.config = new ToastConfig(this.loanRenewResult);
   }
@@ -165,16 +168,17 @@ export default class IABookActions extends LitElement {
   async browseHasExpired() {
     const currStatus = { ...this.lendingStatus, browsingExpired: true };
     this.lendingStatus = currStatus;
-    this.loanRenewResult.renewNow = false;
 
     // remove respected key:value
     await this.localCache.delete(`${this.identifier}-loanTime`);
     await this.localCache.delete(`${this.identifier}-pageChangedTime`);
 
     // show message after browsed book is expired.
+    this.loanRenewResult.renewNow = false;
     this.loanRenewResult.texts =
       'This book has been auto-returned due to inactivity.';
-    this.update();
+
+    this.showToastMessage();
   }
 
   async browseHasRenew() {
@@ -502,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>`;
   }
@@ -515,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;
@@ -528,9 +533,10 @@ export default class IABookActions extends LitElement {
       }
 
       toast-template {
-        --toastHeightFromTop: 50%;
+        --toastHeightFromTop: 22%;
         --toastBGColor: #333333;
         --toastFontColor: #ffffff;
+        --toastTopMargin: 80px;
       }
     `;
   }