@internetarchive/ia-book-actions 0.0.24 → 0.0.25

package/demo/index.html

@@ -108,9 +108,7 @@
     modalConfig.headerColor = '#d9534f';
 
     let lendingBarPostInit = function lendingBarPostInit() {
-      setTimeout(function() {
-        console.log('executed', 'br.init()');
-      }, 100);
+      setTimeout(function() {}, 100);
     }
 
     // set defaultLendingStatus for unavailable (without borrowables) book

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/assets/styles/collapsible-action-group.js

@@ -1,5 +1,9 @@
 import { css } from 'lit';
 
+const whiteColor = css`var(--white, #fff)`;
+const blackColor = css`var(--primaryBGColor, #000)`;
+const dropdownBGColor = css`var(--iaBookActionsDropdownBGColor, #2d2d2d)`;
+
 export default css`
   :host {
     display: inline-flex;
@@ -14,30 +18,54 @@ export default css`
     align-items: center;
   }
   .action-buttons .ia-button {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
+    margin: 0;
     height: 3.5rem;
-    transition: all 0.1s ease 0s;
-    vertical-align: middle;
-    padding: 0 1rem;
-    margin: 0 3px;
+  }
+  .action-buttons .desktop {
+    background-color: ${whiteColor};
+    border-radius: 10px;
+  }
+  .action-buttons .desktop.purchase {
+    margin-left: 5px;
+  }
+  .action-buttons .mobile.purchase.dark {
+    padding-left: 0;
+  }
+  .primary {
+    background-color: ${whiteColor};
   }
   .primary,
   .secondary {
     position: relative;
+    border-radius: 5px;
+    margin: 0 3px;
   }
   .primary .initial {
-    border-radius: 0.4rem 0 0 0.4rem;
+    border-radius: 4px 0 0 4px;
     margin-right: 0;
   }
