@internetarchive/ia-book-actions 0.0.29 → 0.0.30-alpha1

package/demo/index.html

@@ -134,6 +134,25 @@
       });
     });
 
+    document.querySelectorAll('.searchParam input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        var searchParams = new URLSearchParams(window.location.search);
+        var separate = '';
+        if (e.target.checked) {
+          separate = '?';
+          searchParams.set('q', 'test');
+        } else {
+          separate = '';
+          searchParams.delete('q');
+        }
+
+        if (history.pushState) {
+          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
+          window.history.pushState({path:newurl},'',newurl);
+        }
+      });
+    });
+
     document.querySelectorAll('.errorEnable input[type=checkbox]').forEach((item) => {
       if (window.location.href.indexOf('?error=true') !== -1) {
         item.checked = true;
@@ -263,6 +282,9 @@
             <td class="titleBar">
               <label><input type="checkbox" name="title" value="title" />Title Bar</label>
             </td>
+            <td class="searchParam">
+              <label><input type="checkbox" name="search" value="Search Param" />Search Param</label>
+            </td>
           </tr>
         </table>
     </fieldset>

package/package.json

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

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

@@ -102,9 +102,9 @@ export class CollapsibleActionGroup extends ActionsHandler {
     return html`
       <div
         class="${classMap({
-          actiongroup: true,
-          disabled: this.disabled,
-        })}"
+      actiongroup: true,
+      disabled: this.disabled,
+    })}"
       >
         ${this.getLoaderIcon}
         <section class="action-buttons primary">
@@ -147,7 +147,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
   get renderSecondaryActions() {
     if (!this.secondaryActions.length) return nothing;
 
-    return this.secondaryActions.map(action => this.renderActionLink(action));
+    return this.secondaryActions.map(action => this.renderActionButton(action));
   }
 
   /**
@@ -163,8 +163,8 @@ export class CollapsibleActionGroup extends ActionsHandler {
         href="${action.url}"
         target=${action.target}
         @click=${() => {
-          this.clickHandler(action.id, action.analyticsEvent);
-        }}
+        this.clickHandler(action.id, action.analyticsEvent);
+      }}
       >
         ${action.id === 'purchaseBook' ? purchaseIcon : ''} ${action.text}
         <small>${action.subText}</small>
@@ -244,9 +244,9 @@ export class CollapsibleActionGroup extends ActionsHandler {
   get getLoaderIcon() {
     return html`<img
       class="${classMap({
-        actionloader: true,
-        disabled: this.disabled,
-      })}"
+      actionloader: true,
+      disabled: this.disabled,
+    })}"
       alt=""
       src="${this.loaderIcon}"
     />`;

package/src/components/text-group.js

@@ -5,6 +5,7 @@ export class TextGroup extends LitElement {
     return {
       texts: { type: String },
       textClass: { type: String },
+      hasAdminBorrowedAccess: { type: Boolean },
     };
   }
 
@@ -12,11 +13,16 @@ export class TextGroup extends LitElement {
     super();
     this.texts = '';
     this.textClass = '';
+    this.hasAdminBorrowedAccess = false;
   }
 
   render() {
     return html`
-      <span class="variable-texts ${this.textClass}">${this.texts}</span>
+      <span class="variable-texts ${this.textClass}">
+        ${this.hasAdminBorrowedAccess
+        ? html`<slot name="sticky-access-checkbox">${this.texts}</slot>`
+        : this.texts}
+      </span>
     `;
   }
 
@@ -29,12 +35,13 @@ export class TextGroup extends LitElement {
         margin-left: 10px;
         vertical-align: middle;
         font-size: 1.7rem;
+        align-items: center;
       }
       .hidden {
         display: none;
       }
       .visible {
-        display: inline-block;
+        display: flex;
       }
     `;
   }

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

