@internetarchive/ia-book-actions 0.0.5-4 → 0.0.5-4-01

package/demo/index.html

@@ -95,11 +95,23 @@
     // set defaultLendingStatus for unavailable (without borrowables) book
     iaBookActions.userid = '';
     iaBookActions.identifier = identifier;
+    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
     iaBookActions.lendingStatus = defaultLendingStatus;
     iaBookActions.bwbPurchaseUrl = '';
+    iaBookActions.barType = '';
 
     let lendingStatus1 = iaBookActions.lendingStatus;
 
+    document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          iaBookActions.barType = 'title';
+        } else {
+          iaBookActions.barType = 'action';
+        }
+      });
+    });
+
     document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.checked) {
@@ -194,7 +206,18 @@
 
   <div>
     <fieldset>
-      <legend>Dev try for lending banner</legend>
+      <legend>Dev testing for book title bar</legend>
+        <table class="initial">
+          <tr>
+            <td class="titleBar">
+              <label><input type="checkbox" name="title" value="title" />Title Bar</label>
+            </td>
+          </tr>
+        </table>
+    </fieldset>
+
+    <fieldset>
+      <legend>Dev testing for book action bar</legend>
         <table class="initial">
           <tr>
             <td class="userState">

package/package.json

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

package/src/assets/data/archive-logo.js

@@ -0,0 +1,32 @@
+import { html } from 'lit-element';
+
+export const archiveLogo = html`
+  <svg
+    class="ia-logo"
+    width="26"
+    height="26"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

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

@@ -3,6 +3,8 @@ import { css } from 'lit-element';
 export default css`
   :host {
     display: inline-flex;
+    height: 3.5rem;
+    padding: 1rem 0;
   }
   .action-buttons {
     display: inline-flex;

package/src/components/book-title-bar.js

@@ -0,0 +1,90 @@
+import { html, css } from 'lit-element';
+
+import {
+  analyticsCategories,
+  analyticsActions,
+} from '../core/config/analytics-event-and-category.js';
+import ActionsHandler from '../core/services/actions-handler/actions-handler.js';
+
+import { archiveLogo } from '../assets/data/archive-logo.js';
+
+export class BookTitleBar extends ActionsHandler {
+  static get properties() {
+    return {
+      identifier: { type: String },
+      bookTitle: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.identifier = '';
+    this.bookTitle = '';
+    this.analyticsCategories = analyticsCategories;
+    this.analyticsActions = analyticsActions;
+  }
+
+  /**
+   * Click handler to emit custom event on action click
+   */
+  clickHandler() {
+    const { category, action } = {
+      category: this.analyticsCategories.bookReaderHeader,
+      action: this.analyticsActions.titleBar,
+    };
+
+    this.dispatchEvent(
+      new CustomEvent('bookTitleBar', {
+        detail: {
+          event: { category, action },
+        },
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <a
+        class="embed-link"
+        @click=${() => {
+          this.clickHandler();
+        }}
+        href="/details/${this.identifier}"
+      >
+        <span>${archiveLogo}</span>
+        <span class="title">${this.bookTitle}</span>
+      </a>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        padding: 0 10px;
+      }
+      .embed-link {
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        color: var(--primaryTextColor, #fff);
+        font-size: 1.4rem;
+        height: 3.4rem;
+      }
+      .embed-link .title {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-align: left;
+      }
+      .embed-link svg {
+        margin-right: 0.5rem;
+      }
+      .embed-link:hover {
+        text-decoration: underline;
+      }
+    `;
+  }
+}
+
+window.customElements.define('book-title-bar', BookTitleBar);

package/src/core/config/analytics-event-and-category.js

@@ -21,4 +21,5 @@ export const analyticsActions = {
   purchase: 'BWBPurchase',
   unavailable: 'Book-Unavailable',
   printDisability: 'Print-Disability',
+  titleBar: 'Book-Title-Bar',
 };

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

@@ -82,6 +82,11 @@ export default class ActionsHandler extends LitElement {
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
+
+    this.addEventListener('bookTitleBar', ({ detail }) => {
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
   }
 
   handleBrowseIt() {

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

@@ -2,7 +2,6 @@
 /* eslint no-console: "off" */
 /* eslint no-nested-ternary: "off" */
 /* eslint-disable */
-import { nothing } from 'lit-html';
 import { URLHelper } from '../config/url-helper.js';
 import {
   analyticsCategories,

package/src/ia-book-actions.js

@@ -4,6 +4,7 @@ import { html, css, LitElement } from 'lit-element';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 
 import './components/collapsible-action-group.js';
+import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
 
@@ -15,9 +16,11 @@ export default class IABookActions extends LitElement {
     return {
       userid: { type: String },
       identifier: { type: String },
+      bookTitle: { type: String },
       lendingStatus: { type: Object },
       width: { type: Number },
       bwbPurchaseUrl: { type: String },
+      barType: { type: String },
       sharedObserver: { attribute: false },
     };
   }
@@ -26,15 +29,17 @@ export default class IABookActions extends LitElement {
     super();
     this.userid = '';
     this.identifier = '';
+    this.bookTitle = '';
     this.lendingStatus = {};
+    this.width = 0;
+    this.bwbPurchaseUrl = '';
+    this.barType = 'action';
+    this.sharedObserver = undefined;
     this.primaryActions = [];
     this.primaryTitle = '';
     this.primaryColor = 'primary';
     this.secondaryActions = [];
-    this.width = 0;
-    this.bwbPurchaseUrl = '';
     this.lendingOptions = {};
-    this.sharedObserver = undefined;
   }
 
   disconnectedCallback() {
@@ -146,21 +151,34 @@ export default class IABookActions extends LitElement {
   render() {
     return html`
       <section class="lending-wrapper">
-        <collapsible-action-group
-          .userid=${this.userid}
-          .identifier=${this.identifier}
-          .primaryColor=${this.primaryColor}
-          .primaryActions=${this.primaryActions}
-          .secondaryActions=${this.secondaryActions}
-          .width=${this.width}
-          .hasAdminAccess=${this.hasAdminAccess}
-        >
-        </collapsible-action-group>
-        ${this.textGroupTemplate} ${this.infoIconTemplate}
+        ${this.barType === 'title' ? this.bookTitleBar : this.bookActionBar}
       </section>
     `;
   }
 
+  get bookTitleBar() {
+    return html`<book-title-bar
+      .identifier=${this.identifier}
+      .bookTitle=${this.bookTitle}
+    ></book-title-bar>`;
+  }
+
+  get bookActionBar() {
+    return html`
+      <collapsible-action-group
+        .userid=${this.userid}
+        .identifier=${this.identifier}
+        .primaryColor=${this.primaryColor}
+        .primaryActions=${this.primaryActions}
+        .secondaryActions=${this.secondaryActions}
+        .width=${this.width}
+        .hasAdminAccess=${this.hasAdminAccess}
+      >
+      </collapsible-action-group>
+      ${this.textGroupTemplate} ${this.infoIconTemplate}
+    `;
+  }
+
   get iconClass() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }
@@ -176,7 +194,7 @@ export default class IABookActions extends LitElement {
   get textGroupTemplate() {
     return html`<text-group
       textClass=${this.textClass}
-      texts="${this.primaryTitle}"
+      texts=${this.primaryTitle}
     >
     </text-group>`;
   }
@@ -195,7 +213,6 @@ export default class IABookActions extends LitElement {
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;
-        padding: 10px 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;

package/test/components/book-title-bar.test.js

@@ -0,0 +1,22 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../src/components/book-title-bar.js';
+
+const container = ({ identifier, bookTitle } = {}) =>
+  html`<book-title-bar
+    .identifier=${identifier}
+    .bookTitle=${bookTitle}
+  ></book-title-bar>`;
+
+describe('<book-title-bar>', () => {
+  it('check inner texts of title bar', async () => {
+    const el = await fixture(
+      container({
+        identifier: 'goody',
+        bookTitle: 'this is test booktitle',
+      })
+    );
+    const link = el.shadowRoot.querySelector('a');
+    expect(link.innerText).to.equal('this is test booktitle');
+    expect(link.getAttribute('href')).to.equal('/details/goody');
+  });
+});

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

@@ -36,7 +36,7 @@ describe('Get Lending Actions', () => {
     );
     const actions = lendingOptions.getCurrentLendingActions();
 
-    expect(actions.primaryActions.length).to.equal(1);
+    expect(actions.primaryActions.length).to.equal(2);
     expect(actions.primaryTitle).to.equal(
       'This book can be borrowed for 14 days.'
     );

package/test/ia-book-actions.test.js

@@ -127,7 +127,7 @@ describe('Borrow status actions', () => {
     expect(el.primaryTitle).to.equal(
       'Renewable every hour, pending availability.'
     );
-    expect(el.primaryActions.length).to.equal(1);
+    expect(el.primaryActions.length).to.equal(2);
     expect(el.primaryActions[0].text).to.equal('Log In and Borrow');
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
   });