+  .primary svg {
+    vertical-align: middle;
+  }
+
+  .secondary .ia-button.purchase {
+    padding: 2px 10px 2px 35px;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .secondary .ia-button.exit-admin {
+    background-color: ${blackColor};
+    border: 1px solid ${whiteColor};
+  }
+
   .dropdown-content {
     position: absolute;
     min-width: 14rem;
     margin: 0;
     padding: 0;
-    background: #2d2d2d;
-    border-radius: 0.4rem;
+    background: ${dropdownBGColor};
+    border-radius: 4px;
     border: 1px solid var(--primaryCTABorder);
     top: 3.4rem;
     left: 50%;
@@ -45,15 +73,15 @@ export default css`
     transform: translateX(-50%);
   }
   .dropdown-content li {
-    color: var(--primaryBGColor);
+    color: ${blackColor};
     list-style: none;
     height: 3rem;
   }
   .dropdown-content .ia-button {
     background: none;
+    color: ${whiteColor};
     border: none;
     box-sizing: border-box;
-    display: block;
     width: 100%;
     text-align: left;
     height: 3rem;
@@ -61,11 +89,14 @@ export default css`
     padding: 0.6rem 1.2rem;
     margin: 0;
   }
+  .dropdown-content .ia-button:is(:focus-visible, :hover) {
+    background: unset;
+  }
   .dropdown-content li .ia-button {
     border-radius: 0;
   }
   .dropdown-content li .ia-button:hover {
-    background: var(--primaryTextColor);
+    background: ${whiteColor};
     color: rgb(45, 45, 45);
   }
   .dropdown-content li:first-child .ia-button {
@@ -78,6 +109,15 @@ export default css`
   .dropdown-content .purchase:hover svg g {
     fill: black;
   }
+  .dropdown-content .purchase {
+    padding-left: 35px;
+    margin: 0;
+  }
+  .dropdown-content .purchase small {
+    display: initial;
+    font-size: 1.4rem;
+  }
+
   .ia-button.down-arrow {
     border-radius: 0 0.4rem 0.4rem 0;
     padding: 0 0.6rem;
@@ -93,28 +133,18 @@ export default css`
   }
   .open {
     display: block;
-    z-index: 4;
+    z-index: 2;
   }
   .visible {
     display: inline-block;
   }
   .btn:hover,
   .dropdown:hover .btn {
-    background-color: var(--primaryTextColor);
+    background-color: ${whiteColor};
   }
-
   a {
     text-decoration: none;
   }
-  .primary svg {
-    vertical-align: middle;
-  }
-  .secondary .ia-button.purchase {
-    padding: 2px 10px 2px 35px;
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-  }
   .purchase small {
     display: block;
     font-size: 1rem;
@@ -124,19 +154,10 @@ export default css`
     left: 10px;
     top: 20%;
   }
-  .dropdown-content .purchase {
-    padding-left: 35px;
-    margin: 0;
-  }
-  .dropdown-content .purchase small {
-    display: initial;
-    font-size: 1.4rem;
-  }
   .unavailable {
     opacity: 0.7;
     pointer-events: none;
   }
-
   .disabled {
     opacity: 0.8;
     pointer-events: none;

package/src/assets/styles/ia-button.js

@@ -1,65 +1,107 @@
 import { css } from 'lit';
 
+const whiteColor = css`var(--white, #fff)`;
+const disabledButtonFillColor = css`var(--primaryDisableCTAFill, #767676)`;
+const disabledButtonBorderColor = css`var(--secondaryCTABorder, #999)`;
+
+const primaryButtonFillColor = css`var(--primaryCTAFill, #194880)`;
+const primaryButtonFillColorRGB = css`var(--primaryCTAFillRGB, 25, 72, 128)`; // RBG format of --primaryCTAFill
+const primaryButtonBorderColor = css`var(--primaryCTABorder, #c5d1df)`;
+
+const dangerButtonFillColor = css`var(--primaryErrorCTAFill, #d9534f)`;
+const dangerButtonFillColorRGB = css`var(--primaryErrorCTAFillRGB, 229, 28, 38)`; // RBG format of --primaryErrorCTAFill
+const dangerButtonBorderColor = css`var(--primaryErrorCTABorder, #d43f3a)`;
+
+const darkButtonFillColor = css`var(--secondaryCTAFill, #333)`;
+const darkButtonFillColorRGB = css`var(--secondaryCTAFillRGB, 51, 51, 51)`; // RBG format of --secondaryCTAFill
+const darkButtonBorderColor = css`var(--primaryCTABorder, #979797)`;
+
+const warningButtonBGColor = css`#ee8950`;
+const warningButtonBorderColor = css`#ec7939`;
+
 export default css`
   .ia-button {
     min-height: 3rem;
-    border: none;
-    outline: none;
     cursor: pointer;
-    color: #fff;
+    color: ${whiteColor};
     line-height: normal;
     border-radius: 0.4rem;
-    text-align: center;
-    vertical-align: middle;
     font-size: 1.4rem;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    display: inline-block;
-    padding: 0.85rem 1.2rem;
     border: 1px solid transparent;
     white-space: nowrap;
     appearance: auto;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    transition: all 0.1s ease 0s;
+    vertical-align: middle;
+    padding: 0 1rem;
+    outline-color: ${whiteColor};
+    outline-offset: -4px;
+    user-select: none;
+    text-decoration: none;
+    width: fit-content;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none;
   }
-  .ia-button:disabled,
-  .ia-button.disabled {
+  .ia-button:focus-visible {
+    outline-style: double;
+  }
+  .ia-button:disabled {
     cursor: not-allowed;
-    background-color: var(--primaryDisableCTAFill, #767676);
-    border: 1px solid var(--secondaryCTABorder, #999);
-    color: var(--primaryTextColor, #fff);
+    background-color: ${disabledButtonFillColor};
+    border: 1px solid ${disabledButtonBorderColor};
   }
   .ia-button.transparent {
     background-color: transparent;
   }
-
-  .ia-button.slim {
-    padding: 0;
+  .ia-button.warning {
+    background-color: ${warningButtonBGColor}
+    border-color: ${warningButtonBorderColor};
   }
+
   .ia-button.primary {
-    background-color: #194880;
-    border-color: #c5d1df;
+    background-color: ${primaryButtonFillColor};
+    border-color: ${primaryButtonBorderColor};
   }
-  .ia-button.dark {
-    color: #fff;
-    background-color: #333;
-    border-color: #979797;
+  .ia-button.primary:hover {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.primary:focus-visible {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.primary:active {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.7);
   }
+
   .ia-button.danger {
-    color: #fff;
-    background-color: #d9534f;
-    border-color: #d43f3a;
+    background-color: ${dangerButtonFillColor};
+    border-color: ${dangerButtonBorderColor};
   }
-  .ia-button.warning {
-    color: #fff;
-    background-color: #ee8950;
-    border-color: #ec7939;
+  .ia-button.danger:hover {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.danger:focus-visible {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.danger:active {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.7);
+  }
+
+  .ia-button.dark {
+    background-color: ${darkButtonFillColor};
+    border-color: ${darkButtonBorderColor};
+  }
+  .ia-button.dark:hover {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.dark:focus-visible {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.8);
   }
-  .ia-button.cancel {
-    background-color: #e51c26;
-    border-color: #f8c6c8;
+  .ia-button.dark:active {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.7);
   }
 `;

package/src/components/collapsible-action-group.js

@@ -50,7 +50,10 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   updated(changed) {
-    if (changed.has('width') && this.isBelowTabletContainer) {
+    if (
+      (changed.has('width') || changed.has('disabled')) &&
+      this.isBelowTabletContainer
+    ) {
       this.resetActions();
     }
   }
@@ -148,23 +151,25 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   /**
-   * Render action as a link for secondary actions like admin, purchase, printdisability links.
+   * Render action as a link for secondary actions like admin, printdisability links.
    * @param { Object } action
    * @param { Boolean } initialButton
    * @returns { HTMLElement }
    */
   renderActionLink(action, initialButton = false) {
-    return html`<a
-      class="ia-button ${action.className} ${initialButton ? 'initial' : ''}"
-      href="${action.url}"
-      target=${action.target}
-      @click=${() => {
-        this.clickHandler(action.id, action.analyticsEvent);
-      }}
-    >
-      ${action.id === 'purchaseBook' ? purchaseIcon : ''} ${action.text}
-      <small>${action.subText}</small>
-    </a>`;
+    return html`<span class="${this.getDeviceType} ${action.className}">
+      <a
+        class="ia-button ${action.className} ${initialButton ? 'initial' : ''}"
+        href="${action.url}"
+        target=${action.target}
+        @click=${() => {
+          this.clickHandler(action.id, action.analyticsEvent);
+        }}
+      >
+        ${action.id === 'purchaseBook' ? purchaseIcon : ''} ${action.text}
+        <small>${action.subText}</small>
+      </a>
+    </span>`;
   }
 
   /**
@@ -255,6 +260,14 @@ export class CollapsibleActionGroup extends ActionsHandler {
     return this.width <= tabletContainerWidth;
   }
 
+  /**
+   * get device type as per container width
+   * @returns { String } mobile | desktop
+   */
+  get getDeviceType() {
+    return this.isBelowTabletContainer ? 'mobile' : 'desktop';
+  }
+
   /**
    * toggle dropdown and its icon state
    */

package/src/core/services/actions-config.js

@@ -226,7 +226,7 @@ export default class ActionsConfig {
       text: message,
       url: URLHelper.getBackHref(),
       target: '_self',
-      className: 'ia-button',
+      className: 'exit-admin',
       analyticsEvent: {
         category: this.analyticsCategories.adminAccess,
         action: this.analyticsActions.doneBorrowing,

package/src/core/services/actions-handler/actions-handler.js

@@ -22,8 +22,6 @@ export default class ActionsHandler extends LitElement {
   }
 
   sendEvent(eventCategory, eventAction) {
-    // eslint-disable-next-line no-console
-    console?.log('Book action: ', { eventCategory, eventAction });
     window?.archive_analytics?.send_event_no_sampling(
       eventCategory,
       eventAction,

package/src/core/services/get-lending-actions.js

@@ -440,8 +440,6 @@ export class GetLendingActions {
       lendingActions = this.restrictedAction();
     }
 
-    // debugging console
-    console.log(lendingActions.primaryTitle);
     return lendingActions;
   }
 }

package/src/core/services/loan-token-poller.js

@@ -1,6 +1,5 @@
 import ActionsHandlerService from './actions-handler/actions-handler-service.js';
 import * as Cookies from './doc-cookies.js';
-import { analyticsCategories } from '../config/analytics-event-and-category.js';
 
 /**
  * This class is used to create loan token for borrowed books
@@ -14,7 +13,6 @@ export class LoanTokenPoller {
     this.successCallback = successCallback; // callback function to be called after loan token is created
     this.errorCallback = errorCallback; // callback function to be called after loan token is created
     this.pollerDelay = pollerDelay; // value in ms (1000 ms = 1 sec)
-    this.analyticsCategories = analyticsCategories;
 
     this.loanTokenInterval = undefined;
     this.enableBookAccess();
@@ -71,14 +69,11 @@ export class LoanTokenPoller {
     }
   }
 
-  sendEvent(eventCategory, eventAction, extraParams = {}) {
-    // eslint-disable-next-line no-console
-    console?.log('Book action: ', { eventCategory, eventAction, extraParams });
+  sendEvent(eventCategory, eventAction) {
     window?.archive_analytics?.send_event_no_sampling(
       eventCategory,
       eventAction,
-      `identifier=${this.identifier}`,
-      extraParams
+      `identifier=${this.identifier}`
     );
   }
 
@@ -88,17 +83,11 @@ export class LoanTokenPoller {
       identifier: this.identifier,
       action,
       error: data => {
-        window?.Sentry?.captureMessage(`
-          handleLoanTokenPoller error, identifier:${this.identifier}, borrowType:${this.borrowType}, interval:${this.loanTokenInterval}
-        `);
-        this.sendEvent(this.analyticsCategories.browse, 'LoanTokenError', {
-          identifier: this.identifier,
-          isInitial: isInitial,
-          borrowType: this.borrowType,
-          interval: this.loanTokenInterval,
-        });
+        window?.Sentry?.captureMessage('handleLoanTokenPoller error');
         this.disconnectedInterval(); // stop token fetch api
         this.errorCallback({ detail: { action, data } });
+        // send LendingServiceError to GA
+        this.sendEvent('LendingServiceLoanError', action);
       },
       success: () => {
         if (isInitial) this.successCallback();