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

package/demo/index.html

@@ -288,8 +288,6 @@
         })
       );
     })
-    
-
 </script>
 
   <div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29-alpha16",
+  "version": "0.0.29-alpha18",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -22,6 +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",
     "lit": "^2.2.1"
   },
   "devDependencies": {
@@ -59,8 +60,7 @@
     "arrowParens": "avoid"
   },
   "husky": {
-    "hooks": {
-    }
+    "hooks": {}
   },
   "lint-staged": {
     "*.js": [

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 { ToastConfig } from '@internetarchive/toast-manager';
 import { LocalCache } from '@internetarchive/local-cache';
 
 import './components/collapsible-action-group.js';
@@ -10,7 +11,6 @@ import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
 import './components/timer-countdown.js';
-import './components/toast-message.js';
 
 import { mobileContainerWidth } from './core/config/constants.js';
 import { GetLendingActions } from './core/services/get-lending-actions.js';
@@ -109,6 +109,10 @@ export default class IABookActions extends LitElement {
       this.disconnectResizeObserver();
       this.setupResizeObserver();
     }
+
+    if (changed.has('loanRenewResult')) {
+      this.showToastMessage();
+    }
   }
 
   bindLoanRenewEvents() {
@@ -148,19 +152,30 @@ export default class IABookActions extends LitElement {
     return nothing;
   }
 
+  async showToastMessage() {
+    let toastManager = document.querySelector('toast-template');
+    if (!toastManager) {
+      toastManager = document.createElement('toast-template');
+    }
+    await document.body.appendChild(toastManager);
+
+    toastManager.config = new ToastConfig(this.loanRenewResult);
+  }
+
   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() {
@@ -323,15 +338,6 @@ export default class IABookActions extends LitElement {
       : nothing;
   }
 
-  get toastMessageTemplate() {
-    return html`
-      <toast-message
-        .texts=${this.loanRenewResult.texts}
-        ?dismisOnClick=${Boolean(true)}
-      ></toast-message>
-    `;
-  }
-
   get bookActionBar() {
     return html`
       <collapsible-action-group
@@ -353,7 +359,7 @@ export default class IABookActions extends LitElement {
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
-      ${this.timerCountdownTemplate} ${this.toastMessageTemplate}
+      ${this.timerCountdownTemplate}
     `;
   }
 
@@ -522,8 +528,10 @@ export default class IABookActions extends LitElement {
         flex-wrap: wrap;
       }
 
-      toast-message {
-        --messageHeightFromTop: 17%;
+      toast-template {
+        --toastHeightFromTop: 15%;
+        --toastBGColor: #333333;
+        --toastFontColor: #ffffff;
       }
     `;
   }

package/src/components/toast-message.js

@@ -1,76 +0,0 @@
-import { html, css, LitElement, nothing } from 'lit';
-
-export class ToastMessage extends LitElement {
-  static get properties() {
-    return {
-      texts: { type: String },
-      dismisOnClick: { type: Boolean },
-    };
-  }
-
-  constructor() {
-    super();
-    this.texts = null;
-  }
-
-  render() {
-    return this.texts
-      ? html`
-          <span
-            class="toast-message fade-in"
-            title="Click/tap to close"
-            @click=${() => {
-              this.dismisOnClick ? (this.texts = null) : nothing;
-            }}
-            >${this.texts}</span
-          >
-        `
-      : nothing;
-  }
-
-  static get styles() {
-    const heightFromTop = css`var(--messageHeightFromTop, 15%)`;
-
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      .toast-message {
-        z-index: 2;
-        position: absolute;
-        top: ${heightFromTop};
-        font-size: 1.4rem;
-        font-family: 'Helvetica Neue';
-        color: #fff;
-        left: 50%;
-        background: #333;
-        border: 1px solid #fff;
-        border-radius: 5px;
-        box-shadow: 1px 1px 2px;
-        padding: 10px;
-        width: fit-content;
-        transform: translate(-50%, -50%);
-        cursor: pointer;
-        animation: fadeIn 5s;
-        @keyframes fadeIn {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 1;
-          }
-        }
-      }
-
-      .hidden {
-        display: none;
-      }
-      .visible {
-        display: inline-block;
-      }
-    `;
-  }
-}
-
-window.customElements.define('toast-message', ToastMessage);