@@ -206,8 +206,6 @@ export default class ActionsConfig {
       id: 'adminAccess',
       text: 'Admin Access',
       title: 'You have administrative privileges to read this book',
-      url: '?admin=1',
-      target: '_self',
       className: 'danger',
       analyticsEvent: {
         category: this.analyticsCategories.adminAccess,

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

@@ -82,6 +82,11 @@ export default class ActionsHandler extends LitElement {
     this.addEventListener('adminAccess', ({ detail }) => {
       const { category, action } = detail.event;
       this.sendEvent(category, action);
+
+      // keep existing params and add new one
+      const url = new URL(window.location.href);
+      url.searchParams.append('admin', 1);
+      window.location.search = url.search;
     });
 
     this.addEventListener('exitAdminAccess', ({ detail }) => {

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

@@ -51,6 +51,7 @@ export const bookTitles = {
   on_waitlist: 'You are on the waitlist for this book.',
   session_expired: 'Your loan has expired.',
   unavailable: 'This book is not available at this time.',
+  admin_borrowed: 'Default to admin access mode',
 };
 
 export class GetLendingActions {
@@ -83,7 +84,7 @@ export class GetLendingActions {
 
   adminOrPrintDisabledReadingAction() {
     return {
-      primaryTitle: '',
+      primaryTitle: bookTitles.admin_borrowed,
       primaryActions: [],
       secondaryActions: [this.actionsConfig.adminOrPrintDisabledExitConfig()],
       borrowType: 'adminBorrowed',

package/src/ia-book-actions.js

@@ -12,6 +12,7 @@ import './components/info-icon.js';
 import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { mobileContainerWidth } from './core/config/constants.js';
 import { LoanTokenPoller } from './core/services/loan-token-poller.js';
+import { getItem, setItem } from './core/services/doc-cookies.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -48,7 +49,7 @@ export default class IABookActions extends LitElement {
     this.lendingStatus = {};
     this.width = 0;
     this.bwbPurchaseUrl = '';
-    this.lendingBarPostInit = () => {};
+    this.lendingBarPostInit = () => { };
     this.barType = 'action'; // 'title'|'action'
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
@@ -96,11 +97,8 @@ export default class IABookActions extends LitElement {
   }
 
   startBrowseTimer() {
-    const {
-      browsingExpired,
-      user_has_browsed,
-      secondsLeftOnLoan,
-    } = this.lendingStatus;
+    const { browsingExpired, user_has_browsed, secondsLeftOnLoan } =
+      this.lendingStatus;
     if (!user_has_browsed || browsingExpired) {
       return;
     }
@@ -356,7 +354,7 @@ export default class IABookActions extends LitElement {
         Please ${refreshButton} to try again or send us an email to
         <a
           href="mailto:info@archive.org?subject=Help: cannot access my borrowed book: ${this
-            .identifier}"
+          .identifier}"
           >info@archive.org</a
         >`;
     }
@@ -366,6 +364,12 @@ export default class IABookActions extends LitElement {
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  toggleStickyAdminAccess() {
+    const currentValue = getItem('sticky-admin-access') === 'true';
+    setItem('sticky-admin-access', !currentValue);
+  }
+
   get iconClass() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }
@@ -382,10 +386,36 @@ export default class IABookActions extends LitElement {
     return html`<text-group
       textClass=${this.textClass}
       texts=${this.primaryTitle}
+      ?hasAdminBorrowedAccess=${this.hasAdminBorrowedAccess}
     >
+      ${this.hasAdminBorrowedAccess
+        ? html`<div slot="sticky-access-checkbox">
+            ${this.stickyAdminAccess}
+          </div>`
+        : ''}
     </text-group>`;
   }
 
+  get stickyAdminAccess() {
+    return html`
+      <label class="stick-admin" for="sticky-admin-access">
+        <input
+          type="checkbox"
+          id="sticky-admin-access"
+          aria-label="Checkbox"
+          @click=${this.toggleStickyAdminAccess}
+        />
+        <span>${this.primaryTitle}</span>
+      </label>
+    `;
+  }
+
+  get hasAdminBorrowedAccess() {
+    return this.secondaryActions.some(
+      action => action.id === 'exitAdminAccess'
+    );
+  }
+
   get hasAdminAccess() {
     return !this.lendingStatus.userHasBorrowed && this.lendingStatus.isAdmin;
   }
@@ -405,6 +435,10 @@ export default class IABookActions extends LitElement {
         justify-content: center;
         flex-wrap: wrap;
       }
+      .stick-admin {
+        user-select: none;
+        cursor: pointer;
+      }
     `;
   }
 }

package/demo/with-bookreader.html

@@ -1,146 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <style>
-    html {
-      font-size: 10px;
-      /* This is to match petabox's base font size */
-    }
-    body {
-      margin: 0;
-      text-align: center;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-    #demo {
-      height: 50px;
-    }
-    ia-book-actions {
-      --white: #fff;
-      --black: #000;
-      --primaryBGColor: var(--black);
-      --secondaryBGColor: #222;
-      --tertiaryBGColor: #333;
-      --primaryTextColor:  var(--white);
-      --primaryCTAFill: #194880;
-      --primaryCTABorder: #c5d1df;
-      --secondaryCTAFill: #333;
-      --secondaryCTABorder: #999;
-      --secondaryCTAFillRGB: 51, 51, 51;
-      --primaryErrorCTAFill: #e51c26;
-      --primaryErrorCTABorder: #f8c6c8;
-      --primaryCTAFillRGB: 25, 72, 128;
-      --primaryErrorCTAFillRGB: 229, 28, 38;
-      --primaryDisableCTAFill: #767676;
-    }
-
-    fieldset {
-      width: fit-content;
-      margin-top: 50px;
-    }
-    fieldset legend {
-      text-align: left;
-      font-size: 12px;
-    }
-    td {
-      color: white;
-      font-size: 14px;
-      border-radius: 5%;
-      display: table-cell;
-      text-align: initial;
-      margin: 5px 0;
-      width: max-content;
-      display: block;
-    }
-    label {
-      padding: 10px;
-      display: block;
-      cursor: pointer;
-      margin: 2px;
-      background: #4e545a;
-      border-radius: 10px;
-    }
-    input[type="radio"], input[type="checkbox"] {
-      margin-top: 0;
-      vertical-align: middle;
-    }
-
-    .initial td {
-      float: left;
-      margin: 2px;
-    }
-
-    body.modal-manager-open {
-      overflow: hidden;
-    }
-  
-    modal-manager[mode='closed'] {
-      display: none;
-    }
-  </style>
-</head>
-
-<body>
-  <ia-bookreader class="focus-on-child-only" signedin="" fullscreen="">
-    <div slot="header">
-      <ia-book-actions></ia-book-actions>
-    </div>
-    <div slot="main">
-      <div id="BookReader"></div>
-    </div>
-  </ia-bookreader>
-
-
-  <script type="module">
-    /* eslint-disable */
-    import '@internetarchive/bookreader';
-    import '@internetarchive/bookreader/BookReader/jquery-1.10.1.js';
-    import '@internetarchive/bookreader/BookReader/BookReader.js';
-    import '../src/ia-book-actions.js';
-    import {
-      defaultLendingStatus,
-      canBrowseAndBorrow,
-    } from '../src/assets/data/lending-get-status-service.js';
-    import { ModalConfig } from '@internetarchive/modal-manager';
-
-    const userid = '@neeraj-archive';
-    const identifier = 'naturalhistoryof00unse_4111';
-    let bwbPurchaseUrl = 'https://www.betterworldbooks.com/product/detail/cambridge-ancient-hist-v04-0521044863';
-
-    let iaBookActions = document.querySelector('ia-book-actions');
-
-    // for debugging
-    window.iaBookActions = iaBookActions;
-
-    const modalConfig = new ModalConfig();
-    modalConfig.headerColor = '#d9534f';
-
-    let lendingBarPostInit = function lendingBarPostInit() {
-      setTimeout(function() {
-        console.log('executed', 'br.init()');
-      }, 100);
-    }
-
-    // set defaultLendingStatus for unavailable (without borrowables) book
-    iaBookActions.userid = userid;
-    iaBookActions.identifier = identifier;
-    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
-    iaBookActions.lendingStatus = canBrowseAndBorrow;
-    iaBookActions.bwbPurchaseUrl = '';
-    iaBookActions.modalConfig = modalConfig;
-    iaBookActions.lendingBarPostInit = lendingBarPostInit;
-    iaBookActions.tokenDelay = 2000; // 2 seconds
-    iaBookActions.returnUrl = 'https://openlibrary.org';
-
-    let lendingStatus1 = iaBookActions.lendingStatus;
-
-    const manifest = await fetch('https://ia801302.us.archive.org/BookReader/BookReaderJSIA.php?id=goody&itemPath=/29/items/goody&server=ia801302.us.archive.org&format=jsonp&subPrefix=goody&requestUri=/details/goody/mode/1up%3Fview%3Dtheater%26ui%3Dembed%26wrapper%3Dfalse');
-
-    console.log('manifest ****', manifest).then(res => res.json());
-  </script>
-
-  </div>
-</body>
-</html>